Cannot access the scrollToIndex() method in React Native using the useRef hook

Question

I'm trying to access the scrollToIndex() method or scrollToItem() method from FlatList using the useRef hook in a functional component. I want to be able to use flatListRef.current.ScrollToIndex() in my component, similar to the way a class-based component uses this.flatListRef.ScrollToIndex():

 const flatListRef = useRef(React.createRef)
 <FlatList 
    data={items}
    renderItem={({ item }) => <Item item={item} />}
    keyExtractor={item => item.id.toString()}
    contentContainerStyle={styles.card}
    horizontal={true}
    showsHorizontalScrollIndicator={false}  
    ref={flatListRef}                      
/>

console.logging flatListRef.current doesn't show the aforementioned methods I'm looking for.

Tim · Accepted Answer · 2019-10-09 07:16:38Z

You don't need to create a ref with createRef, you can just use useRef(). Another important thing is to use scrollToIndex correctly. See documentation and the code below.

Code:

const CustomFlatList = () => {
  const flatListRef = useRef(); // useRef 
  return (
    <View>
    <FlatList 
        data={items}
        renderItem={({ item }) => <Text style={{width: 100}}> {item.id} </Text> }
        keyExtractor={item => item.id.toString()}
        contentContainerStyle={styles.card}
        horizontal={true}
        showsHorizontalScrollIndicator={false}  
        ref={flatListRef} // create ref                
    />
     <TouchableHighlight onPress={() => flatListRef.current.scrollToIndex({index: 4, animated: true })}>
     <Text> ScrollToIndex </Text>
      </TouchableHighlight>
    </View>
  )
}

Working Example:

https://snack.expo.io/B1rfdbsuS

Collectives™ on Stack Overflow

Cannot access the scrollToIndex() method in React Native using the useRef hook

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related