Dec
6
1 day ago
Activity icon
issue

raajnadar issue comment react-navigation/react-navigation

raajnadar
raajnadar

Bottom tab nested navigation

Current behavior

I have a bottom tab navigator with two tabs, each tabs is a stack of screens. In the first screen of a tab I need to navigate to navigate to a screen (not the first one) of the other tab.

If I navigate between tabs, and then navigate from HomeScreen to OtherScreen2, I can go back to the initial route of OtherStack.

If I reload app, and directly navigate from HomeScreen to OtherScreen2, I can't open OtherScreen anymore.

const Tab = createBottomTabNavigator()
const Stack = createStackNavigator()

export default function App() {
  return (
    <NavigationContainer>
      <TabNavigator />
    </NavigationContainer>
  );
}


const HomeScreen = ({navigation}) => {
  return (
    <View style={styles.screen}>
        <Text style={styles.title}>HOME</Text>
        <View style={styles.container}>
          <Button title="HOME 2" onPress={() => navigation.navigate('Home2')}/>
          <Button title="OTHER 2" onPress={() => navigation.navigate('OtherStack', {screen: 'Other2'})}/>
      </View>
    </View>
  )
}

const HomeScreen2 = () => {
  return (
    <View style={styles.screen}>
      <Text  style={styles.title}>HOME 2</Text>
    </View>
  )
}

const OtherScreen = ({navigation}) => {
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>OTHER</Text>
      <Button title="OTHER 2" onPress={() => navigation.navigate('Other2')}/>
    </View>
  )
}


const OtherScreen2 = () => {
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>OTHER 2</Text>
    </View>
  )
}


const HomeStack = () => {
  return (
    <Stack.Navigator initialRouteName="Home1">
      <Stack.Screen name="Home1" component={HomeScreen} />
      <Stack.Screen name="Home2" component={HomeScreen2} />
    </Stack.Navigator>
  )
}

const OtherStack = () => {
  return (
    <Stack.Navigator initialRouteName="Other1">
      <Stack.Screen name="Other1" component={OtherScreen} />
      <Stack.Screen name="Other2" component={OtherScreen2} />
    </Stack.Navigator>
  )
}

const TabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="HomeStack" component={HomeStack} />
      <Tab.Screen name="OtherStack" component={OtherStack} />
    </Tab.Navigator>
  )
}

Expected behavior

Navigating from HomeScreen to OtherScreen2 and going back to OtherScreen, even not opening OtherStack before.

Reproduction

https://snack.expo.dev/@rolud/bottom-tab-nested-navigation

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

package version
@react-navigation/native 6.0.6
@react-navigation/bottom-tabs 6.0.9
@react-navigation/drawer
@react-navigation/material-bottom-tabs
@react-navigation/material-top-tabs
@react-navigation/stack 6.0.11
@react-navigation/native-stack
react-native-safe-area-context ^3.2.0
react-native-screens ^3.3.0
react-native-gesture-handler ^1.10.3
react-native-reanimated ^2.2.0
react-native-tab-view ^3.0.1
react-native-pager-view ^5.2.0
react-native 0.64.2
expo
node v16.9.1
npm 6.14.15
raajnadar
raajnadar

You need reset the screen & params, because you are passing the nested screen data ad param,and it will still be in the history when you navigate to another tab.

navigation.setParams({ screen: undefined, params: undefined }) add this in TabPress listener.

And unMountOnBlur: true

Activity icon
issue

jozsef-ftrc issue comment react-navigation/react-navigation

jozsef-ftrc
jozsef-ftrc

Bottom tab nested navigation

Current behavior

I have a bottom tab navigator with two tabs, each tabs is a stack of screens. In the first screen of a tab I need to navigate to navigate to a screen (not the first one) of the other tab.

If I navigate between tabs, and then navigate from HomeScreen to OtherScreen2, I can go back to the initial route of OtherStack.

If I reload app, and directly navigate from HomeScreen to OtherScreen2, I can't open OtherScreen anymore.

const Tab = createBottomTabNavigator()
const Stack = createStackNavigator()

export default function App() {
  return (
    <NavigationContainer>
      <TabNavigator />
    </NavigationContainer>
  );
}


const HomeScreen = ({navigation}) => {
  return (
    <View style={styles.screen}>
        <Text style={styles.title}>HOME</Text>
        <View style={styles.container}>
          <Button title="HOME 2" onPress={() => navigation.navigate('Home2')}/>
          <Button title="OTHER 2" onPress={() => navigation.navigate('OtherStack', {screen: 'Other2'})}/>
      </View>
    </View>
  )
}

const HomeScreen2 = () => {
  return (
    <View style={styles.screen}>
      <Text  style={styles.title}>HOME 2</Text>
    </View>
  )
}

const OtherScreen = ({navigation}) => {
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>OTHER</Text>
      <Button title="OTHER 2" onPress={() => navigation.navigate('Other2')}/>
    </View>
  )
}


const OtherScreen2 = () => {
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>OTHER 2</Text>
    </View>
  )
}


const HomeStack = () => {
  return (
    <Stack.Navigator initialRouteName="Home1">
      <Stack.Screen name="Home1" component={HomeScreen} />
      <Stack.Screen name="Home2" component={HomeScreen2} />
    </Stack.Navigator>
  )
}

const OtherStack = () => {
  return (
    <Stack.Navigator initialRouteName="Other1">
      <Stack.Screen name="Other1" component={OtherScreen} />
      <Stack.Screen name="Other2" component={OtherScreen2} />
    </Stack.Navigator>
  )
}

const TabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="HomeStack" component={HomeStack} />
      <Tab.Screen name="OtherStack" component={OtherStack} />
    </Tab.Navigator>
  )
}

Expected behavior

Navigating from HomeScreen to OtherScreen2 and going back to OtherScreen, even not opening OtherStack before.

Reproduction

https://snack.expo.dev/@rolud/bottom-tab-nested-navigation

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

package version
@react-navigation/native 6.0.6
@react-navigation/bottom-tabs 6.0.9
@react-navigation/drawer
@react-navigation/material-bottom-tabs
@react-navigation/material-top-tabs
@react-navigation/stack 6.0.11
@react-navigation/native-stack
react-native-safe-area-context ^3.2.0
react-native-screens ^3.3.0
react-native-gesture-handler ^1.10.3
react-native-reanimated ^2.2.0
react-native-tab-view ^3.0.1
react-native-pager-view ^5.2.0
react-native 0.64.2
expo
node v16.9.1
npm 6.14.15
jozsef-ftrc
jozsef-ftrc

+1. Adding initial: false certainly helps a bit (navigation.navigate('OtherStack', {screen: 'Other2', initial: false}) so at least I can go back to the initial screen of the tab but every single time I go back to the specific tab it starts off with the secondary screen. The original bug was weird already but this one just adds another layer on top of it.

Activity icon
fork

guistrutzki forked react-navigation/react-navigation

⚡ Routing and navigation for your React Native apps
guistrutzki Updated
fork time in 21 hours ago
Activity icon
issue

matheusmirandaferreira issue comment react-navigation/react-navigation

matheusmirandaferreira
matheusmirandaferreira

Native and function GoBack not working in Android

Current behavior

"dependencies": { "@expo-google-fonts/open-sans": "^0.2.0", "@expo/vector-icons": "^12.0.0", "@motify/interactions": "^0.16.1", "@react-native-async-storage/async-storage": "~1.15.0", "@react-navigation/bottom-tabs": "^6.0.9", "@react-navigation/drawer": "^6.1.8", "@react-navigation/native": "^6.0.6", "@react-navigation/stack": "^6.0.11", "axios": "^0.24.0", "date-fns": "^2.27.0", "expo": "~43.0.2", "expo-app-loading": "~1.2.1", "expo-font": "~10.0.3", "expo-linear-gradient": "~10.0.3", "expo-linking": "~2.4.2", "expo-location": "~13.0.4", "expo-status-bar": "~1.1.0", "moti": "^0.16.1", "react": "17.0.1", "react-dom": "17.0.1", "react-hook-form": "^7.20.1", "react-is": "^17.0.2", "react-native": "0.64.3", "react-native-dotenv": "^3.2.0", "react-native-gesture-handler": "~1.10.2", "react-native-modal": "^13.0.0", "react-native-reanimated": "~2.2.0", "react-native-render-html": "^6.3.1", "react-native-safe-area-context": "3.3.2", "react-native-screens": "~3.8.0", "react-native-svg": "12.1.1", "react-native-toast-message": "^2.0.2", "react-native-web": "0.17.1", "styled-components": "^5.3.3" },

Expected behavior

When I try use navigation.goBack() from @react-navigation/core or @react-navigation/native, I'm redirect to Home page, the routes is make with @react-navigation/bottom-tabs and a custom Header.

Expected

when backHendler action is active or navigation.goBack() is used, back one page in stack

Reproduction

https://snack.expo.dev/@matheusferreira/calm-edamame

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

package version
@react-navigation/native ^6.0.6
@react-navigation/bottom-tabs ^6.0.9
@react-navigation/stack ^6.0.11
@react-navigation/material-bottom-tabs ^6.0.9
@react-navigation/material-top-tabs ^6.0.6
react-native 0.64.3
expo ~43.0.2
matheusmirandaferreira
matheusmirandaferreira

Couldn't find version numbers for the following packages in the issue:

  • @react-navigation/material-bottom-tabs
  • @react-navigation/material-top-tabs

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

I update issue, can reverify pleace

Activity icon
issue

github-actions[bot] issue comment react-navigation/react-navigation

github-actions[bot]
github-actions[bot]

Native and function GoBack not working in Android

Current behavior

"dependencies": { "@expo-google-fonts/open-sans": "^0.2.0", "@expo/vector-icons": "^12.0.0", "@motify/interactions": "^0.16.1", "@react-native-async-storage/async-storage": "~1.15.0", "@react-navigation/bottom-tabs": "^6.0.9", "@react-navigation/drawer": "^6.1.8", "@react-navigation/native": "^6.0.6", "@react-navigation/stack": "^6.0.11", "axios": "^0.24.0", "date-fns": "^2.27.0", "expo": "~43.0.2", "expo-app-loading": "~1.2.1", "expo-font": "~10.0.3", "expo-linear-gradient": "~10.0.3", "expo-linking": "~2.4.2", "expo-location": "~13.0.4", "expo-status-bar": "~1.1.0", "moti": "^0.16.1", "react": "17.0.1", "react-dom": "17.0.1", "react-hook-form": "^7.20.1", "react-is": "^17.0.2", "react-native": "0.64.3", "react-native-dotenv": "^3.2.0", "react-native-gesture-handler": "~1.10.2", "react-native-modal": "^13.0.0", "react-native-reanimated": "~2.2.0", "react-native-render-html": "^6.3.1", "react-native-safe-area-context": "3.3.2", "react-native-screens": "~3.8.0", "react-native-svg": "12.1.1", "react-native-toast-message": "^2.0.2", "react-native-web": "0.17.1", "styled-components": "^5.3.3" },

Expected behavior

When I try use navigation.goBack() from @react-navigation/core or @react-navigation/native, I'm redirect to Home page, the routes is make with @react-navigation/bottom-tabs and a custom Header.

Expected

when backHendler action is active or navigation.goBack() is used, back one page in stack

Reproduction

https://snack.expo.dev/@matheusferreira/calm-edamame

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

package version
@react-navigation/native ^6.0.6
@react-navigation/bottom-tabs ^6.0.9
@react-navigation/stack ^6.0.11
react-native 0.64.3
expo ~43.0.2
github-actions[bot]
github-actions[bot]

Couldn't find version numbers for the following packages in the issue:

  • @react-navigation/material-bottom-tabs
  • @react-navigation/material-top-tabs

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

Activity icon
issue

matheusmirandaferreira issue react-navigation/react-navigation

matheusmirandaferreira
matheusmirandaferreira

Native and function GoBack not working in Android

Current behavior

"dependencies": { "@expo-google-fonts/open-sans": "^0.2.0", "@expo/vector-icons": "^12.0.0", "@motify/interactions": "^0.16.1", "@react-native-async-storage/async-storage": "~1.15.0", "@react-navigation/bottom-tabs": "^6.0.9", "@react-navigation/drawer": "^6.1.8", "@react-navigation/native": "^6.0.6", "@react-navigation/stack": "^6.0.11", "axios": "^0.24.0", "date-fns": "^2.27.0", "expo": "~43.0.2", "expo-app-loading": "~1.2.1", "expo-font": "~10.0.3", "expo-linear-gradient": "~10.0.3", "expo-linking": "~2.4.2", "expo-location": "~13.0.4", "expo-status-bar": "~1.1.0", "moti": "^0.16.1", "react": "17.0.1", "react-dom": "17.0.1", "react-hook-form": "^7.20.1", "react-is": "^17.0.2", "react-native": "0.64.3", "react-native-dotenv": "^3.2.0", "react-native-gesture-handler": "~1.10.2", "react-native-modal": "^13.0.0", "react-native-reanimated": "~2.2.0", "react-native-render-html": "^6.3.1", "react-native-safe-area-context": "3.3.2", "react-native-screens": "~3.8.0", "react-native-svg": "12.1.1", "react-native-toast-message": "^2.0.2", "react-native-web": "0.17.1", "styled-components": "^5.3.3" },

Expected behavior

When I try use navigation.goBack() from @react-navigation/core or @react-navigation/native, I'm redirect to Home page, the routes is make with @react-navigation/bottom-tabs and a custom Header.

Expected

when backHendler action is active or navigation.goBack() is used, back one page in stack

Reproduction

https://snack.expo.dev/@matheusferreira/calm-edamame

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

package version
@react-navigation/native ^6.0.6
@react-navigation/bottom-tabs ^6.0.9
@react-navigation/stack ^6.0.11
react-native 0.64.3
expo ~43.0.2
Activity icon
issue

harshlakhanpal issue comment react-navigation/react-navigation

harshlakhanpal
harshlakhanpal

Android Gesture Enabled crashes when unmounting from SafeAreaView

Current behavior

On Android when unmounting a focused input from a SafeAreaView (react-native-safe-area-context) in a Stack with gestureEnabled: true sometimes causes a weird crash:

com.facebook.react.uimanager.IllegalViewOperationException: Unable to execute operation dispatchViewManagerCommand: focus on view with tag: 4077, since the view does not exists

To get the crash it's necessary to focus the input, unmount it. Sometimes it is needed to do several times in a row in order to get the crash.

Expected behavior

No crash

Reproduction

https://snack.expo.dev/@florian-milky/756387 However it does not crash with the online android emulator provided. Unable to download on my own device. Same code on my emulator crashes (without expo)

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

"@react-navigation/bottom-tabs": "^6.0.5",
"@react-navigation/compat": "^5.3.20",
"@react-navigation/material-top-tabs": "^6.0.4",
"@react-navigation/native": "^6.0.2",
"@react-navigation/stack": "^6.0.7",

"react-native": "0.65.1", "react-native-gesture-handler": "^1.10.3", "react-native-safe-area-context": "^3.2.0", "react-native-screens": "^3.0.0", "react-native-tab-view": "^3.1.1",

harshlakhanpal
harshlakhanpal

hey, and solution apart from turning gestureEnabled to false ?