import React from 'react';
import Constants from 'expo-constants';
import { Root } from 'native-base';
import { StyleSheet, View, Text } from 'react-native';
import Firebase, { FirebaseContext } from './app/firebase'
import AppWithNavigation from './app/Navigation';
import { Provider } from 'react-redux';
import store from './app/redux/store';
import Database, { DatabaseContext } from './app/Database/grocery';

const androidConst = Constants.platform ? Constants.platform.android : null;

const App = () => (
  <Root>
    <Provider store={store}>
      <DatabaseContext.Provider value={new Database()}>
        <FirebaseContext.Provider value={new Firebase()}>
          {androidConst && <View style={styles.statusBar} />}
          <AppWithNavigation />
        </FirebaseContext.Provider>
      </DatabaseContext.Provider>
    </Provider>
  </Root>
);

const styles = StyleSheet.create({
  statusBar: {
    // backgroundColor: '#ffa000',
    // height: Constants.statusBarHeight,
  }
  // rest of the styles
});

export default App;
