Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

scrollToIndex() is not a function

$
0
0

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?


Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>