Navigation in react-native error with stackNavigation - react-native

Question

in the application I am creating I have set up bottom-tabs. They are functioning properly.
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator initialRouteName="Feed"
tabBarOptions={{activeTintColor: '#F78400'}}>
<Tab.Screen
name="Authentication" component={Authentication}
options={{
tabBarIcon: ({ focused, horizontal, tintColor }) => {
return (
<Image
source={require("./assets/images/authentication.jpg")}
style={{ width: 20, height: 20 }}
/>
);
}
}}
/>
<Tab.Screen
name="Dashboard"
component={Dashboard}
options={{
tabBarIcon: ({ focused, horizontal, tintColor }) => {
return (
<Image
source={require("./assets/images/dashboard.png")}
style={{ width: 20, height: 20 }}
/>
);
}
}}
/>
<Tab.Screen
name="Tools"
component={Tools}
options={{
tabBarIcon: ({ focused, horizontal, tintColor }) => {
return (
<Image
source={require("./assets/images/tools.png")}
style={{ width: 20, height: 20 }}
/>
);
}
}}
/>
<Tab.Screen
name="Settings"
component={Settings}
options={{
tabBarIcon: ({ focused, horizontal, tintColor }) => {
return (
<Image
source={require("./assets/images/settings.png")}
style={{ width: 20, height: 20 }}
/>
);
}
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
So now, I want to set up navigation to be able to go from one screen to another. I added the code of the stacks to the code of my tabs and when I want to go on antorher screen, I click a button to go on another screen, the name of the screen appear at the top of the page but it looks like it still the first screen. I don't get what's wrong
view config getter callback for component,
could you please explain to me how to do? Thanks a lot.
import React from 'react'
import { Image } from 'react-native'
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs'
import { createStackNavigator} from "#react-navigation/stack"
import { NavigationContainer } from '#react-navigation/native'
import Authentication from '../../Screens/Authentication'
import Login from '../../Screens/Authentication'
import Signup from '../../Screens/Authentication'
import Tools from '../../Screens/Tools'
import Dashboard from '../../Screens/Dashboard'
import Settings from '../../Screens/Settings'
import Scan from '../../Screens/Tools'
import i18n from '../../src/i18n'
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
function ScreenNavigator() {
return(
<Stack.Navigator>
<Stack.Screen name = 'Authentication' component = {Authentication}/>
<Stack.Screen name = 'Login' component = {Login}/>
<Stack.Screen name = 'Signup' component = {Signup}/>
<Stack.Screen name = 'Tools' component = {Tools}/>
<Stack.Screen name = 'Scan' component = {Scan}/>
<Stack.Screen name = 'Dashboard' component = {Dashboard}/>
<Stack.Screen name = 'Settings' component = {Settings}/>
</Stack.Navigator>
)
}
export default function AppNavigation() {
return (
<NavigationContainer>
<Tab.Navigator initialRouteName="Feed"
tabBarOptions={{activeTintColor: '#F78400'}}>
<Tab.Screen
name={i18n.t("app.auth")}
component={ScreenNavigator}
options={{
tabBarIcon: ({ focused, horizontal, tintColor }) => {
return (
<Image
source={require("../../assets/images/authentication.jpg")}
style={{ width: 20, height: 20 }}
/>
);
}
}}
/>
<Tab.Screen
name={i18n.t("app.dash")}
component={Dashboard}
options={{
tabBarIcon: ({ focused, horizontal, tintColor }) => {
return (
<Image
source={require("../../assets/images/dashboard.png")}
style={{ width: 20, height: 20 }}
/>
);
}
}}
/>
<Tab.Screen
name={i18n.t("app.tools")}
component={Tools}
options={{
tabBarIcon: ({ focused, horizontal, tintColor }) => {
return (
<Image
source={require("../../assets/images/tools.png")}
style={{ width: 20, height: 20 }}
/>
);
}
}}
/>
<Tab.Screen
name={i18n.t("app.settings")}
component={Settings}
options={{
tabBarIcon: ({ focused, horizontal, tintColor }) => {
return (
<Image
source={require("../../assets/images/settings.png")}
style={{ width: 20, height: 20 }}
/>
);
}
}}
/>
</Tab.Navigator>
</NavigationContainer>
)
}

Answer 1

You are not passing components when initializing the navigation
The below code
<Stack.Screen name = 'Authentication' component = 'Authentication'/>
You have passed a string for component which is causing the error, this should change to
<Stack.Screen name = 'Authentication' component = {Authentication}/>
You will have to change other screens in the stack as well