I have an app that's fetching a JSON array and array mapping them. There are two nested array maps in the original map.

There are 75 separate results in the array - which contain 6 objects and 1 array. So on average there are around 1800 elements to map.

The fetch takes around 2 seconds to complete and the array mapping can take anywhere between 8-10 secs.

Is there any way I can improve on this speed?

```
trains.results.services.map((traininfo,index) => (

<ScrollView refreshControl={
<RefreshControl refreshing={this.state.refreshing} onRefresh= {this._onRefresh.bind(this)} /> }  key={traininfo.std+index.toString()} style={styles.slide1}>

<View key={'row'+index.toString()}  style={{flex: 1, flexDirection: 'row'}}>

{traininfo.platform===null ? (
<Text key={traininfo.platform+index.toString()} style={styles.platform}>Platform _</Text>
          ) : (
 <Text key={traininfo.platform+index.toString()} style={styles.platform}>Platform {traininfo.platform}</Text>
          )}  

{traininfo.etd==='On time' || traininfo.etd==='Cancelled' || traininfo.etd==='Delayed' ? (
<Text key={traininfo.etd+index.toString()} style={styles.time}>{traininfo.etd}</Text>
          ) : (
<Text key={traininfo.etd+index.toString()} style={styles.time}>Exp: {traininfo.etd}</Text>
          )}

         </View>

         {Object.keys(traininfo.destination).length>1 ? (

           traininfo.destination.map((dest,index) => (

          <View key={'cont'+index.toString()}>
             <View key={'row1'+index.toString()} style={{flex: 1, flexDirection: 'row'}}>
             {index===0 ? (
               <Text key={traininfo.std+index.toString()} style={styles.std}>{traininfo.std}</Text>
               ) : (<Text key={traininfo.std+index.toString()} style={styles.std1}>{traininfo.std}</Text>)}

             <Text style={styles.destination}>{dest.locationName}</Text>
             </View>
             <View key={'row11'+index.toString()} style={{flex: 1, flexDirection: 'row'}}>    
             {dest.via !== null ? (
             <Text key={dest.via+index.toString()} style={styles.via}>{dest.via}</Text>
            ) : (null)}
            </View>
             </View>

            ))

          ) : (

          <View>
           <View key={'row1'+index.toString()} style={{flex: 1, flexDirection: 'row'}}>
           <Text key={traininfo.std+index.toString()} style={styles.std}>{traininfo.std}</Text>
          <Text key={traininfo.destination[0].locationName+index.toString()}  style={styles.destination}>{traininfo.destination[0].locationName}</Text>  
          </View>

           <View key={'row11'+index.toString()} style={{flex: 1, flexDirection: 'row'}}>    
             {traininfo.destination[0].via !== null ? (
             <Text key={traininfo.destination[0].via+index.toString()} style={styles.via}>{traininfo.destination[0].via}</Text>
            ) : (null)}
            </View>

            </View>

          )}

           {traininfo.delayReason || traininfo.cancelReason  ? (

          <View key={'delay'+index.toString()} style={{flex: 1, flexDirection: 'row'}}>

          {traininfo.delayReason !== "undefined" ? (
            <Text key={'delayReason1'+index.toString()} style={{color:'#fff',fontFamily:'Lato-Medium', fontSize:16,marginBottom:0,marginTop:10}}>{traininfo.delayReason}</Text>
            ) : (null)}

           {traininfo.cancelReason !== "undefined" ? (
            <Text key={'delayReason2'+index.toString()} style={{color:'#fff',fontFamily:'Lato-Medium', fontSize:16,marginBottom:0,marginTop:10}}>{traininfo.cancelReason}</Text>
            ) : (null)}

         </View>             

          ) : (
          null
          )}

           <View key={'length'+index.toString()} style={{flex: 1, flexDirection: 'row'}}>    
             {traininfo.length !== null ? (
             <Text key={traininfo.length+index.toString()} style={styles.length}>{traininfo.length} Car Train</Text>
            ) : (null)}
          </View>   

        <View key={'row2'+index.toString()} style={{flex: 1, flexDirection: 'row'}}>
         <Text key={'calling'+index.toString()} style={{color:'#fff',fontFamily:'Lato-Bold', fontSize:18,marginBottom:0,marginTop:10}}>Callling at:</Text>
         </View>

         <View key={'dest'+index.toString()} style={{marginBottom:40,marginTop:10}}>

         <View key={'destview'+index.toString()} style={{backgroundColor:'black'}}>

               {traininfo.dest[0].map((stops,index) => (

                 <View key={stops.crs}>

              {index===Object.keys(traininfo.dest[0]).length-1 ? (
              <Image key={stops.crs+'1'}  source={require('../Images/dest.png')} style={{width:22,height:22,position:'absolute',top:8,zIndex:9999}}/>
            ) : (

               <Image key={stops.crs+'2'} source={require('../Images/dest1.png')} style={{marginLeft:7,width:30,height:52,position:'absolute',top:15,zIndex:9999}}/>
            ) }

              {stops.et==='On time' ? (

             <View key={stops.crs+'3'}>
             <Text key={stops.crs+'4'} style={{color:'#fff',fontSize:20,fontFamily:'Lato-Medium',marginTop:4,paddingLeft:37}}>{stops.loc}</Text>
             <Text key={stops.crs+'5'} style={{fontSize:14,color:'#fff001',marginLeft:37}}>{stops.st}</Text>
             </View>

            ) : (

            <View key={stops.crs+'6'}>
            <Text key={stops.crs+'7'} style={{color:'#fff',fontSize:20,fontFamily:'Lato-Medium',marginTop:4,paddingLeft:37}}>{stops.loc}</Text>
             {stops.et==='Cancelled' || stops.et==='Delayed'  ? (
               <Text key={stops.crs+'8'} style={{fontSize:14,color:'#fff001',marginLeft:37}}>{stops.st}<Text style={{fontSize:14,color:'#33b2f4',marginLeft:37}}>  {stops.et}</Text></Text>
              ) : (
               <Text key={stops.crs+'9'} style={{fontSize:14,color:'#fff001',marginLeft:37}}>{stops.st}<Text style={{fontSize:14,color:'#33b2f4',marginLeft:37}}>  Exp: {stops.et}</Text></Text>
              ) }

             </View>
            )}

              </View>

              ))}

               {traininfo.dest.length===2 ? (

                    traininfo.dest[1].map((stops,index) => (

                                 <View key={stops.crs}>

              {index===Object.keys(traininfo.dest[1]).length-1 ? (
              <Image key={stops.crs+'1'}  source={require('../Images/dest.png')} style={{width:22,height:22,position:'absolute',top:8}}/>
            ) : (

               <Image key={stops.crs+'2'} source={require('../Images/dest1.png')} style={{marginLeft:7,width:30,height:52,position:'absolute',top:15}}/>
            ) }

              {stops.et==='On time' ? (

             <View key={stops.crs+'3'}>
             <Text key={stops.crs+'4'} style={{color:'#fff',fontSize:20,fontFamily:'Lato-Medium',marginTop:4,paddingLeft:37}}>{stops.loc}</Text>
             <Text key={stops.crs+'5'} style={{fontSize:14,color:'#fff001',marginLeft:37}}>{stops.st}</Text>
             </View>

            ) : (

            <View key={stops.crs+'6'}>
            <Text key={stops.crs+'7'} style={{color:'#fff',fontSize:20,fontFamily:'Lato-Medium',marginTop:4,paddingLeft:37}}>{stops.loc}</Text>
             {stops.et==='Cancelled' || stops.et==='Delayed'  ? (
               <Text key={stops.crs+'8'} style={{fontSize:14,color:'#fff001',marginLeft:37}}>{stops.st}<Text style={{fontSize:14,color:'#33b2f4',marginLeft:37}}>  {stops.et}</Text></Text>
              ) : (
               <Text key={stops.crs+'9'} style={{fontSize:14,color:'#fff001',marginLeft:37}}>{stops.st}<Text style={{fontSize:14,color:'#33b2f4',marginLeft:37}}>  Exp: {stops.et}</Text></Text>
              ) }

             </View>
            )}

              </View>

                ))

                ) : (null)}

         </View>
         <Text style={{color:'#fff',fontSize:22,marginTop:20, fontFamily:'Lato-Bold'}}>{traininfo.operator}</Text>
         </View>

      </ScrollView>

        ))

```