I want to make splash screen using react native android similar to this image. how to make it?
Try to use this react-native-splash-screen library.
Follow the instruction for installation mentioned there. You can hide or show your splash screen using these methods.
Usage:
import SplashScreen from 'react-native-splash-screen'
export default class WelcomePage extends Component {
componentDidMount() {
// do stuff while the splash screen is shown
// After having done stuff (such as async tasks) hide the splash screen
SplashScreen.hide();
}
}
Yeah, definitely you can use the react-native-splash-screen library.
Or you can also add them manually.
For detail, you can check out this link
https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-android-30a3cec835ae
You can create separate screen for splash screen and there you can check if user is logged in or not and navigate to specific screen based on the result
also you can reset the navigation stack like this
const loginAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Login' })],
});
const homeAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Home' })],
});
the dispatch using
if (this.state.loggedIn)
this.props.navigation.dispatch(homeAction);
else
this.props.navigation.dispatch(loginAction);
Related
I am junior in app development.
I just tried to logout in react native small project.
Then after I click the logout button, when I click the back button (Android device button), it goes to former screen again. Of course, the API doesn't work. In this case, how can I prevent to go back to the former screen?
logout = async () => {
await AsyncStorage.removeItem('userToken');
this.props.navigation.navigate('WelcomePage')
}
You can call reset instead of navigate.
The reset method lets us replace the navigator state with a new state:
navigation.reset({
index: 0,
routes: [{ name: 'Profile' }],
});
React Navigation provides createSwitchNavigator with Authentication in mind
Authentication Example
I am new to React native i just build the app with two screen and using navigation like login screen and my profile screen.
I create UserData module and import this file in my profile screen. like this
import * as UserData from '../modules/UserData';
Press the logout button navigation navigate back to the login screen.
const resetAction = StackActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'LoginStack' })
],
});
this.props.navigation.dispatch(resetAction);
then i login using another user id it's going to my profile screen but UserData module just still keep the Previous login user datas. How to avoid this i have no idea. Someone Please help me.
Thank you.
when logout , you must delete all the old state and props of components , StackActions.reset do not auto delete this
You can call a method on press of the logout button and in that method you need to clear the async storage and all the mobx/redux stores. After clearing the data, you navigate the user to login page and reset the navigation.
I am making a react-native mobile app, and I have a navigation drawer with a logout button on it. I know how to navigate from there to the login screen, using props.navigation.navigate('Login'), but the problem is that if the user does this, they can still open the drawer from the Login screen and navigate back to one of the other screens, or press the back button on Android.
I guess I could do a check on the Login screen if the user came from another page and then disable the open drawer button, but that seems kinda hacky. I was wondering if there is a correct way of doing this, perhaps to reset the stack upon arrival on the Login, I'm not sure.
Your implementation is not good. from the details you gave i think all of your pages are just in one stack. i recommend you to separate Authentication and App stacks. for this i highly recommend this: https://reactnavigation.org/docs/en/auth-flow.html
but resetting stack :
reset
The reset action wipes the whole navigation state and replaces it with
the result of several actions.
index - number - required - Index of the active route on routes array in navigation state.
actions - array - required - Array of Navigation Actions that will replace the navigation state.
key - string or null - optional - If set, the navigator with the given key will reset. If null, the root navigator will reset.
import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);
source : https://reactnavigation.org/docs/en/stack-actions.html
you need to reset your navigation stack when you logout
first define the logout action
const logoutAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Login' })],
});
then on logout do
this.props.navigation.dispatch(logoutAction);
I have a react native app and am using react navigation (https://reactnavigation.org).
After the user logs in, I reset the navigation stack with:
const initialNavigation = NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: Main })],
});
props.navigation.dispatch(initialNavigation);
This results in a jump from the login screen to the main screen. Is there any way to animate this so that it looks like a smooth transition? For example, fading out the login screen or sliding the screen.
I understand I could "navigate" instead of "reset" the stack to get animation, but I don't want the login screen to be on the navigation stack.
You might want to subscribe to these two github open issues since it seems like others are running into the same issue:
https://github.com/react-community/react-navigation/issues/1663
https://github.com/react-community/react-navigation/issues/1493
Suppose the following screens:
AScreen --> BScreen --> CScreen --> ASreen
Then use the back action go into home (identical on Android and IoS).
How can I make this behave like android's singleTask mode, when using:
("react-navigation": "^1.0.0-beta.11" )
You can use react navigation to achieve this.
Use navigate for navigation to screens A and B. Then on Screen C you can use Backhandler to catch the back button press. Then reset the router which will pop the existing screens except the root (that is screen A).
The reset code would look like this:
import { NavigationActions } from 'react-navigation'
const resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'Profile'}),
NavigationActions.navigate({ routeName: 'Settings'})
]
})
this.props.navigation.dispatch(resetAction)
Setting index to 0 will reset it to Profile. Setting it to 1 will reset to Settings Page. See the documentation on navigation actions.