3

We are displaying product cards in a list, we tried flatlist, recyclerlistview and finally flashlist from shopify, although the scroll performance has improved but its not smooth on all devices. What we noticed is The FlashList is rendering all elements in the initial render even though they are not in view,Also note that the FlashList is wrapped inside a <Animated.ScrollView/> from react native reanimated 2. Also our array is a nested array, rendering FlashList inside FlashList's, The main issue is when we are applying some filter and changing the datasource value the rerender is taking almost 3s and the JS thread is seems to be hanging, This issue happens only for large data sets. We are kind of stuck on this issue and thinking about writing our own native ui component to render list. I have attached the code, please suggest any tweaks or changes we can do to improve performance.

<FlashList
              showsVerticalScrollIndicator={false}
              contentContainerStyle={{
                backgroundColor: Colors.bg_gray,
              }}
              data={menu}
              estimatedItemSize={height}
              scrollEventThrottle={16}
              renderItem={renderContainerFlatList}
              keyExtractor={item => item?._id[0]?.name}
            />

  const renderContainerFlatList = useCallback(({item, index}) => {
    return (
      <View
        
        onLayout={handleOnLayout.bind(this, index)}
        style={{
          backgroundColor: Colors.bg_gray,
          marginTop: 35,
        }}>
        <Text
          style={[
            Typography.default[700],
            Typography.default.headerSmall,
            Typography.default.black,
            {
              marginTop: 10,
              paddingHorizontal: 10,
              padding: 10,
              backgroundColor: '#fff',
            },
          ]}>
          {item?._id[0]?.name} ({item?.products?.length})
        </Text>

        {item?.products?.length > 0 && (
         
           <FlashList
            showsVerticalScrollIndicator={false}
            data={item?.products}
            renderItem={renderFlatList}
            estimatedItemSize={0.4 * width + 50}
          />
        )}
      </View>
    );
  }, []);

const renderFlatList = ({item, index}) => {
    return <ItemCard data={item?.product} />;
  };

Also is it due to our rendering component itself, we do some computation in the component and everycomponent has its own Modalize and Modal component, Is it causing a memory issue ?

X _jagan_ X
  • 83
  • 1
  • 6
  • 1
    it looks like you are rendering a vertical flashlist inside a vertical flash list which is not a good practice you can use section list instead from flashlist to achieve what you want – Ashwith Saldanha May 04 '23 at 10:25
  • will give it a try, but we skipped SectionList because of performance but it is worth trying, thank you. – X _jagan_ X May 04 '23 at 10:38
  • you can checkout Flashlist by Shopify which has more performance than FlatList – Ashwith Saldanha May 06 '23 at 14:04
  • I am using flashlist, and now i am rendering only a single list and the performance is much better and smooth, but on low end devices even on release i get a lot of blank spaces when scrolling fast which is tradeoff, But that device uses snapdragon 625 chipset which i read on a github issue that flashlist should work fine on devices anything above snapdragon 625 and it does work better, But react native has some serious problems in rendering large list with complex ui and also uses lot of memory, We are considering rewriting the whole app natively because performance is a must for us. – X _jagan_ X May 06 '23 at 14:50
  • you guys can do two things. 1. use native list components like UICollectionview and Recycler view to write code in native and the use them as a React native component, 2. use react-native-navigation and create native screens only for the cases were you guys want fast list rendering ither places you can use react native so the development cycle will reduce a little bit, 3. create native apps so that you get performance every were – Ashwith Saldanha May 06 '23 at 15:48

0 Answers0