React Native – 7 Most Common Glossary Terms used in React Navigation

Hello Readers, CoolMonkTechie heartily welcomes you in this article.

In this article, 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. We will discuss some common used glossary terms of React Navigation in React Native.

A famous quote about learning is :
” Learning is not attained by chance. It must be sought for with ardor and attended with diligence. “

react_native_terms


So, Let’s begin.


1. Header

Header is also known as navigation header, navigation bar, navbar, 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. The entire rectangle is often referred to as the header in React Navigation.


2. Navigator and NavigationContainer

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

NavigationContainer 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 accepts 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 generally 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 indicates 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 article, 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 us on this blog and and support us in any way possible. Also like and share the article with others for spread valuable knowledge.

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

Thanks again Reading. HAPPY READING!!😊😊😊

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s