dateNameStyle and dateNumberStyle not working on iOS

[randomprogramming]

Here's my code:

return (
    <CalendarStrip
      scrollable
      style={{
        height: 100,
      }}
      iconStyle={{ display: "none" }}
      calendarHeaderStyle={{
        color: theme.text.primary,
        fontFamily: fontName,
      }}
      dateNumberStyle={[styles.dateNumberStyle, { color: theme.text.primary }]}
      weekendDateNumberStyle={[
        styles.dateNumberStyle,
        { color: theme.accent.secondary },
      ]}
      dateNameStyle={{
        color: theme.accent.secondary,
        fontFamily: fontName,
      }}
      weekendDateNameStyle={{
        color: theme.accent.secondary,
        fontFamily: fontName,
      }}
      highlightDateNumberStyle={[
        styles.dateNumberStyle,
        {
          color: theme.text.secondary,
          backgroundColor: theme.text.primary,
          borderRadius: 8,
        },
      ]}
      highlightDateNameStyle={{
        color: theme.text.primary,
        fontFamily: fontName,
      }}
      onDateSelected={(date) => handleDateSelect(date)}
      calendarHeaderPosition="below"
      customDatesStyles={[
        {
          // format today
          startDate: new Date().toUTCString(),
          dateNumberStyle: {
            backgroundColor: "red",
            color: "green",
          },
          dateNameStyle: {
            backgroundColor: "red",
            color: "green",
          },
          highlightDateNameStyle: {
            backgroundColor: "red",
            color: "green",
          },
          highlightDateNumberStyle: {
            backgroundColor: "red",
            color: "green",
          },
        },
      ]}
    />
  );

This is what it looks like on my Android emulator on my PC:

This is what it looks like on my physical iOS device: (I am using Expo)

So I am not really sure what's going on here but it seems like some styles get applied while some do not? Not sure if it's a bug or if I'm doing something wrong..

Here's also my styles obj if it makes any difference:

const styles = StyleSheet.create({
  dateNumberStyle: {
    fontFamily: fontName,
    padding: 4,
    marginBottom: 4,
    width: 34,
    height: 34,
  },
});

[peacechen]

Try adding borderRadius to highlightDateContainerStyle. You applied borderRadius to highlightDateNumberStyle which is only for the text within the container. There appears to be a difference in behavior on Android vs iOS on how that affects the container.

[randomprogramming]

With:

highlightDateContainerStyle={{
        borderRadius: 8,
        backgroundColor: "red",
      }}

I get: It is also rounded on iOS but this is not exactly the look I was going for..

[randomprogramming]

Potential fix would be to add a style prop to the day number container, like so:

            {showDayNumber && (
              <View style={dateNumberContainerStyle}>
                <Text
                  style={[
                    { fontSize: dateNumberFontSize },
                    _dateNumberStyle
                  ]}
                  allowFontScaling={allowDayTextScaling}
                >
                  {date.date()}
                </Text>
                { this.renderMarking() }
              </View>
            )}

Edit: I created a PR at #271 , I am not really sure how to install a local library to my react native project and see if it works(I'm new to react native) so if someone could do that for me? Thanks

[peacechen]

Thanks for the PR. The screenshot makes it clearer what you're trying to achieve. You can easily test your changes by using the sample project within this repo: https://github.com/BugiDev/react-native-calendar-strip#development-with-sample-application

Follow the commands and remember to run npm run cp every time you make changes to the library source so that it gets seen by the sample project. I wish there was a better way, but it doesn't want to import from outside of the sample project's directory.

[randomprogramming]

Okay got it working, thank you. Unfortunately my solution has a problem with the bottom of the background cutting off so I'll try finding another fix whenever I find some more free time.

[randomprogramming]

Another PR #272 is up, which implements another prop to avoid this issue.

[peacechen]

Published in 2.1.7