scrollToIndex() is not a function

Question

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?

Answer 1

Try to use provided methods instead

const handleMarker = index => {
  flatListRef.current.snapToItem(index);    
}

Refs: https://github.com/archriss/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#available-methods