gistfile1.txt

const TabIcon = ({ tabKey, isSelected }) => {
  let source;
  switch (tabKey) {
    case 'Setting':
      source = isSelected ? TAB_SETTING_SELECTED : TAB_STTING;
      break;
    case 'Home':
      source = isSelected ? TAB_HOME_SELECTED : TAB_HOME;
      break;
    default:
      source = TAB_DEFAULT;
      break;

  }
  return (
    <Image
      style={{ height: 24, width: 24 }}
      source={source}
    />
  );
};

const CustomTabBar = ({ navigation }) => {
  const selectedIndex = navigation.state.index;
  const routes = navigation.state.routes;

  return (
      <View style={styles.tabContainer}>
        {routes.map((route, index) => {
          return (
            <TouchableOpacity
              onPress={() => {
                navigation.navigate(route.key);
                DeviceEventEmitter.emit('TAB_CHANGED', { key: route.key });
              }

              }
              style={styles.tab}
              key={route.key}
            >
              <TabIcon tabKey={route.key} isSelected={selectedIndex === index} />
              <View
                style={{
                  height: 2,
                  width: 30,
                  position: 'absolute',
                  bottom: 0,
                  backgroundColor: selectedIndex === index ? 'white' : 'transparent' //show selected index
                }}
              />
            </TouchableOpacity>);
        })
        }
      </View>
  );
};


const tabRoutes = {
  Setting: {
    screen: SettingScreen,
    path: 'setting',
  },
  Home: {
    screen: HomeScreen,
    path: 'home',
  },
};

const navigationOptions = ({ navigation }) => ({
  header: null,
});

const MainTabScreen = TabNavigator(tabRoutes, {
  lazy: true,
  tabBarPosition: 'top',
  animationEnabled: true,
  tabBarComponent: CustomTabBar, //your custom tabbar
  tabBarOptions: {
    activeTintColor: 'red',
  },
  navigationOptions: navigationOptions,
  initialRouteName: 'Home',
});
const styles = StyleSheet.create({
  //styles
});

export default MainTabScreen;