Why does FlatList scrolls to top when I select an item

Question

I have a FlatList with TouchableOpacity items. When I try to select an item, the list scrolls to top.

This is the Collapsible content;

    const setBrandSelected = index => {
    var temp = JSON.parse(JSON.stringify(tempFilterOptions));
    temp[0].enums[index].selected = !temp[0].enums[index].selected;
    setTempFilterOptions(temp);
    };

    const FilterOptionBrand = () => {
    const RenderBrand = ({ item, index }) => {
      return (
        <TouchableOpacity onPress={setBrandSelected.bind(null, index)}>
          {item.selected && (
            <View style={[styles.brandImage, styles.selectedBrandImage]}>
              <Icon iconName={iconNames.Tick} />
            </View>
          )}
          <FastImage source={{ uri: item.logo }} style={styles.brandImage} resizeMode={FastImage.resizeMode.contain} />
          <Text style={styles.brandName}>{item.name}</Text>
        </TouchableOpacity>
      );
    };

    const BrandSeparator = () => <View style={styles.brandSeparator} />;

    return (
      <View style={styles.filterBrandMainContainer}>
        <View style={styles.searchBrandContainer}>
          <View style={styles.magnifyingGlassWrapper}>
            <Icon iconName={iconNames.MagnifyingGlass} />
          </View>
          <TextInput style={styles.searchBrandInput} placeholder={searchBrandText} />
        </View>
        <FlatList
          horizontal={true}
          showsHorizontalScrollIndicator={false}
          keyExtractor={(item, index) => String(item.id)}
          style={styles.collapsibleContainer}
          data={tempFilterOptions[0].enums}
          renderItem={RenderBrand}
          ItemSeparatorComponent={BrandSeparator}
        ></FlatList>
      </View>
    );
    };

Answer 1

If you somehow stumble upon this question. The answer is wherever the problem occurs be it Header be it Footer. You should call the component function and not directly just type the function.

const Header = () => <View />

Correct usage;

ListHeaderComponent={Header()}

Incorrect usage;

ListHeaderComponent={Header}