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.

dateNameStyle and dateNumberStyle not working on iOS

See original GitHub issue

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,
  },
});

Issue Analytics

State:
Created 3 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

peacechencommented, Feb 9, 2021

Published in 2.1.7

0reactions

randomprogrammingcommented, Feb 8, 2021

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

Top Results From Across the Web

dateNameStyle and dateNumberStyle not working on iOS

Try adding borderRadius to highlightDateContainerStyle . You applied borderRadius to highlightDateNumberStyle which is only for the text within the container.

onWeekChanged keeps getting called infinitely render #326

dateText} dateNumberStyle={styles.dateText} iconLeftStyle={{ height: vh(20), ... OS === 'ios' ? vh(45) : vh(60)} selectedDate={props.

How to dynamically set marked dates from api in react-native ...

Here you can do it through the loop. Just add this loop before CalenderStripe Tag for parsing markedDates and there you go. Solution:...

[Solved]-Calendar strip is not behaving as it should-React Native

Coding example for the question Calendar strip is not behaving as it should-React Native.

react-native-calendar-strip - npm

It supports iOS & Android and responsively sizes its height based on ... dateNameStyle: (optional, see above); dateNumberStyle: (optional, ...