Category: A Short Note

Hello Readers, CoolMonkTechie heartily welcomes you in A Short Note Series (7 Most Common Glossary Terms Used In React Navigation).

In this note series, we will learn about commonly used React Navigation glossary terms in React Native. React Navigation glossary terms is the most common question asked in an interview with the experience react native developer. This note series shows some commonly used glossary terms of React Navigation in React Native.

So, Let’s begin.

1. Header

We also know header as navigation header, navigation bar, nav bar, and probably many other things. This is the rectangle at the top of your screen that contains the back button and the title for your screen. It often refers the entire rectangle to as the header in React Navigation.

2. Navigator and Navigation Container

A Navigator contains Screen elements as its children to define the configuration for routes.

Navigation Container is a component which manages our navigation tree and contains the navigation state. This component must wrap all navigators structure. 

Usually, we would render this component at the root of our app, which is usually the component exported from App.js.

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator> // <---- This is a Navigator
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

3. Screen Component

A screen component is a component that we use in our route configuration.

const Stack = createStackNavigator();

const StackNavigator = (
  <Stack.Navigator>
    <Stack.Screen
      name="Home"
      component={HomeScreen} // <----
    />
    <Stack.Screen
      name="Details"
      component={DetailsScreen} // <----
    />
  </Stack.Navigator>
);

We saw earlier that our screen components are provided with the navigation prop. It’s important to note that this only happens if the screen is rendered as a route by React Navigation.

For example, if we render DetailScreen as a child of HomeScreen, then DetailsScreen won’t be provided with the navigation prop, and when you press the “Go to Details.. again” button on the Home Screen, the app will throw one of JavaScript exceptions as “undefined is not an object”.

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
      <DetailsScreen />
    </View>
  );
}

4. Navigation Prop

Each screen component in your app is provided with the navigation prop automatically. This prop will be passed into all screens, and it can be used for the following :

• dispatch will send an action up to the router
• navigate, goBack are available to dispatch actions in a convenient way.

Navigators can also accept a navigation prop, which they should get from the parent navigator, if there is one.

5. Router Prop

This prop will be passed into all screens. It contains information about current route, i.e. params, key and name.

6. Navigation State

The state of a navigator looks something like this :

{
  key: 'StackRouterRoot',
  index: 1,
  routes: [
    { key: 'A', name: 'Home' },
    { key: 'B', name: 'Profile' },
  ]
}

For this navigation state, there are two routes which may be tabs, or cards in a stack. The index shows the active route, which is “B”.

7. Route

Each route is a piece of navigation state which contains a key to identify it, and a “name” to designate the type of route.It can also contain arbitrary params.

{
  key: 'B',
  name: 'Profile',
  params: { id: '123' }
}

Conclusion

In this note series, we understood the React Navigation glossary terms in React Native.

Thanks for reading! I hope you enjoyed and learned about React Navigation glossary terms. Reading is one thing, but the only way to master it is to do it yourself.

Please follow and subscribe to the blog and support us in any way possible. Also like and share the article with others for spread valuable knowledge.

You can find Other articles of CoolmonkTechie as below link :

• React Native Note
• React Native Articles
• CoolMonkTechie Home Page

You can also follow official website and tutorials of React Native as below links :

• React Native Official Website

If you have any comments, questions, or think I missed something, leave them below in the comment box.

Thanks again Reading. HAPPY READING!!???