dorkyboi / react-native-calendar-timetable

Timetable (schedule) component for React Native applications
MIT License
58 stars 10 forks source link

[Feature Request] Start Horizontal Scrollview at index #17

Open NilsBaumgartner1994 opened 1 year ago

NilsBaumgartner1994 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Would be nice to be added to the documentation