Práctica: Construir una pantalla de perfil de usuario

Introducción: Más allá del "Hola Mundo" – Construyendo Interfaces Reales

Tras haber configurado tu entorno de desarrollo y explorado los componentes básicos de React Native, es momento de aplicar ese conocimiento en un proyecto tangible. Esta lección práctica te guiará en la construcción de una pantalla de perfil de usuario, un componente fundamental en casi cualquier aplicación moderna. No se trata solo de apilar elementos en la pantalla; es tu primera inmersión en el pensamiento estructural de una UI real, combinando estilos, componentes personalizados, y la organización lógica de la información.

Esta práctica consolidará tu comprensión sobre Flexbox en React Native, el uso de Image, Text, y View, y la introducción a componentes interactivos como TouchableOpacity o Pressable. Utilizaremos Expo para agilizar el proceso, enfocándonos en el código y no en la configuración. Al final, no solo tendrás una pantalla visualmente atractiva, sino también un patrón reutilizable y las bases para manejar datos de usuario dinámicos en lecciones futuras.

El objetivo es transformar conceptos abstractos en una interfaz concreta. Verás cómo un diseño aparentemente simple implica decisiones sobre jerarquía visual, espaciado, y la creación de una experiencia de usuario cohesiva. Es el puente entre los fundamentos y el desarrollo de funcionalidades completas.

Concepto Clave: El Modelo de Caja y Flexbox como Tu Plan de Construcción

Imagina que estás organizando los muebles en una habitación vacía. Tienes una estantería (el contenedor principal View), y dentro quieres colocar un cuadro (una Image), una placa con un nombre (un Text), y unos cajones con información (más View anidados). Flexbox es el sistema de reglas que decides usar para organizarlos: ¿los pones todos en una columna uno debajo del otro (flexDirection: 'column')? ¿O los alineas horizontalmente en una fila (flexDirection: 'row')? ¿Cómo distribuyes el espacio sobrante entre ellos (justifyContent)? ¿Y cómo los alineas lateralmente (alignItems)?

Cada componente en React Native es una "caja" que sigue este modelo. Comprender esto es crucial porque todo el layout se basa en ello. A diferencia del CSS para web, aquí Flexbox es el mecanismo principal y, afortunadamente, tiene un comportamiento más consistente. Pensar en tu UI como un árbol de contenedores (View) que organizan sus elementos hijos usando estas propiedades flexibles es el primer paso para dominar el diseño en React Native.

Tip del Instructor: Cuando un diseño no se ve como esperas, el 90% de las veces el problema está en las propiedades de Flexbox del contenedor padre. Pregúntate siempre: ¿Cuál es la dirección principal (flexDirection)? ¿Cómo se justifica el contenido (justifyContent)? ¿Cómo se alinean los items (alignItems)?

Cómo funciona en la práctica: Deconstruyendo la Pantalla de Perfil

Vamos a construir la pantalla de forma estructurada, dividiéndola en componentes lógicos. Primero, definiremos la estructura general: un ScrollView que envuelve todo para garantizar que el contenido sea desplazable en dispositivos pequeños. Dentro, tendremos un contenedor principal con un padding general. Luego, identificamos las secciones visuales: 1) El encabezado con la foto, nombre y título. 2) Una sección de estadísticas o badges. 3) Una sección de biografía. 4) Una lista de acciones o configuraciones.

Cada una de estas secciones será un View independiente, lo que nos permite aplicar estilos y lógica de manera aislada. Para la foto de perfil, usaremos el componente Image de React Native, manejando cuidadosamente su redondez (borderRadius) para hacerla circular. Los botones o items de acción los implementaremos con TouchableOpacity, proporcionando retroalimentación visual al usuario. A lo largo del proceso, definiremos un objeto de styles utilizando StyleSheet.create, lo que mejora el rendimiento y la legibilidad del código comparedo a los estilos en línea.

Este enfoque modular no solo hace el código más manejable, sino que también prepara el terreno para futuras refactorizaciones. Por ejemplo, la sección de estadísticas podría extraerse fácilmente a un componente funcional independiente llamado UserStats, que recibiría los datos como props. Esta es la esencia del desarrollo con React: construir interfaces a partir de componentes pequeños y reutilizables.

Código en acción: Implementación Paso a Paso

Comencemos creando un nuevo archivo llamado ProfileScreen.js. Aquí está el código completo y funcional de nuestra pantalla. Incluye datos estáticos que luego podrían ser reemplazados por un estado o props.

import React from 'react';
import {
  ScrollView,
  View,
  Text,
  Image,
  TouchableOpacity,
  StyleSheet,
  SafeAreaView,
} from 'react-native';

const ProfileScreen = () => {
  // Datos estáticos del usuario (en una app real, esto vendría de un estado o API)
  const userData = {
    name: 'Alex García',
    title: 'Desarrollador Senior React Native',
    bio: 'Apasionado por crear apps móviles performantes y con una UX excepcional. Más de 5 años de experiencia en el ecosistema JavaScript y React.',
    avatarUrl: 'https://randomuser.me/api/portraits/men/32.jpg', // Imagen de ejemplo
    stats: {
      posts: 142,
      followers: '2.5k',
      following: 348,
    },
    menuItems: [
      { id: 1, label: 'Mis Proyectos', icon: '📁' },
      { id: 2, label: 'Configuración de la Cuenta', icon: '⚙️' },
      { id: 3, label: 'Modo Nocturno', icon: '🌙', toggle: true },
      { id: 4, label: 'Centro de Ayuda', icon: '❓' },
      { id: 5, label: 'Cerrar Sesión', icon: '🚪', isDestructive: true },
    ],
  };

  const renderMenuItem = (item) => (
    <TouchableOpacity key={item.id} style={styles.menuItem}>
      <Text style={styles.menuIcon}>{item.icon}</Text>
      <Text style={[styles.menuLabel, item.isDestructive && styles.destructiveText]}>
        {item.label}
      </Text>
      {item.toggle ? (
        <Text style={styles.toggleIndicator}>◉</Text> // Indicador simple para toggle
      ) : (
        <Text style={styles.chevron}>></Text>
      )}
    </TouchableOpacity>
  );

  return (
    <SafeAreaView style={styles.safeArea}>
      <ScrollView contentContainerStyle={styles.scrollContainer}>
        {/* Encabezado del Perfil */}
        <View style={styles.header}>
          <Image source={{ uri: userData.avatarUrl }} style={styles.avatar} />
          <Text style={styles.name}>{userData.name}</Text>
          <Text style={styles.title}>{userData.title}</Text>
          <TouchableOpacity style={styles.editButton}>
            <Text style={styles.editButtonText}>Editar Perfil</Text>
          </TouchableOpacity>
        </View>

        {/* Sección de Estadísticas */}
        <View style={styles.statsContainer}>
          <View style={styles.statItem}>
            <Text style={styles.statNumber}>{userData.stats.posts}</Text>
            <Text style={styles.statLabel}>Publicaciones</Text>
          </View>
          <View style={styles.statDivider} />
          <View style={styles.statItem}>
            <Text style={styles.statNumber}>{userData.stats.followers}</Text>
            <Text style={styles.statLabel}>Seguidores</Text>
          </View>
          <View style={styles.statDivider} />
          <View style={styles.statItem}>
            <Text style={styles.statNumber}>{userData.stats.following}</Text>
            <Text style={styles.statLabel}>Siguiendo</Text>
          </View>
        </View>

        {/* Sección de Biografía */}
        <View style={styles.bioSection}>
          <Text style={styles.sectionTitle}>Biografía</Text>
          <Text style={styles.bioText}>{userData.bio}</Text>
        </View>

        {/* Menú de Acciones */}
        <View style={styles.menuSection}>
          <Text style={styles.sectionTitle}>Cuenta y Preferencias</Text>
          <View style={styles.menuList}>
            {userData.menuItems.map(renderMenuItem)}
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  scrollContainer: {
    paddingBottom: 30,
  },
  header: {
    alignItems: 'center',
    paddingVertical: 30,
    backgroundColor: 'white',
    marginBottom: 10,
  },
  avatar: {
    width: 120,
    height: 120,
    borderRadius: 60,
    marginBottom: 16,
    borderWidth: 3,
    borderColor: '#e1e1e1',
  },
  name: {
    fontSize: 26,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 4,
  },
  title: {
    fontSize: 16,
    color: '#666',
    marginBottom: 20,
    textAlign: 'center',
    paddingHorizontal: 20,
  },
  editButton: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 24,
    paddingVertical: 10,
    borderRadius: 20,
  },
  editButtonText: {
    color: 'white',
    fontWeight: '600',
    fontSize: 15,
  },
  statsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: 'white',
    paddingVertical: 20,
    marginBottom: 10,
  },
  statItem: {
    alignItems: 'center',
    flex: 1,
  },
  statNumber: {
    fontSize: 22,
    fontWeight: 'bold',
    color: '#333',
  },
  statLabel: {
    fontSize: 14,
    color: '#888',
    marginTop: 4,
  },
  statDivider: {
    width: 1,
    backgroundColor: '#e1e1e1',
  },
  bioSection: {
    backgroundColor: 'white',
    padding: 20,
    marginBottom: 10,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#333',
    marginBottom: 12,
  },
  bioText: {
    fontSize: 15,
    lineHeight: 22,
    color: '#555',
  },
  menuSection: {
    backgroundColor: 'white',
    paddingHorizontal: 20,
    paddingTop: 20,
  },
  menuList: {
    borderRadius: 12,
    overflow: 'hidden', // Para que los bordes redondeados de los hijos se recorten
  },
  menuItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 16,
    paddingHorizontal: 10,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#e1e1e1',
  },
  menuIcon: {
    fontSize: 22,
    marginRight: 15,
    width: 30,
  },
  menuLabel: {
    flex: 1,
    fontSize: 17,
    color: '#333',
  },
  chevron: {
    fontSize: 18,
    color: '#999',
  },
  toggleIndicator: {
    fontSize: 18,
    color: '#007AFF',
  },
  destructiveText: {
    color: '#FF3B30',
  },
});

export default ProfileScreen;
    

Este código produce una pantalla de perfil completa, moderna y lista para integrarse en una aplicación. Observa cómo cada sección está claramente separada y estilizada. El uso de SafeAreaView asegura que el contenido no se superponga con la muesca o barras de estado en dispositivos modernos. La función renderMenuItem demuestra cómo se puede abstraer la lógica de renderizado para mantener el JSX principal limpio y legible.

Errores comunes y cómo evitarlos

Al construir una pantalla como esta, es fácil caer en ciertos errores que afectan la funcionalidad o la apariencia. Aquí te presentamos los más frecuentes y sus soluciones:

1. Olvidar el ScrollView o usarlo incorrectamente: Si tu contenido excede la altura de la pantalla, se cortará sin posibilidad de desplazamiento. Solución: Envuelve el contenido principal en un ScrollView. Recuerda que el ScrollView debe tener un padre con una altura definida (usualmente flex: 1). Usar contentContainerStyle para el padding es mejor que aplicar estilos directamente al ScrollView para el layout interno.

2. Imágenes con dimensiones incorrectas o sin borde redondeado: Una imagen cargada desde una URL sin dimensiones definidas puede no aparecer o distorsionarse. Solución: Siempre define width y height en el estilo de la Image. Para un avatar circular, establece borderRadius en la mitad del valor del width/height (ej: width: 100, height: 100, borderRadius: 50).

3. Confusión con Flexbox en contenedores anidados: El layout no se comporta como esperas porque un View intermedio no tiene el flexDirection correcto. Solución: Depura añadiendo bordes de colores temporales a tus View para visualizar sus límites. Verifica la propiedad flexDirection en cada contenedor que actúe como organizador de hijos.

4. No manejar el área segura (Safe Area): En iPhones con muesca o dispositivos con gestos, el contenido puede quedar detrás de elementos del sistema. Solución: Envuelve tu pantalla de nivel superior en un SafeAreaView de react-native (o el de react-native-safe-area-context para más control). No lo uses para contenedores internos.

5. Estilos en línea que impactan el rendimiento y la mantenibilidad: Escribir estilos directamente en la prop style dificulta la reutilización y es menos eficiente. Solución: Crea siempre una StyleSheet al final del componente. Agrupa estilos relacionados y nombra las clases de manera semántica (ej: styles.header, styles.primaryButton).

Checklist de dominio

Antes de considerar esta lección completa, asegúrate de poder verificar los siguientes puntos. Cada uno representa una competencia práctica adquirida.

• Puedo estructurar una pantalla completa utilizando componentes básicos como View, Text, Image y ScrollView.
• Comprendo y aplico las propiedades clave de Flexbox (flexDirection, justifyContent, alignItems) para crear layouts simples y efectivos.
• Sé cómo importar y utilizar componentes de interactividad como TouchableOpacity para crear elementos presionables.
• Puedo crear y aplicar estilos organizados utilizando StyleSheet.create, diferenciando entre estilos para contenedores y elementos.
• Sé cómo manejar imágenes remotas con el componente Image, controlando su tamaño y forma (incluyendo avatares circulares).
• Puedo estructurar datos estáticos en un objeto y mapearlos para renderizar listas de elementos de manera dinámica (como el menú de opciones).
• Entiendo la importancia de SafeAreaView para respetar los límites de pantalla de dispositivos modernos.
• Puedo identificar y corregir errores comunes de layout relacionados con Flexbox y el viewport.