Tu primera aplicación móvil

Crea tus primeras aplicaciones con expo y react native, desde cero hasta completar una aplicación funcional en tu móvil.

Una aplicación móvil normalmente esta construida de forma nativa, es decir usando el lenguaje que el dispositivo entiende de forma natural, como Kotlin para Android o Swift para Ios, esto significa que para el desarrollo de aplicaciones se necesitaria codificar dos veces la misma aplicación. Es debido a esto que nace React Native, utilizando como base el framework de desarrollo frontend React, nos permite utilizar componentes reutilizables para las vistas (o pantallas) de nuestra aplicacion movil, un solo codigo funcionando en diferentes dispositivos acompañado de lenguajes web modernos como Typescript.

Comenzando nuestro proyecto

Para comenzar este proyecto no requerimos un emulador pesado como Android Studio o Xcode pero si requeriremos lo siguiente:

-Expo Go y Expo: nos permite emular, en un dispositivo fisico nuestra aplicación.

-Pnpm, Bun, Npm, etc: un gestor de paquetes que nos va a permitir instalar las dependencias necesarias.

-Visual Studio Code: un IDE o editor de código que nos permita escribir el codigo de nuestra aplicación. Recomiendo Visual Studio Code.

Iniciar proyecto

En nuestra terminal ejecutamos el siguiente comando:

npx create-expo-app@latest MiApp

Estructura del proyecto

La carpeta src contiene todo lo relacionado a nuestra aplicación en cuestiones de vistas (pantallas) y la lógica de esta, dentro de esta carpeta podemos encontrar: tabs o services, las cuales seran explicadas mas adelante. Lo importante es mirar siempre nuestro archivo Index.tsx; tsx es una extensión que hace referencia a los archivos de react native, pueden ser componentes o pantallas completas.

Tabs

La carpeta tabs contiene las pantallas que incluyen una barra de navegación en la parte inferior, a eso nos referimos con "tabs", todos los archivos creados dentro de esta carpeta comparten el mismo layout, al igual que las paginas que estan fuera de tabs no tendran la navegación.

Services

Dentro de la arquitectura de nuestra app, la carpeta services hace referencia a los archivos que se conectan a nuestras APIs, pueden ser propias como una conexion a la base de datos, o servicios de terceros como Stripe

Crear nuestra primera pantalla

Debemos ingresar al archivo Index.ts mencionado anteriormente, dentro de este mismo encontraremos que por defecto expo nos crea contenido predeterminado, podemos eliminar todo el archivo y dejar solamente:

1export default function App(){
2	return()
3}

Esta funcion contendra todo el contenido de nuestra aplicación asi como las variables y logica de la misma.

Componentes comunes de React Native

Algunos de los componentes que vamos a utilizar con frecuencia son los siguientes:

-SafeAreaProvider: este componente envuelve toda nuestra aplicación como un contenedor para todos los demás componentes.

-View: Es el equivalente a un div en HTML, se considera como un contenedor.

-ScrollView: Este contenedor le permite a nuestra aplicación o al usuario poder "deslizar" de forma vertical, evitando por ejemplo el desbordamiento del contenido.

-Text: Funciona como una etiqueta label o p de HTML, muestra texto en pantalla.

-TextInput: Es el equivalente al input de HTML y nos permite ingresar por teclado algún dato.

Ejecutar

Finalmente para ejecutar nuestra aplicacion usamos el comando:

npm (o tu gestor de paquetes) expo start

esto abrirá un cli de expo en nuestra terminal, desde ahi encontraremos un QR y un enlace, que nos permitirán visualizar nuestra app en la aplicación de Expo Go