daySelectionAnimation is not applied while customDatesStyles defined

Hi, I want to apply a custom date style for a date (eg: today) and it’s look like the day selection animation was overridden. I think the issue come from this block of code:

   if (customStyle) {
      dateNameStyle = [styles.dateName, customStyle.dateNameStyle];
      dateNumberStyle = [styles.dateNumber, customStyle.dateNumberStyle];
      dateViewStyle.push(customStyle.dateContainerStyle);
    } else if (this.props.enabled) {
      // Enabled state
      //The user can disable animation, so that is why I use selection type
      //If it is background, the user have to input colors for animation
      //If it is border, the user has to input color for border animation
      switch (this.props.daySelectionAnimation.type) {
        case "background":
          let dateViewBGColor = this.state.selected
            ? this.props.daySelectionAnimation.highlightColor
            : "transparent";
          dateViewStyle = { backgroundColor: dateViewBGColor };
          break;
        case "border":
          let dateViewBorderWidth = this.state.selected
            ? this.props.daySelectionAnimation.borderWidth
            : 0;
          dateViewStyle = {
            borderColor: this.props.daySelectionAnimation.borderHighlightColor,
            borderWidth: dateViewBorderWidth
          };
          break;
        default:
          // No animation styling by default
          break;
      }

in CalendarDay.js

[peacechen]

You’re right, the customDatesStyles prop bypasses the animation. I’ve found an alternative to daySelectionAnimation is to use selectedDayStyle. Adjusting your example:

let styles = StyleSheet.create( {
  selectedDay: {
    backgroundColor: '#EC870E',
  }
};

     <CalendarStrip
          style={styles.calendarStrip}
          calendarHeaderStyle={styles.calendarHeaderStyle}
          calendarColor='#FDF3E8'
          dateNameStyle={styles.dateNameStyle}
          highlightDateNameStyle={[styles.dateNameStyle, styles.highlightDateNameStyle]}
          highlightDateNumberStyle={styles.highlightDateNameStyle}
          selectedDayStyle={styles.selectedDay}
          onDateSelected={this.onDateSelected}
          customDatesStyles={customDatesStyles}
      />

[peacechen]

Do the parent components use shouldComponentUpdate ? It could be that the parent of CalendaerStrip is stopping updates from flowing down. I’ve used customDatesStyles with dynamic data successfully before.