I am building an app with React Native and Expo and i am trying to implement authentication in the app but i am getting this error and i can't find a solution.
Basically i have 2 navigation stacks AppStack & AuthStack in my App.js. AppStack will be shown if the user is authenticated and if the user is not authenticated then AuthStack will be shown to the user.
So i am conditionally rendering the stacks with ternary operator as you can see in the App.js code below. The stacks are working fine i mean if user is authenticated then AppStack is shown and if not then AuthStack is shown.
Now the Signin screen is present in AuthStack and when a user logs in successfully he should be navigated to Home screen navigation.navigate("Home") which is present in AppStack. But when a user logs in it throws me this error.
ERROR The action 'NAVIGATE' with payload {"name":"Home"} was not handled by any navigator.
Do you have a screen named 'Home'?
If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.
This is a development-only warning and won't be shown in production
Here is the App.js code:
const AppStack = () => {
return (
<>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} options={{headerStyle: {backgroundColor: "#000"}, headerTintColor: "white"}} />
<Stack.Screen name="Forgot Password" component={ForgotPwd} options={{headerStyle: {backgroundColor: "#2a454e"}, headerTintColor: "white"}} />
<Stack.Screen name="Check Your Inbox" component={ForgotPwdNext} options={{headerStyle: {backgroundColor: "#00dfc0"}, headerTintColor: "#3a5864"}} />
<Stack.Screen name="Change Password" component={ChangePwd} options={{headerStyle: {backgroundColor: "#e5322b"}, headerTintColor: "white"}} />
</Stack.Navigator>
</>
)
}
const AuthStack = () => {
return (
<>
<Stack.Navigator>
<Stack.Screen name="Welcome" component={Welcome} options={{headerStyle: {backgroundColor: "#1b4152"}, headerTintColor: "white"}} />
<Stack.Screen name="Signin" component={Signin} options={{headerStyle: {backgroundColor: "#5549ab"}, headerTintColor: "white"}} />
<Stack.Screen name="Signup" component={Signup} options={{headerStyle: {backgroundColor: "#26dec0"}, headerTintColor: "#35474f"}} />
<Stack.Screen name="Verify Phone Number" component={VerifyPhone} options={{headerStyle: {backgroundColor: "#d268cc"}, headerTintColor: "white"}} />
<Stack.Screen name="Logged Out" component={LoggedOut} options={{headerStyle: {backgroundColor: "#5a6e7f"}, headerTintColor: "white"}} />
</Stack.Navigator>
</>
)
}
return (
<NavigationContainer style={styles.root}>
<StatusBar style="light" />
{isAuthenticated ? <AppStack /> : <AuthStack />}
</NavigationContainer>
)
}
This exact problem is addressed here.
Your AuthStack doesn't know anything about AppStack and vice versa. Hence navigation.navigate("Home") from AuthStack will fail.
When isAuthenticated is changed React Navigation will automatically navigate to correct screen. This is possible when isAuthenticated state is managed globally using React Context (or by using any state management library like Redux, Zustand etc).
Check this official example which more or less resembles your authentication flow.
You cannot navigate from Signin to Home. You can only navigate between screens that share a parent navigator or grandfather if you have nested navigators. Here is a quote from the doc talking about this specific navigator they created:
Said another way, we can only navigate to routes that have been defined on our navigator — we cannot navigate to an arbitrary component
The common way is to have a way to change isAuthenticated to true in Signin instead of navigating, and the below condition in App.js will do the job. For that you can pass a state setter from App to Signin using a context for example.
{isAuthenticated ? <AppStack /> : <AuthStack />}
somehow managed to solve the error by registering AppStack as a screen in AuthStack and also registering AuthStack as screen in AppStack like this:
const AppStack = () => {
return (
<>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} options={{headerStyle: {backgroundColor: "#000"}, headerTintColor: "white"}} />
<Stack.Screen name="Forgot Password" component={ForgotPwd} options={{headerStyle: {backgroundColor: "#2a454e"}, headerTintColor: "white"}} />
<Stack.Screen name="Check Your Inbox" component={ForgotPwdNext} options={{headerStyle: {backgroundColor: "#00dfc0"}, headerTintColor: "#3a5864"}} />
<Stack.Screen name="Change Password" component={ChangePwd} options={{headerStyle: {backgroundColor: "#e5322b"}, headerTintColor: "white"}} />
<Stack.Screen name="AuthStack" component={AuthStack} />
</Stack.Navigator>
</>
)
}
NOTE THE LAST SCREEN IN AppStack ABOVE
And same with the AppStack
const AuthStack = () => {
return (
<>
<Stack.Navigator>
<Stack.Screen name="Welcome" component={Welcome} options={{headerStyle: {backgroundColor: "#1b4152"}, headerTintColor: "white"}} />
<Stack.Screen name="Signin" component={Signin} options={{headerStyle: {backgroundColor: "#5549ab"}, headerTintColor: "white"}} />
<Stack.Screen name="Signup" component={Signup} options={{headerStyle: {backgroundColor: "#26dec0"}, headerTintColor: "#35474f"}} />
<Stack.Screen name="Verify Phone Number" component={VerifyPhone} options={{headerStyle: {backgroundColor: "#d268cc"}, headerTintColor: "white"}} />
<Stack.Screen name="Logged Out" component={LoggedOut} options={{headerStyle: {backgroundColor: "#5a6e7f"}, headerTintColor: "white"}} />
<Stack.Screen name="AppStack" component={AppStack} />
</Stack.Navigator>
</>
)
}
But now the problem is i am getting 2 navigation headers When i switch between screens which are in different stacks i mean if i go from one screen to another which are both in same stack then 2 headers doesn't appear, 2 headers only appear when i go from a screen which is in suppose Stack-A to Stack-B
such as tabbar ,appbar or others
i want to implement make component as said in the title.
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Main" >
<Stack.Screen name="Main" component={MainScreen} options={{ headerShown: false }} />
<Stack.Screen name="Analyze" component={AnalyzeScreen} options={{ headerShown: false }} />
<Stack.Screen name="Write" component={WriteScreen} options={{ headerShown: false }} />
<Stack.Screen name="Result" component={ResultScreen} options={{ headerShown: false }} />
</Stack.Navigator>
</NavigationContainer>
);
};
this is App.js and declared screens.
it dosen't matter. i want just a shared component.
but i don't want tricks each component in each screen.
p.s screens are just a blank screen.
<View style={{flex:1,}}><Text>hello world</Text></View>
Here's what I've tried to remove the header shadow,
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
headerTitle: props => <MainHeader {...props} /> ,
headerBackTitle: '',
headerTintColor: '#0f0f2b',
headerHideShadow: true
}}
/>
function MainHeader(){
return (
<View style={{height: 1, backgroundColor: '#fff', elevation: 0, shadowOpacity: 0, borderBottomWidth: 0}}></View>
);
}
But that didn't work
Set headerShadowVisible to false in the options, like this
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ headerShadowVisible: false }}
/>
Use property headerShadowVisible
See my sample
I'm using React navigation to change screens with the bottom tab navigations, but when I try to use a custom SVG I have many troubles and using an image to show as an icon the color obviously doesn't change, how can I use an SVG file that can recognize the color im passing to change when I'm on the page?
function MyTabs() {
return(
<Tab.Navigator
tabBarOptions={{
showLabel: false,
style:{
backgroundColor:'#313A3F',
borderTopColor: 'transparent'
},
activeTintColor: '#E6B056',
}}
>
<Tab.Screen
name="ProfileScreen"
component={ProfileScreen}
options={{
tabBarIcon: ({color}) => (
<Ionicons name="person" size={32} color={color} />
)
}}
/>
<Tab.Screen
name="MatchScreen"
component={MatchScreen}
options={{
tabBarIcon: ({color}) => (
<Image
style={{ width: 38, height: 38 }}
source={require('../images/Icons/ico-menu-busca-evas.png')}
/>
)
}}
/>
<Tab.Screen
name="CheckIn"
component={CheckIn}
options={{
tabBarIcon: ({color}) => (
<FontAwesome5 name="map-marker" size={32} color={color} />
)
}}
/>
<Tab.Screen name="ChatScreen"
component={ChatScreen}
options={{
tabBarIcon: ({color}) => (
<Ionicons name="chatbubbles" size={32} color={color} />
)
}}
/>
</Tab.Navigator>
)
}
I have fixed this issue using:
import Svg, { G, Path } from 'react-native-svg';
then using the original svg passing props for color and size.
The accepted answer from #Renan works, I just wanted to share the full code sample.
So, like he said, first add this import...
import Svg, { G, Path } from 'react-native-svg';
after that, use it like this in your code...
<Svg
width={size}
height={size}
viewBox='0 0 24 24'
fillRule='evenodd'
clipRule='evenodd'
strokeLinejoin='round'
strokeMiterlimit={2}
>
<G transform='matrix(1,0,0,1,-2.99997,-1.5)'>
<Path
d='M13.003,14C13.553,14 14,13.544 14,13.005L14,4.995C13.997,4.449 13.549,4.002 13.003,4L6.997,4C6.447,4 6,4.456 6,4.995L6,13.005C6.003,13.551 6.451,13.998 6.997,14L13.003,14ZM13.003,23C13.553,23 14,22.562 14,21.997L14,17.003C14,16.449 13.547,16 13.003,16L6.997,16C6.996,16 6.994,16 6.993,16C6.448,16 6,16.448 6,16.993C6,16.996 6,17 6,17.003L6,21.997C6,22.551 6.453,23 6.997,23L13.003,23ZM23.003,23C23.553,23 24,22.555 24,22.004L24,12.996C23.998,12.45 23.549,12.002 23.003,12L16.997,12C16.997,12 16.996,12 16.996,12C16.45,12 16,12.45 16,12.996L16,22.004C16.002,22.55 16.451,22.998 16.997,23L23.003,23ZM16,9.01C16,9.556 16.453,10 16.997,10L23.003,10C23.553,10 24,9.549 24,9.01L24,4.99C23.996,4.446 23.547,4.001 23.003,4L16.997,4C16.453,4.001 16.005,4.446 16,4.99L16,9.01Z'
fill={color}
/>
</G>
</Svg>
I am working on an app and it has three screens in the bottom tab navigator. When I go from one screen to a different screen, I've been able to change the label color, however, I've been unable to change the color of the icon as well. Here's an example of what it looks like so far.
Here is my App.js code where I control this. I would really appreciate any help or direction on this. Thanks in advance for any help!
App.js:
function MainTabNavigator() {
return (
<Tab.Navigator
tabBarOptions={{
activeTintColor: '#e64951',
}}
>
<Tab.Screen options={{
headerShown: false, tabBarIcon: ({ tintColor }) => (
<Entypo name="home" size={30} color={tintColor} />
)
}} name="home" component={Home} />
<Tab.Screen options={{
headerShown: false, tabBarIcon: () => (
<FontAwesome5 name="plus" size={30} color="black" />
)
}} name="Add Friends" component={AddFriends} />
<Tab.Screen options={{
headerShown: false, tabBarIcon: ({ tintColor }) => (
<FontAwesome name="user" size={30} color={tintColor} />
)
}} name="Profile" component={Profile} />
</Tab.Navigator>
)
}
You are passing the wrong argument to tabBarIcon prop. You should pass color instead of tintColor.
tabBarIcon: ({ color }) => (
<Entypo name="home" size={30} color={color} />
)