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.

Date Number Style and Day Number Style not working.

See original GitHub issue

Both the Day and Date Number styles seem to be not working and I cannot figure out why.

I am trying to make the style responsive to a dark/light background. But the text color is black whether the background is black or white.

I have checked on text_color below via the console to make sure it isn’t a tinycolor issue. And used a direct string value for color: {color: 'red'} - neither are working.

Here’s my component:

import React, {Component} from 'react';
import { View } from 'react-native';
import CalendarStrip from 'react-native-calendar-strip';
import {AppContext} from './ContextProvider';
import tinycolor from 'tinycolor2';

class CalStrip extends Component {
  render() {
    const {header_color} = this.props;
    var color1 = tinycolor(header_color);
    var text_color = color1.isDark() ? '#fff' : '#000';

    return (
      <View>
        <AppContext.Consumer>
          {(context) =>
            <CalendarStrip
              calendarAnimation={{type: 'sequence', duration: 10}}
              daySelectionAnimation={{type: 'border', duration: 200, borderWidth: 1, borderHighlightColor: text_color}}
              style={{height: 100, paddingTop: 20, paddingBottom: 10}}
              calendarHeaderStyle={{color: text_color}}
              calendarColor={color1.toHexString()}
              dateNumberStyle={{color: text_color}} // Not working XXX
              dateNameStyle={{color: text_color}} // Not working XXX
              highlightDateNumberStyle={{color: text_color}}
              highlightDateNameStyle={{color: text_color}}
              disabledDateNameStyle={{color: 'grey'}}
              disabledDateNumberStyle={{color: 'grey'}}
              iconContainer={{flex: 0.1}}
              onDateSelected={(value) => context.setDate(value)}
              selectedDate={context.date}
            />
          }
        </AppContext.Consumer>
      </View>
    )
  }
}

export default CalStrip;

And this is what the output looks like: cal_strip_screenshot