Creating CustomTabs in React-Navigation

CustomTabs.md

Custom Tabs

To create Custom tabs in React-Navigation

A structure to get the idea of what we want.

StackNavigator
    - Screen
        - CustomTab | CustomTab
    - Screen
    - Screen
        - CustomTab | CustomTab

These are the helpers that will assist to make a custom navigation, import them.

import {
  createNavigator,
  createNavigationContainer,
  TabRouter,
  addNavigationHelpers,
} from 'react-navigation';

• createNavigationContainer accepts a createNavigator which take Router and a View.

 const HistoryScreen = createNavigationContainer(
  createNavigator(HistoryTabRouter)(HistoryTabView)
);

• Create a Router.

import {
 TabRouter,
} from 'react-navigation';
import RecentSearchesTab from './RecentSearchesTab';
import RecentStoriesTab from './RecentStoriesTab';

const HistoryTabRouter = TabRouter(
 {
   RecentSearches: {
     screen: RecentSearchesTab,
     path: '',
   },
   RecentStories: {
     screen: RecentStoriesTab,
     path: 'RecentStories',
   }
 },
 {
   initialRouteName: 'RecentSearches',
 }
);

export default HistoryTabRouter;

• Create View and link it to the screens.

class HistoryTabBar extends Component {
  constructor(props) {
      super(props)
      const { routes } = this.props.navigation.state
      const navigation = this.props.navigation
  }
  render () {
      return (
          <View style={styles.tabContainer}>
            {this.props.navigation.state.routes.map(route => (
              <TouchableOpacity
                onPress={() => this.props.navigation.navigate(route.routeName)}
                style={styles.tab}
                key={route.routeName}
              >
                <Text>{route.routeName}</Text>
              </TouchableOpacity>
            ))}
          </View>
      );
  }
}


const HistoryTabView = ({ router, navigation }) => {
const { routes, index } = navigation.state;
const ActiveScreen = router.getComponentForState(navigation.state);
return (
  <View >
    <HistoryTabBar navigation={navigation} />
    <ActiveScreen
      navigation={addNavigationHelpers({
        ...navigation,
        state: routes[index],
      })}
    />
  </View>
);
};

Cool!