App.js

import {FontAwesome, Ionicons} from '@expo/vector-icons'
import {Constants} from 'expo'
import React from 'react'
import {View, Platform, StatusBar} from 'react-native'
import {createAppContainer, createBottomTabNavigator, createStackNavigator} from 'react-navigation'
import {Provider} from 'react-redux'
import {createStore} from 'redux'

import AddEntry from './components/AddEntry'
import EntryDetail from './components/EntryDetail'
import History from "./components/History"
import Live from './components/Live'
import reducer from './reducers'
import {purple, white} from "./utils/colors"
import {setLocalNotification} from "./utils/helpers"

const store = createStore(reducer);
const Tabs = createBottomTabNavigator({
    History: {
        screen: History,
        navigationOptions: {
            tabBarLevel: 'History',
            tabBarIcon: ({tintColor}) => <Ionicons name='ios-bookmarks' size={30} color={tintColor}/>
        }
    },
    AddEntry: {
        screen: AddEntry,
        navigationOptions: {
            tabBarLevel: 'Add Entry',
            tabBarIcon: ({tintColor}) => <FontAwesome name='plus-square' size={30} color={tintColor}/>
        }
    },
    Live: {
        screen: Live,
        navigationOptions: {
            tabBarLevel: 'Live',
            tabBarIcon: ({tintColor}) => <Ionicons name='ios-speedometer' size={30} color={tintColor}/>
        }
    }
}, {
    navigationOptions: {
      header: null
    },
    tabBarOptions: {
        activeTintColor: Platform.OS === 'ios' ? purple : white,
        style: {
            height: 56,
            backgroundColor: Platform.OS === 'ios' ? white : purple,
            shadowColor: 'rgba(0, 0, 0, 0.24)',
            shadowOffset: {
                width: 0,
                height: 3
            },
            shadowRadius: 6,
            shadowOpacity: 1,
        }
    }
});

const MainNavigator = createStackNavigator({
    Home: {
        screen: Tabs
    },
    EntryDetail: {
        screen: EntryDetail,
        navigationOptions: {
            headerTintColor: white,
            headerStyle: {
                backgroundColor: purple,
            }
        }
    }
});

const Container = createAppContainer(MainNavigator);

function UdaciStatusBar({backgroundColor, ...props}) {
    return (
        <View style={{backgroundColor, height: Constants.statusBarHeight}}>
            <StatusBar translucent backgroundColor={backgroundColor} {...props}/>
        </View>
    )
}

export default class App extends React.Component {
    componentDidMount() {
        setLocalNotification()
    }
    render() {
        return (
            <Provider store={store}>
                <View style={{flex: 1}}>
                <UdaciStatusBar backgroundColor={purple} barStyle='light-content'/>
                    <Container/>
                </View>
            </Provider>
        );
    }
}