Scroll not return on selected date | scrollToOnSetSelectedDate

[ImAbhishekTomar]

Hi,

When I am changing selected date state on button click date selected is changed but strip scroll not display selected date section it's out of the screen.

My Code In Action

When I click on top calendar icon selected date set as current date.

https://user-images.githubusercontent.com/6933841/106832945-a436c300-66b8-11eb-8645-a475fe94811e.mov

My Code

<CalendarStrip
         calendarAnimation={{type: 'parallel', duration: 15}}
         showMonth={false}
         scrollable={true}
         style={{height: 80}}
         calendarColor={'#fff'}
         dateNumberStyle={{color: 'rgba(0,0,0,0.8)'}}
         dateNameStyle={{color: 'rgba(0,0,0,0.5)'}}
         highlightDateContainerStyle={{
           backgroundColor: '#80c627',
           borderRadius: 4,
         }}
         selectedDate={SelectedDate}
           startingDate={moment().startOf('isoWeek')}
         leftSelector={[]}
         rightSelector={[]}
         onDateSelected={onDateSelected}
         scrollToOnSetSelectedDate={true}
       />

https://github.com/BugiDev/react-native-calendar-strip/issues/260#issuecomment-772071096

[roycechua]

You need to use a useRef hook

const calendarStripRef = useRef(null);
// ...
// connect the ref to the component
<CalendarStrip
         ref={calendarStripRef}
         calendarAnimation={{type: 'parallel', duration: 15}}
         showMonth={false}
         scrollable={true}
         style={{height: 80}}
         calendarColor={'#fff'}
         dateNumberStyle={{color: 'rgba(0,0,0,0.8)'}}
         dateNameStyle={{color: 'rgba(0,0,0,0.5)'}}
         highlightDateContainerStyle={{
           backgroundColor: '#80c627',
           borderRadius: 4,
         }}
         selectedDate={SelectedDate}
           startingDate={moment().startOf('isoWeek')}
         leftSelector={[]}
         rightSelector={[]}
         onDateSelected={onDateSelected}
         scrollToOnSetSelectedDate={true}
       />

After that you can access other methods within the calendar strip which controls the scrolling on selected date like this by using the ref and the methods from the documentation. I just happen to be mixing it with moment but it's not necessarily needed.

calendarStripRef.current.setSelectedDate(moment(selectedDateTime));

This worked for me. I am now able to make it scroll after applying this steps.

[ImAbhishekTomar]

@roycechua23 - Thanks i will try this.