React Navigation v3 Modal does not work with createBottomTabNavigator

user_7724980 0
Viewed 1036

React Navigation v3 Modal does not work with createBottomTabNavigator and not sure why. However, headerMode: 'none' seems to be working but mode: 'modal' is not showing up as modal.

const Addpicture = createStackNavigator(
  {
    Addpicture: {
      screen: Addpicture
    }
  },
  {
    mode: 'modal', // This does NOT work
    headerMode: 'none' // But this works
  }
);

const Navigator =  createBottomTabNavigator(
  {
    'My Interviews': {
      screen: MyDatesStack
    },
    'Add Interview': {
      screen: AddDateStack
    },
    'Companies': {
      screen: CompaniesStack
    }
  }
);

export default createAppContainer(Navigator);

react-navigation react-native
1 Answers

Indeed it doesn't work no matter what I tried.

I solved this problem by following steps below. Let's say you want to open modal when NewModal tab is pressed.

  1. Set up your app container by including tabs stack & to be opened modal navigation stack:
  const FinalTabsStack = createStackNavigator(
    {
      Home: TabNavigator,
      NewModal: NewModalNavigator
    }, {
      mode: 'modal',
    }
  )

  1. Create app container with that tabs stack per this guide

  2. Inside the TabNavigator in the createBottomTabNavigator return null component for specific tab (NewModal) (to turn off navigation by react-navigator)

  const TabNavigator = createBottomTabNavigator({
    Feed: FeedNavigator,
    Search: SearchNavigator,
    NewModal: () => null,
    Chat: ChatNavigator,
    MyAccount: MyAccountNavigator,
}
    defaultNavigationOptions: ({ navigation }) => ({
      mode: 'modal',
      header: null,
      tabBarIcon: ({ focused }) => {
        const { routeName } = navigation.state;
        if (routeName === 'NewModal') {
          return <NewModalTab isFocused={focused} />;
        }
      },
    }),
  1. Handle click manually inside a custom tab component NewModalTab with TouchableWithoutFeedback & onPress. Inside NewModalTab component:
  <TouchableWithoutFeedback onPress={this.onPress}>
    <Your custom tab component here />
  </TouchableWithoutFeedback>
  1. Once you catch onPress dispatch redux event
  onPress = () => {
    this.props.dispatch({ type: 'NAVIGATION_NAVIGATE', payload: {
      key: 'NewModalNavigator',
      routeName: 'NewSelfieNavigator',
    }})
  }
  1. Handle dispatched event using Navigation Service. I'm using redux-saga for it
  NavigationService.navigate(action.payload);

A bit complicated but works.

user_31927860
Related