custom-navigation-implementations.md

Custom Navigation Implementations

Native Navigation is built in such a way that a core interface, called a "Navigation Implementation" can be provided to the library to handle a lot of the UI aspects of Navigation. This allows users of the library to actually use their own custom navigation solutions without hacking the internals of it or rolling their own.

Native Navigation ships with DefaultImplementation which is an implementation that uses the iOS and Android idiomatic platform navigation components, and attempts to make them as customizable as they were meant to be, but this may not be customizable enough for your use case.

Below is some documentation around the specific interface methods

iOS Navigation Implementations

protocol ReactNavigationImplementation {

  func makeNavigationController(rootViewController: UIViewController) -> UINavigationController

  func reconcileScreenConfig(
    viewController: ReactViewController,
    navigationController: UINavigationController?,
    prev: [String: AnyObject],
    next: [String: AnyObject]
  )

  func reconcileTabConfig(
    tabBarItem: UITabBarItem,
    prev: [String: AnyObject],
    next: [String: AnyObject]
  )

  func reconcileTabBarConfig(
    tabBar: UITabBar,
    prev: [String: AnyObject],
    next: [String: AnyObject]
  )

  func getBarHeight(
    viewController: ReactViewController, 
    navigationController: UINavigationController?, 
    config: [String: AnyObject]
  ) -> CGFloat;
}

If you have a navigation implementation that you would like to use, you have to inject it into the ReactNavigationCoordinator:

let implementation: ReactNavigationImplementation = MyCustomNavigationImplementation();
ReactNavigationCoordinator.sharedInstance.navigation = implementation;

Android Navigation Implementations

interface NavigationImplementation {
  void reconcileNavigationProperties(
      ReactInterface component,
      ReactToolbar toolbar,
      ActionBar bar,
      ReadableMap previous,
      ReadableMap next,
      boolean firstCall
  );

  void prepareOptionsMenu(
      ReactInterface component,
      ReactToolbar toolbar,
      ActionBar bar,
      Menu menu,
      ReadableMap previous,
      ReadableMap next
  );

  boolean onOptionsItemSelected(
      ReactInterface component,
      ReactToolbar toolbar,
      ActionBar bar,
      MenuItem item,
      ReadableMap config
  );

  float getBarHeight(
      ReactInterface component,
      ReactToolbar toolbar,
      ActionBar actionBar,
      ReadableMap config,
      boolean firstCall
  );

  void makeTabItem(
      ReactBottomNavigation bottomNavigation,
      Menu menu,
      int index,
      Integer itemId,
      ReadableMap config
  );

  void reconcileTabBarProperties(
      ReactBottomNavigation bottomNavigation,
      Menu menu,
      ReadableMap prev,
      ReadableMap next
  );
}

If you have a navigation implementation that you would like to use, you have to inject it into the ReactNavigationCoordinator:

NavigationImplementation implementation = new MyCustomNavigationImplementation();
ReactNavigationCoordinator.sharedInstance.injectImplementation(implementation);