react-native-smooth-picker
react-native-smooth-picker copied to clipboard
initialScrollToIndex doesn't scroll to the last item
Thank you for the package, it works pretty good! Although, I have one issue - which is a bit frustrating. initialScrollToIndex newer opens the last item of the array. It just behaves in a weird way. Setup:
<SmoothPicker
keyExtractor={(_, index) => index.toString()}
showsVerticalScrollIndicator={false}
initialScrollToIndex={dataCity.length - 1}
data={dataCity}
horizontal={true}
scrollAnimation
showsHorizontalScrollIndicator={false}
renderItem={option => ItemToRender(option, selected, true)}
magnet
/>
Same here
If the data
is longer than 61, initialScrollToIndex
won't work for some reason. I tested this with the official example itself on the snack player. I only adjusted the data to an array with 62 numbers or more, and it doesn't work. Anything shorter works.
I ended up removing this library and remade the desired behavior with default React-Native FlatList component, which works pretty well and run at 60fps
But since this library is built around the same component, I had this problem too. Solved by doing this:
useEffect(() => {
setTimeout(() => {
const ref = listRef.current?.getNode?.()
ref?.scrollToIndex({
index: list.length - 1,
animated: true,
})
}, 500)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
this way, I can scroll to the end of the list at the component's first render.
PS. const ref = listRef.current?.getNode?.()
is 'cause of react-native-reanimated being used as a wrapper on the FlatList
I ended up removing this library and remade the desired behavior with default React-Native FlatList component, which works pretty well and run at 60fps
But since this library is built around the same component, I had this problem too. Solved by doing this:
useEffect(() => { setTimeout(() => { const ref = listRef.current?.getNode?.() ref?.scrollToIndex({ index: list.length - 1, animated: true, }) }, 500) // eslint-disable-next-line react-hooks/exhaustive-deps }, [])
this way, I can scroll to the end of the list at the component's first render.
PS.
const ref = listRef.current?.getNode?.()
is 'cause of react-native-reanimated being used as a wrapper on the FlatList
I am using TypeScript and it not working for me
const listRef = useRef(null)
useEffect(() => {
setTimeout(() => {
const ref = listRef.current?.getNode?.();
ref?.scrollToIndex({
index: list.length - 1,
animated: true,
});
}, 500);
ERROR: Property 'getNode' does not exist on type 'never'.ts(2339)