Estoy tratando de pasar una referencia a un componente con un enfoque similar al siguiente bloque de código, pero el valor current siempre devuelve undefined . Este enfoque funciona bien con una FlatList simple de react-native, sin embargo, no funciona una vez que uso Animated.FlatList o Animated.createAnimatedComponent(FlatList) :
const Parent = () => { const flatListRef = useRef(); useEffect(() => { console.log(flatListRef.current) // undefined }) return ( <View> <Child ref={flatListRef} /> </View> ) } const Child = React.forwardRef((props, ref) => { return ( <Animated.FlatList ref={ref} /> ) })La biblioteca react-native-reanimated funciona un poco diferente en comparación con react-native-animated .
Si creamos el componente animado a través de Animated.createAnimatedComponent(FlatList) , entonces todo funciona como se esperaba.
Aquí hay una versión funcional de su código. He registrado la función scrollToIndex de FlatList ref con fines de prueba.
import Animated from "react-native-reanimated" const ReanimatedFlatList = Animated.createAnimatedComponent(FlatList); const Parent = (props) => { const flatListRef = useRef(null); useEffect(() => { console.log(flatListRef.current.scrollToIndex) }, []) return ( <View> <Child ref={flatListRef} /> </View> ) } const Child = React.forwardRef((props, ref) => { return ( <ReanimatedFlatList ref={ref} /> ) })