We Keep Coding

react-navigation navigate.goBack() goes all the way to Home screen

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.

While using useMediaQuery hook, getting error: Rendered more hooks than during previous render

I am trying to hide a tooltip on mobile devices. For this, I am using useMediaQuery to detect the width like this:
const isMobile = useMediaQuery({ query: '(max-width: 767px)' })
Then I am passing isMobile to a ReactTooltip component as the prop disabled.
<ReactTooltip disable={isMobile} id="favouriteMeeting" place="bottom" effect="solid">
Make Favourite
</ReactTooltip>
But whenever I click on a meeting, I am getting this error -
Rendered more hooks than during the previous render
. What am I doing wrong? Please help!

How to unmount inactive screens in bottom tab navigator react-navigation?

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

VueJS + Vuex + Vuetify Navigation Drawer

I have a page with a toolbar and a sidebar. The sidebar is only visible when a user is logged in.
The sidebar Navigation Drawer is default not visible if the user is on a mobile device.
Now i want a button in the toolbar that the user can open the sidebar.
But the toolbar and the sidebar are two different components.
Therefore i'm using Vuex to manage the state. But the state is computet and has no setter, so i can't use the state direct in the navigaion controllers v-model.
Now i read that you can define a get and a set method on computed variables.
But is this the best way to do this?

in your template:
<template>
<v-navigation-drawer
:value="isHomeNavigationDrawerOpen"
#input="TOGGLE_HOME_NAVIGATION_DRAWER"
...>
</v-navigation-drawer>
</template>
<scripts>
import { mapState, mapActions } from 'vuex'
export default {
computed: {
...mapState('userData', ['user', 'loggedIn']),
...mapState('toolbar', ['isHomeNavigationDrawerOpen']),
},
methods:{
...mapActions('toolbar', ['TOGGLE_HOME_NAVIGATION_DRAWER']),
}
...
In your store module toolbar.js (or your module name)
export default {
state: {
isHomeNavigationDrawerOpen: null,
},
actions: {
TOGGLE_HOME_NAVIGATION_DRAWER(context, open) {
context.commit('TOGGLE_HOME_NAVIGATION_DRAWER', open)
},
},
mutations: {
TOGGLE_HOME_NAVIGATION_DRAWER: (state, open) => {
state.isHomeNavigationDrawerOpen = open
},
},
}

In Vuetify, the component v-navigation-drawer emit a event called 'input' used by v-model.
This event is emitted when the navigation drawer is displayed and when it is closed. If we call the 'toggle' function in both cases we will enter an infinite loop.
I have the same problem and it is what is happening to me.

The way vuex want you to do is to use the proper state mutation.
#click="$store.commit('open-sidebar')"
And the computed value will react to the mutation.

On your toolbar component, this is where you want your button; Define a drawer boolean property. The html with the button in the toolbar component would look something like this:
<v-toolbar color="primary" dark app :clipped-left="$vuetify.breakpoint.mdAndUp" fixed>
<v-toolbar-side-icon #click.stop="$emit('update:drawer', !drawer)"></v-toolbar-side-icon>
In the toolbar component parent you would also want to declare an drawer variable. Then the html would look something like this:
<toolbar :drawer.sync="drawer"></toolbar>
<v-navigation-drawer class="secondary" dark fixed :clipped="$vuetify.breakpoint.mdAndUp" app v-model="drawer">
toolbar is your toolbar component which I mentioned earlier.
You will note that the navigation drawer is now listening to the drawer property.
Please let me know if this answer is not suffice, I will create an example for you

React Navigation weird back button behavior in nested navigators

I'm using React Navigation in my app and I have a Tab Navigator nested in a Stack Navigator. Sometimes in the app, the navigation stack is:
Screen A => Tab Navigator => Screen B.
So when users are in Screen B and press the back button it triggers first the back action in the Tab Navigator and only if there's no goBack action available in the Tab Navigator that it triggers the goBack action from Screen B.
So, the user gets an unexpected behavior when he is in Screen B and have navigated between Tabs. The user keeps pressing the back button until the Tab Navigator is back to the first tab and only then, after another press in the back button, it goes from Screen B back to the tabs.
Is there anyway I can archieve the expected behaviour in this case?

If I understand your setup correctly, I think you want to set backBehavior: 'none' on the TabNavigatorConfig. This will prevent tab navigations from pushing history states.
For example:
const MyTabNav = createBottomTabNavigator({
ScreenOne: ScreenOne,
...
}, {
backBehavior: 'none', // <-- Here
initialRouteName: 'ScreenOne',
tabBarOptions: {
...
}
})
If that doesn't do exactly what you want, you might try playing with the other back behaviors. Two new behaviors were just added in version 3.2.0 (see https://github.com/react-navigation/rfcs/blob/master/text/0008-back-behaviour-for-tabs.md).

Are you correctly handling the back button? on each container top level component you need to handle the back button press, ex:
import * as React from 'react';
import { BackHandler } from 'react-native';
export default MyComponent extends React.Component<any, any> {
public componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.goBack);
}
public componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.goBack);
}
private goBack = () => {
this.props.navigation.goBack();
return true;
}
}
By returning true, you stop the cascading of the back button press propagation to the previous containers.

You can handle it using BackHandler event in TabNavigator page.
componentDidMount() {
if ("android" === Platform.OS) {
BackHandler.addEventListener("hardwareBackPress", this.handleBackPress);
}
}
componentWillUnmount() {
if ("android" === Platform.OS) {
BackHandler.removeEventListener(
"hardwareBackPress",
this.handleBackPress
);
}
}
handleBackPress = () => {
if (this.props.navigation.isFocused()) {
this.navigateBack();
} else {
this.props.navigation.goBack(null);
}
return true;
};
When hardware back button is pressed in screen B, backhandler method in Tab will get called and the flow will works properly.
But I have an issue in another scenario.
I have following work flow.
Tab Navigator A -> Tab Navigator B -> Screen
When back button is pressed from screen, the issue still persist.