👾 React Native y el uso de “React Navigation”
Tags: javascript, reactnative, mobile
Published: 2023-06-05 22:14:26

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**.

![create react native app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2eq6r6udjecm7t3pqczi.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zgb89p0jp6u3a50k5mz.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3uajoqdb4vjf3wbpsdc.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ou80wbr0ghx9bg88efdn.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsccgh7qatxclf1z2zff.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6q08dcad27vhte589by.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jsklgnh9u6sg8jj086qh.png)

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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3ptqss15sdnclwltg90.png)

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