This is my first question on StackOverFlow. I’m using the react-native-calendars package for displaying a calendar. I want to allow users to select an emoji from a list, and then have the current day in the calendar display that emoji dynamically.

I’ve tried to achieve this by using the getDayComponent prop of the Calendar component, but I’m facing issues with updating the appearance of the current day based on the user’s selection. Currently, it doesn’t change anything when the user selects a different emoji.

/**
 * Render custom day component for the calendar.
 * Displays the selected emoji on the current day if an emoji is selected.
 * Otherwise, displays the default day text.
 * @param {object} date - The date object containing date information.
 * @returns {JSX.Element} - The custom day component.
 */
const renderCustomDay = (date) => {
  if (date.dateString === currentDate && currentEmoji) {
    return (
      <View style={styles.customDayContainer}>
        <MaterialIcons name={currentEmoji.name} size={24} color={currentEmoji.color} />
      </View>
    );
  }
  return date.day.toString();
};

/**
 * Get marked dates for the calendar.
 * Marks the current date with custom styles if an emoji is selected.
 * @returns {object} - Object containing marked dates and their custom styles.
 */
const getMarkedDates = () => {
  const markedDates = {};
  if (currentEmoji) {
    markedDates[currentDate] = {
      customStyles: {
        container: { backgroundColor: 'transparent' },
        text: { display: 'none' }
      }
    };
  }
  return markedDates;
};

return (
    <SafeAreaView style={styles.container}>
      <Calendar 
        markingType={'custom'}
        markedDates={getMarkedDates()}
        getDayComponent={(date) => renderCustomDay(date)}
      />
      <View style={styles.mainContainer}>
        <FlatList
          data={dataEmotions}
          renderItem={renderEmotions}
          keyExtractor={(item) => item.id.toString()}
          numColumns={1}
          contentContainerStyle={styles.flatListContainer}
        />
      </View>
    </SafeAreaView>
  )

Link full code

I want the appearance of the current day in the calendar to update immediately after the user selects an emoji from the list.Could someone please guide me on how to achieve this functionality? Thank you!!!