BugiDev / react-native-calendar-strip

Easy to use and visually stunning calendar component for React Native.
MIT License
934 stars 325 forks source link

setSelectedDate is not working #330

Open sukesh-pfx opened 2 years ago

sukesh-pfx commented 2 years ago

Hi, I'm getting an issue when scrolling to the selected date The date is selected when I manually scroll to the section. But it does not scroll automatically on date changes.

I have tried with setSelectedDate but not working for me.

"react-native": "0.63.4", "react-native-calendar-strip": "^2.2.5",

I have created a custom component. The updated date will be passed via props.

const CustomStripCalender = ({
  value,
  onDateChange,
}: {
  value?: any;
  onDateChange?: (value: any) => void;
}) => {
  const [currentDate, setCurrentDate] = useState(moment());
  const calenderRef = useRef(null);
  const handleOnDateSelect = (date) => {
    setCurrentDate(date);
    if (onDateChange) {
      onDateChange(date);
    }
  };
  useEffect(() => {
    if (moment(value).isValid()) {
      const _value = moment(value);
      setCurrentDate(_value);

      if (calenderRef?.current) {
        calenderRef?.current?.setSelectedDate(_value);
      }
    }
  }, [value]);
  return (
    <>
      <View style={styles.dateContainer}>
        <Text style={styles.title}>
          {moment(currentDate).format('DD MMMM,YYYY')}
        </Text>
        <CalendarStrip
          ref={calenderRef}
          scrollable={true}
          selectedDate={currentDate}
          scrollToOnSetSelectedDate={true}
          maxDate={moment()}
          onDateSelected={handleOnDateSelect}
          iconLeftStyle={styles.arrow}
          iconRightStyle={styles.arrow}
          dateNameStyle={styles.dateName}
          dateNumberStyle={styles.dateNumber}
          calendarHeaderStyle={styles.header}
          style={styles.calenderStripContainer}
          highlightDateNameStyle={styles.highlight}
          highlightDateNumberStyle={styles.highlight}
          highlightDateContainerStyle={styles.highlightContainer}
        />
      </View>
    </>
  );
};

How to resolve this issue?.

Thanks for the awesome library.

longtqdayma commented 2 years ago

scrollable={true} it working

<CalendarStrip scrollable={true}

sukesh-pfx commented 2 years ago

scrollable={true} it working

<CalendarStrip scrollable={true}

Hi @longtqdayma My issue is it's not scrolling to the selected item when I update the selected date