CODEWITHSUNDEEP
reactjsreact-nativereact-native-navigation
Ooto
Ooto

Reputation: 1247

React Naitve Navigation: How to show a modal from drawer?

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?

Upvotes: 0

Views: 2532

Answers (1)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

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')
    }}
  />

Upvotes: 3

Related Questions