Make react-navigation drawer pop from bottom instead of left/right

Question

I would like to make a drawer navigation, but instead of it coming from the left or right I want to be able to let it slide in form the bottom.

https://reactnavigation.org/docs/drawer-navigator#!

I found this documentation about creating custom drawer components and did try the following:

function CustomDrawerContent({ progress, ...rest }) {
  const translateY = Animated.interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [-100, 0],
  });

  return (
    <DrawerContentScrollView {...props} style={{ transform: [{ translateY }] }}>
      <Animated.View =>
        {/* ... drawer contents */}
      </Animated.View>
    </DrawerContentScrollView>
  );
}

But unfortunately it didn't work. Any suggestions?

score 0 · Answer 1 · answered Sep 16 '21 at 13:17

although this dates back quite a bit I come up with a workaround, that at least is aiming to behave like a Bottom Drawer.

My first attempt was also modifying the Drawer componnt to slide up from a different direction. I was struggeling like you. Desperatly browsing through the docs I fortunately stumpled upon the transparent modal presentatation provided by React Navigation itself.

BottomDrawer view:

import React from 'react';
import {Animated, Pressable, StyleSheet, View} from 'react-native';
import {useNavigation} from '@react-navigation/core';
import {useTheme} from '@react-navigation/native';
import {useCardAnimation} from '@react-navigation/stack';

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;

StackNavigator that use the mentioned transparent modal presentation:

<MainStack.Screen name="Root" component={RootNavigator} />
<MainStack.Screen
        name="BottomDrawer"
        component={BottomDrawer}
        options={{presentation: 'transparentModal', cardOverlayEnabled: true}}
      />

Make react-navigation drawer pop from bottom instead of left/right

1 Answers1