I have a crude calendar component I made here to illustrate my question. The component in question looks like this:

and the code for it is below:

import React from "react";
import { View, Text, StyleSheet } from "react-native";
import dayjs from "dayjs";

const calendar = () => {

    const value = dayjs();
    const monthStartDay = dayjs().startOf("month");
    const startDay = dayjs().startOf("month").startOf("week");
    const endDay = dayjs().endOf("month").endOf("week");
    const monthEndDay = dayjs().endOf("month");
    let day = startDay.clone().subtract(1, "day");

    //@ts-ignore
    const calendar = [];

    while(day.isBefore(endDay, "day")) {
        calendar.push(
            //@ts-ignore
            Array(7).fill(0).map(() => {
                day = day.add(1, "day");
                return day.clone();
        })
        )
    }

    return <View style={styles.calendar}>
            <View style={styles.calendarWeek}>
                <Text>S</Text>
                <Text>M</Text>
                <Text>T</Text>
                <Text>W</Text>
                <Text>T</Text>
                <Text>F</Text>
                <Text>S</Text>
            </View>

            {
                calendar.map((week) => {
                    return <View style={styles.calendarWeek}>
                            {week.map(day => {

                                if(day.isBefore(monthStartDay) || day.isAfter(monthEndDay)) {
                                    return <Text>  </Text>
                                }

                                if(day.isSame(value, "day")) {
                                    return <Text style={styles.calendarToday}>{day.date()}</Text>
                                }

                                return <Text>{day.date()}</Text>
                            })}
                        </View>
                })
            }

        </View>
}

const styles = StyleSheet.create({

    calendar: {
        display: "flex",
        backgroundColor: "gray",
        width: 320,
        height: 160,
        flexDirection: "column",
        padding: 20,
    },

    calendarWeek: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-around",
    },

    calendarToday: {
        textAlign: "center",
        backgroundColor: "red"
    }
})

export default calendar;

The purpose of this calendar is to highlight the current day in red. It will do easily when the component is first loaded, as shown, but when the time becomes midnight, the highlighted number is incorrect. How do you, in React Native, tell a component to reload itself at a specific time?

Adding on to this, is there a way for me to change that time with each reload? (i.e. "reload at 12:00 AM, then reload at 12:05, then reload at 12:30 and increase every time"). It's not necessarily applicable in this situation, but I'd still like to know if there's a way to do so.

CodePudding user response：

As far as I have understood from your problem, you require reload to set the state.

That can be easily done using setInterval along with useEffect.

Example Code:

useEffect(() => {
  const interval = setInterval(() => {
    console.log('This will run every second!');
  }, 1000);
  return () => clearInterval(interval);
}, []);

You can find the full guide here:

https://upmostly.com/tutorials/setinterval-in-react-components-using-hooks

CodePudding user response：

always consider setTimeout or setInterval if your code is time constrain