React native tab navigation within stack navigation not working

Question

When i am trying to use a tab navigator within a stack navigator, the tab navigator is not visible. Except when i add a text above the tab navigator.

This is my App.js with the stack navigator.

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer theme={DarkTheme}>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{headerShown: false}} />

        <Stack.Screen
          name="Settings"
          component={SettingsScreen}
          options={{headerShown: false}} />

        <Stack.Screen
          name="AddItem"
          component={AddItemScreen}
          options={{headerShown:false}} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

This is my HomeScreen with the tab navigator

export default HomeScreen = ({navigation}) => {
    return (
        <View style={{alignSelf: 'baseline'}}>
          <TabNavigation />
        </View>
    )
}

And finally, this is my TabNavigator.

const Tabs = createMaterialTopTabNavigator();

export default function TabNavigation(){
    return(
        <NavigationContainer independent={true} theme={DarkTheme}>
            <Tabs.Navigator>
                <Tabs.Screen name="Todo" component={TodoView} />
                <Tabs.Screen name="Completed" component={CompletedView} />
            </Tabs.Navigator>
        </NavigationContainer>
    );
}

Currently i get a blank black screen. When i add a text block over the tab navigator, like the follwing:

export default HomeScreen = ({navigation}) => {
    return (
        <View style={{alignSelf: 'baseline'}}>
          <Text>Test</Text>
          <TabNavigation />
        </View>
    )
}

I get the following:

Still not perfect (the tabs are not showing), but at least it shows something. Any help appreciated!

You don't actually need to wrap your `Tabs.Navigator ` inside `NavigationContainer`. Can you try removing the NavigationContainer and check? — Akki, Mar 30 '20 at 13:32
Can you share the code over CodeSandbox? I'd like to take a look. — Akki, Mar 30 '20 at 13:46
Don't know if this is correct, created a react project and added most things needed. But dosent seem to run. Most likely something i did wrong. But here it is anyways: https://codesandbox.io/s/eager-bas-m487l — Theo Sandell, Mar 30 '20 at 14:00

score 1 · Accepted Answer · answered Apr 02 '20 at 13:54

I solved it! In the HomeScreen.js component, i changed this:

export default HomeScreen = () => {
    return (
        <View>
          <TabNavigation />
          <FabButtons />
        </View>
    )
}

to this:

export default HomeScreen = () => {
    return (
        <>
          <TabNavigation />
          <FabButtons />
        </>
    )
}

Removing the View contriner made all of the components visible!

React native tab navigation within stack navigation not working

1 Answers1