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

Reputation: 470

React Navigation bottom tab navigator not rendering new tabs in Expo Snack

I started with the minimal example of tab-based navigation found at https://reactnavigation.org/docs/tab-based-navigation, and I was trying to add additional tabs. I duplicated one of the functions associated with the two existing tabs in the example and renamed it appropriately, and then I added a Tab.Screen within the Tab.Navigator in the export default function. The new tab will appear with the name I gave it, however the text within the function does not show when I click on the new tab. It is clearly changing because the other text disappears and the screen is just blank except for the tab bar.

I tried deleting one of the default tabs but no dice. Does anyone know what could be causing this (or more accurately, what I'm doing wrong)? The unedited version can be found at the link above and my code is below. Thank you for your help.

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

function TestScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Test!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
        <Tab.Screen name="Test" components={TestScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Upvotes: 1

Views: 1465

Answers (1)

user16744441
user16744441

Reputation: 1

It is best practice to move the functions rendering the different component screens into their own files. File structure could look like features/screens/component. There is a typo in your code on Tab.Screen for test screen, it should be "component={TestScreen}" remove the s from component.

Upvotes: -1

Related Questions