text: import React from 'react';
  import { Text } from 'react-native';
  import {
    createSwitchNavigator,
    createBottomTabNavigator,
    createAppContainer
  } from 'react-navigation';
  import Icon from 'react-native-vector-icons/FontAwesome5';
  import { Provider } from 'react-redux';
  import { createStore } from 'redux';
  import reducers from './src/reducers';
  
  import i18n from './src/i18n';
  
  import WelcomeScreen from './src/screens/WelcomeScreen';
  import PracticeScreen from './src/screens/PracticeScreen';
  import ResultsScreen from './src/screens/ResultsScreen';
  import HighScoresScreen from './src/screens/HighScoresScreen';
  import SettingsScreen from './src/screens/SettingsScreen';
  import SplashScreen from './src/screens/SplashScreen';
  
  const HomeNavigator = createSwitchNavigator({
    Welcome: WelcomeScreen,
    Practice: PracticeScreen,
    Results: ResultsScreen
  });
  
  const AppNavigator = createBottomTabNavigator(
    {
      Home: {
        screen: HomeNavigator,
        navigationOptions: {
          tabBarLabel: ({ tintColor }) => (
            <Text style={{ fontSize: 10, color: tintColor }}>
              {i18n.t('navigation.home')}
            </Text>
          ),
          tabBarIcon: ({ horizontal, tintColor }) =>
            <Icon name="home" size={horizontal ? 20 : 25} color={tintColor} />
        }
      },
      HighScores: {
        screen: HighScoresScreen,
        navigationOptions: {
          tabBarLabel: ({ tintColor }) => (
            <Text style={{ fontSize: 10, color: tintColor }}>
              {i18n.t('navigation.highScores')}
            </Text>
          ),
          tabBarIcon: ({ horizontal, tintColor }) =>
            <Icon name="chart-bar" size={horizontal ? 20 : 25} color={tintColor} />
        }
      },
      Settings: {
        screen: SettingsScreen,
        navigationOptions: {
          tabBarLabel: ({ tintColor }) => (
            <Text style={{ fontSize: 10, color: tintColor }}>
              {i18n.t('navigation.settings')}
            </Text>
          ),
          tabBarIcon: ({ horizontal, tintColor }) =>
            <Icon name="cogs" size={horizontal ? 20 : 25} color={tintColor} />
        }
      }
    },
    {
      tabBarOptions: {
        activeTintColor: 'orange',
        inactiveTintColor: 'gray'
      }
    }
  );
  
  const InitialNavigator = createSwitchNavigator({
    Splash: SplashScreen,
    App: AppNavigator
  });
  
  const AppContainer = createAppContainer(InitialNavigator);
  
  class App extends React.Component {
    render() {
      return (
        <Provider store={createStore(reducers)}>
          <AppContainer />
        </Provider>
      );
    }
  }
  
  export default App;
  