Custom navigation with Navigator component in React-Native

React-Native provides a Navigator component that allows you to implement navigation in your app. By default, the Navigator component provides a basic navigation experience with a stack-based navigation model. However, there may be cases where you need to customize the navigation experience to fit your app’s specific requirements. In this article, we will explore how to create a custom navigation using the Navigator component in React-Native.

1. Using the renderScene prop

The renderScene prop of the Navigator component allows you to define how each scene should be rendered. By providing a function to the renderScene prop, you can customize the rendering of each scene based on your requirements. Here’s an example:


import React from 'react';
import { Navigator, Text } from 'react-native';

const App = () => {
  const renderScene = (route, navigator) => {
    switch (route.name) {
      case 'Home':
        return Welcome to the Home screen!;
      case 'About':
        return This is the About screen.;
      case 'Contact':
        return Contact us at contact@example.com;
      default:
        return null;
    }
  };

  return (
    
  );
};

export default App;

In this example, we define a renderScene function that takes the current route and the navigator as parameters. Based on the route name, we return the appropriate component to be rendered. The initialRoute prop is used to specify the initial scene to be rendered.

2. Using the configureScene prop

The configureScene prop of the Navigator component allows you to define how each scene should transition between one another. By providing a function to the configureScene prop, you can customize the transition animation and behavior. Here’s an example:


import React from 'react';
import { Navigator, Text } from 'react-native';

const App = () => {
  const configureScene = (route, routeStack) => {
    if (route.name === 'About') {
      return Navigator.SceneConfigs.FloatFromBottom;
    }
    return Navigator.SceneConfigs.PushFromRight;
  };

  const renderScene = (route, navigator) => {
    switch (route.name) {
      case 'Home':
        return Welcome to the Home screen!;
      case 'About':
        return This is the About screen.;
      case 'Contact':
        return Contact us at contact@example.com;
      default:
        return null;
    }
  };

  return (
    
  );
};

export default App;

In this example, we define a configureScene function that takes the current route and the route stack as parameters. Based on the route name, we return the appropriate scene configuration. The renderScene function remains the same as in the previous example.

Conclusion

The Navigator component in React-Native provides a flexible way to implement navigation in your app. By using the renderScene and configureScene props, you can easily customize the navigation experience to fit your specific requirements. Whether you need to render different components for each scene or define custom transition animations, the Navigator component has you covered.

Custom navigation with Navigator component in React-Native