onViewableItemsChanged does not seem to work when there is a state change in the app. Is this correct?
Seems like it wouldn't be very useful if this were the case....
Otherwise, users will be forced to us onScroll
in order to determine position or something similar...
onViewableItemsChanged
Note: Placing the onViewableItemsChanged
function in a const
outside the render method also does not assist...
<FlatList data={this.state.cardData} horizontal={true} pagingEnabled={true} showsHorizontalScrollIndicator={false} onViewableItemsChanged={(info) =>console.log(info)} viewabilityConfig={{viewAreaCoveragePercentThreshold: 50}} renderItem={({item}) => <View style={{width: width, borderColor: 'white', borderWidth: 20,}}> <Text>Dogs and Cats</Text> </View> } />
Error
Based on @woodpav comment. Using functional components and Hooks. Assign both viewabilityConfig
and onViewableItemsChanged
to refs and use those. Something like below:
const onViewRef = React.useRef((viewableItems)=> { console.log(viewableItems) // Use viewable items in state or as intended }) const viewConfigRef = React.useRef({ viewAreaCoveragePercentThreshold: 50 }) <FlatList horizontal={true} onViewableItemsChanged={onViewRef.current} data={Object.keys(cards)} keyExtractor={(_, index) => index.toString()} viewabilityConfig={viewConfigRef.current} renderItem={({ item, index }) => { ... }} />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With