Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

daySelectionAnimation is not applied while customDatesStyles defined

See original GitHub issue

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];
    } 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 };
        case "border":
          let dateViewBorderWidth = this.state.selected
            ? this.props.daySelectionAnimation.borderWidth
            : 0;
          dateViewStyle = {
            borderColor: this.props.daySelectionAnimation.borderHighlightColor,
            borderWidth: dateViewBorderWidth
          // No animation styling by default

in CalendarDay.js

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:7

github_iconTop GitHub Comments

peacechencommented, Feb 26, 2018

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',

          highlightDateNameStyle={[styles.dateNameStyle, styles.highlightDateNameStyle]}
peacechencommented, Nov 25, 2018

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why is <CalendarStrip /> not working properly? - Stack Overflow
I tried to console log and it seems the onDateSelected gets invoked only when I click on the selected date. How do I...
Read more >
react-native-calendar-strip/ - UNPKG
To properly make a release build, import the appropriate "Locale" module using the following steps. Not importing the locale module will crash the...
Read more >
react-native-calendar-strip - Bountysource
I get the following exception (screenshot attached) when I call updateWeekView in a non scrollable calendar strip. The numVisibleDays isn't defined in that...
Read more >
react-native-calendar-strip .Easy to use and visually stunning ...
onDateSelected, Function to be used as a callback when a date is selected. ... render() { return ( <CalendarStrip customDatesStyles={customDatesStyles} .
Read more >
Active questions tagged react-native+typescript - Stack Overflow
This library is working fine for iOS & Android but when I'm running it on Web. ... However, in Typescript it complains that...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found