app.js

App.js

import React, { Component } from 'react';
import { StatusBar, Platform } from 'react-native';
import { Provider, connect } from 'react-redux';
import { ThemeProvider } from 'styled-components';
import styled from 'styled-components/native';
import { FormattedWrapper } from 'react-native-globalize';
import firebase from 'firebase';
import messages from './Messages';
import store from './store';
import { colors } from './utils/constants';
import { firebaseConfig } from './utils/firebase';
import LoginScreen from './screens/LoginScreen';
import { setUser } from './actions/setUser';
import AppContainer from './Navigator';
import UserWelcomeScreen from './screens/UserWelcomeScreen';

const Root = styled.View`
  flex: 1;
  background-color: ${props => props.theme.WHITE};
`;

const StatusBarAndroid = styled.View`
  height: 24;
  background-color: ${props => props.theme.WHITE};
`;

class RootContainer extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoggedIn: null
    }
  }
  componentWillMount() {
    firebase.initializeApp(firebaseConfig)
    firebase.auth().onAuthStateChanged( (user) => {
      if (user) {
        this.setState({
          isLoggedIn: true
        }, () =>{
          this.props.onSetUser(user)
        })
      } else {
        this.setState({
          isLoggedIn: false
        })
      }
    })
  }
  render() {    
    return (
      <ThemeProvider theme={colors}>
        <FormattedWrapper locale={this.props.state.Language.language} messages={messages}>
          <Root>
            <StatusBar barStyle='light-content' backgroundColor='transparent' translucent />
            { Platform.OS === 'android' && Platform.Version >= 20 ? <StatusBarAndroid /> : null }
            {
              this.state.isLoggedIn ? 
                <UserWelcomeScreen />
              : <LoginScreen />
            }
          </Root>
        </FormattedWrapper>
      </ThemeProvider>
    );
  }
}

const mapStateToProps = (state) => ({
  state,
});

const mapDispatchToProps = dispatch => ({    
  onSetUser: (user) => dispatch(setUser(user)), 
  
})

const ConnectedRootContainer = connect(mapStateToProps, mapDispatchToProps)(RootContainer);

class App extends Component {
  render() {
    return (      
        <Provider store={store}>
          <AppContainer>
		<ConnectedRootContainer />
          </AppContainer>
        </Provider>
     
    );
  }
}

export default App;