App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {GoogleSignin} from 'react-native-google-signin';
import codePush from "react-native-code-push";
import { Root} from 'js/Navigators';
import { ApolloProvider } from 'react-apollo';
import client from 'js/apolloClient';


let codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_RESUME };
class App extends Component{



  constructor(props) {
    super(props);
    this.state = {
        showDownloadingModal: false,
        showInstalling: false,
        downloadProgress: 0
    };
  }


  componentDidMount(){
    
    codePush.sync(
      {updateDialog: true, installMode: codePush.InstallMode.ON_APP_RESUME},
      status => {
          switch (status) {
              case codePush.SyncStatus.DOWNLOADING_PACKAGE:
                  this.setState({showDownloadingModal: true});
                  break;
              case codePush.SyncStatus.INSTALLING_UPDATE:
                  this.setState({showInstalling: true});
                  break;
              case codePush.SyncStatus.UPDATE_INSTALLED:
                  this.setState({showDownloadingModal: false});
                  break;
              default:
                  break;
          }
      },
      ({receivedBytes, totalBytes}) => {
          this.setState({downloadProgress: receivedBytes / totalBytes * 100});
      }
    );

    GoogleSignin.hasPlayServices({autoResolve: true})
    .then(() => {
        
        GoogleSignin.configure({
            scopes:['profile','email'],
            //iosClientId: "ADD_IOS_CLIEND_ID"
        })
            .then(() => {
                
            })
            .catch((err) => {
                console.log('SIGNIN', err);
            })
            .done();
    })
    .catch((err) => {
        console.log('SIGNIN', err);
    })
    .done();
  }

  

  render() {
    if (this.state.showDownloadingModal) {
      return (
        <ApolloProvider client={client}>
          <View
              style={{ backgroundColor: 'white' }}
          >
              <View style={styles.container}>
                  
                      <View
                          style={{
                            flex: 1,
                            alignSelf: "stretch",
                            justifyContent: "center",
                            padding: 20
                          }}
                      >
                          {this.state.showInstalling
                              ? <Text
                                  style={{
                                    color: "#10acbd",
                                    textAlign: "center",
                                    marginBottom: 15,
                                    fontSize: 15
                                  }}
                              >
                                  Installing update...
                              </Text>
                              : <View
                                  style={{
                                      flex: 1,
                                      alignSelf: "stretch",
                                      justifyContent: "center",
                                      padding: 20
                                    }}
                              >
                                  <Text
                                      style={{
                                        color:'#10acbd',
                                        textAlign: "center",
                                        marginBottom: 15,
                                        fontSize: 15
                                      }}
                                  >
                                      Downloading update...
                                      {" "}
                                      {`${parseInt(this.state.downloadProgress, 10)} %`}
                                  </Text>
                              </View>}
                      </View>
              </View>
          </View>
        </ApolloProvider>
      );
    }
    else{
      return (
        <ApolloProvider client={client}>
            <View style={styles.container}>
                <Root/>
            </View>
        </ApolloProvider>
      );
    } 
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFF',
  }
});


export default codePush(codePushOptions)(App)