CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-bottom-tab
JusticeMatthew
JusticeMatthew

Reputation: 51

React native tab navigation modal options

I have my react tab navigation set up in the following way:

export default MainStackScreens = () => {
  const MainStack = createBottomTabNavigator();

  const screenOptions = ({ route }) => ({
    tabBarShowLabel: false,
    tabBarIcon: ({ focused }) => {
      let iconName = 'home';

      switch (route.name) {
        case 'Home':
          iconName = 'home';
          break;
        case 'Favorite':
          iconName = 'heart';
          break;
        case 'Filter':
          iconName = 'filter';
          break;
        case 'Profile':
          iconName = 'user';
          break;

        default:
          iconName = 'home';
      }

      if (route.name === 'Post') {
        return <AntDesign name='pluscircle' size={42} color={colors.green} />;
      }
      return (
        <FontAwesome
          name={iconName}
          size={30}
          color={focused ? '#1f2833' : '#cacaca'}
        />
      );
    },
  });

  return (
    <MainStack.Navigator screenOptions={screenOptions}>
      <MainStack.Screen name='Home' component={HomeScreen} />
      <MainStack.Screen name='Favorite' component={FavoriteScreen} />
      <MainStack.Screen name='Post' component={PostScreen} />
      <MainStack.Screen name='Filter' component={FilterScreen} />
      <MainStack.Screen name='Profile' component={ProfileScreen} />
    </MainStack.Navigator>
  );
};

Is there a way I can modify this code to have the "Post" route come up as a modal rather than just a normal screen? I've tried several things I found online including splitting the stacks into separate stack groups and fiddling with the screen options but nothing I've done so far seems to have any effect :(

Thanks!

Upvotes: 1

Views: 323

Answers (1)

JusticeMatthew
JusticeMatthew

Reputation: 51

So with some help I got it figured out, it requires some very weird work around using the the listners prop:

return (
    <MainStack.Navigator screenOptions={screenOptions}>
      <MainStack.Screen name='Home' component={HomeScreen} />
      <MainStack.Screen name='Favorites' component={FavoriteScreen} />
      <MainStack.Screen
        name='Add'
        component={PostTab}
        listeners={({ navigation }) => ({
          tabPress: (event) => {
            event.preventDefault();
            navigation.navigate('AddModal');
          },
        })}
      />
      <MainStack.Screen name='Search' component={FilterScreen} />
      <MainStack.Screen name='Profile' component={ProfileScreen} />
    </MainStack.Navigator>
  );
};

Upvotes: 1

Related Questions