I have currently have a map and a carousel(similar to FlatList
) and I want to be able to use scrollToIndex
method of FlatList
to snap to a certain item in the array. The issue is when I adopted the react-native-snap-carousel library, which is based on ScrollView
, I lost the ability to use the scrollToIndex
method. The ability to scroll to a certain index was working perfectly fine with FlatList
.
I'm using a functional component so I'm using the useRef
hook:
const flatListRef = useRef()
const handleMarker = index => {
flatListRef.current.scrollToIndex({ index, animated: true })
}
I'm using react-native-maps
for my map and the handleMarker
above is so that when the user clicks on a marker on the map, the Carousel snaps to the pertaining item:
<Marker
key={marker.id}
coordinate={{ latitude: marker.latitude, longitude: marker.longitude }}
onPress={() => handleMarker(index)}
ref={markerRef[index]}
>
</Marker>
Following is the Carousel that replaced FlatList
:
<Carousel
data={items}
renderItem={({ item }) => <Item item={item}/>}
horizontal={true}
ref={flatListRef}
sliderWidth={width}
sliderHeight={100}
itemWidth={140}
itemHeight={100}
/>
How do I achieve this this without scrollToIndex
?