ReactNative - Tab Navigation

ReactNative - Tab Navigation

App.js

 export default class App extends React.Component {
 ​
   render() {
       <TabNavigation />
   }
 }

-

navigation/TabNavigation.js

 import React from "react";
 import { Platform } from "react-native";
 import { createBottomTabNavigator, createAppContainer } from "react-navigation";
 import MoviesScreen from "../screens/Movies";
 import TVScreen from "../screens/TV";
 import SearchScreen from "../screens/Search";
 import { BG_COLOR } from "../constants/Colors";
 import TabBarIcon from "../components/TabBarIcon";
 ​
 const TabNavigation = createBottomTabNavigator(
   {
     Movies: { screen: MoviesScreen, navigationOptions: {
         tabBarIcon: ({focused}) => <TabBarIcon focused={focused} name={Platform.OS === "ios" ? "ios-film" : "md-film"}/>
     }} ,
     TV: { screen: TVScreen, navigationOptions: {
         tabBarIcon: ({focused}) => <TabBarIcon focused={focused} name={Platform.OS === "ios" ? "ios-tv" : "md-tv"}/>
     }} ,
     Search: { screen: SearchScreen, navigationOptions: {
         tabBarIcon: ({focused}) => <TabBarIcon focused={focused} name={Platform.OS === "ios" ? "ios-search" : "md-search"}/>
     }} 
   },
   {
     tabBarOptions: {
       showLabel: false,
       style: {
         backgroundColor: BG_COLOR
       }
     }
   }
 );
 ​
 export default createAppContainer(TabNavigation);

-

components/TabBarIcon.js

 import React from "react";
 import PropTypes from "prop-types";
 import { Ionicons } from "@expo/vector-icons";
 import { ACTIVE_COLOR, INACTIVE_COLOR } from "../constants/Colors";
 ​
 const TabBarIcon = ({name, focused}) => (
     <Ionicons 
         size={26} 
         name={name} 
         color={focused ? ACTIVE_COLOR : INACTIVE_COLOR}
     />
 );
 ​
 TabBarIcon.propTypes = {
     name: PropTypes.string.isRequired,
     focused: PropTypes.bool.isRequired
 }
 ​
 export default TabBarIcon;