Tutorial React Native: Guía paso a paso para crear una app móvil multiplataforma

React Native se ha consolidado como una de las mejores opciones para el desarrollo móvil multiplataforma gracias a su eficiencia y capacidad para compartir código entre Android e iOS. En este tutorial React Native para principiantes e intermedios, aprenderás desde configurar el entorno hasta desplegar una app básica.

¿Qué es React Native y por qué elegirlo?

React Native es un framework desarrollado por Facebook que permite crear aplicaciones móviles usando JavaScript y React. Las aplicaciones se renderizan como componentes nativos, ofreciendo un mejor rendimiento y experiencia de usuario comparado con otras soluciones híbridas.

Ventajas:

Desarrollo multiplataforma con un solo código base.
Gran comunidad y ecosistema.
Acceso a módulos nativos para funcionalidades específicas.

Este tutorial está diseñado para ayudarte paso a paso a crear tu primera aplicación móvil con React Native.

Configuración del entorno de desarrollo

1. Instalar Node.js y npm

React Native utiliza Node.js para gestionar paquetes y scripts.

Descarga desde Node.js.
Verifica la instalación:

node -v
npm -v

node -v

npm -v

2. Instalar React Native CLI

Para crear y manejar proyectos React Native:

npm install -g react-native-cli

1 2	npm install -g react-native-cli

3. Configurar Android Studio (para Android)

Descarga Android Studio.
Instala el SDK de Android y configura el emulador.
Configura las variables de entorno:

# En macOS/Linux (añadir a ~/.bash_profile o ~/.zshrc)
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

# En macOS/Linux (añadir a ~/.bash_profile o ~/.zshrc)

export ANDROID_HOME=$HOME/Library/Android/sdk

export PATH=$PATH:$ANDROID_HOME/emulator

export PATH=$PATH:$ANDROID_HOME/tools

export PATH=$PATH:$ANDROID_HOME/platform-tools

Verifica:

adb devices

1 2	adb devices

4. Configurar Xcode (para iOS)

Solo en macOS:

Instala Xcode desde la App Store.
Abre Xcode y acepta las licencias.
Instala las herramientas de línea de comandos:

xcode-select --install

1 2	xcode-select --install

5. Crear un proyecto React Native

react-native init MiApp
cd MiApp

react-native init MiApp

cd MiApp

6. Ejecutar la app en emuladores

Android:

react-native run-android

1 2	react-native run-android

iOS (macOS):

react-native run-ios

1 2	react-native run-ios

Esto levantará la aplicación de inicio.

Creación de componentes básicos

React Native utiliza componentes para construir la UI.

1. Componente funcional básico

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

const Saludo = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>¡Hola, React Native para principiantes!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  text: {
    fontSize: 20,
    color: '#333',
  },
});

export default Saludo;

import React from 'react';

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

const Saludo = () => {

return (

<Text style={styles.text}>¡Hola, React Native para principiantes!</Text>

</View>

);

};

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#f5f5f5',

text: {

fontSize: 20,

color: '#333',

});

export default Saludo;

2. Usar el componente en App.js

import React from 'react';
import Saludo from './components/Saludo';

const App = () => {
  return <Saludo />;
};

export default App;

import React from 'react';

import Saludo from './components/Saludo';

const App = () => {

return <Saludo />;

};

export default App;

Este enfoque modular mejora la organización del código.

Navegación entre pantallas

Para manejar múltiples pantallas, usaremos React Navigation.

1. Instalar React Navigation

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context

npm install @react-navigation/native

npm install react-native-screens react-native-safe-area-context

Instalar los stacks:

npm install @react-navigation/native-stack

1 2	npm install @react-navigation/native-stack

2. Instalación de dependencias nativas

Android e iOS:

npx pod-install ios

1 2	npx pod-install ios

3. Configurar navegación

En App.js:

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

const Stack = createNativeStackNavigator();

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

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

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detalles" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

import * as React from 'react';

import { NavigationContainer } from '@react-navigation/native';

import { createNativeStackNavigator } from '@react-navigation/native-stack';

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

const Stack = createNativeStackNavigator();

function HomeScreen({ navigation }) {

return (

<Text>Pantalla Home</Text>

<Button

title="Ir a Detalles"

onPress={() => navigation.navigate('Detalles')}

</View>

);

}

function DetailsScreen() {

return (

<Text>Pantalla Detalles</Text>

</View>

);

}

export default function App() {

return (

<Stack.Navigator initialRouteName="Home">

<Stack.Screen name="Home" component={HomeScreen} />

<Stack.Screen name="Detalles" component={DetailsScreen} />

</Stack.Navigator>

</NavigationContainer>

);

}

4. Explicación

NavigationContainer contiene toda la navegación.
createNativeStackNavigator crea una pila de pantallas.
navigation.navigate('Detalles') permite ir a otra pantalla.

Gestión del estado con Hooks

React Native usa los mismos hooks que React para manejar estado y ciclos de vida.

1. Uso de useState

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

const Contador = () => {
  const [contador, setContador] = useState(0);

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

export default Contador;

import React, { useState } from 'react';

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

const Contador = () => {

const [contador, setContador] = useState(0);

return (

<Text>Valor: {contador}</Text>

<Button title="Incrementar" onPress={() => setContador(contador + 1)} />

</View>

);

};

export default Contador;

2. Uso de useEffect para efectos secundarios

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

const Timer = () => {
  const [segundos, setSegundos] = useState(0);

  useEffect(() => {
    const intervalo = setInterval(() => {
      setSegundos(prev => prev + 1);
    }, 1000);
    return () => clearInterval(intervalo);
  }, []);

  return (
    <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
      <Text>Segundos transcurridos: {segundos}</Text>
    </View>
  );
};

export default Timer;

import React, { useState, useEffect } from 'react';

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

const Timer = () => {

const [segundos, setSegundos] = useState(0);

useEffect(() => {

const intervalo = setInterval(() => {

setSegundos(prev => prev + 1);

}, 1000);

return () => clearInterval(intervalo);

}, []);

return (

<Text>Segundos transcurridos: {segundos}</Text>

</View>

);

};

export default Timer;

Consumo de APIs externas

Interactuar con servicios web es esencial para muchas apps.

1. Uso de fetch para llamar a una API

Crear un componente para mostrar usuarios:

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

const Usuarios = () => {
  const [usuarios, setUsuarios] = useState([]);
  const [cargando, setCargando] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setUsuarios(data))
      .catch(error => console.error(error))
      .finally(() => setCargando(false));
  }, []);

  if (cargando) {
    return <ActivityIndicator size="large" color="#0000ff" />;
  }

  return (
    <View style={styles.container}>
      <FlatList
        data={usuarios}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => (
          <Text style={styles.item}>{item.name}</Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    marginTop: 50,
  },
  item: {
    fontSize: 18,
    padding: 10,
    borderBottomWidth: 1,
    borderColor: '#ccc',
  },
});

export default Usuarios;

import React, { useState, useEffect } from 'react';

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

const Usuarios = () => {

const [usuarios, setUsuarios] = useState([]);

const [cargando, setCargando] = useState(true);

useEffect(() => {

fetch('https://jsonplaceholder.typicode.com/users')

.then(response => response.json())

.then(data => setUsuarios(data))

.catch(error => console.error(error))

.finally(() => setCargando(false));

}, []);

if (cargando) {

return <ActivityIndicator size="large" color="#0000ff" />;

}

return (

<FlatList

data={usuarios}

keyExtractor={item => item.id.toString()}

renderItem={({ item }) => (

)}

</View>

);

};

const styles = StyleSheet.create({

container: {

flex: 1,

padding: 20,

marginTop: 50,

item: {

fontSize: 18,

padding: 10,

borderBottomWidth: 1,

borderColor: '#ccc',

});

export default Usuarios;

2. Explicación

Se usa fetch para obtener datos JSON.
useEffect hace la petición cuando el componente se monta.
Se muestra un loader mientras carga.
FlatList optimiza la lista de elementos.

Despliegue básico en Android e iOS

1. Preparar la app para producción

Ejecuta:

npx react-native run-android --variant=release

1 2	npx react-native run-android --variant=release

Para iOS, genera un archivo .ipa en Xcode.

2. Despliegue en Android

Generar APK firmado

Genera una clave:

keytool -genkey -v -keystore miapp-release-key.keystore -alias miapp -keyalg RSA -keysize 2048 -validity 10000

1 2	keytool -genkey -v -keystore miapp-release-key.keystore -alias miapp -keyalg RSA -keysize 2048 -validity 10000

Mueve el archivo al directorio android/app
Configura android/gradle.properties:

MYAPP_RELEASE_STORE_FILE=miapp-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=miapp
MYAPP_RELEASE_STORE_PASSWORD=tu_password
MYAPP_RELEASE_KEY_PASSWORD=tu_password

MYAPP_RELEASE_STORE_FILE=miapp-release-key.keystore

MYAPP_RELEASE_KEY_ALIAS=miapp

MYAPP_RELEASE_STORE_PASSWORD=tu_password

MYAPP_RELEASE_KEY_PASSWORD=tu_password

Edita android/app/build.gradle, añade configuración release:

android {

    signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }

    buildTypes {
        release {
            signingConfig signingConfigs.release
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

android {

signingConfigs {

release {

storeFile file(MYAPP_RELEASE_STORE_FILE)

storePassword MYAPP_RELEASE_STORE_PASSWORD

keyAlias MYAPP_RELEASE_KEY_ALIAS

keyPassword MYAPP_RELEASE_KEY_PASSWORD

}

buildTypes {

release {

signingConfig signingConfigs.release

minifyEnabled false

proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'

}

Genera el APK:

cd android
./gradlew assembleRelease

cd android

./gradlew assembleRelease

El APK estará en android/app/build/outputs/apk/release/app-release.apk.

3. Despliegue en iOS

Abre el proyecto en Xcode (ios/MiApp.xcworkspace).
Selecciona el esquema Release.
Conecta un dispositivo iOS o usa un simulador.
En el menú, selecciona Product > Archive para crear un build.
Usa el organizador para subir a App Store o exportar para distribución Ad Hoc.

Conclusión y buenas prácticas

En este tutorial React Native para principiantes has aprendido a configurar tu entorno, crear componentes, navegar entre pantallas, controlar estado con hooks, consumir APIs y realizar despliegues básicos.

Buenas prácticas para seguir:

Mantén un código modular y reutilizable.
Usa hooks para manejar estado y efectos.
Maneja errores en peticiones HTTP y UI amigable.
Realiza pruebas de tu app en distintos dispositivos.
Actualiza las dependencias regularmente.

Tu próximo paso

¡Ahora te invitamos a crear tu propia aplicación móvil React Native! Explora funcionalidades avanzadas como animaciones, acceso a hardware y optimización del rendimiento. Si te gustó este tutorial, compártelo y suscríbete para más contenido sobre desarrollo móvil multiplataforma.

¡Mucho éxito con tu app!