0

Is there a way to show a modal from drawer in React Native? There was a similar question and I changed my code following the answer.

My current code is like this.

MyRootStackNavigator.tsx

const Stack = createStackNavigator<RootStackParamList>();

const MyRootStackNavigator = () => {

  return (
    <Stack.Navigator mode="modal">
      <Stack.Screen
        name="Main"
        component={MyDrawerNavigator}
        options={{ headerShown: false }}
      />
      <Stack.Screen 
        name="MyModal"
        component={MyModal}
      />
    </Stack.Navigator>
  );
};

MyDrawerNavigation.tsx

const Drawer = createDrawerNavigator();

const MyDrawerNavigator = () => {

  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Home"
        component={MyStackNavigator}
      />
      <Drawer.Screen
        name="About this app"
        component={About}
      />
    </Drawer.Navigator>
  );
}

But for this code the section to show a modal doesn't appear on drawer. Only Home and About this app sections appear on drawer. How can I set the section to show a modal on drawer?

Ooto
  • 1,117
  • 16
  • 39
  • You can add one more `` inside your `Drawer Navigator` or the second way is to create a `custom Drawer Content` – Kartikey May 02 '21 at 12:07
  • @KartikeyVaish When I added it, the modal shows but it shows on a blank screen as https://stackoverflow.com/questions/63274615/react-native-display-modal-from-react-navigation-drawer this question said. – Ooto May 02 '21 at 12:09
  • @Ooto do you want to have a button to navigate to About ? – Guruparan Giritharan May 02 '21 at 12:30
  • @GuruparanGiritharan No what I want to do is to place a link like `Open Modal` on drawer but when I add it to drawer, the modal shows on a blank screen. – Ooto May 02 '21 at 12:32
  • Ok in that case you need a button inside the drawer which can be don easily, will post an answer – Guruparan Giritharan May 02 '21 at 12:34

1 Answers1

2

You can use a CustomDrawerContent which has a modal inside and use a button to open the Modal

function CustomDrawerContent(props) {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <DrawerContentScrollView {...props}>
      <Modal
        style={{ flxe: 1, backgroundColor: 'red' }}
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}>
        <Text>Modal Content Here</Text>
        <Button title="Close" onPress={() => setModalVisible(false)} />
      </Modal>
      <DrawerItemList {...props} />
      <DrawerItem
        label="Open Modal"
        onPress={() => {
          setModalVisible(true);
        }}
      />
    </DrawerContentScrollView>
  );
}

And the DrawerNavigator should be setup like this

<Drawer.Navigator
  drawerContent={(props) => <CustomDrawerContent {...props} />}>

You can refer the docs here https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent

If you want to continue with the code that you have put in the question, you can do like below to navigate to the about screen (Instead of having the modal inside the content)

  <DrawerItem
    label="Open Screen"
    onPress={() => {
      props.navigation.navigate('About')
    }}
  />
Guruparan Giritharan
  • 15,660
  • 4
  • 27
  • 50