Is there a way to navigate to the scene that the user is currently on? Almost the equivalent of refreshing the component?
I have a reusable component called ProfileScreen, which shows a user's profile. That user, by default, is the logged in user; but it can also be a user that they select on a different screen.
The problem is that if the user is on another user's profile, and tries to navigate (via Drawer) to their own profile, it does nothing. I've tried obfuscating the navigation actions inside of redux functions to no avail.
Right now I'm having it navigate briefly to a "Loading" component before navigating back to the profile scene, but this is far from an optimal solution.
Any thoughts?
Actions.refresh() will do the job
Related
TL;DR version : Regarding navigation, how does one handle having the same screen in multiple different navigators ?
Long version :
I have a quite complex app made in React Native app, using React Navigation (social network type), with multiple nested navigators, depending on what the user is doing (registering, login, loading, using the app). The app basicaly allows you to share your experience in various places (who you are with, what you're drinking, etc). Those places have a dedicated profile screen that you can access.
When logged in, I have a bottom tab navigator that leads to the four main sections of the app : feed, post new content, search, user profile.
Each of those sections have a specific stack navigator.
My issue is that some screens can be accessed in multiples sections. I'll take a specific example but it applies to many screens. So, the "Place profile" screen can be accessed through the feed when you click on the place name, from the
search, when you search places, or from the user profile (because we list the user posts, and those posts can have a place mentionned).
I first tried to say that it belongs to the feed navigator and everytime a place is clicked, we move back to the feed tab and to the place screen. It works fine until I click on the "related places" link that opens the map in the search section. The back button (that use navigation.goBack()) goes back in the search stack instead of the global navigation history.
I then tried to add every potential screens to every needing section navigators. Back button is working fine, but I'm having navigation issues now when trying to go to a screen that belongs only to a specific navigator. For those, I then specified the "owner" of it (using navigation.navigate("Foo", { screen: "Bar", params: { baz: buz }})), but I'm having weird navigations results where the navigator state is preserved between tab navigations, despite using unmountOnBlur. Also, that solution is ugly as hell with typescript.
I thought of doing a generic screen version, that would be hosted by a specific parent screen that would handle the navigation. But I'm then required to inject so many things from that parent screen (I need the navigation object in almost every component) which also leads to another typescript hell.
Also, almost every screen and complex component is a class component and not a functionnal one. No debate on the topic, it is as it is and can't be changed, so useNavigation() is out of the realm of possibilites right now (even with a HOC).
I am using react native navigation v2 by wix. I have a welcome screen with login screen and register. I start the startAuth.js from App.js. There are two tabs with login and register.
But as soon as app starts the componentWillMount methods runs in the register screen but yet i am at login tab.
Why is this happening?
react-native-navigation's Tab does not support lazy loading. But there are two special lifecyle functions where you can put your logic when component appear or disappear on screen
componentDidAppear(): called each time this component appears on screen
componentDidDisappear(): called each time this component disappears from screen
https://wix.github.io/react-native-navigation/docs/screen-lifecycle
There is also a discussion about topic https://github.com/wix/react-native-navigation/issues/1250
I am working on existing react native project and I want to find solution for pop action on navigation stack where I want to introduce new scene which is actually not on stack.
I have three different type of route based on state of user logged In, logged out or in locked state. So while user's app state is locked at that time on launch I am directing user to reset account page from launch scene.
Launch Scene -> Reset Account
But on back event of Reset Account, I want to show login page instead of Launch scene, but Login scene is not in stack as of now.
So how to insert new scene when user performs pop action ?
I am new to react native and I don't know how to modify navigation stack programmatically without performing any animation ?
In my project there is one package named react-native-router-flux to handle react navigation.
Any insight will be helpful.
I suggest you create a SwitchNavigator between LaunchScreen and AccountStack
AccountStack is a StackNavigator that render both:
LoginScreen.
ResetAccountScreen. << This would be your initialRoute.
I am using react-native-firebase on a project to implement push notifications. One request came in to make the user navigate to a specific screen whenever one taps on the push notif alert.
react-navigation is being used for the screen navigation.
I use push to mimic an inbox feature in my app.
Can you please suggest the ways this can be implemented?
One solution would be to add the listener on a screen and the perform the navigation since in it will already have the navigation props. But I have too many screens. Another solution would be to have a reference to the root navigator and pass it to the pushnotification controller. But this fails as I use redux and if if I add the config option { withRef: true } , It complains saying that the ref passed is not a function.
Do you have a better way of doing it or indicate to me what am I doing wrong please?
Thanks and Kind Regards,
Avinash
I have a solution for you , you can add a listen in you App.js , save that notification in async storage and then Access that notification object on the same page where you handle the logic of login user if token is present (Checking if user is login you can navigate him to desired page ), there you can navigate user to desired screen ,
Here you can check two things ,
easily access to notification object , detect whether is clicked or received.
easy to user auth , which is must to check on push notification
Hope my answer make sense to you
I'm using a tabNavigator. In the first screen, I simply call the firebase listeners for push notifications and then I do the navigation.
I'm struggling with what I would hope is a simple issue. I have multiple StackNavigators with various screens in each and I'm using a Drawer to move between the main stacks in addition to .navigate. Like this:
Main Stack
Main Screen (entry)
Member Profile
Inbox Stack
Inbox Screen
Message Details Screen
On the message details screen a user can navigate to Profile. So Message Details > Profile. This works great, as it does throughout the app. Navigation in the same stack works great both forward and back. I'm using the standard .navigate to move forward.
this.props.navigation.navigate('MemberProfilePage')
However if I tap the back button - or set a custom back button - the user is taken all the way back to the Main screen. And If I tap on Inbox in the drawer, the screen will still be on the Message Details.
But I really just want to go: Message Details > Profile ... Profile goBack() to Message Details.
I've tried the default goBack(), I've tried dispatching a back action like this:
const backAction = NavigationActions.back({
key: 'ProfileScreen'
})
or
const backAction = NavigationActions.back({
key: null
})
Thanks for any direction.
Edit: the initial suggestion about setting the backButton in Drawer appears to work. But it doesn't solve the problem.
I don't want to be taken back to the initial screen of the current stack. I want to go back to the screen I navigated from which is in a different Stack.
Had the same problem with two navigators and going back always takes you correctly on one, and wrong on the other as it pops to the root of the current StackNavigator.
For me, the solution was to reference the same screen in both stackNavigators, and when you navigate to it from two different navigators, the same screen will be shown, but it will be loaded from different navigator and everything should work fine. Hope this helps.
In your DrawerNavigatorConfig change this props
backBehavior='none' //default is initialRoute
backBehavior - Should the back button cause switch to the initial
route? If yes, set to initialRoute, otherwise none. Defaults to
initialRoute behavior.
https://reactnavigation.org/docs/navigators/drawer#DrawerNavigatorConfig
check if its working ...