React Native Flatlist header re-rendering when scroll

Question

I am new to React Native and I am having problems with the header in a FlatList. The header re-renders as soon as I start to scroll, this creates a flickering effect on the images I have in the header. I have been searching for an answer everywhere but I have not find a posible solution.

¿how could I configure it to stop re-rendering the header when scrolling the list?

....

  const Item = ({ title }) => {
    return (
      <View style={styles.card}>
        <Text style={styles.title}>{title}</Text>
      </View>
    );
  };

  const listHeader = () => {
    const categoriesButtons = categories.map(cat => (
      <CategoryButton
        text={cat.name}
        icon={cat.code}
        key={cat.code}
        onPress={() => {
          //@Todo logic to filter promotions accordingly with the category pressed
        }}
      />
    ));
    return (
      <View>
        <View style={styles.filtersContainer}>
          <ImageBackground
            source={images.bgShape}
            style={{ width: '100%', height: 140 }}
            resizeMode="stretch"
          >
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              {categoriesButtons}
            </ScrollView>
          </ImageBackground>
        </View>

        <View style={styles.breadcrumbContainer}>
          <Breadcrumbs navigation={navigation} stack={routes} />
        </View>

        <View style={styles.titleContainer}>
          <Text style={sharedStyles.titleText} id="main-title">
            ¡{totalOfPromotions} promociones activas en Medellín!
          </Text>
        </View>
      </View>
    );
  };

  return (
    <LinearGradient
      colors={[Colors.BG_START, Colors.BG_END]}
      style={styles.mainContainer}
    >
      {loading ? (
        <ActivityIndicator size="large" color="#000000" />
      ) : (
        <FlatList
          data={promos}
          renderItem={({ item }) => <Item title={item.title} />}
          keyExtractor={(item, index) => index.toString()}
          ListHeaderComponent={listHeader}
          showsVerticalScrollIndicator={false}
          onEndReached={showPromos}
          onEndThreshold={0.7}
        />
      )}
    </LinearGradient>
  );
};

Answer 1

listHeader() function is being called more than once because in Flatlist tag should be called as

 <FlatList
          data={promos}
          renderItem={({ item }) => <Item title={item.title} />}
          keyExtractor={(item, index) => index.toString()}
          ListHeaderComponent={listHeader()}
          showsVerticalScrollIndicator={false}
          onEndReached={showPromos}
          onEndThreshold={0.7}
        />

Use () while assigning ListHeaderComponent prop. By this way, function will be invoked only once.

Hope this help you. Enjoy coding!

Answer 2

From what I can see in the code you provided that you are defining the ListHeader component inside your other parent component which will redfine it on every render. Moving it might outside the parent component might help.

Answer 3

You can fix your flickering issue by memoizing your ListHeaderComponent.

In your case just wrap your component with useMemo:

const listHeader = useMemo(() => {
    ...
})