Ejercicios básico con React Native – Expo

Alfredo de Jesús Gutiérrez — Thu, 11 Sep 2025 19:02:21 +0000

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 (
    
      Hello World!
    
  );
}

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 (
    
      Texto con estilos
    
  );
}

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 (
    
      {mensaje}

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 (
    
      {contador}

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 (
    
      
      Hola {nombre}
    
  );
}

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 (
    
       index.toString()}
        renderItem={({ item }) => {item}}
      />
    
  );
}

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 (
    
      Pantalla Inicio

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 (
    
      Icono de React Native:
      
    
  );
}

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 (
    
       item.id.toString()}
        renderItem={({ item }) => {item.title}}
      />
    
  );
}

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 (

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 (

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 (

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

Aplicaciones Multiplataforma archivos - Frexus