Ejercicio básico con React Native - Expo

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>
  );
}

Ejercicios básico con React Native – Expo