0Pricing
React Native Academy · Lección

Visualización de texto y estilos de fuente

Muestre texto con el componente Text, aplique los estilos fontSize, fontWeight, color y lineHeight, y gestione correctamente el contenido multilínea.

Visualización de texto y estilos de fuente es una lección gratuita de React Native Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Native Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Native Academy incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

The Text Component Basics

In React Native, every word lives inside a Text component. Loose strings outside one will crash — so Text wraps all the text you show.

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

export default function Greeting() {
  return (
    <View>
      <Text>Hello, World!</Text>
      {/* This would cause an error: */}
      {/* Hello, World!  ← raw string outside Text */}
    </View>
  );
}

fontSize and fontWeight

Size text with fontSize (a number) and thickness with fontWeight like "bold" or "600". Custom fonts may only have some weights, so test on a real device.

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

export default function Typography() {
  return (
    <View style={{ padding: 16 }}>
      <Text style={styles.h1}>Heading 1</Text>
      <Text style={styles.h2}>Heading 2</Text>
      <Text style={styles.body}>Regular body text for paragraphs.</Text>
      <Text style={styles.caption}>Small caption text</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  h1: { fontSize: 32, fontWeight: '700', color: '#111' },
  h2: { fontSize: 24, fontWeight: '600', color: '#333' },
  body: { fontSize: 16, fontWeight: '400', color: '#555', lineHeight: 24 },
  caption: { fontSize: 12, fontWeight: '300', color: '#999' },
});

color and lineHeight

Set the text color with a hex or named value, and use lineHeight to space lines apart. A little breathing room makes longer text far easier to read.

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

export default function Article() {
  return (
    <Text style={styles.paragraph}>
      React Native brings the best parts of mobile development
      together, combining a smooth native experience with the
      speed of JavaScript development.
    </Text>
  );
}

const styles = StyleSheet.create({
  paragraph: {
    fontSize: 16,
    color: '#444',
    lineHeight: 26,     // 26/16 = 1.625× line height
    letterSpacing: 0.2, // slight tracking for readability
  },
});

textAlign and Text Decoration

Position text with textAlign (left, center, right) and dress it up with textDecorationLine for underlines or textTransform for uppercase — just like CSS.

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

export default function TextStyling() {
  return (
    <View style={{ padding: 16 }}>
      <Text style={styles.centered}>Centered heading</Text>
      <Text style={styles.link}>Tap to visit website</Text>
      <Text style={styles.strikethrough}>Old price: $29.99</Text>
      <Text style={styles.uppercase}>sale ends tonight</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  centered: { textAlign: 'center', fontSize: 20, fontWeight: 'bold' },
  link: { color: '#0066cc', textDecorationLine: 'underline' },
  strikethrough: { textDecorationLine: 'line-through', color: '#999' },
  uppercase: { textTransform: 'uppercase', letterSpacing: 2, fontSize: 14 },
});

Nested Text for Mixed Styles

Nest Text inside Text to mix styles in one line, like a single bold word. Inner Text inherits the parent style and overrides only what you set.

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

export default function MixedText() {
  return (
    <View style={{ padding: 16 }}>
      <Text style={{ fontSize: 16, color: '#333' }}>
        Welcome back,{' '}
        <Text style={{ fontWeight: 'bold', color: '#0066cc' }}>
          Alice
        </Text>
        ! You have{' '}
        <Text style={{ color: 'red', fontWeight: '600' }}>3</Text>
        {' '}unread messages.
      </Text>
    </View>
  );
}

numberOfLines and ellipsizeMode

Use numberOfLines to cap how many lines show, and ellipsizeMode to add the "..." at the end. Great for list titles that should never wrap forever.

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

const longTitle = 'The Complete Guide to Building Production-Ready React Native Applications in 2024';

export default function TruncatedText() {
  return (
    <View style={{ padding: 16 }}>
      <Text numberOfLines={1} ellipsizeMode='tail' style={styles.title}>
        {longTitle}
      </Text>
      <Text numberOfLines={2} ellipsizeMode='tail' style={styles.body}>
        {longTitle}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  title: { fontSize: 18, fontWeight: 'bold', marginBottom: 8 },
  body: { fontSize: 14, color: '#666' },
});

Loading Custom Fonts with expo-font

Want your own font? Drop a .ttf in assets, then load it with the useFonts hook from expo-font. Wait until it is ready to avoid a flash of plain text.

import { useFonts } from 'expo-font';
import { Text, View } from 'react-native';

export default function App() {
  const [fontsLoaded] = useFonts({
    'Poppins-Regular': require('./assets/fonts/Poppins-Regular.ttf'),
    'Poppins-Bold': require('./assets/fonts/Poppins-Bold.ttf'),
  });

  if (!fontsLoaded) return null; // Show splash or null while loading

  return (
    <View style={{ padding: 24 }}>
      <Text style={{ fontFamily: 'Poppins-Bold', fontSize: 24 }}>
        Custom Font Heading
      </Text>
      <Text style={{ fontFamily: 'Poppins-Regular', fontSize: 16 }}>
        Body text with Poppins Regular.
      </Text>
    </View>
  );
}

Google Fonts with @expo-google-fonts

Even easier: the @expo-google-fonts packages bundle any Google Font for you. Install one, import the hook, and use its name — no manual files needed.

import { useFonts, Inter_400Regular, Inter_700Bold } from '@expo-google-fonts/inter';
import { Text, View } from 'react-native';

export default function App() {
  const [fontsLoaded] = useFonts({
    Inter_400Regular,
    Inter_700Bold,
  });

  if (!fontsLoaded) return null;

  return (
    <View style={{ padding: 24 }}>
      <Text style={{ fontFamily: 'Inter_700Bold', fontSize: 24 }}>
        Inter Bold
      </Text>
      <Text style={{ fontFamily: 'Inter_400Regular', fontSize: 16 }}>
        Inter Regular body text.
      </Text>
    </View>
  );
}

Selectable Text and onPress

By default Text cannot be copied. Add the selectable prop to allow it, or an onPress handler to make a word act like a tappable link.

import { Text, View, Alert } from 'react-native';

export default function InteractiveText() {
  return (
    <View style={{ padding: 16 }}>
      {/* Selectable text (user can copy) */}
      <Text selectable style={{ fontSize: 14, color: '#333', marginBottom: 16 }}>
        Long-press to select and copy this text.
      </Text>

      {/* Tappable text link */}
      <Text
        style={{ color: '#0066cc', fontSize: 16 }}
        onPress={() => Alert.alert('Link tapped!')}
        accessibilityRole='link'
      >
        Terms and Conditions
      </Text>
    </View>
  );
}

Handling Multiline and Long Content

Text wraps on its own when it runs out of room. Inside a flex row, add flexShrink: 1 so a long line shrinks instead of pushing things off screen.

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

export default function Article() {
  return (
    <ScrollView contentContainerStyle={{ padding: 16 }}>
      <View style={styles.row}>
        <Text style={styles.label}>Title:</Text>
        {/* flexShrink prevents overflowing the row */}
        <Text style={styles.value} numberOfLines={1}>
          A Very Long Article Title That Would Otherwise Overflow
        </Text>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', alignItems: 'center', gap: 8 },
  label: { fontWeight: 'bold', color: '#333' },
  value: { flexShrink: 1, color: '#666' },
});

Text Accessibility: accessibilityLabel

For screen reader users, add an accessibilityLabel to Text that is not self-explanatory. It helps VoiceOver and TalkBack describe your app clearly.

import { Text, View, TouchableOpacity } from 'react-native';

export default function AccessibleText() {
  return (
    <View>
      {/* Screen reader will say: 'Alice, 5 unread messages' */}
      <View accessible accessibilityLabel='Alice, 5 unread messages'>
        <Text style={{ fontWeight: 'bold' }}>Alice</Text>
        <Text style={{ color: 'red' }}>5</Text>
      </View>

      <TouchableOpacity
        accessibilityLabel='Delete account'
        accessibilityHint='Double tap to permanently delete your account'
      >
        <Text style={{ color: 'red' }}>Delete</Text>
      </TouchableOpacity>
    </View>
  );
}

Quick Check

Quick check! Lock in what you learned about Text and fonts. ✨

Lesson Recap

Great job! All text lives in Text, fontSize and color shape it, and expo-font makes custom typefaces easy. Next up: showing images.

Preguntas frecuentes

¿La lección «Visualización de texto y estilos de fuente» es gratis?

Sí — el texto completo de «Visualización de texto y estilos de fuente» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Native Academy, actualiza a CoddyKit PRO. El curso de React Native Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Visualización de texto y estilos de fuente»?

Muestre texto con el componente Text, aplique los estilos fontSize, fontWeight, color y lineHeight, y gestione correctamente el contenido multilínea. Practicas React Native Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Native Academy?

No se requiere experiencia previa. React Native Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Visualización de texto y estilos de fuente»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Native Academy?

Sí. Cada lección de React Native Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. El componente View como contenedor
  2. Visualización de texto y estilos de fuente
  3. Visualización de imágenes locales y remotas
  4. Composición de una tarjeta de perfil sencilla
← Volver a React Native Academy