so I am coding a simple app with react-navigation and I want to code this:
- Home (Tab)
- Profile (Tab)
-- User info (Stack screen)
--- Edit user info (Stack screen) - (screen with input to edit name, email etc...)
When I click save on the EditInfo screen I have a button on the right side of the header Done, this button should navigate back to the UserInfo screen where you can see the updated details.
BUT!
Everything works but when I click Done on the EditInfo screen, it navigates back to Home! Why is that?
Thanks for help
Could you please put the code of the service screen where you call the goBack function, it could be helpful. Generally you just call
You are either using the wrong Navigator comp or your requirements are not clear. Basically, You would like to use the StackNavigator for your desired behavior.
The catch is, DrawerNavigator is used to build up a drawer menu. If you swipe from the left you'll see your navigator drawer containing all of your screens as you can see in the image below
If you add a button on your screen like below, you'll see your menu open.
<Button title="MENU" onPress={() => this.props.navigation.navigate('DrawerOpen')} />
The conclusion is, whenever we use DrawerNavigator we always go back to initial route, which is whatever we defined as the first item or using the initialRouteName key of the second param of the DrawerNavigator.
It's only the StackNavigator that supports this stacking order you would like to achieve, as the name suggests itself.
What you can do is to wrap a new StackNavigator inside one of the screens of the DrawerNavigator. For example:
const AppNavigator = DrawerNavigator({
drawer1: {
screen: drawer1,
}
});
const drawer1 = StackNavigator({
one: { screen: one },
two: { screen: two },
three: { screen: three },
});
Maybe this answer would help you.
In a nutshell: maybe you need to specify backBehaviour param in your Tabs navigator.
Related
Im using react-navigation for react-native. Is there an option to make that inactive tab screens get unmounted like unmountInactiveRoutes: true in DrawerNavigator?? I cant find something like unmountInactiveRoutes for BottomTabNavigator.
I have two stacknavigators inside a BottomTabNavigator and I want to unmount them automatically.
BottomTabNavigator
Stack1
Screen
Screen
Stack2
Screen
Screen
You can unmount screens in bottom tab by adding option in navigation screenOptions (or in Tab.Navigator screenOptions):
unmountOnBlur: true
You can do it in Tab & Drawer Navigations but not in Stack Navigation.
And you can also add unmount individual screen by adding same option in Tab or Drawer Screen option.
So I don't know if you can unmount components that are inactive personally I did not find it however this is my workaround withNavigationFocus(FocusStateLabel)
and if isFocused is false. returning null. So this will give you more or less what you are looking for. If isFocused is true, you'll render what you usually render. If false you'll return null. resulting in the unmounting of your components
Some reference https://reactnavigation.org/docs/en/with-navigation-focus.html
I tried Ubaid’s answer it works. But you can try this one too:
Use
import {useIsFocused} from '#react-navigation/native';
const isFocused = useIsFocused();
useEffect(() => {
// Do whatever you want to do when screen gets in focus
}, [props, isFocused]);
It works perfectly fine.
I found two way unmount.
First method is just trigger the unmount using useFocusEffect. With my experience this is not completely unmount component. It just trigger only unmount function to unsubscribe events.
https://reactnavigation.org/docs/function-after-focusing-screen/#triggering-an-action-with-a-focus-event-listener
Second method is completely unmount component when the navigating. This one is working as react unmount.
https://reactnavigation.org/docs/bottom-tab-navigator/#unmountonblur
<Tab.Navigator screenOptions={{unmountOnBlur: true}}>
</Tab.Navigator>
In your tab screens
const unMount = ()=>{
//unmount what you want
}
useEffect(()=>{
return unMount;
},[])
Modify your code with this
Im using react-navigation v3, is there an option to make that inactive tab screens get unmounted like unmountInactiveRoutes: true in DrawerNavigator?? I cant find something like unmountInactiveRoutes for BottomTabNavigator.
I have two stacknavigators inside a BottomTabNavigator and I want to unmount them automatically or just reset them.
my navigators:
BottomTabNavigator
stackNavigator
stackNavigator
You can use the useIsFocused hook to solve your problem. So when the screen is focused you will display your desirable screen otherwise just return null. Check the code below:
import { useIsFocused } from '#react-navigation/native';
const isFocused = useIsFocused();
if(isFocused) return(/*your screen*/)
else if(!isFocused) return null
And if you want to make some fetching or some changes on every focus just use the useFocusEffect hook.
I have used the SideDrawer template from the Drawer Navigation template. After adding my own page (Login), the side drawer is still visible, although no hamburger icon, I can still drag out the side drawer from the left of the screen, even though my page was built from scratch with no reference to the side drawer code.
How do I disconnect the side drawer from a particular page is javascript.
When you are on the login page or any page you don't want the Drawer to be shown via gestures, disable it by setting gesturesEnabled property to false, once logged in or whenever you want the gesture to work back, just set the value back to true.
OK, resolved. For anyone else
` const app= require("tns-core-modules/application");
exports.onNavigatingTo = function (args){
const sideDrawer = app.getRootView();
sideDrawer.gesturesEnabled = false;
}
`
Is there a way I can prevent the url from changing when the back button is clicked?
I'm currently using createMemoryHistory to prevent url modification when I navigate around clicking links set up in my app. By doing this, I'm able to successfully navigate around but when I click the back button in my browser, it modifies the url (which I don't want).
E.g. My url looks like localhost:3000. Then I click on the settings link and I navigate to the settings view but my link is still localhost:3000. Now in settings, I click on Printers and navigate to the Printers view inside settings. My url still looks like localhost:3000. However, if I click the back button and return to the settings page, now my url looks like localhost:3000/settings.
Is there anything . I can do to the prevent the back button from modifying my url? Thank you for your help!
I would suggest using react-router's browserHistory class like this:
import { browserHistory } from 'react-router';
//... inside your component class
componentDidMount() {
browserHistory.listen(location => {
if (location.action === "POP") {
// Do your stuff
// maybe use your `createMemoryHistory` API
// to push a / to the history to keep the URL the same?
}
});
}
Suppose I have two screens:
Screen A
Screen B
I am initially landed on Screen A. When I click on a Button I navigate to Screen B. When I press Back Button, I am again navigated to Screen A.
I want to call an action creator when I am navigated to Screen A as mentioned in above scenario.
I just want to know that which lifecycle event will be called every time when a screen is presented.
Isn't there some event like componentWillAppear()?
Note: I am using react-native with react-navigation for navigation.
This can now be done with plain react navigation via their listeners:
In your Component A:
componentDidMount = () => {
this._componentFocused();
this._sub = this.props.navigation.addListener(
'didFocus',
this._componentFocused
);
}
componentWillUnmount() {
this._sub.remove();
}
_componentFocused = () => {
this.setState({dataToShow});
}
React Navigation docs - Lifecycle
When you navigate from one screen to another, the first screen will not be unmounted, but still on the stack, just hide in the background.
What you need might be componentDidFocus, but it's currently in design not avaiable yet, see react-native open issue #51.
You can try this alternative way: react-navigation-addons. With this you can have events focus & blur which may suit your needs.
If you use react-native-navigation, you can listen for appearance events: https://wix.github.io/react-native-navigation/#/screen-api?id=listen-to-visibility-events-globally