React native calendar does not actualise the marked dates

Question

I am using React native and nodejs. I query the dates and throw them into an array state.

The second step taken was to copy some code from an article that proved to be useful to map over the array of dates and send it to an empty object.

 let markedDay = {};

    datesArray.map((item) => {
      markedDay[item.date] = {
        marked: true,
        selectedColor: 'red', // DOES NOT WORK ALSO
        color: 'red',
      };
    });

Bellow is the whole component code

const CalendarScreen = ({navigation}) => {

    const [datesArray, setDatesArray] = useState([]);


    // get all days from this specific user
    const handleAllDay = async () => {
        try 
        {
            const u = await AsyncStorage.getItem('user');
            const parsed = JSON.parse(u);
            const dayArray = await data.get('/api/get-all-days/' + parsed.userID);
            setDatesArray(dayArray.data);
        } 
        
        catch (error) 
        {
            console.log(error);
        }
    };


    let markedDay = {};

    datesArray.map((item) => {
      markedDay[item.date] = {
        marked: true,
        selectedColor: 'red',
        color: 'red',
      };
    });
  

    useEffect(() => {
        handleAllDay();
    }, []);

     //Component
    return (
        <View>
            {/* calendar */}
            <View style={styles.calendarView}>
                <Title title='Calendar activities' />
                <Text style={styles.headerText}>Add or create exercices here</Text>
            </View>

            {/* calendar wrapper */}
            <View style={styles.calendarWrapper}>
                <Calendar 
                    onDayPress={day => addNewDay(day, navigation)} 
                    markedDates={markedDay}
                />
                {/* WarningBox */}
                <WarningBox>The workout days created will appear marked by a blue dot once you log in again.</WarningBox>
            </View>

            
            
        </View>
    )
};

const styles = StyleSheet.create({
    calendarWrapper: {
        paddingHorizontal: 20,
        display: 'flex',
        height: 420,
        justifyContent: 'space-around',
        gap: 20
    },

    headerText: {
        marginTop: 10,
        color: Colors.darkGreen
    },

    calendarView: {
        padding: 20
    }
});

export default CalendarScreen;

Once pressed to on a day, there is a modal that will execute a CreateNewDay function and navigate to a new Screen that will create that day.. After creating the day, if navigate back to calendar view, the day is not marked. I must log out and in again to see the changes...

Can anyone help me?> Thanks , Daniel

Answer 1

const CalendarScreen = ({navigation}) => {
const [markedDates, setMarkedDates] = useState({});
const dateArray = ['2023-10-10', '2023-10-11', '2023-10-12'];

useEffect(() => {
// Function to set marked dates based on dateArray
const setCustomMarkedDates = () => {
  const customDates = {};
// You can call const u = await AsyncStorage.getItem('user');
// const parsed = JSON.parse(u);
// const dayArrayAsync = await data.get('/api/get-all-days/' + parsed.userID);
// dayArrayAsync.forEach ->

  dateArray.forEach(date => {
    customDates[date] = {marked: true, dotColor: 'red'};
  });

  setMarkedDates({...markedDates, ...customDates});
};

// Call the function to set marked dates
setCustomMarkedDates();
}, []);


return (
<View>
  <View style={styles.calendarView}>
    <Text style={styles.headerText}>Add or create exercises here</Text>
  </View>

  {/* calendar wrapper */}
  <View style={styles.calendarWrapper}>
    <Calendar markedDates={markedDates} />
  </View>
</View>
);
}