ReactNavigationHeader.js

ReactNavigationHeader.js

import React from 'react';
import { Ionicons } from '@expo/vector-icons';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';

import Home from '../screens/Home';
import Target from '../screens/Target';
import Setting from '../screens/Setting';

const HomeStack = createStackNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        title: 'Explorar',
      },
    },
  },
  {
    navigationOptions: {
      tabBarLabel: 'Explorar',
    },
  }
);

const TargetStack = createStackNavigator(
  {
    Target: {
      screen: Target,
      navigationOptions: {
        title: 'Objetivos',
      },
    },
  },
  {
    navigationOptions: {
      tabBarLabel: 'Objetivos',
    },
  }
);

const SettingStack = createStackNavigator(
  {
    Setting: {
      screen: Setting,
      navigationOptions: {
        title: 'Ajustes',
      },
    },
  },
  {
    navigationOptions: {
      tabBarLabel: 'Ajustes',
    },
  }
);

const AppNavigator = createBottomTabNavigator(
  {
    Home: HomeStack,
    Target: TargetStack,
    Setting: SettingStack,
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      // eslint-disable-next-line react/prop-types
      tabBarIcon: ({ tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-compass`;
        } else if (routeName === 'Target') {
          iconName = `ios-jet`;
        } else if (routeName === 'Setting') {
          iconName = `ios-options`;
        }

        return <Ionicons name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: '#67B26F',
      inactiveTintColor: 'gray',
    },
  }
);

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;