React Native Navigation (v7.18.1) Tab Indicator Example

react-native-navigation-tab-indicator-example.tsx

// The purpose of this gist is to give an idea of how to implement tab indicator functionality using react-native-navigation
// This example is based on rnn-starter (https://github.com/kanzitelli/rnn-starter)

import { Navigation, LayoutComponent } from 'react-native-navigation';
import merge from 'lodash/merge';

// types
type TabScreen = 'Home' | 'Explore' | 'Account';
type TabScreenInfo = {
  name: TabScreen;
  componentId: string;
};
type TabScreens = Array<TabScreenInfo>;
type TabScreensLayouts = {
  [key in Screen]: LayoutComponent;
};
  
// help methods
const withTabIndicator = (yes = true): Options => ({
  bottomTab: {
    dotIndicator: {
      visible: yes,
      color: 'blue',
      size: 12,
    },
  },
});
  
// screens
const tabScreens: TabScreens = [
  { name: 'Home', componentId: 'HomeComponentId' },
  { name: 'Explore', componentId: 'ExploreComponentId' },
  { name: 'Account', componentId: 'AccountComponentId' },
];
const tabScreensLayouts: TabScreensLayouts = {
  Home: {
    id: tabScreens[0].componentId,
    name: 'Home',
    options: {
      ...withTabIndicator(), // we set indicator for the first tab
      // other props...
    },
  },
  Explore: {
    id: tabScreens[1].componentId,
    name: 'Explore',
    options: {
      // other props...
    },
  },
  Account: {
    id: tabScreens[2].componentId,
    name: 'Account',
    options: {
      // other props...
    },
  },
}

// then, after you register the screens above, we need to register an event from Navigation
Navigation.events().registerBottomTabSelectedListener(
  async ({ selectedTabIndex, unselectedTabIndex }) => {
    const sameTab = selectedTabIndex === unselectedTabIndex;
    const selectedTab = tabScreens[selectedTabIndex];

    if (selectedTab && !sameTab) {
      // clear previous tab indicators
      for (const ts of tabScreens) {
        Navigation.mergeOptions(ts.componentId, withTabIndicator(false));
      }

      // setting tab indicator to a selected tab
      Navigation.mergeOptions(selectedTab.componentId, withTabIndicator());
    }
  },
);
  
// tab indicators should work :)