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>
    );

[trevorpfiz]

extraData

[jvgeee]

Just to be clear on this issue - the (not-well-documented) solution is that you have to use the extraData prop on FlashList to pass in any state-based data from outside of the component.

E.g.:

const [currentIndex, setCurrentIndex] = useState(0)

  function handleScroll(event){

  const x = e.nativeEvent.contentOffset.x

      // find the index of the current userRallies item which is in view, knowing that the width of each item is CAROUSEL_ITEM_WIDTH
      const index = Math.round(x / (CAROUSEL_ITEM_WIDTH + 15))

      setCurrentIndex(index || 0)
  }

  return <FlashList
            data={currentRallyBucket}
            estimatedItemSize={CAROUSEL_ITEM_WIDTH + 20}
            renderItem={({ item, index, extraData }) => (
              <ItemRender
                item={item}
                isCurrent={extraData.currentIndex === index}
                itemWidth={extraData.CAROUSEL_ITEM_WIDTH}
              />
            )}
            extraData={{ currentIndex, CAROUSEL_ITEM_WIDTH }}
          />