problem with the initial route in createBottomTabNavigator

user_13154520 0
Viewed 1231

In my BottomTabNavigator, I have an overview tab. When I click it, it bring the overview tab's initial route. From here, I can click to see more details. This will routes to a different screen. Let's call it (B)

My issue is if I am in this Route/page (B) inside my Overview Tab then I click on a different tab and I go back to Overview it show me Route/page (B) however I want it to display Route/page (A) if I change a tab and come back to it.

How can I do that?

This is my OverviewStack.js

import OverviewStack from "./overviewStack";
import { createStackNavigator } from "react-navigation";
.
.
.
const OverviewStack = createStackNavigator(
  {
    ...OverviewRoutes,
  },
  {
    initialRouteName: "Overview",
    resetOnBlur: true,
    navigationOptions: ({ navigation }) => ({
      ...SharedHeader(navigation),
    }),
  }
);

tabNavigator.js

import { createBottomTabNavigator } from "react-navigation";
.
.
.

export default createBottomTabNavigator(
  {
    Overview: {
      resetOnBlur: true,
      screen: OverviewStack,
      navigationOptions: {
        title: "Home",
      },
    },
    Averages: {
      resetOnBlur: true,
      screen: TrackStack,
      navigationOptions: {
        title: "Track",
      },
    },
jsx react-native
2 Answers

resetOnBlur is not available in the latest (version 5.x) React Navigation. It was deprecated, and a new similar functioning option unmountOnBlur was introduced.

Here, I have created an Expo Snack for you: https://snack.expo.io/@nishantatthatmate/vigorous-peanut

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator, StackActions } from '@react-navigation/stack';
import { Link } from '@react-navigation/native';

const Stack = createStackNavigator();

function OverviewStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="OverviewScreen" component={OverviewScreen} />
      <Stack.Screen name="DetailScreen" component={DetailScreen} />
    </Stack.Navigator>
  );
}

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function OverviewScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Overview!</Text>
      <Link to="/DetailScreen" style={{color:'blue'}}>Go to Detail</Link>
    </View>
  );
}

function DetailScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Detail!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Overview" component={OverviewStack} options={{unmountOnBlur: true}} />
    </Tab.Navigator>
  );
}

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

If you notice, I am setting the options for the screen(s) that we want to unmount on blur with unmountOnBlur: true.

One possibly undesired side effect of this is, if you are on the DetailScreen under Overview tab, and you happen to tap the Overview tab again, it brings you back to OverviewScreen (because DetailScreen was popped out). This may or may not be your expected user experience. But, there are another way to customize behavior by listening to various events on Tab.Screen as described below.

If you want to get fancy, you can add a listener on Tab.Screen and do more involved stuff, see here: https://reactnavigation.org/docs/navigation-events/#listeners-prop-on-screen

<Tab.Screen
  name="Chat"
  component={Chat}
  listeners={({ navigation, route }) => ({
    tabPress: e => {
      // Prevent default action
      e.preventDefault();

      // Do something with the `navigation` object
      navigation.navigate('AnotherPlace');
    },
    blur: () => {
      // Do things here
    },
  })}
/>
user_2984550

just add resetOnBlur into createBottomTabNavigator Options like this DOCS

import { createBottomTabNavigator, BottomTabBar } from 'react-navigation-tabs';

const TabBarComponent = (props) => <BottomTabBar {...props} />;

const TabScreens = createBottomTabNavigator(
  {
    // other screens
  },
  {
    tabBarComponent: (props) => (
      <TabBarComponent {...props} style={{ borderTopColor: '#605F60' }} />
    ),
    resetOnBlur:true //add here
  }
);
user_80798680
Related