Hola Mundo! con React Native y Expo

¿Una herramienta para crear aplicaciones Android y iOS de forma rápida y sencilla? ¡Habrá que verlo! Pues si, veamos un ejemplo de Hola Mundo con React Native y Expo, y descubramos si realmente esto es la panacea o no es para tanto.

¿Por qué React Native?

Muchas veces habréis oído la frase esa de “… tengo una idea para una app…”, a mi al menos me han arrojado esas palabras más de una vez. Y es que, todo el mundo puede tener una idea para una app, pero implementar la aplicación de forma rápida y a bajo coste ya no está al alcance de tantos.

Debido a esto, es habitual que cada cierto tiempo aparezcan herramientas que nos prometen materializar una idea en una aplicación, y todo ello en un plazo relativamente corto de tiempo.

Hasta el momento han existido varias herramientas que venían a proponer lo mismo, escribir en HTML, CSS y JS y poder ejecutar sobre iOS y Android sin muchos problemas. Como ejemplo de ellas tenemos PhoneGap e Ionic ambas basadas en Apache Cordova.

La novedad llegados a este punto es que React Native viene a ofrecer ejecutar las aplicaciones utilizando componentes nativos de Android y iOS por lo que se le intuye un mejor rendimiento e integración que las propuestas vistas hasta ahora.

Este artículo lo escribo en un momento complicado para React Native, y es que tal y como citó GenBeta no hace mucho, Airbnb y Udacity han dejado de usar la plataforma en cuestión. Fue este post el que me hizo probar a ejecutar un Hola Mundo en React Native. Y tras ver brevemente en qué consiste la tecnología me quedó claro: Sí hay un hueco para ella.

¿Qué es Expo?

Bien, la barrera de entrada a ejecutar nuestra primera App con esta tecnología ha sido eliminado por obra y gracia de Expo. Consiste en un conjunto de herramientas para hacernos la vida más fácil en el desarrollo con React Native, así de simple.

Nosotros vamos a usar Snack que viene a ser un IDE que se ejecuta en nuestro navegador web y Expo App, que nos permite ejecutar la aplicación en nuestro dispositivo Android (aquí para iOS).

Expo App

Lo primero que vamos a hacer es instalar en nuestro dispositivo Android la aplicación Expo App (aquí para iOS).

Esta App, en cuanto la inicias verás la opción Scan QR Code, la cual requiere permisos para acceder a la cámara del dispositivo. Con esta opción, simplemente escaneando un código QR podemos ver en ejecución la aplicación que estemos desarrollando lo cual facilita tremendamente la cosa.

Snack

Snack es el IDE que vamos a utilizar, como hemos dicho se ejecuta en el navegador, es bastante completo y permite la ejecución en nuestro dispositivo haciendo uso de Expo App.

Hola Mundo

Primero vamos a dirigirnos a la web de Snack. Y veremos un IDE donde en la barra inferior veremos ciertos parámetros básicos de configuración.

Vamos a configurar como Platform Android.

IDE Snack
Snack, el IDE que forma parte de el conjunto de herramientas que proporciona Expo.

Y directamente con el código que nos ofrecen vamos a pulsar Run on your device, botón que vemos en la parte derecha de la pantalla. En el popup que se muestra, hacemos clic sobre QR Code y este es el código que deberás escanear con Expo App.

Una vez escaneado y transcurridos unos segundos, veremos la aplicación ejecutándose en el móvil. Y no nos ha llevado más de 5 minutos.

Introducción al código

Como puedes ver, el código que viene por defecto no es más que una especie de HTML y CSS, por lo que a poco que sepas algo de ambas, podrás construir por ti mismo tus prototipos sin mucho esfuerzo.

Para que te hagas una idea, si no sabes nada de React, las etiquetas View que se ven en el código vienen a ser div en HTML y las Text son tratadas como p.

Prestemos atención a la etiqueta AssetExample. Esta etiqueta hace referencia al archivo local que se encuentra dentro del directorio components y que ha sido previamente importado (línea 6 del código). Lo cual hace el código más legible y mantenible.

Editar el código

Mantén tu dispositivo Android ejecutando la aplicación de prueba, si lo has parado, vuelve a escanear el QR tal y como hicimos anteriormente.

Vamos a dirigirnos a Snack y vamos a añadir el siguiente código al inicio de la clase App.

_onPress() {
  Alert.alert('¡Hola mundo!');
 }

Aparecerá un mensaje de error y la palabra Alert marcada en rojo. El problema es que no está definido Alert, así que vamos a importarlo. En la segunda línea, vemos que hay un import de varios elementos, pues bien, vamos a añadir Alert y Button (que nos hará falta ahora).

import { Text, View, StyleSheet, Button, Alert } from 'react-native';

Ahora no tendremos errores en el código, pero realmente no hemos modificado la interfaz de usuario, por lo que nuestra app no hace nada nuevo.

Vamos a editar la interfaz, así que reemplaza el contenido existente dentro de la etiqueta View para que quede así:

<View style={styles.container}>
  <View style={styles.buttonContainer}>
    <Button onPress={this._onPress} title="Clic aquí!"/>
  </View>
</View>

Tras hacer este cambio, aparecerá un mensaje de error indicando que el estilo paragraph no está siendo utilizado, por lo que debemos eliminarlo, quedando los estilos tal que así:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

El código completo vendría a quedar así:

import * as React from 'react';
import { Text, View, StyleSheet, Button, Alert } from 'react-native';
import { Constants } from 'expo';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  _onPress() {
  Alert.alert('¡Hola mundo!');
 }
  render() {
    return (
      <View style={styles.container}>
  <View style={styles.buttonContainer}>
    <Button onPress={this._onPress} title="Clic aquí!"/>
  </View>
</View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

Probando

Te habrás dado cuenta como, en tiempo real ha ido cambiando la apariencia de la App en ejecución en tu dispositivo Android donde se estaba ejecutando la aplicación. Pues bien, ahora puedes hacer clic en el botón que hemos creado y deberá mostrarse la alerta con el mensaje esperado 🙂

Conclusiones

El artículo y la prueba, como un Hola Mundo en React Native que es, no da para muchas conclusiones. Pero teniendo el respaldo que tiene esta tecnología creo que tiene su hueco en el mercado, eso si, en un mercado donde se desarrollen apps con una complejidad limitada.

No es de extrañar que empresas potentes como Airbnb dejen de usar estas herramientas, más disponiendo de estructuras que les permiten tener equipos de desarrollos para Android / iOS. Pero no creo que eso deba desanimar a nadie, una mediana empresa o simplemente una app con una lógica de negocio que no sea compleja puede estar desarrollada con esta tecnología sin requerir desarrolladores Android o Swift.

Un nuevo producto, lo primero que busca es obtener cuanto antes el MVP, y creo que ese es el punto fuerte de estas herramientas.

Espero que os haya servido de ayuda y hasta la próxima!

Actualización: Tras las dudas recibidas sobre esta tecnología, he añadido un enlace donde explico cómo funciona realmente la tecnología. Gracias por vuestras preguntas!

Recursos

Expo
Expo App iOS
Expo App Android
Documentación React Native
How React Native works?