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?