How to access ref from FlatList?

[betoharres]

Hello, thanks for the work, I'm having a good time with your library! Currently I'm trying to use scrollToIndex() https://reactnative.dev/docs/flatlist#scrolltoindex but the problem is that the ref is not being defined. Here's what's I'm trying to do inside a component:

const flatListRef = React.useRef(null);

React.useLayoutEffect(() => {
  if (props.route.params.images.length) {
    flatListRef.current.scrollToIndex(3);
  }
}, [props.route.params.images.length]);

const renderItem = React.useCallback(
  ({item}) => {
    return (
      <Zoom>
        <Image
          width={400}
          height={400}
          source={{uri: item.large}}
        />
      </Zoom>
    );
  },
  [rotateDegree],
);

console.log('flatListRef', flatListRef);

return (
        <ZoomFlatList
          ref={flatListRef}
          data={props.route.params.images}
          pagingEnabled
          horizontal
          keyExtractor={item => item?.source}
          renderItem={renderItem}
        />
)

but unfortunately flatList.current shows as still null in the console.log

[intergalacticspacehighway]

Can you try printing flatlistRef.current in useEffect? It'll be initialised only after FlatList is mounted. Let me know if still face issues. Ref should be accessible as we're forwarding it.