Comments (9)
Hopefully this helps someone in the future, but I think I've found a solution. Almost zero experience with React Native so bare with me. I was able to Login and get redirected to the Home page. Seems as if since the Home Stack.Screen is in a ternary operator that when it initializes it's null? So it for some reason can't find it when it's time to redirect to the Home screen (after Logging in).
I changed this:
<Stack.Navigator> { user ? ( <Stack.Screen name="Home"> {props => <HomeScreen {...props} extraData={user} />} </Stack.Screen> ) : ( <> <Stack.Screen name="Login" component={LoginScreen} /> <Stack.Screen name="Registration" component={RegistrationScreen} /> </> )} </Stack.Navigator>
to this:
<NavigationContainer> <Stack.Navigator initialRouteName="Login"> <Stack.Screen name="Home"> {props => <HomeScreen {...props} extraData={user} />} </Stack.Screen> <Stack.Screen name="Login" component={LoginScreen} /> <Stack.Screen name="Registration" component={RegistrationScreen} /> </Stack.Navigator> </NavigationContainer>
essentially you're just setting the initial route to the Login screen. Then when Login is successful, it navigates to the Home screen.
from react-native-firebase.
Hopefully this helps someone in the future, but I think I've found a solution. Almost zero experience with React Native so bare with me. I was able to Login and get redirected to the Home page. Seems as if since the Home Stack.Screen is in a ternary operator that when it initializes it's null? So it for some reason can't find it when it's time to redirect to the Home screen (after Logging in).
I changed this:
<Stack.Navigator> { user ? ( <Stack.Screen name="Home"> {props => <HomeScreen {...props} extraData={user} />} </Stack.Screen> ) : ( <> <Stack.Screen name="Login" component={LoginScreen} /> <Stack.Screen name="Registration" component={RegistrationScreen} /> </> )} </Stack.Navigator>
to this:
<NavigationContainer> <Stack.Navigator initialRouteName="Login"> <Stack.Screen name="Home"> {props => <HomeScreen {...props} extraData={user} />} </Stack.Screen> <Stack.Screen name="Login" component={LoginScreen} /> <Stack.Screen name="Registration" component={RegistrationScreen} /> </Stack.Navigator> </NavigationContainer>
essentially you're just setting the initial route to the Login screen. Then when Login is successful, it navigates to the Home screen.
The persistent login functionality won't work with this solution. To make your solution to work..
Change this:
<Stack.Navigator initialRouteName="Login">
To this:
<Stack.Navigator initialRouteName={user ? 'Home' : 'Login'}>
And in the useEffect function chage this:
.then((document) => { const userData = document.data() setLoading(false) setUser(userData) })
To this:
.then((document) => { const userData = document.data() setUser(userData) setLoading(false) })
Initial route is resolved once loading is set to false.
Edit: Here is a better way to fix this: https://reactnavigation.org/docs/auth-flow
In short NAVIGATE should not be used in the first place for moving from login to home.
from react-native-firebase.
Hey @fnandoz21, just stumbled on this too and was able to successfully implement the fix; take a look at my exercise repository here.
Essentially it does work, but you need to be at step 7 to correct the order of setting the user data then resolving the loading flag for persistent login.
from react-native-firebase.
Does anyone have working code that uses the auth-flow code @tpssim linked in the previous comment?
https://github.com/tpssim/react-native-firebase
This should work. I also added logout functionality.
from react-native-firebase.
The action 'NAVIGATE' with payload {"name":"DetailScreen","params":{"places":"name"}} was not handled by any navigator.help
from react-native-firebase.
The action 'NAVIGATE' with payload {"name":"Home","params":{"user":{"email":"xxxx","id":"xxx","fullName":"test"}}} was not handled by any navigator #3
Yes, I too am facing the same issue. As suggested on stackoverflow, i have used below alternative but thats not working either.
`const goToScreen = () => {
const navigateAction = NavigationActions.navigate({
routeName: 'Profile',
params: { previous_screen: 'Home' }, // current screen
action: NavigationActions.navigate({ routeName: 'Profile' }), // screen you want to navigate to
});
navigation.dispatch(navigateAction);
};`
from react-native-firebase.
Does anyone have working code that uses the auth-flow code @tpssim linked in the previous comment?
from react-native-firebase.
@mfukano yes, I kind of landed on code that is very similar to yours. I was asking if anyone had implemented code similar to what @tpssim linked at: https://reactnavigation.org/docs/auth-flow. Thanks for responding to me though.
from react-native-firebase.
Awesome thanks for sharing @tpssim !
from react-native-firebase.
Related Issues (13)
- White screen on initial yarn ios HOT 7
- firebase repo is out of date HOT 5
- FirebaseError: [code=unavailable]: Failed to get document because the client is offline HOT 1
- need to change firebase config HOT 1
- expo build:android failed with error code 500
- firebase is not defined HOT 3
- Firebase crashing after installation HOT 1
- The action 'NAVIGATE' with payload {"name":"Home","params":{"user":{"email":"[email protected]","id":"xxx","fullName":"test"}}} was not handled by any navigator HOT 3
- The action 'NAVIGATE' with payload {"name":"Home","params":{"user":{"email":"[email protected]","id":"xxx","fullName":"test"}}} was not handled by any navigator #3 HOT 1
- com.facebook.react.bridge.ReadableNativeMap cannot be cast to java.lang.string
- Component Exception Can't find variable: user
- Logout HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-firebase.