Having a bit of trouble getting to navigate between screens in the nested navigation (Tabs and screens). Here is my code:
This is the Tab Stack navigator
const AppStack = () => { return (<Tab.Navigator initialRouteName="Scan" screenOptions={{ headerShown: false, tabBarActiveTintColor: 'red', tabBarInactiveTintColor: 'black', }}><Tab.Screen name="Market" component={MarketplaceScreen} options={{ tabBarLabel: 'Marketplace', tabBarIcon: ({ focused, color, size }) => (<Icon name="shopping" size={24} color={focused ? color : 'black'} /> ), }} /><Tab.Screen name="Discover" component={DiscoverScreen} options={{ tabBarLabel: 'Discover', tabBarIcon: ({ focused, color, size }) => (<Icon name="map-search" size={24} color={focused ? color : 'black'} /> ), }} /><Tab.Screen name="Wallet" component={WalletScreen} options={{ tabBarLabel: 'Wallet', tabBarIcon: ({ focused, color, size }) => (<Icon name="wallet" size={24} color={focused ? color : 'black'} /> ), }} /><Tab.Screen name="Account" component={AccountScreen} options={{ tabBarLabel: 'Account', tabBarIcon: ({ focused, color, size }) => (<Icon name="account" size={24} color={focused ? color : 'black'} /> ), }} /></Tab.Navigator> );
This is the Screen Stack:
function App() { return (<NavigationContainer><Stack.Navigator><Stack.Screen name="Profile" component={ProfileScreen}/></Stack.Navigator></NavigationContainer> ); }
This is how I set up the Account Screen:
function AccountScreen(navigation:any) { return (<View style={styles.container}><TouchableOpacity onPress={() =>navigation.navigate('Profile') }><Text>PRESS HERE </Text></TouchableOpacity></View>
The error I keep getting is "navigation.navigate is not a function"
Any help is welcome, I'm just out of ideas at the moment, Thank you