title: Load page without problems
body: <p>I am making app mobile app on react native expo. And i have one big problem - loading content. It is taking min 4 second for each page. And i want to make loading not 4 second but 1. How i can do this. I tried to make my code simplier, and it helped, but it is still taking a lot of time for loading content. How can I optimize the code
  Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React, { Component } from 'react';
  import { StyleSheet, View, Button, Image, Text, TouchableOpacity, ScrollView, SafeAreaView, ActivityIndicator } from 'react-native';
  import { Header } from 'react-navigation';
  import { createStackNavigator, createAppContainer } from 'react-navigation';
  import Icon from 'react-native-vector-icons/Ionicons'
  
  import CoursesPlan from '../components/CoursesPlan'
  import CoursesPlanView from '../components/CoursesPlanView'
  
  class HtmlPlan extends Component {
    state = {
      showIndicator: true,
         fontLoaded: false
    }
    closeActivityIndicator = () =&gt; {
      this.setState({ showIndicator: false });
    }
  
      delay = () =&gt; {
        const that = this;
        return new Promise(function (resolve, reject) {
          setTimeout(() =&gt; {
            resolve();
          }, 1000)
        });
      }
  
      componentDidMount = () =&gt; {
        this.delay()
          .then(() =&gt; this.closeActivityIndicator())
          .catch(e =&gt; console.log(e))
  
  
      }
  
  async componentDidMount() {
      await Expo.Font.loadAsync({
        'OpenSans-R': require('../../assets/fonts/OpenSans-Regular.ttf'),
     });
     this.setState({ fontLoaded: true });
  
   }
  
  
  
    render() {
      return (
  
        &lt;SafeAreaView&gt;
          {this.state.showIndicator ? (
            &lt;View style={{flex: 1, paddingTop: 20}}&gt;
              &lt;ActivityIndicator /&gt;
            &lt;/View&gt;
          ) : (
  
  
            &lt;ScrollView&gt;
            &lt;View style={styles.MainContainer}&gt;
  
  
  
  
            &lt;CoursesPlanView
              numTopBox={styles.numTopBox}
              viewStyleBox={styles.ViewStyle}
            topHomeCourses={styles.topHomeCourses}
      number="1"
      title="Комментарии"
            /&gt;
  
  
  &lt;CoursesPlan
   styleTextBox={styles.textStyleBox}
   styleBox={styles.ViewStyleBox}
  style={styles.topHomeCourses}
  number="1"
  title="text1"
  /&gt;
  &lt;CoursesPlan
   styleTextBox={styles.textStyleBox}
   styleBox={styles.ViewStyleBox}
  style={styles.topHomeCourses}
  number="2"
  title="text2"
  /&gt;
  
  
  &lt;CoursesPlanView
    numTopBox={styles.numTopBox}
    viewStyleBox={styles.ViewStyle}
  topHomeCourses={styles.topHomeCourses}
  number="1"
  title="Комментарии"
  /&gt;
  
  
  &lt;CoursesPlan
  styleTextBox={styles.textStyleBox}
  styleBox={styles.ViewStyleBox}
  style={styles.topHomeCourses}
  number="1"
  title="text3"
  /&gt;
  &lt;CoursesPlan
  styleTextBox={styles.textStyleBox}
  styleBox={styles.ViewStyleBox}
  style={styles.topHomeCourses}
  number="2"
  title="text4"
  /&gt;
  
  
  &lt;CoursesPlanView
    numTopBox={styles.numTopBox}
    viewStyleBox={styles.ViewStyle}
  topHomeCourses={styles.topHomeCourses}
  number="1"
  title="text5"
  /&gt;
  
  
  &lt;CoursesPlan
  styleTextBox={styles.textStyleBox}
  styleBox={styles.ViewStyleBox}
  style={styles.topHomeCourses}
  number="1"
  title="text6"
  /&gt;
  &lt;CoursesPlan
  styleTextBox={styles.textStyleBox}
  styleBox={styles.ViewStyleBox}
  style={styles.topHomeCourses}
  number="2"
  title="text7"
  /&gt;
  
  &lt;CoursesPlanView
    numTopBox={styles.numTopBox}
    viewStyleBox={styles.ViewStyle}
  topHomeCourses={styles.topHomeCourses}
  number="1"
  title="text8"
  /&gt;
  
  
  &lt;CoursesPlan
  styleTextBox={styles.textStyleBox}
  styleBox={styles.ViewStyleBox}
  style={styles.topHomeCourses}
  number="1"
  title="text9"
  /&gt;
  &lt;CoursesPlan
  styleTextBox={styles.textStyleBox}
  styleBox={styles.ViewStyleBox}
  style={styles.topHomeCourses}
  number="2"
  title="text10"
  /&gt;
  
  
  &lt;CoursesPlanView
    numTopBox={styles.numTopBox}
    viewStyleBox={styles.ViewStyle}
  topHomeCourses={styles.topHomeCourses}
  number="1"
  title="text11"
  /&gt;
  
  
  &lt;CoursesPlan
  styleTextBox={styles.textStyleBox}
  styleBox={styles.ViewStyleBox}
  style={styles.topHomeCourses}
  number="1"
  title="text12"
  /&gt;
  &lt;CoursesPlan
  styleTextBox={styles.textStyleBox}
  styleBox={styles.ViewStyleBox}
  style={styles.topHomeCourses}
  number="2"
  title="text13"
  /&gt;
  
  
  &lt;CoursesPlanView
    numTopBox={styles.numTopBox}
    viewStyleBox={styles.ViewStyle}
  topHomeCourses={styles.topHomeCourses}
  number="1"
  title="text14"
  /&gt;
  
  
  &lt;CoursesPlan
  styleTextBox={styles.textStyleBox}
  styleBox={styles.ViewStyleBox}
  style={styles.topHomeCourses}
  number="1"
  title="Text15"
  /&gt;
  &lt;CoursesPlan
  styleTextBox={styles.textStyleBox}
  styleBox={styles.ViewStyleBox}
  style={styles.topHomeCourses}
  number="2"
  title="Тext16"
  /&gt;
  
  
  
  
  
  
            &lt;/View&gt;
                        &lt;/ScrollView&gt;
  
  
          )}
        &lt;/SafeAreaView&gt;
  
  
  
  
  
  
  
      );
    }
  }
  
  const styles = StyleSheet.create({
    MainContainer: {
      padding:10
    },
  
      topHomeCourses :{
            fontFamily: 'OpenSans-R',
            fontSize:16,
            width:'80%'
      },
  
  ViewStyle :{
    flexDirection: 'row',
                       justifyContent: 'space-between',
                       borderColor:'#dddddd',
                      borderWidth:1,
                      padding:10,
                      borderTopRightRadius:4,
                borderTopLeftRadius:4
  },
  ViewStyleBox :{
    flexDirection: 'row',
       justifyContent: 'space-between',
        borderColor:'#dddddd',
        borderBottomWidth:1,
          borderLeftWidth:1,
              borderRightWidth:1,
        padding:10,
        borderBottomRightRadius:4,
  borderBottomLeftRadius:4
  },
  textStyleBox :{
    fontFamily: 'OpenSans-R', marginRight:3, marginLeft:28, fontSize:16
  },
  numTopBox :{
     fontFamily: 'OpenSans-R', marginRight:5, marginLeft:5, fontSize:17
  }
  
  });
  
  
  export default createStackNavigator(
    {
      Main: {
        screen: HtmlPlan,
        navigationOptions: {
          header: null,
        },
      },
      CoursesPlan: {
        screen: CoursesPlan,
      },
      CoursesPlanView: {
        screen: CoursesPlanView,
      },
    },
    {
      initialRouteName: 'Main',
    }
  );</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried loop but it did not helped</p>