EXTRAS

REACT
NATIVE
M. C. HORACIO AUGUSTO NAVARRO GARCÍA
Creando una aplicación con módulos
Las buenas prácticas de programación sugieren que lo deseables es que una aplicación
extensa se debe dividir en módulos, diseñando estos módulos de acuerdo a la función que
desempeña lo que debe repercutir en un mantenimiento más sencillo a la aplicación, así
como la identificación de errores al momento de las pruebas.

La programación en React Native no es la excepción y lo deseable es separar cada

componente de nuestra aplicación en archivos distintos y unirlos en la función principal.

Esta separación obviamente no se refiere a los componentes nativos React Native o React,
se refiere a los componentes creados utilizando los nativos y que cumplen una función
dentro de la apliación.
Al tener cada componente en un archivo separado que puede ser una clase o bien un
componente funcional, debemos resaltar que la sentencia export default
nombreComponente, esta sentencia es la que crea el componente y nos permite
utilizarlo.

Podemos tener más de un componente en un archivo, pero tendríamos que cambiar el

componente que deseamos exportar de forma manual, pues solo podemos exportar un
solo componente. Esta es la razón por la que se realiza un archivo por componente y es
importante identificar cuando un componente forma parte de otro, nos permite dejar ambos
en el mismo archivo. Esto depende del diseño de cada quien.
Para utilizar los componentes que hemos creado y están en otro archivo, utilizamos la
sentencia import nombreComponente from ubicación.

El nombre del componente será el que le dimos dentro del archivo (no el nombre del
archivo), y la ubicación es la ruta que nos lleva hasta el archivo.

Por ejemplo:

import SearchBar from ‘./componentes/searchBar’

Indica que debemos importat el componente SearchBar del archivo que se encuentra en la
carpeta componentes llamado searchBar.
De esta forma ya estaríamos en la posibilidad de utilizar nuestro componente escribiendo:

<SearchBar/>

Estos componentes pueden utilizar props o evitar hacerlo.

 Practiquemos
Vamos a construir una aplicación que ilustre como utilizamos los componentes y como
interactúan entre si.
¿Y las bases de datos?
En general las aplicaciones necesitan almacenar datos, los datos almacenados pueden ir
desde un simple puntaje o score para una aplicación recreativa, las preferencias de
lenguaje para una aplicación informativa o de consulta, las preferencias del usuario
respecto a la aplicación, datos un poco más completos que permitan generar información,
por ejemplo la cantidad de km recorridos en una aplicación fitness, el promedio de tiempos,
velocidad promedio, un historial de los días, hasta la conexión con una base de datos.

Partiendo de que React Native esta basado en React.js que esta desarrollado en JSX y
que su base es Javascript, ya podremos ir imaginando que los accesos a datos
persistentes se realizan desde funciones de Javascript. Y que tal como sabemos podemos
crear componentes dedicados a las tareas que requiere el manejo de datos persistentes.
Las opciones que tenemos para manejar entonces datos persistentes son:

• Async Storage: propio de React Native, es un almacenamiento que carece de

encriptación, es asíncrono y que es global para la aplicación. Se puede utilizar en
lugar del almacenamiento local.
https://reactnative.dev/docs/asyncstorage
• SQLite: Un ya conocido gestor de bases de datos dentro de los dispositivos
móviles, compatible con ACID y podemos encontrar componentes React Native
para realizar la conexión.
• Firebase: Base de datos que es almacenada en la nube propietaria de Google y
diseñada para dispositivos móviles. Los datos son almacenados en formato JSON y
se sincroniza en tiempo real con los clientes conectados.
https://developers-latam.googleblog.com/2017/05/guia-de-react-native-y-firebase-pa
ra.html
• iCloud: propietario de Apple, almacena los datos de forma local y los sincroniza con
el servidor cuando es posible. Puede utilizar CloudKit JS o bien CloudKit de forma
nativa.
• MySQL: un gestor de base de datos propietario de Oracle pero libre, podemos
conectar con este servidor mediante JSON y scripts php.
También existe la opción de utilizar opciones en línea que permiten en algunos casos
además del almacenamiento la generación de API’s para integrar en los proyectos.

• Back4app: https://www.back4app.com/ (Plan gratuito y con costo)

• Firebase: https://firebase.google.com/products/realtime-database (Plan gratuito y
con costo)
• AWS RDS: https://aws.amazon.com/es/rds/ (Todo con costo, SQL)
• AWS DynamoDB: https://aws.amazon.com/es/dynamodb/ (Todo con costo, noSQL)
• PouchDB: https://pouchdb.com/ (Gratuito, almacenamiento local)
Publicando nuestra app
La idea principal de crear una aplicación para dispositivos móviles es la de publicarla en las
tiendas respectivas a cada plataforma. Con React Native podemos construir una
aplicación multiplataforma, lo que nos daría la ventaja de utilizar el mismo desarrollo.

Ambas plataformas ofrecen a los desarrolladores mecanismos para la publicación de las

aplicaciones, considerando que Google Play es más simple que la App Store.

Aún así si aspiramos a dominar el mercado de las aplicaciones móviles debemos estar
dispuestos a pensar en ambas plataformas y hacer lo necesario para tener presencia.
En el caso de Android debemos hacer lo siguiente:

• Generar un certificado de forma local, para lo que necesitaremos el JDK.

• Configurar nuestro proyecto para que la aplicación sea firmada con ese certificado.
• Construir la aplicación en modo release firmada por el certificado que creamos.
• Colocar el .apk en la Play Store.

Podemos encontrar los pasos en la página oficial.

https://reactnative.dev/docs/signed-apk-android
En el caso de IOS debemos hacer lo siguiente:

• Tener una cuenta en Apple Developer - https://developer.apple.com/

• Tener una cuenta en iTunes Connect - https://itunesconnect.apple.com/login
• Crear una aplicación en iTunes Connect
• Crear un certificado en la cuenta de iTunes Connect
• Crear un Distribution Provisioning Profile para esa nueva aplicación
• (Opcional) Crear un Development Provisioning Profile si queremos probar la aplicación
en un dispositivo mientras la desarrollamos
• Construir, firmar y empaquetar la aplicación desde Xcode
• Subir al App Store el archivo .ipa obtenido en el paso anterior
Fastlane una alternativa gratuita y de código abierto para la App Store, nos va a ayudar en
un montón de tareas como generar certificados y provisioning profiles, construir y firmar
nuestra aplicación, además de subirla al store.

produce: para dar de alta nuestra aplicación en iTunes Connect.

match: para generar los certificados y provisioning profiles, y mantenerlos actualizados en
un repositorio Git privado.
gym: para construir nuestra aplicación y luego firmarla con nuestro certificado.
deliver: para subir nuestra aplicación al App Store o TestFlight.

Tutorial de instalación
https://platzi.com/blog/react-native-app-store/
Expo permite crear archivos .apk y .api para poder crear aplicaciones independientes del
entorno web. Tenemos una guía en la página oficial.

https://docs.expo.io/distribution/building-standalone-apps/