I set up my navigation like the Authentication flows of react-navigation (https://reactnavigation.org/docs/en/auth-flow.html)
When it doesn't have a data stored in Asyncstorage It will redirect to the Log in screen but when I try to press the Sign up button in the Log in screen, it flashes the sign up screen quickly then go back again to the Log in screen then after that if I press the sign up button again it will work. I used this.props.navigation.navigate to change screens and I am also using SwitchNavigator.
I added 'console.log('1')' to the componentDidMount() of my Log in screen to test it. It displays 1 and when I pressed the sign up button it prints 1 again.
console image
Related
Pasting the entire code would be very long, so I created a snack for this: https://snack.expo.dev/#kickbk/fd9160
If you click the bottom tabs on "Account" -> "Go To Profile" -> "Go To Auth Navigator", you will then notice the back button shows "< Root", but I expect it to show the last screen that we navigated from (Profile).
How do I get the back button to show the screen title that navigated into it?
I do not want to place the Authentication navigator screens inside the root navigator. They need to stay inside Authentication navigator.
I am using react navigation v6. I use navigation.navigate() to move to another screen and navigation.jumpTo() for my custom tabs. The issue I am facing is, after I navigate to a different screen and go back to the previous screen with a new params passed, the navigation is unable to read the jumpTo() anymore as it becomes undefined.
Example:
The screen navigation below is working fine without any params get passed
Screen A > Screen B > Screen A > Screen Tab 1
This 2nd example is when there is a params get passed back to Screen A and jumpTo() Screen Tab 1 will throw error undefined
Screen A > Screen B > Screen A (username: john) > Screen Tab 1
Based on the React Navigation Navigate documentation, it will push a new screen if it has a different params, in my case is Screen A (username: john). So I guess that is what causing the error to appear.
Is there a way to keep the jumpTo() function or any similar method I can use? I don't want to use redux if possible.
Question: I have this screen and whenever I do anything but use props.navigation.navigate() and do the slide back it causes a reload on the screen. I want a way to go back to the screen and not cause a reload by using a button on another screen on the stack
So I have this screen
And if do props.navigation.navigate("subscreen") I get what I want when I go back to the screen by sliding it doesn't reload the page as seen below:
However when I do props.navigation.goBack() when a button is clicked on the other page it causes a reload when it comes back as seen below:
So how do I go back to a screen without sliding back to it and not cause a reload?
I have several nested navigator with above structure:
StackNavigator
authNav
homeNav
main(default)
create
subCreate1(default)
subCreate2
subCreate3
list
subList1(default)
subList2
Actually I play to navigate it. It's work as I expected.
But when I stay on subCreate3 screen, I want to navigate to subList1 screen, then when back or dismiss from subList1 it should go to main screen not go to subCreate3 again.
any idea with this ?. thank react-native user :D
Navigation has stack of all the pushed screen, So when we will try to dismiss or goBack then it will navigate to top stack screen.
In your case, subCreate3 is top most screen when you are on subList1. So it will move there.
If you need to move to particular screen, then below is the logic:
this.props.navigation.navigate(YOUR_SCREEN_NAME)
For more information, checkout navigation
when you navigate to screens using navigate screens are pushed to stack and when you go back it goes back to the previous screen in the stack. In your case subCreate3 is the previous screen in stack.
If you want to go main screen you have to use navigate function again.
I have a react native app with a WebView. I have implemented navigation in the webview such as going back to previous screen using goBack() function of the webview. But the problem is I want the back icon disabled when the user reaches the home page in the webview.
Initially canGoBack prop is false on webview home page but after few navigations and coming back to home page doesn't set canGoBack to false.Hence back button is still enabled but othing happens when clicked.
Interestingly onNavigationStateChange also doesn't get triggered when going back. It only fires when clicking on links or navigating to other pages in the webview. Anyone has any solution as to how to disable custom back button on home page?
onNavigationStateChange changes canGoBack function only if you are visiting another domain. the state doesn't changes if you are browsing on the same domain