I am handling the Android back button in React-Native using BackHandler in home page its working fine, when i navigate to home page from login page. But when i go to page 2 from home page and came back to home page by clicking the device back button, now when i click device back button in home page its taking me to login page, this should not happen.
Navigation used in home page is a drawer navigation.
I am removing the backpress event handler when i am navigating to page2, because it is disabling the back button in page 2 also.
You just have to implement the Backhandler in your home page, and don't perform any action on it.
BackHandler.addEventListener('hardwareBackPress', () => {
return false
});
Just return false. So It won't navigation to Login screen again.
Related
module.exports.deleteSession = function(req,res){
res.clearCookie('user_id');
return res.redirect('back');
}
This is my signOut code this will redirect to the signIn page.
but when I click on back button this will show previous page and when i click refresh button then this will delete the button and again showing the signIn page
So anyone give the solution to refresh the page automatically
Here is the problem:
I'm using react navigator v6 and I have a very nested navigation structure like this:
App Navigator ("createBottomTabNavigator" from "#react-navigation/bottom-tabs")
++ Profile Navigator ("createMaterialTopTabNavigator" from #react-navigation/material-top-tabs)
+++ Profile screen 1
+++ profile screen 2
++ Services Navigator ("createNativeStackNavigator" from #react-navigation/native-stack and presentation: "modal")
+++ Services Screen
+++ Services Detail Screen
My challenge:
I'm trying to navigate from "Services Detail Screen" to "profile screen 2" while the first screen is opened in a modal form:
here is the code I'm using (which works on non modal presentations):
navigation.navigate(routes.PROFILE_NAVIGATOR, {
screen: routes.PROFILE_1,
params: {
screen: routes.PROFILE_2,
},
});
using this will change the route on the screen behind the modal, but somehow fails to close the modal (its not a react native modal its a modal presentation of a navigator!). Here is the condition I'm trying to explain(I moved the screen down so you can see the navigation has already applied to screen behind):
Since I'm using navigation.goBack() to close the modal; I tried applying following tweak. But no success:
navigation.navigate(routes.PROFILE_NAVIGATOR, {
screen: routes.routes.PROFILE_1,
params: {
screen: routes.PROFILE_2,
},
});
navigation.goBack();
What am I missing here? Thanks.
I realize why this occurring but am trying to figure out the best way to go about getting the required behavior:
Let's say I have a tab navigator and inside those tabs I have stack navigators. When I first open the app I am in the Home tab. Now let's say a push notification comes in and I handle that and say go to this screen in the profile stack navigator. The screen is not usually the first screen in the navigator but because I have not navigated to the profile screen via the tab navigator the initial screen is not loaded so it's the first in the stack. If I call navigation.pop it will not be handled by a navigator because their is no screen to go back to in the profile navigator.
I figured I could just call navigation.navigate('Profile') and it does navigate to that screen but it doesn't pop the initial screen so clicking the tab by default will now make the first screen the base screen until the app is restarted.
If I call navigation.goBack() I won't run into the above problem but I won't be able to always ensure that the 'Profile' screen is the place it goes back to.
Ideally I'd like some way to say push this screen into this stack and then push this screen. So when pop is called it will always show that users profile screen.
** EDIT **
After looking through some docs I found that I can do the following:
navData.dispatch(() => {
navData.navigate('Home', {
screen: 'ProfileScreen',
});
navData.navigate('Home', {
screen: 'ProfileScreen',
params: {
screen: 'ViewPostScreen',
params: { shouldPlay: true },
},
});
});
Though I get the following warning: Possible unhandled Promise rejection: TypeError: undefined is not an object 'action.target'
I'm also using this logic in another location of my app with a different screen and works in development but not in production. Looking for suggestions on to best handle the above situation.
I have a question for React Native developers here. I use createMaterialBottomTabNavigator, and I wanted one button in the tab bar to open a screen not in a tab, but in a stack navigator instead. According to the documentation, we can prevent default behaviour with a useEffect hook in the target screen and do our navigation from there. So here is my code in the target screen :
useEffect(() => {
const unsubscribe = navigation.addListener("tabPress", (e) => {
// Prevent default behavior of tab press in bottom navigator
e.preventDefault();
// Open screen in stack navigator, not in tab navigator
navigation.navigate("TargetScreen");
});
return unsubscribe;
}, [navigation]);
It works well, except for one detail: Material Bottom Tab Navigator doesn’t mount its routes before they are first focused, so the first time I press the button it opens the screen in a tab. After that, when I press the same button, it opens the screen in a stack navigator as expected.
Does anyone know a workaround for that issue? Is there a way to force Material tab to mount routes before they are focused? Or a way to call a hook when the screen first mounts?
Thanks!
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
}