How do I automatically update a state in React Native?

Question

I am new to React Native, I am developing an app for TCC and my idea is to develop an app that will help elderly people or any group with difficulties to learn a little bit about the world of computing (as if it were a course).

There is a section where a photo and some tips about the world of computing will appear. But I would like to know how I do to automatically update this state to change the photo and tip without having to put a button to manually change where the text of the tips will appear.

Code:

export default class Tela extends Component{

    constructor(props){
        super(props);
        this.state = {frase:'dicas...'};
        this.dicas = this.dicas.bind(this);
    }
    
    dicas(){
        let s = this.state;
        let frases = ['A engenharia da computação é uma das melhores áreas.','Os computadores só entendem 0 ou 1.', 'O cérebro do computador é o processador.','Um computador consegue fazer milhões de operações em apenas um segundo.'];
        let n = Math.floor(Math.random() * frases.length);
        s.frase = frases[n];

        this.setState(s);
    }


    render(){
        return(
            <View style={styles.body}>

                <View style={styles.topArea}>
                    <View style={styles.topAreaBotao}>
                        <TouchableOpacity style={styles.topBotaoMenu}>
                            <Image source={require('./imagens/menu.png')} style={styles.topIconeMenu}/>
                        </TouchableOpacity>
                    </View>
                    <Text style={styles.topTitulo}>Projeto TCC</Text>
                </View>    

                <View style={styles.centralArea}>
                    <ScrollView>
                        
                        <View style={styles.centralAreaModulo}>
                            <View style={styles.centralHeader}>
                                <Text style={styles.centralTitulo}>Módulos</Text>
                            </View>

                            <Btn titulo='Módulo 1:' subTitulo='Fundamentos' left='50'/>
                                
                            <Btn titulo='Módulo 2:' subTitulo='Hardware'/>
                                
                            <Btn titulo='Módulo 3:' subTitulo='Software'/>
                                
                            <Btn titulo='Módulo 4:' subTitulo='Internet'/>
                        </View>

                        <View style={styles.centralAreaDicas}>
                            <View style={styles.centralHeader}>
                                <Text style={styles.centralTitulo}>Você Sabia?</Text>
                            </View>
                            
                            <View style={styles.centralAreaImagem}>
                                <Image style={styles.centralImagem} source={require('./imagens/img-lupa.png')}/>
                            </View>

                            <View style={styles.centralAreaTexto}>
                                <Text style={styles.centralTexto}>{this.state.frase}</Text>
                            </View>
                        </View>

                    </ScrollView>
                </View>
        )
    }
}

Answer 1

Within the render(), anther of the return, you need to put a setInterval(), that will be triggered every X ms and will execute the method dicas().

setInterval(_ => dicas(), 5000);