Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rodrigo2392/react-native-template

Plantilla base para proyectos basados en react native, con dependencias y configuraciones básicas.
https://github.com/rodrigo2392/react-native-template

jest react react-native react-navigation react-testing redux-toolkit splash-screen template template-project templates testing

Last synced: 2 months ago
JSON representation

Plantilla base para proyectos basados en react native, con dependencias y configuraciones básicas.

Awesome Lists containing this project

README 

        


  React Logo




React Native Template





  Repositorio base con configuraciones necesarias para inciar un nuevo proyecto basado en react native, incluye navegación, gestión de estado global, fuentes, iconos y bibliotecas útiles para el desarrollo






  node

    npm

  typescript

   typescript

    typescript




## Tabla de contenido



- [Motivación](#motivación)

- [¿Qué se incluye en esta plantilla?](#qué-se-incluye-en-esta-plantilla)

- [Bibliotecas](#bibliotecas)

- [Fuentes de texto](#fuentes-de-texto)

- [Building](#building)

- [Depuración](#depuración)

- [Pruebas](#pruebas)

- [Linting](#linting)

- [TODO](#todo)



##  Motivación

Cada que iniciaba un proyecto nuevo en react native me veía en la necesidad de instalar y configurar todas estas dependiencias desde cero. En este tiempo me he dado cuenta de que estas dependecias y configuraciones estan presentes en el 85% de los proyectos que he trabajo, es por eso que he creado esta plantilla con todas las configuraciones e instalaciones básicas como punto de inicio.



Esta plantilla no contine ningún tipo de arquitectura y presenta una estructura de carpetas flexible que permite al desarrollador adecuarlo a su proyecto.



Tene funcionalidad dummy como el inicio de sesion y las llamadas el servidor, pero son solo para ahorrar tiempo en ese trabajo. La navegación ya contiene el flujo correcto para trabajar con un inicio de sesión si así se requiere.



Estaré actualizando este repositorio, ya sea con las nuevas versiones de react native o de las dependiencia, así tambien como nuevas características que puedan ser útiles.



## ¿Qué se incluye en esta plantilla?



1. Navegación basada en bottom tab bar y stack anidados.

2. Fuente Roboto y Montserrat.

3. Integración básica de redux toolkit con persistencia.

4. Flujo básico de autenticación con estado global.

5. Iconos

6. Configuración básica de axios para permitir enviar un token como método de autenticación.

7. Reactotron como método de depuración de llamados al backend.

8. Comandos para generar archivo APK en android con build autoincremental.

9. Comandos personalizados para testing

10. Configuración básica para crear build de producción.

11. Selector de tema (oscuro/claro) basado en un estado local persistente.

12. Splash Screen peronalizable.

13. Información del dispositivo para React Native



##  Bibliotecas



| Biblioteca           | Categoría            | Versión | Descripción                                    |

| ----------------- | -------------------- | ------- | ---------------------------------------------- |

| React Native      | Framework      | v0.73   | Framework móvil       |

| React             | UI          | v18.2     | Biblioteca UI     |

| TypeScript        | Lenguaje             | v5.0      | Tipado                         |

| Redux Toolkit       | Estado global             | v2.2      | Gestión de estado global                         |

| React Navigation  | Navegación           | v6.1      | Navegación mediante stacks, tabs y drawers |

| RN Reanimated     | Animaciones           | v3.7      | Animaciones y transiciones            |

| AsyncStorage      | Persistencia          | v1.2      | Guardado local                             |

| Axios          | Peticiones HTTP        | v1.6      | Comunicación con el backend                  |

| React Query          | Cliente REST         | v1.6      | Gestor de llamadas asíncronas al servidor               |

| Reactotron RN     | Inspector/Depuración   | v5.1      | Depuración de llamados al backend                                |

| Jest              | Testing          | v29.6     | Estándar para aplicaciones javascript               |

| Dayjs          | Fechas         | v1.11      | Biblioteca para el manejo de fechas                        |

| FlashList         | Reemplazo de flatList | v1.6      | Mejora el renderizado de multiples elementos en lista  |

| RN SplashScreen         | Pantalla de bienvenida | v3.3     | Pantalla de bienvenida nativa para cada OS  |

| RN Device Info   | Información de dispositivo | v10.13  | Información de sistema para React Native              |



## Renombrar proyecto

Para renombrar el proyecto, reemplazar el nombre del paquete para android y del proyecto de xcode puedes usar la siguiente dependencia:



`npx react-native-rename "Travel App" -b "com.rodrigomendez.travelapp"`



Para más información puedes ir a la [documentación oficial](https://www.npmjs.com/package/react-native-rename "documentación oficial")



## Pantalla de bienvenida (Splash Screen)

Para cambiar la pantalla de bienvenida (logo de react) es necesario reemplazar algunos elementos:



**Para android**

- Imagen principal en `/android/app/src/main/res/drawable/launch_screen.png`

- Color de la barra de notificaciones en el archivo `/android/app/src/main/res/values/colors.xml ` el campo **status_bar_color**



Para mayor detalle puede consultar la [documentación oficial de la biblioteca](https://github.com/crazycodeboy/react-native-splash-screen "documentación oficial de la biblioteca").



## Fuentes de texto

Para agregar una nueva fuente es necesario agregarla a la carpeta `/android/app/src/main/assets/fonts`

Es importante usar el mismo nombre del archivo por ejemplo, si el archivo se llama **Montserrat-Regular** se deberá usar de la misma manera de modo que quede así:



`fontFamily: 'Montserrat-Regular'`



 o así



`fontFamily: 'Montserrat-Bold'`



No usar el modificador `fontWeight: 'bold'` esto hace que la fuente no funcione, en caso de querer un tamaño bold, usar la fuente correspondiente.



## Building



Para generar un apk de producción usar el siguiente comando:



```bash

npm run build:apk

```



Para generar un bundle de android para producción usar el siguiente comando:



```bash

npm run build:bundle

```

Ambos generan un bundle autoincrementable con el numero de versión diferente al generado en el pasado.



## Depuración



Para hacer depuración de llamados al servidor, mensajes en consola o errores en general el proyecto tiene previamente configurado reactotron, sólo debes decargar el ejecutable desde su repositorio y automáticamente se conectará a la aplicación.

[Decárgalo haciendo click aquí.](http://https://github.com/infinitered/reactotron/releases?q=reactotron-app&expanded=true "Decárgalo haciendo click aquí.")



## Pruebas



Para ejecutar los casos de pruebas usar el siguiente comando:



```bash

npm run test

```

Los casos de prueba se encuentran en la carpeta **`__test__`**



## Linting



Para formatear el codigo ejecutar el comando:



```bash

npm run lint

```



## Contribución

Todos los PR son bienvenidos, si agregas una biblioteca agrégala también a la tabla del Readme, con una descripción general del feature/corrección es suficiente o captura de pantalla en caso de ser algún componente visual.

En caso de ser una integración muy grande o con caracter de no básico crear un branch específico por ejemplo: firebase, algún framework ui o biblioteca específica como maps.



## Autor



Puedes encontrarme en Twitter [@rodrigom_dev](https://twitter.com/rodrigom_dev)! o en youtube [@rodrigomendezdev](https://www.youtube.com/@rodrigomendezdev)!



## Gracias por contribuir a:



- Daniel Ruiz [danieRG](https://github.com/danieRG)



## TODO

- I18n

- Variante con firebase

- Variante con bibliotecas nativas multimedia (camara, micrófono, lector QR, etc.)

- Variante con integración de mapas

- Más pruebas unitarias



## Licencia



- [MIT](LICENSE)