To achieve an iOS-style dismissible bar on an Expo modal when using React Navigation, you can follow these steps:

  1. Install Dependencies: First, make sure you have installed the required dependencies. You will need React Navigation, React Native Gesture Handler, and React Native Reanimated. If you haven't installed them already, you can do it using Expo CLI:

    bash
    expo install react-navigation react-navigation-stack react-native-gesture-handler react-native-reanimated
  2. Create a Custom Header Component: Create a custom header component that will represent the dismissible bar. This header component will contain a button or an icon to close the modal. You can use the Header component from React Navigation or create a custom one.

    jsx
    // CustomHeader.js import React from 'react'; import { TouchableOpacity, Text } from 'react-native'; const CustomHeader = ({ onPress }) => { return ( <TouchableOpacity onPress={onPress}> <Text>Dismiss</Text> </TouchableOpacity> ); }; export default CustomHeader;
  3. Use ModalScreenOptions: In the screen where you want to show the modal, you can define a custom screen option using the ModalScreenOptions parameter in the navigationOptions. This option allows you to customize the header of the modal.

    jsx
    // YourScreenWithModal.js import React from 'react'; import { View, Text, TouchableOpacity } from 'react-native'; import { createStackNavigator } from 'react-navigation-stack'; import { createAppContainer, ModalScreenOptions } from 'react-navigation'; import CustomHeader from './CustomHeader'; const YourScreenWithModal = ({ navigation }) => { return ( <View> <Text>Your screen content</Text> <TouchableOpacity onPress={() => navigation.navigate('ModalScreen')}> <Text>Show Modal</Text> </TouchableOpacity> </View> ); }; YourScreenWithModal.navigationOptions = { headerShown: false, }; const ModalScreen = () => { return ( <View> <CustomHeader onPress={() => navigation.goBack()} /> <Text>Modal Content</Text> </View> ); }; ModalScreen.navigationOptions = { ...ModalScreenOptions, headerLeft: () => null, }; const StackNavigator = createStackNavigator({ YourScreenWithModal: { screen: YourScreenWithModal, }, ModalScreen: { screen: ModalScreen, }, }); export default createAppContainer(StackNavigator);

    In this example, we've hidden the default header using headerShown: false in YourScreenWithModal, and we've customized the header of the modal screen using ModalScreenOptions.

  4. Handle the Modal Close: Inside the custom header component (CustomHeader.js in our example), you need to implement the logic to close the modal. In the example, we use navigation.goBack() to close the modal when the dismiss button is pressed.

Now, when you navigate to YourScreenWithModal and tap "Show Modal," the modal with the dismissible bar should appear. Tapping the "Dismiss" button will close the modal.

Note: The above example assumes you are using react-navigation-stack. If you are using other navigators from React Navigation (e.g., createBottomTabNavigator, createDrawerNavigator, etc.), the setup might be slightly different. The key is to utilize the ModalScreenOptions to customize the header of the modal screen.

Have questions or queries?
Get in Touch