BugiDev / react-native-calendar-strip

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

daySelectionAnimation stopped working out of nowhere #296

Open Vasault opened 3 years ago

Vasault commented 3 years ago

Hi all, not sure if the title sounds too direct, but is exactly how it is lol, I haven't touched this component in quite a while, like 2 months, and suddenly, out of nowhere, I decided to publish my app and a coworker tested the calendar strip and the date color didn't change whenever you press on any day of the week, the configuration hasn't changed, and I checked the documentation to see if the newer versions of the component changed anything, but look like it didn't.

here is the code

                  <CalendarStrip
                    useIsoWeekday={false}
                    startingDate={Moment(fecha)}
                    showMonth={false}
                    calendarHeaderContainerStyle={
                      styles.calendarHeaderContainerStyle
                    }
                    calendarColor={'#FFFFFF'}
                    style={styles.calendarStripContainer}
                    selectedDate={Moment(fecha)}
                    daySelectionAnimation={{
                      type: 'background',
                      highlightColor: '#F8F8F8',
                      duration: 20,
                    }}
                    onDateSelected={async (date) => {
                      setEnable(false);
                      DataManager.FechaActual = Moment(date).format(
                        'YYYY-MM-DD',
                      );
                      await setFechaActual();
                      setEnable(true);
                    }}
                    highlightDateNumberStyle={styles.enabledDate}
                    highlightDateNameStyle={styles.enabledDate}
                    customDatesStyles={customDatesStylesFunc}
                    leftSelector={[]}
                    rightSelector={[]}
                    iconContainer={{flex: 0.1}}
                  />

and here is a little gif

Grabación de pantalla 2021-05-17 a la(s) 13 44 20

only day 14 has information, the rest of the days are empty, but still, day selection is not getting colored

edit: forgot to post my customdatestyle

  const customDatesStylesFunc = (date: any) => {
    if (Moment(date).isSame(horaActual, 'days')) {
      // dia actual
      return {
        dateNameStyle: {color: '#3066FA'},
        dateNumberStyle: {color: '#3066FA'},
        highlightDateNumberStyle: {color: '#3066FA'},
        highlightDateNameStyle: {color: '#3066FA'},
      };
    }
    if (Moment(date).isAfter(horaActual, 'days')) {
      // dias posteriores
      return {
        dateNameStyle: {color: '#212B42'},
        dateNumberStyle: {color: '#212B42'},
        highlightDateNumberStyle: {color: '#212B42'},
        highlightDateNameStyle: {color: '#212B42'},
      };
    }
    if (Moment(date).isBefore(horaActual, 'days')) {
      // dias previos
      return {
        dateNameStyle: {color: '#8E9CB4'},
        dateNumberStyle: {color: '#8E9CB4'},
        highlightDateNumberStyle: {color: '#8E9CB4'},
        highlightDateNameStyle: {color: '#8E9CB4'},
      };
    }
  };
peacechen commented 3 years ago

@Vasault Thanks for reporting this. I don't have time to debug this and would like to ask for your help. Use the sample project in this repo along with your code snippet. That makes it easier to set breakpoints in the CalendarStrip code as well as experiment with changes to the library code. https://github.com/BugiDev/react-native-calendar-strip#development-with-sample-application