Guías Técnicas

Cómo usar el componente Text

  ¿Qué es el componente Text en React Native?

El componente Text en React Native se usa para mostrar texto en pantalla, ya sea títulos, párrafos, etiquetas, botones, etc.
Es equivalente a una etiqueta como <p> o <span> en HTML.

Puedes usarlo de forma simple o anidarlo dentro de otros componentes como View para darle estructura y estilo a tu UI.

Usar el componente Text

Aquí un ejemplo básico de uso con estilo aplicado:

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

// Componente funcional
const MiTexto = () => {

// Rendereiza un texto simple
return (
  <View style={styles.contenedor}>
    <Text style={styles.texto}>¡Hola, este es un texto en React Native!</Text>
  </View>
);
};

// Estilos para el componente
const styles = StyleSheet.create({
  contenedor: {
    padding: 20,
    backgroundColor: '#f0f0f0',
    borderRadius: 10,
    margin: 10,
  },
  texto: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
    textAlign: 'center',
  },
});

export default MiTexto;
  Detalles del código

  • <Text>: Se usa para mostrar contenido textual.
  • style: Puedes aplicar estilos como tamaño de letra, color, alineación, negrita, etc.
  • textAlign: Te permite centrar, alinear a la izquierda o derecha el texto.
  • fontWeight: Controla el grosor de la fuente (normal, bold, o valores numéricos como 400, 700).

¿Dónde se usa el componente Text?

Text se utiliza prácticamente en toda app: botones, títulos, mensajes, etiquetas, subtítulos y más.
Se puede anidar dentro de otros Text, lo que permite estilizar diferentes partes del contenido.

jsx 
<Text>
Esto es un <Text style={{ fontWeight: 'bold' }}>texto en negrita</Text> dentro de otro texto.
</Text>
  Importante

Siempre que necesites mostrar texto en React Native, usa el componente Text en lugar de escribirlo directo o con otras etiquetas.
Esto garantiza compatibilidad, accesibilidad y estilo adecuado en plataformas móviles.