Black Friday Sale Upgrade Your Home →

Add a Modal Screen

Add a Modal Screen that Pops Up from the Bottom with React Navigation

We’ll use React Navigation to add a modal screen to our app, which will pop up from the bottom, and cover the entire screen.

Modals

🤔Stack navigation can be used to display a modal. This should be the root most navigation layer if it needs to pop up over all content. The mode: 'modal' configuration option is used to tell React Native that this is a modal that should pop up from the bottom of the UI.

JSX
const List = createStackNavigator(...)
const Tabs = createBottomTabNavigator(...)


export default createStackNavigator({
  Tabs: { screen: Tabs }, // original stack
  AddReview :{ screen: AddReview } // new modal screen
}, {
	mode: 'modal'
})

The full version might look something like this.

JSX
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation'
import Icon from 'react-native-vector-icons/FontAwesome'
import RestaurantList from 'components/RestaurantList'
import RestaurantInfo from 'components/RestaurantInfo'
import About from 'components/About'
import AddReview from 'components/AddReview'


const List = createStackNavigator({
  Home: { screen: RestaurantList },
  Info: { screen: RestaurantInfo }
})


const Tabs = createBottomTabNavigator({
	List: { screen: List },
  About: { screen: About }
}, {
  navigationOptions: ({ navigation }) => {
    return {
      tabBarIcon: ({ tintColor }) => {
        if (navigation.state.routeName === 'List') {
          return <Icon name='list' color={tintColor} size={22} />
        }
        if (navigation.state.routeName === 'About') {
          return <Icon name='info-circle' color={tintColor} size={22} />
        }
      },
      tabBarOptions: {
        activeBackgroundColor: '#E6F0FA'
      }
    }
  },
})


export default createStackNavigator({
  Tabs: { screen: Tabs },
  AddReview: { screen: AddReview }
}, {
	mode: 'modal',
	headerMode: 'none'
})

This new modal can be opened by navigating like any other page.

JSX
this.props.navigation.navigate('AddReview')

The dragging down gesture in iOS will dismiss the modal. Can be disabled with navigation options.

JSX
export default createStackNavigator({
  // screens
}, {
	mode: 'modal',
	headerMode: 'none',
  navigationOptions: {
    gesturesEnabled: false
  }
})

To close the modal we can call the goBack() function to return to the previous screen.

JSX
this.props.navigation.goBack()

🐦   Previous   💼   Next