Haciendo MotoApp: UI en React Native

En el primer artículo de esta miniserie, comentaba un poco sobre los motivos detrás de hacer MotoApp y sobre algunos detalles al integrar Firebase como backend de la aplicación.

Durante todo el desarrollo de MotoApp fuimos encontrando detallitos que nos complicaron la vida en menor o mayor medida. Los elementos de la interfaz de usuario fueron algunos que lo hicieron a menor escala.

User Interface en React Native

Queríamos que la app luciera como una aplicación Android. Un detalle que tenían los frameworks híbridos como Ionic es que la interfaz lucía mucho como iOS aún estando en Android.

Por eso, sabíamos que íbamos a buscar algo que nos permitiera implementar Material Design con las menores complicaciones posibles.

Fue así que encontramos a React Native Paper, una colección de componentes que implementan el estándar de interfaces de Google listo para usar en React Native.

Inicialmente, como no sabíamos de este módulo y ya que teníamos claro que queríamos tener un FAB(Floating Action Button), nos dimos a la tarea de buscar una implementación funcional para este framework de aplicaciones híbridas.

Probamos este módulo que cumplía la función muy bien pero al poco tiempo encontramos Paper y la librería contenía todo lo necesario así que lo descartamos.

Para conocer un poco más de React Native Paper puedes ver esta aplicación de prueba que corre en el navegador.

Pantallas de Registro e Inicio de Sesión

Otro asunto nuevo al hacer esta aplicación era el inicio de sesión y el registro. El detalle aquí era usar Firebase para esta funcionalidad. Afortunadamente, Firebase provee todo eso.

Algo que aprendimos en este proyecto es que Firebase es un servicio bastante completo y muy recomendable para prototipar o incluso salir a producción.

Así de sencillo implementamos el registro de usuarios.

handleSignUp () {
  const { email, password } = this.state

  auth
  .createUserWithEmailAndPassword(email, password)
  .then(user => this.props.navigation.navigate('Main'))
  .catch(error => this.setState({ errorMessage: error.message }))
}

Un error de novatos lo comete cualquiera

Una de las cosas que representó un bloqueo fuerte pero que tuvo una solución demasiado simple ocurrió cuando me apareció este error mientras desarrollaba un día de semana:

Unable to resolve module some-module from /home/francisco/projects/devaspros-projects/motoapp/src/Activity.js: Module does not exist in the module map or in these directories /home/francisco/projects/devaspros-projects/motoapp

El error es viejo, tiene algunas variantes y aún no tiene una solución definitiva.

A medida que buscaba opciones y trataba de resolverlo usando las sugerencias en los issues, íbamos pensando en dejar el proyecto u otras alternativas.

Sin embargo, un medio día en un antiguo empleo, mientras comentaba la situación a un compañero me di cuenta del error. Había escrito mal el módulo.

En vez de escribir:

import algo from 'algo';

Había escrito:

import algo from 'algo;'

A pesar de que estaba usando Visual Studio Code y tenía StandardJS configurado como linter, el error no fue detectado.

En todo caso nos dejó muy sorprendidos ese error ya que lleva mucho tiempo sin ser resuelto por los mantenedores del proyecto.

Lo bueno fue que se resolvió el inconveniente y pudimos seguir trabajando en el proyecto hasta publicarlo en Expo.

Sobre Expo hablaremos más adelante.

Un comentario sobre “Haciendo MotoApp: UI en React Native

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios .