Hi, I'm new to React Native and I think I might have a structural issue because I can't figure out what I'm doing wrong.
I'm trying to create 4 tabs, but when I click on each tab, it doesn't take me to the next page. Nothing happens when I click on any tab. What am I missing here?
Here are my files:
App.tsx
export default function App() {
const isLoadingComplete = useCachedResources();
const colorScheme = useColorScheme();
let [fontsLoaded, error] = useFonts({
CormorantGaramond_300Light,
CormorantGaramond_300Light_Italic,
CormorantGaramond_400Regular,
CormorantGaramond_400Regular_Italic,
CormorantGaramond_500Medium,
CormorantGaramond_500Medium_Italic,
CormorantGaramond_600SemiBold,
CormorantGaramond_600SemiBold_Italic,
CormorantGaramond_700Bold,
CormorantGaramond_700Bold_Italic
});
if (!isLoadingComplete) {
return null;
} else if (!fontsLoaded){
return <AppLoading />;
} else {
return (
<SafeAreaProvider>
<Navigation colorScheme={colorScheme} />
<StatusBar style="dark" />
</SafeAreaProvider>
);
}
}
index.tsx
export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
return (
<NavigationContainer
linking={LinkingConfiguration}
>
<RootNavigator />
</NavigationContainer>
);
}
const Stack = createStackNavigator<RootStackParamList>();
function RootNavigator() {
return (
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="Root" component={BottomTabNavigator} />
<Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
</Stack.Navigator>
);
}
BottomTabNavigator.tsx
const BottomTab = createBottomTabNavigator<BottomTabParamList>();
export default function BottomTabNavigator() {
const colorScheme = useColorScheme();
return (
<BottomTab.Navigator
initialRouteName="Meditation"
tabBarOptions={{ activeTintColor: "#D3AAE2", activeBackgroundColor: "white", inactiveBackgroundColor: "white" }}>
<BottomTab.Screen
name="Yoga"
component={TabOneNavigator}
options={{
tabBarIcon: ({ color }) => <MaterialCommunityIcons name="yoga" size={24} color={color}/>,
}}
/>
<BottomTab.Screen
name={"Meditation"}
component={TabTwoNavigator}
options={{
tabBarIcon: ({ color }) => <Ionicons name="planet" size={24} color={color} />,
}}
/>
<BottomTab.Screen
name="Food"
component={TabThreeNavigator}
options={{
tabBarIcon: ({ color }) => <MaterialCommunityIcons name="fruit-pineapple" size={24} color={color} />,
}}
/>
<BottomTab.Screen
name="Profile"
component={TabFourNavigator}
options={{
tabBarIcon: ({ color }) => <MaterialIcons name="face" size={24} color={color} />,
}}
/>
</BottomTab.Navigator>
);
}
TabOneScreen.tsx - all screen pages look like this with different numbers of course
export default function TabOneScreen() {
return (
<View style={styles.container}>
<Text style={styles.title}>Tab One</Text>
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
<EditScreenInfo path="/screens/TabOneScreen.tsx" />
</View>
);
}
types.tsx
export type RootStackParamList = {
Root: undefined;
NotFound: undefined;
};
export type BottomTabParamList = {
Yoga: undefined;
Meditation: undefined;
Food: undefined;
Profile: undefined;
};
export type TabOneParamList = {
Yoga: undefined;
};
export type TabTwoParamList = {
Meditation: undefined;
};
export type TabThreeParamList = {
Food: undefined;
};
export type TabFourParamList = {
Profile: undefined;
};
LinkingConfiguration
export default {
prefixes: [Linking.makeUrl('/')],
config: {
screens: {
Root: {
screens: {
Yoga: {
screens: {
TabOneScreen: 'one',
},
},
Meditation: {
screens: {
TabTwoScreen: 'two',
},
},
Food: {
screens: {
TabThreeScreen: 'three',
},
},
Profile: {
screens: {
TabFourScreen: 'four',
},
},
},
},
NotFound: '*',
},
},
};