Btukfyl

With react-native, I implemented IOS CameraRoll that fetches 300 images from 'Camera Roll' Album on first and keep fetching 300 images whenever scroll reaches the end. Below is My code.

SalmonCameraRoll.js

import React from 'react'



import {

  View,

  Text,

  TouchableHighlight,

  Modal,

  StyleSheet,

  Button,

  CameraRoll,

  Image,

  Dimensions,

  ScrollView,

  FlatList,

} from 'react-native'



import Share from 'react-native-share';

import RNFetchBlob from 'react-native-fetch-blob';



let styles

const { width, height } = Dimensions.get('window')

const fetchAmount = 300;





class SalmonCameraRoll extends React.Component {

  static navigationOptions = {

    title: 'Salmon Camera Roll',

  }



  constructor(props) {

    super(props);

    this.state = {

      photos: ,

      // index: null,

      lastCursor: null,

      noMorePhotos: false,

      loadingMore: false,

      refreshing: false,

    };

    this.tryGetPhotos = this.tryGetPhotos.bind(this);

    this.getPhotos = this.getPhotos.bind(this);

    this.appendPhotos = this.appendPhotos.bind(this);

    this.renderImage = this.renderImage.bind(this);

    this.onEndReached = this.onEndReached.bind(this);

    this.getPhotos({first: fetchAmount, assetType: 'Photos'});

  }



  componentDidMount() {

    this.subs = [

      this.props.navigation.addListener('didFocus', () => {

        this.getPhotos({first: fetchAmount, assetType: 'Photos'});

      }),

    ];

  }



  componentWillUnmount() {

    this.subs.forEach(sub => sub.remove());

  }



  tryGetPhotos = (fetchParams) => {

    if (!this.state.loadingMore) {

      this.setState({ loadingMore: true }, () => { this.getPhotos(fetchParams)})

    }

  }



  getPhotos = (fetchParams) => {

    if (this.state.lastCursor) {

      fetchParams.after = this.state.lastCursor;

    }



    CameraRoll.getPhotos(fetchParams).then(

      r => this.appendPhotos(r)

    )

  }



  appendPhotos = (data) => {

    const photos = data.edges;

    const nextState = {

      loadingMore: false,

    };



    if (!data.page_info.has_next_page) {

      nextState.noMorePhotos = true;

    }



    if (photos.length > 0) {

      nextState.lastCursor = data.page_info.end_cursor;

      nextState.photos = this.state.photos.concat(photos);

      this.setState(nextState);

    }

  }



  onEndReached = () => {

    if (!this.state.noMorePhotos) {

      this.tryGetPhotos({first: fetchAmount, assetType: 'Photos'});

    }

  }



  renderImage = (photo, index) => {

    return (

      <TouchableHighlight

        style={{borderTopWidth: 1, borderRightWidth: 1, borderColor: 'white'}}

        key={index}

        underlayColor='transparent'

        onPress={() => {

            this.props.navigation.navigate('Camera', { backgroundImageUri: photo.node.image.uri })

          }

        } 

      >

        <Image

          style={{

            width: width/3,

            height: width/3

          }}

          representation={'thumbnail'}

          source={{uri: photo.node.image.uri}}

        />

      </TouchableHighlight>

    )

  }



  render() {

    return (

      <View style={styles.container}>

        <View style={styles.modalContainer}>

            <FlatList

              numColumns={3}

              data={this.state.photos}

              initialNumToRender={fetchAmount}

              onEndReachedThreshold={500}

              onEndReached={this.onEndReached}

              refreshing={this.state.refreshing}

              onRefresh={() => this.tryGetPhotos({first: fetchAmount, assetType: 'Photos'})}

              keyExtractor={(item, index) => index}

              renderItem={({ item, index }) => (

                this.renderImage(item, index)

              )}

            />

        </View>

      </View>

    )

  }

}



styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center'

  },

  modalContainer: {

    // paddingTop: 20,

    flex: 1,

  },

  scrollView: {

    flexWrap: 'wrap',

    flexDirection: 'row'

  },

  shareButton: {

    position: 'absolute',

    width,

    padding: 10,

    bottom: 0,

    left: 0

  }

})



export default SalmonCameraRoll

Problem is that in circumstance of a lot of images(about 10000 images) in 'Camera Roll' album, each image component was loaded so slowly that it was also loaded too slowly when scrolling accordingly.

In other famous apps like Facebook or Instagram, it loads all images quickly at once without fetching whenever scroll reaches end.

How can i make my Image component load fast? Or best of all(if possible), how can i make my CameraRoll load all images quickly at once without fetching whenever scroll reaches end?

Thank you.