React Native – react-navigation (1)

Definition

Definition

Practice

Basic

How to get current route name?

navigation.state.routeName

How to access navigation object?

Use useNavigation hook

import { useNavigation } from '@react-navigation/native';
...

const navigation = useNavigation();

...

navigation.navigate('route-name', { data: {} })

import { useRoute } from '@react-navigation/native';
...

const route = useRoute();
const { data } = route.params;

How to go back?

navigation.goBack();

Tab bar

How to show/ hide a tab?

...
const Tab = createBottomTabNavigator();

function MyTabs() {
  const [showTab, setShowTab] = React.useState(true);

  // Show the about tab after 5 seconds.
  // Change this to use Redux or however
  // you would like to change which tabs are displayed
  setTimeout(() => {
    setShowTab(false);
    console.log('Hide tab');
  }, 5000);

  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
      />
      {showTab ? (
        <Tab.Screen
          name="About"
          component={AboutScreen}
        />
      ) : null}
      <Tab.Screen
        name="Settings"
        component={SettingsScreen}
      />
    </Tab.Navigator>
  );
}

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

How to hide a tab but still able to navigate to it?

<Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarButton: [
          "Search",
          "Help"
        ].includes(route.name)
          ? () => {
              return null;
            }
          : undefined,
      })}>
    <Tab.Screen name="Page 1" component={FeedScreen}></Tab.Screen>
    <Tab.Screen name="Page 2" component={LaunchScreen}></Tab.Screen>
    <Tab.Screen name="Page 3" component={MyEventsScreen}></Tab.Screen>
    <Tab.Screen name="Page 4" component={MyTicketsScreen}></Tab.Screen>
    <Tab.Screen name="Search" component={SearchScreen}></Tab.Screen>
    <Tab.Screen name="Help" component={SearchScreen}></Tab.Screen>
</Tab.Navigator>

How to create independent stacks inside a tab?

Main tab bar

export const TabStack = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Screen1"
        component={ComponentScreen1}/>
      <Tab.Screen
        name="Screen2"
        component={ComponentScreen2}/>
      <Tab.Screen
        name="Screen3"
        component={ComponentScreen3Stacks}/>
    </Tab.Navigator>
  );
};

Independent stacks Sub31, Sub32, Sub33 inside tab Screen3

export default function Screen3Stacks() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarButton: [
          'Sub31',
          'Sub32',
          'Sub33',
        ].includes(route.name)
          ? () => {
              return null;
            }
          : undefined,
        tabBarVisible: false,
      })}
    >
      <Tab.Screen name="Sub31" component={ComponentSub31} />
      <Tab.Screen name="Sub32" component={ComponentSub32} />
      <Tab.Screen name="Sub33" component={ComponentSub33} />
    </Tab.Navigator>
  );
}

Screen header

How to set header title, align title/ set right icon?

  React.useEffect(() => {
    navigation.setOptions({
      headerTitleAlign: 'center',
      headerTitle: () => (
        <Text>Home</Text>
      ),
      headerRight: () => (
        <Icon name="search-sharp" type="ionicon" size={30} />
      ),
    });
  }, []);