Render image on each date using react-native-calendars

Question

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.

Answer 1

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