Haciendo MotoApp: Flexbox en React Native, Intl y Publicar en Expo

Entrando en las últimas partes de esta serie de artículos sobre cómo creamos la aplicación MotoApp(disponible en Expo) y queremos compartir otros aspectos también relacionados al desarrollo móvil usando React Native que pueden ser menores pero que en todo caso fueron motivo de investigación para entender como aplicarlos en esta aplicación.

Una de las cosas un poco incomodas de React Native es cuando se va a usar Flexbox para el orden de los elementos. En el mundo web, Flexbox cumple unas reglas que en React Native puede tener un significado inverso.

Un ejemplo de eso es la propiedad flexDirection que en la web tiene por defecto el valor row y en React Native column.

Nótese también que las propiedades no son escritas con guiones intermedios sino en estilo camelCase.

En todo caso, leímos y aprendimos un poco en este artículo en Medium el cual de paso también nos llevó a este recurso muy interesante: Flexbox Froggy.

Eso sí, Flexbox Froggy sirve para entender Flexbox pero para la web, no React Native.

Problema con la clase Intl de JavaScript

Otra situación que se presentó cuando este código:

export function currency (value) {
  const formatter = new Intl.NumberFormat('en', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 0
  })

  return formatter.format(value)
}

Daba errores en mí computador(Linux Mint). El error era Can't find variable: Intl.

El problema parece ser que en algunas plataformas dicha clase/objecto no estaba disponible nativamente. Entonces para resolverlo tocó importar dos clases en el proyecto:

import 'intl'
import 'intl/locale-data/jsonp/en.js'

export function currency (value) {
  const formatter = new Intl.NumberFormat('en', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 0
  })

  return formatter.format(value)
}

Encontramos la solución al ver los problemas en estos issues:

• Can’t use Intl.NumberFormat without Debug JS Remotely turned on
• https://github.com/angular/angular/issues/3333#issuecomment-318628563

Publicando en Expo

Por último, una cosa que nos gustó de Expo pero que al mismo tiempo no nos gustó fue la publicación.

Por un lado es muy sencillo publicar la aplicación en Expo. Solo es usar el comando expo publish y listo, sin embargo, esto significa que la aplicación estará disponible usando otra aplicación.

Así es. Para poder usar la aplicación MotoApp toca instalar la aplicación Expo y ahí buscarla para poder usarla.

Y eso fue lo que no nos gustó mucho aunque lo aceptamos ya que no queríamos tener que instalar y configurar Android Studio y tener que hacer todo el proceso para publicarla en Google Play.

En todo caso, la aplicación fue hecha más que nada para aprender y darle un uso muy personal por lo que publicarla en Expo nos terminó pareciendo una buena idea y lo aceptamos.