I have a react-native app
and I define one splash screen. when user is Authenticated, it navigate to home and when user is not Authenticated, it navigate to login
its work correctly, but:
I want to when the app is in develop mode and when reloaded, it navigate to last route
can you help me to fix this ux problem?
You can access to the state of navigation, source here https://reactnavigation.org/docs/use-navigation-state/
import { useNavigationState } from '#react-navigation/native';
const usePreviousRouteName =() => {
return useNavigationState(state =>
state.routes[state.index - 1]?.name
? state.routes[state.index - 1].name
: 'None'
);
}
Related
I'm using a Drawer Navigator as my base with history and have a Home screen and a Notifications screen.
Now for a deeplink myapp://notifications i want to have a history like Home->Notifications so that on pressing physical back btn the user is taken to Home instead of closing the app.
However it seems this does not work with backBehaviour set as history as now Home is never added when opening deeplink.
Is there any way to update the history so that it always has Home as initial screen?
(I have set Home as Initial screen in my linking config but that does not help)
The reset action allows resetting the navigation state to the given state.
Try to run this dispatch if your app opened using the deep link
(Untested) example:
import { CommonActions } from '#react-navigation/native';
navigation.dispatch((state) => {
// Add the home route to the start of the stack
const routes = [{ name: 'Home' }, ...state.routes];
return CommonActions.reset({
...state,
routes,
index: routes.length - 1,
});
});
Read more about reset action
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 using React native router-flux for navigation.
From my sidebar, there is a link to navigate to add address Screen.
After the API submission of address details, app redirects to the home screen.
For adding another address, again moved to add address Screen, then without adding an address, just press back button.
On Pressing Back button App redirect to Home screen but my app completely stuck, and I cannot perform any actions.
Here is my code for BackHandler. Please Help
componentDidMount(){
BackHandler.addEventListener('hardwareBackPress', () => this.backAndroid())
}
componentWillUnmount(){
BackHandler.removeEventListener('hardwareBackPress', () => this.backAndroid())
}
backAndroid() {
Actions.drawer1();
return true
}
Im using createSwitchNavigator to seperate my auth flow from the rest of the app. While navigating from one context to another, is there anyway to trigger an animation? The default behaviour is to replace the screen in place which is a little bit.. unceremonious.
An example would be navigating to App from a Login screen via this.props.navigation.navigate("Login")
const SwitchNavigator = createSwitchNavigator(
{
Login: AuthStackNavigator,
App: AppStackNavigator,
}
);
If not i'd be happy to listen to how you handle this scenario. Thanks a lot.
I already checked similar existing issues on stack-overflow or gihub, like:
NavigationCard will only re-render when the route changes, Help: renderScene is executed just once and does not refresh updated props, etc. But my case is different.
Page list:
sign in page
home page: user can only see this page after sign in;
Transition logic:
In "sign in page", after sign in, it shall go to "home page"
In "home page", there is a sign out button, after user click, it shall go back to "sign in" page.
My implementation
I created a top level component called App, and the code looks like the below:
// app.js
class App extends Component {
componentWillMount() {
const {doNavigateReplaceAtIndex} = this.props;
let {isSignedIn} = this.props;
doNavigateReplaceAtIndex(isSignedIn? 'home': 'sign-in');
}
render() {
const {globalNavigationState} = this.props;
return (
<NavigationCardStack
navigationState={globalNavigationState}
style={styles.container}
onNavigate={()=>{}}
renderScene={this._renderScene}
/>
);
}
_renderScene({scene}) {
const { route } = scene;
switch(route.key) {
case 'home':
return <Home />
case 'sign-in':
return <SignIn />
}
}
}
export default connect (
state =>({
isSignedIn: !! state.auth.token,
token: state.auth.token,
globalNavigationState: state.globalNavigation
}),
dispatch => ({
doNavigateReplaceAtIndex: (key) => dispatch(navigateReplaceAtIndex(0, key))
})
)(App);
// sign in page
// after signin, it will doNavigateReplaceAtIndex(0, 'home');
// home page
// after clicking "sign out", it will doNavigateReplaceAtIndex(0, 'sign-in');
// doNavigateReplaceAtIndex basically is just call NavigationStateUtils.replaceAtIndex
Symptoms
At beginning, it shows sign in page, after signing in, it goes to home page, it is good. In home page, when click the sign out button, it didn't move anywhere, but when refresh, it shows sign in page.
What I got so far
It is not because of this issue: NavigationCard will only re-render
when the route
changes,
because I debugged into rn source code, the shouldComponentUpdate didn't block;
I am not sure if I didn't right for doNavigateReplaceAtIndex, usually we use push or pop, but my case I cannot use push/pop, because after sign in, we should not allow use to go back sign in page by clicking "BACK" button on Android.
I think the issue may because of NavigationScenesReducer(which is called by NavigationAnimatedView used in NavigationCardStack), it will mark all previous routes as stale, and will not show it them.
Any help will be welcome, thanks.
My environment
react native: 0.29.1
react native cli: 1.0.0
node: 5.6.0
OS: ios 9.3