React Native es un marco de aplicaciones móviles de código abierto, se usa para desarrollar aplicaciones Android, iOS, web y UWP y proporciona controles de interfaz de usuario nativa y acceso completo a la plataforma nativa, para comenzar a trabajar con este framework, se necesitan aspectos básicos de Javascript.

👀Pero esta vez vamos a lo que nos interesa, aprender el como hacer una aplicación utilizando React Native:

😶‍🌫️ Paso no. 1:

Para esto utilizaremos create-react-app, así que como diría Jack el destripador “Vamos por partes 🔪”:

Primero Instalaremos globalmente créate-react-app, esto lo haremos de la siguiente forma:

npm install -g create-react-app

Luego podemos ir a la poderosísima documentación y bastara con hacer un create-react-app my-app, crearemos un proyecto llamado pokedex-app.

Lee la documentación oficial no seas flojo 🤔 => https://create-react-app.dev/docs/getting-started/

Una vez que creamos nuestro proyecto, no queda más que hacer lo siguiente, para correr nuestra aplicación:

Generalmente por default nos crea la aplicación con Javascript, pero podemos decidir si utilizarlo o utilizar Typescript, en mi caso utilizare Typescript.

Ahora vamos con lo bueno, el uso de React Navigation:

Necesitaremos dos cosas importantes, instalaremos el paquete

npm install @react-navigation/native

Y una dependencia de expo

npx expo install react-native-screens react-native-safe-area-context

Esto instalará versiones de estas bibliotecas que sean compatibles.

Y en nuestro caso como ya somos todos unos 🦾😎devs expertos, utilizaremos Bottom Tabs Navigator, así que haremos un install de:

npm install @react-navigation/bottom-tabs

Véase la documentación oficial como el buen dev que eres 🤠 => https://reactnavigation.org/docs/getting-started

Para poder realizar el ejemplo, realice la siguiente estructura:

Donde si te das cuenta, tenemos una carpeta llamada Navigation, la cual tendrá un papel importante ahora mismo ya que dentro, crearemos un archivo llamado AppStackNavigation.tsx.

También tendremos la carpeta de screens, en donde crearemos nuestras vistas principales, que, en nuestro caso serán solo dos por el momento Home.tsx y ListApp.tsx.

El código de Home.tsx será el siguiente:

El código de ListApp.tsx será el siguiente:

Que como podemos observar son vistas sencillas, que solo muestra un texto.

Ahora veamos lo que nos importa, el como hacer que en nuestra app se vean las TabNavigator

Lo último que tenemos que realizar y lo más importante, es que en nuestro archivo de App.tsx, tendremos que importar AppStackNavigation.

Se vera de la siguiente forma:

Ahora podremos tener Rect navigation implementado en nuestra app hecha con React Native.