React Native con Expo: Primeros Pasos para Apps Móviles React Native with Expo: Getting Started with Mobile Apps

1. Expo vs. React Native puro (Bare Workflow)1. Expo vs. Pure React Native (Bare Workflow)

Expo ofrece dos modalidades: Managed Workflow (Expo gestiona el código nativo, recomendado para la mayoría de apps) y Bare Workflow (acceso total al código nativo, para requisitos muy específicos). Empieza siempre con Managed: Expo offers two modes: Managed Workflow (Expo manages native code, recommended for most apps) and Bare Workflow (full native code access, for very specific requirements). Always start with Managed:

# Instalar Expo CLI
npm install -g @expo/cli

# Crear un nuevo proyecto
npx create-expo-app@latest MiApp --template
# Selecciona "Expo Router (TypeScript)" para routing basado en archivos

2. Estructura del proyecto con Expo Router2. Project Structure with Expo Router

Expo Router introduce un sistema de routing basado en el sistema de archivos (igual que Next.js), donde la carpeta app/ define las rutas de la navegación: Expo Router introduces a file-system-based routing system (just like Next.js), where the app/ folder defines the navigation routes:

app/
  ├── _layout.tsx      # Layout raíz (Stack o Tabs)
  ├── index.tsx        # Pantalla inicio: app/
  ├── (tabs)/
  │   ├── _layout.tsx  # Tab Navigator
  │   ├── home.tsx     # app/(tabs)/home
  │   └── profile.tsx  # app/(tabs)/profile
  └── [id].tsx         # Ruta dinámica: app/123

// app/_layout.tsx
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'Inicio' }} />
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    </Stack>
  );
}

3. Estilos con StyleSheet3. Styles with StyleSheet

React Native no usa CSS. En su lugar, usa la API StyleSheet que acepta un subconjunto de propiedades CSS con nombres en camelCase. No existe herencia de estilos y cada componente maneja sus propios estilos: React Native doesn't use CSS. Instead, it uses the StyleSheet API which accepts a subset of CSS properties in camelCase. There's no style inheritance and each component manages its own styles:

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

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>¡Hola, mundo!</Text>
      <Pressable style={styles.button} onPress={() => alert('ok')}>
        <Text style={styles.btnText}>Presionar</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 20 },
  title:     { fontSize: 24, fontWeight: '700', marginBottom: 16 },
  button:    { backgroundColor: '#FF6800', paddingHorizontal: 24, paddingVertical: 12, borderRadius: 8 },
  btnText:   { color: '#000', fontWeight: '600' },
});

4. Acceso a funciones del dispositivo4. Accessing Device Features

Expo expone APIs nativas listas para usar. Todo requiere declarar permisos en app.json: Expo exposes ready-to-use native APIs. All require declaring permissions in app.json:

import * as ImagePicker from 'expo-image-picker';
import * as Location from 'expo-location';

// Seleccionar imagen desde la galería
async function pickImage() {
  const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
  if (status !== 'granted') return;
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    quality: 0.8,
  });
  if (!result.canceled) console.log(result.assets[0].uri);
}

// Obtener ubicación actual
async function getLocation() {
  const { status } = await Location.requestForegroundPermissionsAsync();
  if (status !== 'granted') return;
  const loc = await Location.getCurrentPositionAsync({});
  console.log(loc.coords.latitude, loc.coords.longitude);
}

5. Build para producción con EAS5. Production Build with EAS

Expo Application Services (EAS) Build compila tu app en la nube, sin necesidad de Xcode en macOS o Android Studio. Solo necesitas configurar eas.json y ejecutar un comando: Expo Application Services (EAS) Build compiles your app in the cloud, without needing Xcode on macOS or Android Studio. You just need to configure eas.json and run a command:

npm install -g eas-cli
eas login
eas build:configure  # Genera eas.json

# Build para Android (.apk o .aab)
eas build --platform android --profile production

# Build para iOS (.ipa - requiere cuenta Apple Developer)
eas build --platform ios --profile production

ConclusiónConclusion

Expo + React Native es la forma más rápida de llevar una app web a móvil si ya conoces React. Expo Router hace la navegación intuitiva, EAS Build elimina la barrera de los entornos nativos y el ecosistema de paquetes Expo cubre el 90% de los casos de uso móviles. Expo + React Native is the fastest way to bring a web app to mobile if you already know React. Expo Router makes navigation intuitive, EAS Build removes the native environment barrier and the Expo package ecosystem covers 90% of mobile use cases.

¿Necesitas una app móvil iOS/Android para tu negocio? Contáctame. Desarrollo apps React Native con Expo para empresas en Colombia y el exterior. Need an iOS/Android app for your business? Contact me. I develop React Native apps with Expo for companies in Colombia and abroad.