react-nativereact-native-calendars

Render image on each date using react-native-calendars

I have a use case where I have to render an image on each date. Initially, I was considering react-native-calendar but couldn't found anything useful. Here I am going to attach a screenshot of what I want to achieve.

enter image description here

Solution

  • As per the doc you could use dayComponent property to override the component.

    <Calendar
  style={[styles.calendar, {height: 300}]}
  dayComponent={({date, state}) => {
    return (
      <View>
        <Text style={{textAlign: 'center', color: state === 'disabled' ? 'gray' : 'black'}}>
          {date.day}
        </Text>
      </View>
    );
  }}
/>