React Native Scroll Lag on Horizontal FlatList

Question

I'm starting to learn react native by building a Reddit Client. In one component, I load photos from Reddit and display them in a horizontal FlatList, but as I scroll through the list, the FPS drops significantly.

Even when I integrate "react-native-expo-image-cache" I experience the same results. I was thinking of using "react-native-fast-image" but I don't want to detach from Expo in an effort to make the build process easy and to avoid installing Android Studio or XCode.

I'm testing with the expo app on my Nexus 6P

Is there any way to improve my performance? Thanks!

Here is my source code: (https://snack.expo.io/BklplJQIz)

import React, { Component } from "react";
import { View, Image, FlatList } from "react-native";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { content: [] };
  }
  componentDidMount() {
    fetch("https://www.reddit.com/r/pics/.json")
      .then(response => response.json())
      .then(d => {
        this.setState({
          content: d.data.children.map(function(c) {
            return {
              url: c.data.preview.images["0"].source.url,
              height: c.data.preview.images["0"].source.height,
              width: c.data.preview.images["0"].source.width,
              title: c.data.title
            };
          })
        });
      })
      .catch(error => {
        console.error(error);
      });
  }
  render() {
    return (
      <FlatList
        style={{
          marginTop: 100,
          marginHorizontal: 8
        }}
        data={this.state.content}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        keyExtractor={(item, index) => index}
        renderItem={({ item }) => (
          <View
            style={{
              height: 165
            }}
          >
            <Image
              source={{ uri: item.url }}
              style={{
                width: item.width / (item.height / 165),
                height: 165,
                marginRight: 8,
                borderRadius: 5
              }}
            />
            <View
              style={{
                position: "absolute",
                flex: 1,
                backgroundColor: "rgba(0,0,0,.4)",
                top: 0,
                left: 0,
                bottom: 0,
                right: 8,
                borderRadius: 5
              }}
            >
            </View>
          </View>
        )}
      />
    );
  }
}

Answer 1

I was making gallery using FlatList, some of images were high resolutions and I noticed the scroll lag and FPS drops significantly; even app crash sometime. I tried different libraries too but nothing work. Then I used React Native Image with resizeMethod set to resize. Try it you will fine huge difference in FPS.

Updated I will recommend to use FastImage insead of React Native Image.