En el desarrollo de aplicaciones móviles con React Native y Expo, las estructuras de control y las estructuras cíclicas son la base del pensamiento lógico que da vida al código.
Estas herramientas permiten que nuestras apps tomen decisiones, repitan acciones y responden de forma dinámica a las interacciones del usuario.

Comprender cómo funcionan no solo mejora la calidad del código, sino también la forma en que pensamos los procesos, analizamos escenarios y creamos experiencias interactivas más humanas y fluidas.

Objetivo de aprendizaje

Al finalizar esta lección, el estudiante será capaz de identificar y aplicar las estructuras de control y cíclicas en el desarrollo de componentes funcionales dentro de React Native utilizando Expo, comprendiendo su relevancia en la toma de decisiones lógicas y la repetición de procesos automatizados.

Estructuras de control: decisiones inteligentes

Las estructuras de control determinan qué camino sigue el código según condiciones específicas.
Algunas de las más comunes son:

• if / else / else if → permiten evaluar condiciones y decidir qué bloque ejecutar.
• switch → organiza múltiples rutas posibles según el valor de una variable.
• Operador ternario ? → forma compacta de tomar decisiones dentro del JSX.
• Evaluación lógica && → ejecuta o muestra algo solo si la condición se cumple.

En React Native, estas estructuras controlan la navegación, la interfaz dinámica y el flujo de eventos del usuario.

Estructuras cíclicas: la repetición con propósito

Las estructuras cíclicas permiten repetir acciones o recorrer datos sin necesidad de escribir el mismo código varias veces.
Entre las más utilizadas se encuentran:

• for → recorre un número definido de elementos.
• while → repite un bloque mientras una condición sea verdadera.
• do...while → garantiza al menos una ejecución antes de evaluar la condición.
• .map() → muy usado en React Native para mostrar listas dinámicas o componentes iterativos.

Con Expo, estas estructuras permiten optimizar el rendimiento de la app y crear componentes más reutilizables.

React Native y Expo: un entorno práctico

React Native permite construir aplicaciones móviles nativas con JavaScript y React.
Expo, por su parte, es un entorno que simplifica el desarrollo, pruebas y despliegue de apps móviles sin necesidad de configurar Android Studio o Xcode.

Al combinarlos, obtienes un entorno rápido, escalable y perfecto para aprender los fundamentos de programación móvil moderna.

Actividades de aprendizaje

1. Lectura del caso de estudio:

“El código que cambió su destino: cómo Sofía descubrió el poder oculto de las estructuras de control”
Reflexiona sobre el papel de las decisiones y los ciclos en la historia. Después de leerlo responde las siguientes preguntas de reflexión:

• ¿Qué similitudes existen entre tomar decisiones en la vida y usar estructuras de control en programación?
• ¿Cómo influye la comprensión de los bucles en la forma en que enfrentamos la repetición de errores o tareas?
• ¿De qué manera un if mal planteado en código puede representar una mala decisión en un proyecto real?
• ¿Qué enseñanza deja el uso del método .map() sobre la importancia de transformar datos —o experiencias— en conocimiento?
• ¿Por qué el control del flujo en un programa refleja el control emocional en la resolución de problemas?
• Si tuvieras que elegir una estructura de control como metáfora de tu forma de pensar, ¿cuál sería y por qué?

2. Escucha el pódcast: “Historias que te retan”

¿Tú vida es un algoritmo? Descubre cómo los programadores enfrentan el caos lógico y lo transforman en creatividad. Después de escuchar el podcast, genera un reporte como resultado del reto que hiciste.

3. Actividad práctica:

Crea un pequeño proyecto en Expo que use:

• un botón para ejecutar un if / else
• una lista de elementos generada con .map()

Aplica estructuras de control y ciclos para manejar estados e interacciones. Puedes guiarte del ejemplo que esta aquí

4. Actividades de reforzamiento

• Sopa de letras
• Crucigrama

Dominar las estructuras de control y cíclicas no es solo un paso técnico:
es aprender a pensar con lógica, anticipar decisiones y repetir con propósito.
Cada línea de código bien estructurada es una metáfora del orden que damos a nuestras ideas.

Porque en la programación —como en la vida—, aprender a decidir y repetir correctamente, es lo que nos permite avanzar.

La entrada Estructuras de control y cíclicas en React Native con Expo se publicó primero en Frexus.

Si estás comenzando en el mundo del desarrollo móvil, React Native con Expo es una de las mejores formas de dar tus primeros pasos. Gracias a su facilidad de uso y a la rapidez para crear aplicaciones, podrás aprender los fundamentos sin complicaciones.

En este post encontrarás 12 ejercicios básicos con React Native y Expo que te llevarán desde mostrar un simple texto en pantalla hasta construir una calculadora funcional. La ruta está pensada para principiantes y cada actividad incluye código listo para probar en tu proyecto.

Al terminar este recorrido tendrás una base sólida para desarrollar aplicaciones móviles multiplataforma y continuar con proyectos más avanzados.

Ejercicio 1. Hola Mundo

• Objetivo: Mostrar un texto en pantalla.
• Tarea: Crear un proyecto con npx create-expo-app y mostrar Hello World!.
• Concepto: Text, View.

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

export default function App() {
  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <Text>Hello World!</Text>
    </View>
  );
}

Ejercicio 2. Estilos

• Objetivo: Personalizar vistas y textos.
• Tarea: Cambiar color de fondo, tamaño de letra y alinear texto.
• Concepto: StyleSheet.

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Texto con estilos</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex:1, justifyContent:'center', alignItems:'center', backgroundColor:'#e0f7fa' },
  text: { fontSize:24, fontWeight:'bold', color:'#00796b' }
});

Ejercicio 3. Botón Interactivo

• Objetivo: Manejo de eventos.
• Tarea: Crear un botón que cambie el texto al hacer clic.
• Concepto: Button, useState.

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

export default function App() {
  const [mensaje, setMensaje] = useState("Texto inicial");

  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <Text>{mensaje}</Text>
      <Button title="Cambiar Texto" onPress={() => setMensaje("¡Texto cambiado!")} />
    </View>
  );
}

Ejercicio 4. Contador Simple

• Objetivo: Estados dinámicos.
• Tarea: Dos botones y que actualicen un contador.
• Concepto: useState.

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

export default function App() {
  const [contador, setContador] = useState(0);

  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <Text style={{ fontSize:30 }}>{contador}</Text>
      <Button title="➕" onPress={() => setContador(contador+1)} />
      <Button title="➖" onPress={() => setContador(contador-1)} />
    </View>
  );
}

Ejercicio 5. Input de Texto (Saludo)

• Objetivo: Capturar texto.
• Tarea: Escribir el nombre en un TextInput y mostrar Hola [nombre].
• Concepto: TextInput, binding.

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

export default function App() {
  const [nombre, setNombre] = useState("");

  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <TextInput 
        placeholder="Escribe tu nombre" 
        style={{ borderWidth:1, padding:8, marginBottom:10, width:200 }}
        onChangeText={setNombre}
      />
      <Text>Hola {nombre}</Text>
    </View>
  );
}

Ejercicio 6. Lista de Elementos

• Objetivo: Renderizar arrays.
• Tarea: Mostrar frutas/tareas en una lista.
• Concepto: FlatList.

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

export default function App() {
  const frutas = ["Manzana", "Plátano", "Naranja", "Uvas"];

  return (
    <View style={{ flex:1, padding:20 }}>
      <FlatList 
        data={frutas}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => <Text style={{ fontSize:20, margin:5 }}>{item}</Text>}
      />
    </View>
  );
}

Ejercicio 7. Navegación

• Objetivo: Moverse entre pantallas.
• Tarea: Pantallas: Inicio y Perfil.
• Concepto: React Navigation.
• Requiere: npm install @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <Text>Pantalla Inicio</Text>
      <Button title="Ir a Perfil" onPress={() => navigation.navigate('Perfil')} />
    </View>
  );
}

function PerfilScreen() {
  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <Text>Pantalla Perfil</Text>
    </View>
  );
}

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Inicio" component={HomeScreen} />
        <Stack.Screen name="Perfil" component={PerfilScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Ejercicio 8. Uso de Íconos

• Objetivo: Mejorar UI.
• Tarea: Colocar íconos en botones o listas.
• Concepto: @expo/vector-icons.

import React from 'react';
import { View, Text } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

export default function App() {
  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <Text>Icono de React Native:</Text>
      <Ionicons name="logo-react" size={64} color="blue" />
    </View>
  );
}

Ejercicio 10. Consumir API

• Objetivo: Traer datos externos.
• Tarea: Mostrar títulos desde https://jsonplaceholder.typicode.com/posts.
• Concepto: useEffect, fetch.

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList } from 'react-native';

export default function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(res => res.json())
      .then(data => setPosts(data.slice(0,10))); // solo 10
  }, []);

  return (
    <View style={{ flex:1, padding:20 }}>
      <FlatList 
        data={posts}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => <Text style={{ margin:5 }}>{item.title}</Text>}
      />
    </View>
  );
}

Ejercicio 11. Ejercicio Extra: Suma de Dos Números

• Objetivo: Practicar inputs + lógica básica.
• Tarea: Dos TextInput donde se ingresen números y un botón que muestre la suma.
• Concepto: Manejo de TextInput con valores numéricos, conversión parseInt.

import React, { useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native';

export default function App() {
  const [num1, setNum1] = useState("");
  const [num2, setNum2] = useState("");
  const [resultado, setResultado] = useState(null);

  const sumar = () => {
    setResultado(parseInt(num1) + parseInt(num2));
  };

  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <TextInput placeholder="Número 1" keyboardType="numeric" style={{ borderWidth:1, padding:8, margin:5, width:200 }} onChangeText={setNum1}/>
      <TextInput placeholder="Número 2" keyboardType="numeric" style={{ borderWidth:1, padding:8, margin:5, width:200 }} onChangeText={setNum2}/>
      <Button title="Sumar" onPress={sumar} />
      {resultado !== null && <Text style={{ marginTop:10 }}>Resultado: {resultado}</Text>}
    </View>
  );
}

Ejercicio 12. Número Par o Impar

• Objetivo: Uso de condicionales.
• Tarea: Ingresar un número en TextInput y mostrar si es par o impar.
• Concepto: Operador módulo %, condicionales.

import React, { useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native';

export default function App() {
  const [numero, setNumero] = useState("");
  const [resultado, setResultado] = useState("");

  const verificar = () => {
    const n = parseInt(numero);
    if (isNaN(n)) {
      setResultado("Ingresa un número válido");
    } else {
      setResultado(n % 2 === 0 ? "Es par" : "Es impar");
    }
  };

  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <TextInput placeholder="Escribe un número" keyboardType="numeric" style={{ borderWidth:1, padding:8, margin:5, width:200 }} onChangeText={setNumero}/>
      <Button title="Verificar" onPress={verificar} />
      <Text style={{ marginTop:10 }}>{resultado}</Text>
    </View>
  );
}

Ejercicio 13. Calculadora Básica

• Objetivo: Combinar inputs + operaciones.
• Tarea: Dos TextInput y botones para sumar, restar, multiplicar y dividir. Mostrar el resultado.
• Concepto: Manejo de múltiples eventos y estados.

import React, { useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native';

export default function App() {
  const [num1, setNum1] = useState("");
  const [num2, setNum2] = useState("");
  const [resultado, setResultado] = useState(null);

  const calcular = (op) => {
    const n1 = parseFloat(num1);
    const n2 = parseFloat(num2);
    if (isNaN(n1) || isNaN(n2)) {
      setResultado("Error: Ingresa números válidos");
      return;
    }
    if (op === "sumar") setResultado(n1 + n2);
    if (op === "restar") setResultado(n1 - n2);
    if (op === "multiplicar") setResultado(n1 * n2);
    if (op === "dividir") setResultado(n2 !== 0 ? n1 / n2 : "No se puede dividir entre 0");
  };

  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <TextInput placeholder="Número 1" keyboardType="numeric" style={{ borderWidth:1, padding:8, margin:5, width:200 }} onChangeText={setNum1}/>
      <TextInput placeholder="Número 2" keyboardType="numeric" style={{ borderWidth:1, padding:8, margin:5, width:200 }} onChangeText={setNum2}/>
      
      <View style={{ flexDirection:'row', marginTop:10 }}>
        <Button title="➕" onPress={() => calcular("sumar")} />
        <Button title="➖" onPress={() => calcular("restar")} />
        <Button title="✖" onPress={() => calcular("multiplicar")} />
        <Button title="➗" onPress={() => calcular("dividir")} />
      </View>

      {resultado !== null && <Text style={{ marginTop:10 }}>Resultado: {resultado}</Text>}
    </View>
  );
}

La entrada Ejercicios básico con React Native – Expo se publicó primero en Frexus.

Integrar componentes multimedia en React Native eleva la experiencia del usuario en cualquier app. En esta guía práctica aprenderás a incluir imágenes personalizadas, sonidos envolventes y elementos visuales que le dan vida a un clásico juego de “Tres en Raya” (Gato / Tic-Tac-Toe).

La práctica se centra en:

• Imágenes personalizadas para representar a los jugadores (como una simpática carita de gato).
• Efectos de sonido al tocar una casilla.
• Animaciones suaves y una interfaz amigable.

Todo está diseñado para que lo sigas paso a paso, incluso si es tu primera vez trabajando con Expo o componentes multimedia.

Lee el caso de estudio

Accede al caso de estudio, después de leerlo responde las siguientes cuestiones:

• ¿Por qué la integración multimedia mejora la experiencia del usuario en aplicaciones móviles?
• ¿Qué elementos visuales o sonoros pueden contribuir más a la accesibilidad de una app?
• ¿Cómo puede un desarrollador equilibrar el rendimiento con la calidad gráfica?
• ¿Qué papel juega la empatía en el diseño de interfaces interactivas?
• ¿De qué manera la multimedia puede ayudar a la educación o inclusión digital?
• ¿Qué herramientas o librerías actuales facilitan la integración multimedia en móviles?

Escucha el podcast

Accede al podcast haciendo clic aquí. Resuelve el reto que te indique.

Realiza la práctica

Accede a la práctica guiada aquí y comienza a desarrollar tu propio juego interactivo usando React Native y Expo.

Te recomendamos tener conocimientos básicos de React Native, pero si estás comenzando, no te preocupes: incluimos explicaciones claras, imágenes y comentarios en el código.

La diferencia entre una app funcional y una app inolvidable está en los detalles. Al dominar los componentes multimedia en React Native, no solo mejoras la experiencia del usuario, también llevas tu código a otro nivel.

¡Haz que tu app se vea, suene y se sienta increíble!

Extras

• Pulsa aquí para acceder al código fuente base

La entrada Componentes Multimedia en React Native se publicó primero en Frexus.