Question 35145 in React native Question posted in
The official React Native documentation can be found here.

Update Calendar Component at Midnight – React native

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

enter image description here

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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    always consider setTimeout or setInterval if your code is time constrain

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search