Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request] Start Horizontal Scrollview at index #17

Open
NilsBaumgartner1994 opened this issue Jan 26, 2023 · 3 comments
Open

[Feature Request] Start Horizontal Scrollview at index #17

NilsBaumgartner1994 opened this issue Jan 26, 2023 · 3 comments

Comments

@NilsBaumgartner1994
Copy link

Since my issue #14 was closed but i believe my question was missunderstood, i reopened a new issue.
My wish is to let the timetable start a specific day, so the horizontal position (not the vertical).

For example it would be nice to let the user start on the current day. When the items are from monday till sunday and currently it is friday, i dont want to have the first item to be friday. If the first item would be friday, the user cant scroll left to monday.

Since in #14 you mentioned, that there is no vertical scrollview my wish is pointing at the horizontal "scrollview".

Currently always need to scroll to current day/item
Bildschirmfoto 2023-01-26 um 02 23 24

With prop startIndex=2 it would start at the second item. I believe the horizontal scrollview could do this.
Bildschirmfoto 2023-01-26 um 02 25 08

@NilsBaumgartner1994
Copy link
Author

To start a horizontal Animated.ScrollView at a specific index or position, you can use the scrollTo method and pass in the x and y coordinates of the desired position. For example, to start the scrollview at index 2, you can use the following code:

const scrollViewRef = useRef(null);
...

<Animated.ScrollView
    ref={scrollViewRef}
    ...
>

...


useEffect(()=>{
    const itemWidth = 100;
    const indexToStart = 2;
    const x = indexToStart * itemWidth;
    const y = 0;
    if (scrollViewRef.current) {
        scrollViewRef.current.scrollTo({x, y, animated: true});
    }
},[])

@NilsBaumgartner1994
Copy link
Author

Okay i used the given props by myself :-)

Here is a small tutorial:

export const MyComponent = (props) => {
      const scrollViewRef = useRef(null);
      const indexToStart = 1;
      const columnWidth = <YOUR WITH OF AN ITEMCARD>

        useEffect(() => {
        if (scrollViewRef?.current) {
            console.log("scroll to start");
            const x = indexToStart * columnWidth;
            const y = 0;
            scrollViewRef.current.scrollTo({x, y, animated: true});
        } else {
            console.log("scroll to start failed");
        }
    }, []);


   return(
      <Timetable
                        scrollViewProps={{
                            ref: scrollViewRef,
                        }}
               ....
      />
   )

}

@NilsBaumgartner1994
Copy link
Author

Would be nice to be added to the documentation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant