App.js

import {AppLoading} from 'expo'
import {Asset} from 'expo-asset'
import * as Font from 'expo-font'
import React, {useState} from 'react'
import {Platform, StatusBar, StyleSheet, View} from 'react-native'
import {Ionicons} from '@expo/vector-icons'
import {ApolloClient} from 'apollo-client'
import {ApolloProvider} from '@apollo/react-hooks'
import {HttpLink} from 'apollo-link-http'
import {InMemoryCache} from 'apollo-cache-inmemory'

import {Provider as AuthProvider} from 'context/AuthContext'
import {Provider as SignupProvider} from 'context/SignupContext'
import {setNavigator} from 'helpers/navigationRef'
import AppNavigator from './navigation/AppNavigator'

const client = new ApolloClient({
    // uri: 'http://localhost:3000/graphql',
    link: new HttpLink({
        uri: 'http://2b1ee429.ngrok.io/graphql', // 'http://localhost:3000/graphql',
        // headers: {
        //   authorization: localStorage.getItem('userInfo') ? localStorage.getItem('userInfo').token : null,
        // }
    }),
    cache: new InMemoryCache()
})

export default function App(props) {
    const [isLoadingComplete, setLoadingComplete] = useState(false)

    if (!isLoadingComplete && !props.skipLoadingScreen) {
        return (
            < AppLoading
        startAsync = {loadResourcesAsync}
        onError = {handleLoadingError}
        onFinish = {()
    =>
        handleFinishLoading(setLoadingComplete)
    }
        />
    )
    } else {
        return (
            < ApolloProvider
        client = {client} >
            < View
        style = {styles.container} >
            {Platform.OS === 'ios' && < StatusBar barStyle = "default" / >}
            < AuthProvider >
            < SignupProvider >
            < AppNavigator
        ref = {navigator
    =>
        {
            setNavigator(navigator)
        }
    }
        />
        < /SignupProvider>
        < /AuthProvider>
        < /View>
        < /ApolloProvider>
    )
    }
}

async function loadResourcesAsync() {
    await Promise.all([
        Asset.loadAsync([
            require('./assets/images/robot-dev.png'),
            require('./assets/images/robot-prod.png'),
        ]),
        Font.loadAsync({
            // This is the font that we are using for our tab bar
            ...Ionicons.font,
            // We include SpaceMono because we use it in HomeScreen.js. Feel free to
            // remove this if you are not using it in your app
            'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
        }),
    ])
}

function handleLoadingError(error) {
    // In this case, you might want to report the error to your error reporting
    // service, for example Sentry
    console.warn(error)
}

function handleFinishLoading(setLoadingComplete) {
    setLoadingComplete(true)
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
})