title: React Native AppLoading - how to stay on loading screen till local JSON file is fully imported?
body: <p>In React Native, I'm loading in a local JSON file with data as an array via import (and then shuffling the array), but would somehow like this to happen in the AppLoading stage, not after the AppLoading, when I'm trying to render the main app. </p>
  
  <p>In the current state, the App takes too long to read in the local JSON file AFTER the App Loading screen, not DURING (i have 'intro sliders' after the app loading screen, but before the main body of the app. Is that possible to do?</p>
  
  <p>Here is my code (abbreviated):</p>
  
  <pre><code>  import React, { Component } from 'react';
    import {
      StyleSheet,
      Text,
      View,
      TouchableOpacity,
      Image,
      Dimensions,
      Alert
    } from 'react-native';
    import { Font } from 'expo';
    import CardStack, { Card } from 'react-native-card-stack-swiper';
    import AppIntroSlider from 'react-native-app-intro-slider';
  
    import imagedata from './assets/cleaned_imagesdata.json'; 
    //Here is where I'm importing in data from a local JSON
  
  
    var shuffle = require('shuffle-array'),
      collection = imagedata;
  
    shuffle(collection);
  
    export default class App extends Component&lt;{}&gt; {
      constructor(props) {
        super(props);
        this.state = {
          fontLoaded: false,
          showRealApp: false
        };
      }
  
      async componentDidMount() {
        await Font.loadAsync({
          'proxima-nova': require('./assets/fonts/proxima-nova-soft-light-webfont.ttf'),
          'proxima-nova-bold': require('./assets/fonts/ProximaNovaBold.ttf')
        });
  
        this.setState({fontLoaded: true});
      }
  
      _onDone = () =&gt; {
        this.setState({showRealApp: true});
      };
  
      render() {
  
        if (!this.state.fontLoaded) {
          return &lt;Expo.AppLoading /&gt;; //THIS IS THE PART
        }
  
        if (this.state.showRealApp) {
          const contents = collection.map((item, index) =&gt; {
            return (
                &lt;Card key={index}&gt;
                  ....
                &lt;/Card&gt;
            )
          });
  
          return (
              &lt;View style={{flex:1}}&gt;
               ....
               {contents}
               ....
              &lt;/View&gt;
          );
        } else {
          return &lt;AppIntroSlider slides={intro_slides} onDone={this._onDone}/&gt;;
        }
      }
    }
  </code></pre>
  
  <p>I've looked at <a href="https://docs.expo.io/versions/latest/guides/preloading-and-caching-assets.html" rel="nofollow noreferrer">the docs for Preloading assets in Expo's AppLoading component</a> and tried mimicking by having <code>_loadAssetsAsync()</code> set the JSON file/array to a variable, but this makes the loading take much longer. Is there a better way to 'read in the local JSON file as an array and preload/cache it'? </p>
  
  <pre><code>    async _loadAssetsAsync() {
        const collection = imagedata;
        await Promise.all([collection]);
      }
  
   render() {
  
        if (!this.state.fontLoaded || !this.state.isReady) {
          return &lt;Expo.AppLoading
            startAsync={this._loadAssetsAsync}
            onFinish={() =&gt; this.setState({ isReady: true })}
            onError={console.warn}
          /&gt;;
        }
        ....
  </code></pre>