Change the screen in a button in TabBar

Question

I have two main screens:

FIRST (with Bottom Bar contains 3 tabs)
SECOND (standard new screen)

How to make clicking the button in BottomTabBar opens a new screen?

By default, the buttons in Bottom Bar open a new tab. I would like one button to open a whole new screen

Just like it is on the screen

Screen code with Tab (3 elements):

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator tabBarOptions={{
        showLabel: true,
        style: {
          backgroundColor: 'transparent',
          position: 'absolute',
          borderTopWidth: 0,
          elevation: 0,
        }
      }}>
        <Tab.Screen name="Home" component={Home}/>
        <Tab.Screen name="Second" component={Second}/>
        <Tab.Screen name="Other" component={Other} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

score 1 · Answer 1 · answered Jun 09 '20 at 18:23

You may try this:

<Tab.Screen
        options={({navigation}) => ({
            tabBarButton: props => 
                <TouchableOpacity {...props} onPress={() => navigation.navigate('YourScreen')} />
        })}
        name="Second" component={Second}
/>

You can navigate to new screen if that screen is not included in your bottom tab :)

You can find more in here: https://reactnavigation.org/docs/bottom-tab-navigator#tabbarbutton

Hope that help :)

Change the screen in a button in TabBar

1 Answers1