0

I've wired up a simple bottom tab navigator and I'm unsure how to get components to render within it. I believe I've followed the doc example, so I'm unsure how to proceed.

I have a component AppNavigator which has the following:

import React from 'react';
import { NavigationContainer} from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import CreateSessionScreen from '../screens/CreateSessionScreen';
import CompletedSessionsScreen from '../screens/CompletedSessionsScreen';

const Tab = createBottomTabNavigator();

function AppNavigator() {
  return (
    <NavigationContainer >
      <Tab.Navigator initialRouteName={CompletedSessionsScreen}>
        <Tab.Screen name="Completed Sessions" component={CompletedSessionsScreen} />
        <Tab.Screen name="Create Session" component={CreateSessionScreen} />
      </Tab.Navigator>
  </NavigationContainer>
  );
}

And it is importing the two components I want to show, which at this point are just dummy cards. I can get the cards to render outside of the TabNav no problem.

However, within the tab navigator I see the tabs (at the top instead of bottom for some reason), and when I click them I can see that the tab changes in highlight, but nothing renders to the screen.

Jack Collins
  • 339
  • 1
  • 2
  • 13

1 Answers1

0

It is possible that CompletedSessionsScreen and CreateSessionScreen are rendering to zero width / height. You might want to set up styles={{ flex: 1 }} for their topmost views.

Something like this:

export default () => {
  return (
    <View styles={{ flex: 1 }}> // <-- add it here
      { /* content */ } 
    </View> 
  );
}
ivanmoskalev
  • 2,004
  • 1
  • 16
  • 25