Hey, I'm having some troubles when i need to change styles for an item inside on flashlist

[lucasFigueira1]

I recently replaced a FlatList with FlashList, which contains a couple of buttons. One of them used to change its background color and text color upon being pressed. However, since I've switched to using FlashList, this functionality is no longer working.

`<>
<FlashList
estimatedItemSize={100}
showsVerticalScrollIndicator={false}
data={selectedCluster}
renderItem={({ item }) => {
const isDirectionsVisible = showDirectionsMap[item._id] || false;
return (
<View style={{ backgroundColor: '#fff', paddingHorizontal: width * 0.07, paddingVertical: height * 0.01, gap: height * 0.01 }}>
<MapContactCard
onContactCardPress={() => centerMapOnMarker(item)}
selectedMarker={item}
auth={auth}
/>

            <View style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
              gap: 8,
            }}>
              <SelectedMarkerCardButton
                bgColor={isDirectionsVisible ? '#1877F2' : '#fff'}
                label={isDirectionsVisible ? 'Ocultar' : 'Ver ruta'}
                labelColor={isDirectionsVisible ? '#fff' : '#4B5563'}
                icon={<Ionicons
                  name="map"
                  color={isDirectionsVisible ? '#fff' : '#4B5563'}
                  size={height * 0.022}
                />}
                onPressSelectedMarkerCardButton={() => {
                  setPolylineColor(item);
                  setShowDirectionsMap((prevState: any) => ({
                    ...prevState,
                    [item._id]: !isDirectionsVisible,
                  }));
                  debounceDirectionsApi(
                    {
                      latitude: item?.contactLocation.geoLocation.coordinates[1],
                      longitude: item?.contactLocation.geoLocation.coordinates[0],
                    },
                    currentLocation,
                    auth?.user._id,
                  );
                }
                }
              />
            </View>
          </View>
        );
      }}
    />
  </>`

[switz]

Are you using stickyHeaderIndices - I found removing it "solved" this bug for me. Something is wonky there

[RattyJhay]

I'm also having the same problem, my onPress isn't working.

[arditderstila]

its a bit late as response but i solved this way:

 const [active_index, setactive_index] = useState(0);

    const handleTabPress = (index, location) => {
        setactive_index(index);
    };

    const keyExtractor = useCallback((item) => item.id.toString(), [active_index]);

    const renderItem = ({ item, index }) => (
        <TabsItem
            item={item}
            index={index}
            sendePressEvent={handleTabPress}
            active_index={active_index}
        />
    );

    return (
        <View style={styles.mainContainer}>
            <FlashList
                data={gymClasses}
                extraData={active_index}
                estimatedItemSize={77}
                showsHorizontalScrollIndicator={false}
                horizontal
                keyExtractor={keyExtractor}
                renderItem={renderItem}
            />
        </View>
    );