React Native image loading is too slow

Issue

I get the 22 images from the react-native-image-filter. These images are base64 format. Here is the code of the render function.

  render() {
    const { images, imageIndex } = this.state;
    return (
      <View style={styles.container}>
        {images?.length > 21 && <View style={{ flex: 1 }}>
          <Image resizeMode={'contain'} source={{ uri: `data:image/png;base64,${images[imageIndex]?.base64}` }} style={{ width: 400, flex: 1 }} />
        </View>}
        <View style={{ height: 140, paddingVertical: 20 }}>
          <ScrollView horizontal>
            {images?.map((item, index) => {
              return (
                <View style={[{ marginHorizontal: 10 }, styles.center]}>
                  <Image
                    resizeMode={'cover'}
                    key={index.toString()}
                    onPress={() => this.setState({ imageIndex: index })}
                    source={{ uri: `data:image/png;base64,${item.base64}` }}
                    style={{ width: 80, height: 100, borderRadius: 8 }} />
                </View>
              )
            })}
          </ScrollView>
        </View>
      </View>
    );
  }

Everything is good, but the image loading is too slow. How can I increase the loading speed?

Solution

The problem is most definitely in Base64-encoded images.

The slowdown is because React Native has to pass quite long Base64 strings back and forth through the Native<->JS bridge, plus native platform has to parse Base64 and convert it into the correct memory representation for the native image view. Many optimizations provided by the platform are therefore missed.

Ideally, all image manipulations should happen on the native platform, and none of the actual image data should even touch JS.

I'd advise to try these two libraries for more performant filter implementations:

• https://github.com/GregoryNative/react-native-gl-image-filters
• https://github.com/iyegoroff/react-native-image-filter-kit

Answered By - ivanmoskalev