react-native-smooth-picker icon indicating copy to clipboard operation
react-native-smooth-picker copied to clipboard

initialScrollToIndex doesn't scroll to the last item

Open nornewman opened this issue 3 years ago • 4 comments

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
            />

nornewman avatar Jul 13 '21 16:07 nornewman

Same here

Gerlison avatar Jul 15 '21 12:07 Gerlison

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.

MattYoon avatar Aug 10 '21 09:08 MattYoon

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

Gerlison avatar Aug 17 '21 16:08 Gerlison

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)

Neoxs avatar Oct 12 '22 09:10 Neoxs