How do I avoid slow a tab change with a large render function on iOS?

Expo SDK
1

I’m trying to create a screen with approximately 25 items on cards. Every card contains a small image (less than 20kb) and a couple of words of text. The card has some shadow. Generally, the screen is slow to load every time you open the app and try to change the tab to this screen.

I have tried

  • Change the list to a flatlist to import the details from a local JSON file. This did not help.
  • Change the render function to wait until the data was loaded from the local JSON file. This did not help.
  • Preload/Cache images in my app.js. This did not help.

Now I have a very slow tab change and it does not show any feedback for the user.

How would you go about solving this?

async componentDidMount() {
    const linkData = await JsonService.getLinks();
    this.setState({ data: linkData });
}

Render function:

render() {
    return (
      <View style={styles.container}>
        <ScrollView >
          {this.state.data.length > 0 && (  
          <View>
            <IntroComponent text="Items"></IntroComponent>
            <FlatList
              data={this.state.data}
              numColumns="2"
              keyExtractor={item => item.id.toString()}
              renderItem={this._renderItem}
            />
          </View>
          )}
        </ScrollView>
      </View>
    );
  }

Item:

_renderItem = ({item}) => (
    <View style={styles.item}>
      <TouchableWithoutFeedback onPress={() => this.navigateToMushrooms(item)}>
      <View>
          <IconCard 
            id={item.id}
            title={item.title}
            subtitle={item.subtitle}
            imageUrl={item.icon}
          />
        </View>
      </TouchableWithoutFeedback>
    </View>
  );

Please provide the following:

  1. SDK Version:
"dependencies": {
    "@expo/samples": "2.1.1",
    "crypto-js": "^3.1.9-1",
    "expo": "^34.0.3",
    "expo-asset": "^6.0.0",
    "expo-file-system": "^6.0.2",
    "expo-font": "^6.0.1",
    "lodash": "^4.17.11",
    "react": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "react-navigation": "^2.18.2"
  }
  1. Platforms(ios/android/both):
    Only happens on iOS.
2

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.