Cambiar el texto de un Text en React Native

Tiempo de lectura: < 1 minuto

Si queremos cambiar el contenido de un Text utilizando React Native (hacer un setText) podemos utilizar el siguiente código que voy a explicar.

//imports necesarios, vamos a utilizar useState
import React, { useState } from "react";
import {Text, Button} from "react-native";

//Crear la vista
const App = () => {
    //Estados para actualizar textos:
    const [texto, setText] = useState("Hola Mundo");
    
    //Funcion del boton
    function cambiarTexto(){
      setText("Hola React");
    }
 
    return (
            //Texto 
            <Text>{textoInicio}</Text>
            //Boton
            <Button onPress={cambiarTexto} >Cambiar Texto</Button>
           )
};

Ahora voy a explicar el código.

Primero se crea una constante de estados, primero indica el parámetro con el texto (texto) y el segundo atributo (setText) es la función para cambiar el texto. El useState, contiene el valor por defecto en este caso «Hola Mundo».

const [texto, setText] = useState("Hola Mundo");

Luego he creado una función para utilizar con el botón:

function cambiarTexto(){
  setText("Hola React");
}

Aquí dentro, se llama a la función que hemos creado anteriormente llamada setText.

Ahora se asigna el texto al componente text de React Native.

<Text>{textoInicio}</Text>

Al pasar textoInicio, se le pasa la variable y cambiará cuando se llame a setText.

Ahora se crea un botón y se asigna la acción de cambiar el texto con el método onPress.

        <Button onPress={cambiarTexto} >Cambiar Texto</Button>