Change component style when state is set to certain value

Question

I have a counter that counts down, when the counter hits zero, I would like a style to change. The counter displays properly but the style never changes. How can I get the style to change when the counter hits a certain value?

Below is the code for a very basic example.

import React, { useState, useEffect } from "react";
import { Text, StyleSheet, SafeAreaView, TouchableOpacity, View } from "react-native";

const ActionScreen = () => {
    const [timeLeft, setTimeLeft] = useState(4);
    const [opac, setOpac] = useState(0.8);

    useEffect(() => {
        const interval = setInterval(() => setTimeLeft(timeLeft - 1), 1000);
        if (timeLeft > 2) {
            setOpac(0.8);
            console.log("GT");
        } else {
            setOpac(0.5);
            console.log("LT");
        }
        console.log("opac: ", opac);
        if (timeLeft === 0) {
            // clearInterval(interval);
            setTimeLeft(4);
            // setOpac(0.5);
        }
        return () => {
            clearInterval(interval);
        };
    }, [timeLeft]);

    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.subActionContainer}>
                <TouchableOpacity
                    style={[
                        styles.topButtons,
                        {
                            opacity: opac,
                        }
                    ]}
                >
                    <Text
                        style={styles.buttonText}>
                        {timeLeft}
                    </Text>
                </TouchableOpacity>
            </View>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 25,
        backgroundColor: 'black',
    },
    subActionContainer: {
        flexDirection: "row",
        alignContent: 'space-between',
    },
    topButtons: {
        flex: 1,
        backgroundColor: 'orange',
    },
    buttonText: {
        fontSize: 18,
        textAlign: 'center',
        padding: 10,
        color: 'white',
    },
    buttonFail: {
        borderWidth: 1,
        marginHorizontal: 5,
    }
});

export default ActionScreen; 

I'm fairly new to React-Native but read somewhere that some styles are set when the app loads and thus don't change but I have also implemented a Dark Mode on my app that sets inline styling, which works well. Why isn't the styling above changing?

Thank you.

Answer 1

you can create your timer and create a method isTimeOut and when it is true you can change the background

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

import {useTimerCountDown} from './useCountDownTimer'


export default function App() {

const {minutes, seconds, setSeconds} = useTimerCountDown(0, 10);

const isTimeOut = Boolean(minutes === 0 && seconds === 0);

const handleRestartTimer = () => setSeconds(10);

return (
 <View style={styles.container}>
  <View style={[styles.welcomeContainer,isTimeOut && 
    styles.timeOutStyle]}>
    <Text>welcome</Text>
  </View>
</View>
);
}

const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 paddingTop: 10,
 backgroundColor: '#ecf0f1',
 padding: 8,
 },
welcomeContainer:{
backgroundColor:'red',
},
timeOutStyle:{
backgroundColor:'blue',
}
});

See the useTimerCountDown hook here in this working example