rdhox / react-native-smooth-picker

A smooth picker for react-native
MIT License
216 stars 27 forks source link

initialScrollToIndex doesn't scroll to the last item #38

Open nornewman opened 2 years ago

nornewman commented 2 years ago

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
            />
Gerlison commented 2 years ago

Same here

MattYoon commented 2 years ago

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.

Gerlison commented 2 years ago

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

Neoxs commented 1 year ago

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)