Creación de aplicaciones móviles con React Native: diseño dinámico y responsive

Las aplicaciones móviles se han convertido en una parte esencial de nuestra vida diaria, brindando comodidad y funcionalidad al alcance de la mano. A medida que crece la demanda de aplicaciones móviles, también crece la necesidad de desarrolladores que generen aplicaciones fáciles de usar y de alta calidad, compatibles con múltiples plataformas. Aquí es donde entra React Native, un poderoso framework que permite a los desarrolladores crear fácilmente aplicaciones móviles multiplataforma.

En este artículo, exploraremos cómo lograr lo anterior con un enfoque en el diseño móvil y responsive. Asimismo, nos sumergiremos en los fundamentos de React Native, incluidos sus conceptos y componentes básicos, y analizaremos las mejores prácticas para diseños responsive, adaptados a diferentes tamaños de pantalla.

Sin importar si eres un desarrollador principiante o experimentado/a que busca expandir su conjunto de habilidades, este artículo te proporcionará el conocimiento y las herramientas que necesitas para crear aplicaciones móviles utilizando React Native.

¿Qué es React Native?

También llamado RN, React Native es un framework de JavaScript que permite a los desarrolladores crear aplicaciones móviles renderizadas de forma nativa para iOS y Android con el mismo código base, lo que se traduce en menos tiempo y recursos. React Native usa componentes y API similares a los que se usan en React, la popular biblioteca de JavaScript para aplicaciones web. React Native fue lanzado por Facebook y es ampliamente utilizado por desarrolladores de todo el mundo.

Otro punto que se debe tener claro es la diferencia entre React y React Native. Ambos son frameworks basados ​​en JavaScript creados por Facebook, pero tienen diferentes usos y capacidades. Mientras React es una biblioteca para crear interfaces de usuario web utilizando HTML y CSS, principalmente, para aplicaciones de una sola página, React Native es un marco para crear aplicaciones móviles nativas mediante componentes preconstruidos para mapear elementos de interfaz de usuario nativos para iOS y Android.

Además, React Native permite la reutilización del código y la compatibilidad entre plataformas, al tiempo que que React se usa a menudo junto con otras bibliotecas o marcos como Redux o Next.js.

¿Por qué necesitas React Native?

Como ya he mencionado, el punto clave de React Native es que permite escribir código una vez e implementarlo en plataformas iOS y Android, ahorrando tiempo y esfuerzo en el desarrollo. A continuación explico algunas de las principales razones para aprender React Native:

1. Desarrollo multiplataforma: con React Native, los desarrolladores pueden crear aplicaciones móviles que funcionan sin problemas en las plataformas iOS y Android con una base de código única, lo que significa menos tiempo y esfuerzo para crear aplicaciones separadas para diferentes plataformas.
2. Desarrollo más rápido: React Native permite a los desarrolladores crear aplicaciones móviles más rápido, ya que ofrece componentes de interfaz de usuario prediseñados que pueden personalizarse fácilmente y admite la recarga en caliente, lo que permite ver los cambios realizados en tiempo real.
3. Gran comunidad y recursos: tiene una comunidad grande y activa de desarrolladores, lo que significa que hay muchos recursos y soporte disponibles para ayudar a los desarrolladores a aprender y solucionar problemas.
4. Rentable: dado que React Native permite el desarrollo multiplataforma, puede ahorrar costos al reducir el tiempo de desarrollo y eliminar la necesidad de contratar desarrolladores independientes para las plataformas iOS y Android.
5. Popularidad y demanda: es un marco popular para crear aplicaciones móviles y tiene una gran demanda en el mercado laboral. Aprender React Native puede abrirte nuevas oportunidades profesionales.
   

En resumen, aprender React Native proporciona habilidades valiosas que te permitirán desarrollar aplicaciones móviles de manera eficiente, rentable y con un alto grado de flexibilidad y personalización.

React Native: fundamentos

React Native tiene ciertos fundamentos que son muy similares a React, así como sus componentes nativos que se diferencian de los componentes web usados en React. En los siguientes párrafos, hablaré de los conceptos más importantes en React Native y sus componentes.

Conceptos y componentes básicos

Componentes: Son piezas de código reutilizables, modulares y autónomas; utilizadas para crear interfaces complejas, y se clasifican en componentes funcionales y de clase. React Native proporciona componentes integrados como View, Text, Image, ScrollView, TextInput y muchos más. También puedes generar tus propios componentes personalizados al juntar los ya integrados y agregar tus propios estilos y funciones, según tus necesidades.

Props: Es una forma corta para propiedades. Sirven para pasar datos de un componente a otro, facilitando componentes reutilizables y modulares. Las props son de solo lectura y no pueden modificarse por el componente que los recibe. En su lugar, se transmiten de un componente padre a componentes hijos. Esto permite una jerarquía de componentes donde los datos fluyen de arriba hacia abajo y cada componente solo tiene que preocuparse por sus propias responsabilidades específicas.

View: Es un componente básico de la interfaz de usuario similar a un <div> en HTML, usado para generar un contenedor rectangular que, a su vez, se emplea para diseñar otros componentes en su aplicación. Proporciona una forma flexible y eficaz de definir el diseño de la interfaz de usuario y se puede anidar para diseños más complejos.

Estilos: Se definen mediante objetos de JavaScript que contienen pares clave-valor, donde las claves representan las propiedades del estilo y los valores se vinculan con dichas propiedades. Para diseñar nuestros componentes, podemos usar estilos en línea (no recomendado) o StyleSheet, un componente de estilo de React Native similar a CSS, pero con algunas diferencias. Por ejemplo, en lugar de usar nombres de propiedades con guion como font-size en CSS, usa nombres de propiedades camelCase como fontSize en React Native.

Mejores prácticas

A continuación, te comparto algunas de las mejores prácticas al crear tus aplicaciones con React Native:

1. Mantén los componentes simples: Es importante conservar los componentes simples y enfocados en una sola tarea, en lugar de tratar de hacer demasiado a la vez. Esto los hace más fáciles de mantener y probar.
2. Usa la API StyleSheet: como ya se menciono la API StyleSheet es una forma de crear estilos en React Native, similar a CSS. Es importante usarla para mantener los estilos organizados y optimizados para el rendimiento.
3. Evita los estilos en línea: los estilos en línea pueden generar un rendimiento deficiente y hacer que los estilos sean más difíciles de mantener. Es mejor usar la API StyleSheet para crear estilos, en lugar de establecerlos directamente en el componente.
4. Mantén simple la administración del estado: la administración del estado puede ser compleja en React Native, por lo que es importante mantenerla lo más simple posible. Usa bibliotecas de administración de estado como Redux o MobX solo si son necesarias.
5. Optimiza imágenes: las imágenes pueden ocupar mucha memoria y ralentizar el rendimiento de la aplicación. Es importante optimizar las imágenes comprimiéndolas y usando el formato apropiado para el dispositivo.
6. Prueba la aplicación en diferentes dispositivos: es importante probar la aplicación en diferentes dispositivos para asegurarse de que funciona bien y se ve bien en todos ellos. Utiliza simuladores y dispositivos reales para probar la aplicación.
7. Sigue las pautas específicas de la plataforma: iOS y Android tienen diferentes pautas de diseño y convenciones de interfaz de usuario. Es importante seguirlas para que la aplicación se vea y se sienta nativa en cada plataforma.
   

En resumen, siguiendo estas mejores prácticas, crearás aplicaciones móviles de alta calidad, rendimiento y fáciles de usar con React Native.

Diseño responsive

Hacer que una aplicación React Native sea responsive implica diseñar y codificar la aplicación de tal manera que se vea y funcione bien en una amplia gama de dispositivos con diferentes tamaños de pantalla, relaciones de aspecto y resoluciones. Aquí hay algunos consejos para hacer que tu aplicación React Native sea completamente responsive:

1. Utiliza Flexbox para el diseño: React Native usa el sistema de diseño Flexbox para definir la posición y el tamaño de los componentes. Esto te permite crear diseños flexibles y receptivos que se adaptan a diferentes tamaños y orientaciones de pantalla.
2. Aplica tamaños de fuente responsive: en lugar de usar tamaños de fuente fijos como los pixeles, aplica unidades rem o una biblioteca de fuentes responsive como react-native-responsive-fontsize para ajustar automáticamente los tamaños de fuente según el tamaño y la densidad de la pantalla.
3. Usa imágenes responsive: emplea el componente Imagen y su accesorio resizeMode para ajustar el tamaño de las imágenes según el tamaño de la pantalla y la relación de aspecto. También puedes usar herramientas como react-native-responsive-image para escalar automáticamente las imágenes según el tamaño de la pantalla.
4. Maneja la API de dimensiones: esta API  permite obtener el tamaño y la orientación de la pantalla, útil para ajustar el diseño y el estilo de su aplicación.
5. Considera el módulo de plataforma: el módulo de plataforma en React Native permite detectar la plataforma en la que se ejecuta tu aplicación (iOS o Android) y ajustar el estilo y el comportamiento en consecuencia.
   

Shopping list: aplicación móvil con React Native

Ahora es momento de aplicar toda la teoría vista para crear una aplicación móvil para un shopping list. Es una aplicación sencilla, pero a su vez perfecta para explicar cómo implementar las operaciones básicas con React Native.

Para seguir esta parte más fácilmente, deberás contar con ciertos conocimientos previos en:

• TypeScript, HTML y CSS.
• Funciones, objetos, matrices y clases.
  

Con esto en mente, es hora de empezar con la aplicación. Lo primero será crear e iniciar un proyecto con React Native usando Expo CLI, una herramienta de interfaz de línea de comandos para desarrollar y publicar aplicaciones React Native con el framework Expo.

Inserta los siguientes comandos:

Después, para iniciar nuestro proyecto solo corremos npm start. Antes de continuar, se debe instalar el componente react-native-check-bouncy para los ítems de la lista, por lo que utilizamos el comando npm install react-native-bouncy-checkbox. Ahora estamos listos para empezar con la aplicación donde crearemos el modelo de datos, los componentes que formarán nuestro shopping list y las vistas.

Para crear el modelo de datos, debemos hacer una carpeta nueva llamada models y, dentro de ella, generar el archivo item.model.ts, donde a su vez crearemos el modelo IItem con el id, bought como booleano para determinar si ha sido comprado o no, y text para describirlo.

Este es el modelo de datos que utilizaremos. A continuación, crearemos los diferentes componentes. Para guardar los archivos de los componentes, es necesaria la carpeta components y generar los archivos en su interior. Crearemos tres componentes: item, itemList y menu (en inglés).

El primer componente, servirá para representar cada artículo de la lista de compras, y en este componente emplearemos el modelo de datos creado previamente. En el componente itemList se usará FlatList de react-native con el que renderizaremos todos los items de nuestra lista de compras. Para agregar un nuevo elemento a la lista de compras, crearemos el componente menu.

Ahora crearemos la vista ShoppingListView, un modal que se desplegará para permitirnos agregar un nuevo ítem a la lista.

Finalmente, tomamos todos los elementos creados y los unimos en la interfaz principal App.tsx. Aquí tendremos un array en donde almacenaremos los datos de los ítems, así como también la propiedad isShoppingListViewVisible para la visibilidad del modal. Para manejar todos los estados, se empleará el conocido hook useState de React.

Y de esta forma ya tenemos nuestra primera aplicación con React Native, algo sencillo para los ítems de una lista de compras, pero que da una clara idea de las bases de esta tecnología. Como has podido ver, aprenderla no es difícil y ofrece grandes posibilidades.

Te animo a que la pruebes y sigas aprendiendo más de React Native.

¡Hasta luego!