Crear un nuevo proyecto Expo con Typescript en React Native

Tiempo de lectura: 3 minutos

Hoy vamos a aprender cómo podemos crear un nuevo proyecto de React Native con Expo.

Crear un nuevo proyecto con React Native, Expo y TypeScript es un proceso relativamente sencillo. Aquí tienes los pasos básicos que puedes seguir:

Paso 1: Instalar Node.js y npm

Asegúrate de tener Node.js y npm instalados en tu máquina. Puedes descargarlos desde el sitio web oficial de Node.js: https://nodejs.org/

Paso 2: Instalar Expo CLI

Instala Expo CLI globalmente utilizando el siguiente comando en tu terminal:

npm install -g expo-cli

Paso 3: Crear un nuevo proyecto con TypeScript

Ejecuta el siguiente comando para crear un nuevo proyecto React Native con TypeScript:

npx create-expo-app -t expo-template-blank-typescript

Si solicita instalar create-expo-app@2.1.1 pulsamos en y

Ahora solicita el nombre de la aplicación:

Escribimos el nombre y esperamos mientras crea el proyecto.

Y ya esta listo:

Ahora se recomienda añadir esto dentro de package.json

{
  "scripts": {
    "ts:check": "tsc"
    ... 
  }
}

Quedando asi:

Esto sirve para checkear el TypeScript, podemos usar este comando:

npm run ts:check

Ahora vamos a generar el archivo tsconfig.json que se encarga de checkear TypeScript:

npx expo customize tsconfig.json

Extra: Alias de Path, si queremos seguir la estructura recomendada por expo, nuestro código estará dentro de src, para no tener que enlazar a src/* continuamente al importar una librería podemos crear un Alias de este Path. Para ello hacemos lo siguiente:

Abrimos el tsconfig.json que terminamos de crear y añadimos lo siguiente:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Quedando asi:

Ahora para importar los elementos pondremos:

import Button from '@/components/Button';

Finalmente, vamos a nuestro app.json y añadimos esto:

{
  "expo": {
    "experiments": {
      "tsconfigPaths": true
    }
  }
}

Y listo ya tenemos nuestro proyecto TypeScript creado.

Paso 4: Navegar al directorio del proyecto

Ingresa al directorio de tu proyecto recién creado:

cd myReactNativeApp

Paso 5: Iniciar el proyecto

Ejecuta el siguiente comando para iniciar tu aplicación:

expo start

Este comando abrirá una nueva ventana en tu navegador con la interfaz de Expo. Desde aquí, puedes lanzar tu aplicación en un emulador o dispositivo físico.

Paso 6: Desarrollar con TypeScript

Ahora puedes comenzar a desarrollar tu aplicación utilizando TypeScript. Los archivos TypeScript tienen la extensión .tsx, y Expo ya ha configurado TypeScript para ti en este proyecto.

Paso 7: Otras herramientas útiles

• Visual Studio Code (VSCode): Te recomiendo utilizar VSCode como tu editor de código. También puedes instalar la extensión «React Native Tools» para obtener una mejor experiencia de desarrollo.
• Expo Go: Puedes descargar la aplicación Expo Go en tu dispositivo para probar tu aplicación en un dispositivo físico.

Con estos pasos, deberías tener un nuevo proyecto React Native con Expo y TypeScript listo para comenzar. ¡Buena suerte con tu desarrollo!