React Native Navigation

This writing provides an overview of React Native Navigation. 

1. Navigation Patterns

• Navigation patterns such as tab, stack, drawer navigation are as below example. Mostly tab navigation is used (ex. Instagram, Facebook) and sometimes they are used mixed. For detail of how to use, refer to: https://reactnavigation.org/
• There are more variants of the tab navigator, like Google’s Material Design (top) Tabs

2. NavigationContainer Component

• In the React Navigation library, components need to be wrapped in a NavigationContainer component to manage the navigation structure and ensure navigators work properly.

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

3. Stack Navigation

• For how to use, refer to comments in below example:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';   // import this library to use navigation
import { createStackNavigator } from '@react-navigation/stack';  // import Stack Navigator library

const FeedScreen = () => (   // set it as component
  <View style={styles.layout}>
    <Text style={styles.title}>First screen</Text>
  </View>
);

const Stack = createStackNavigator();  // set this function

const App = () => (
  <NavigationContainer>  // Make navigation by putting other components in this container, this example is for Stack
    <Stack.Navigator>
      <Stack.Screen name="Feed" component={FeedScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);

export default App;

const styles = StyleSheet.create({
  layout: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 32,
    marginBottom: 16,
  },
});

• Rendering result:

4. Tab Navigation

• There are multiple variants of tab navigation on both Android and iOS. For Apple, bottom tab bar in their Human Interface Guidelines. For Android, bottom tab bar. 
• For how to use, refer to comments in below example:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';  // import bottom tab navigator library 

const FeedScreen = () => (   // Make first screen component
  <View style={styles.layout}>
    <Text style={styles.title}>Feed</Text>
  </View>
);

const CatalogScreen = () => (   // Make second screen component
  <View style={styles.layout}>
    <Text style={styles.title}>Catalog</Text>
  </View>
);

const Tab = createBottomTabNavigator();   // set function to use bottom tab navigator

export const AppNavigator = () => (
  <Tab.Navigator>                     // From this, below becomes tab in bottom tab navigation
    <Tab.Screen name="Feed" component={FeedScreen} />
    <Tab.Screen name="Catalog" component={CatalogScreen} />
  </Tab.Navigator>
);

const App = () => (
  <NavigationContainer>     // Always put navigator in NavigationContainer
    <AppNavigator />
  </NavigationContainer>
);

export default App;


const styles = StyleSheet.create({
  layout: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 32,
    marginBottom: 16,
  },
});

• Rendering result:

5. useNavigation Hook

• In the React Navigation library, the useNavigation hook gives access to the navigation API, allowing movement between screens. It returns an object with methods like navigate for navigating to a specific screen and goBack for returning to the previous one.
• For how to use, refer to comments in below example:

import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import { NavigationContainer, useNavigation } from '@react-navigation/native';  // import useNavigation hook
import { createStackNavigator } from '@react-navigation/stack';

const FeedScreen = () => {
  const nav = useNavigation();  // add useNavigation hook

  return (
    <View style={styles.layout}>
      <Text style={styles.title}>Feed</Text>
      <Button
      title="Go to catalog"
      onPress={() => nav.navigate('Catalog')}  // add the Hook here, to guide user 'Catalog' when button pressed
      />  		     // .navigate('ScreenName’), important is that it is not Component name, it is ScreenName!
    </View>
  );
};

const CatalogScreen = () => (
  <View style={styles.layout}>
    <Text style={styles.title}>Catalog</Text>
  </View>
);

const Stack = createStackNavigator();

export const AppNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen name="Feed" component={FeedScreen} />
    <Stack.Screen name="Catalog" component={CatalogScreen} />     // Check the ScreenName here
  </Stack.Navigator>
);

const App = () => (
  <NavigationContainer>
    <AppNavigator />
  </NavigationContainer>
);

export default App;


const styles = StyleSheet.create({
  layout: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 32,
    marginBottom: 16,
  },
});

• Rendering result: