This package has external dependencies of react-native-reanimated and react-native-gesture-handler which must be installed separately. Before opening an issue related to animations or gestures please verify that you have completed ALL installation steps, including the changes to MainActivity.
Describe the bug
I cannot for the life of me get a non-null FlatList ref from DraggableFlatList's function prop onRef()
To Reproduce
I made a snack, just taking the example from your docs, and trying to get the ref to the FlatList with onRef(). In my actual project, the ref object i receive from onRef() the ref.current member is _always_ null, not just on the first render.
All I really want to do is just call scrollToEnd() on FlatList ref when someone adds an item; that part is not implemented in the snack, because I'm just trying to get the FlatList ref first, but not even that is working for me. Is there something I'm missing?
I saw the other issues related to this problem #224, #186, but they are mostly discussions, and whatever solutions that are there are unfortunately not working with Typescript, or not at all, as the ref.current I receive persists as null.
Platform & Dependencies
React Native or Expo version:
"expo": "^40.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.0.tar.gz",
"@react-navigation/native": "^5.8.1",
"@react-navigation/stack": "^5.11.0",
Reanimated version:
"react-native-reanimated": "~1.13.0",
React Native Gesture Handler version:
"react-native-gesture-handler": "~1.8.0",
Additional context
Using Typescript -"typescript": "~4.0.0"
draglist.current.current.getNode()
onRef={function (ref) { draglist.current = ref }}
onLayout={function () {
draglist.current.current.getNode().scrollToOffset({
offset: 100,
animated: true
})
}}
Thanks for your reply @cr7cr8 but this doesn't work for me, and i don't know how it would, because onRef() passes ref: React.RefObject<AnimatedFlatListType<T>>. I don't understand how assigning that type to a my own ref.current (in your case draglist.current) helps. Your solution would be simplified if you did smth like:
<DraggableFlatList
...
onRef={function (ref) { draglist = ref }}
onLayout={() => {
if (draglist.current)
draglist.current.getNode().scrollToOffset({offset: 100, animated: true })
}}
/>
I also don't want to programmitcally scroll on every single layout, but only when a new item has been added. I updated the snack to show the problem I'm having.
Thanks for your time!
Most helpful comment
draglist.current.current.getNode()