import {useCardAnimation} from '@react-navigation/stack';
      import {useNavigation} from '@react-navigation/core';
      import {useTheme} from '@react-navigation/native';
      import React from 'react';
      import {Animated, Pressable, StyleSheet, View} from 'react-native';
      
      export interface IBottomDrawer {}
      
      const BottomDrawer: React.FC<IBottomDrawer> = () => {
        const navigation = useNavigation();
        const {colors} = useTheme();
        const {current} = useCardAnimation();
      
        const styles = StyleSheet.create({
          bottomView: {
            flex: 1,
            justifyContent: 'flex-end',
            alignItems: 'center',
          },
          modalView: {
            padding: 16,
            paddingTop: 0,
            width: '100%',
            borderTopStartRadius: 20,
            borderTopEndRadius: 20,
            backgroundColor: colors.card,
            transform: [
              {
                translateY: current.progress.interpolate({
                  inputRange: [0, 1],
                  outputRange: [100, 0],
                }),
              },
            ],
          },
        });
      
        return (
          <View style={styles.bottomView}>
            <Pressable style={StyleSheet.absoluteFill} onPress={navigation.goBack} />
            <Animated.View style={styles.modalView}>
              <!-- Add Drawer Items that use navigation.navigate('to-my-route') -->
            </Animated.View>
          </View>
        );
      };
      
      export default BottomDrawer;
      
      

      Typescript language logo
      your recipe card header background
      Custom Drawer

      This code defines an interface called IBottomDrawer. The implementation returns a React.FC object which represents a bottom drawer.

      The bottomDrawer object contains the following properties:

      navigation: This property contains the code used to navigate to different pages in the drawer.

      colors: This property contains the colors used in the drawer.

      current: This property contains the current card in the drawer.

      styles: This property contains the styles used in the drawer.

      The bottomDrawer object also contains the following methods:

      goBack(): This method uses navigation to navigate to the previous page in the drawer.

      goForward(): This method uses navigation to navigate to the next page in the drawer.

      0 Comments

        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.