Cómo empezar con React Native si ya sabes React.js

Me habría gustado saber esto antes de crear mis primeras apps móviles. Yo elegí React Native porque sabiendo React tenía mucho del camino listo para sentirme preparado y tener una aplicación con millones de descargas en tiempo record. Esta es una lista de features que quizás usará una aplicación y contarles sobre mi experiencia cambiando el chip del mundo web responsive al modo aplicación “nativa”.

OMG no necesito media queries

Solo una pantalla que aunque puede tener diferentes tamaños siempre respeta la misma experiencia, aunque ya que escribes al mismo tiempo apps para iOS y Android lo más parecido a un Media Query es hacer un if entre plataformas.

No hay formularios

No hay un componente que regularice los datos y tenga un formato estándar para su envío como FormData, mientras que si existe TextInput que tiene variedad de propiedades como por ejemplo que un campo se haga autofoco o que sea exclusivo para un password o email lo que me lleva al siguiente punto.

Que facil es personalizar el teclado

Especialmente para iOS hay muchos tipos de teclado que podemos asignar al Componente TextInput que mejoran muchísimo la experiencia como twitter, url o web-search y claro están los clásicos numéricos o de email.

La parte superior donde ves la batería se llama barra de estado

Suena obvio pero aunque me tomó un par de minutos averiguar que existía es muy poderoso en la experiencia de tu aplicación y aun más si tu app tiene un header oscuro y si o si te preguntas cómo hacer que pase de color negro a blanco o más aun mostrar que se está haciendo una petición al API y muestre un icono de carga, este es el componente que necesitas StatusBar.

Aclaración: cambiarle el color es posible en Android pero poder ocupar todo el alto de la pantalla es nuevo para mi ❤️

Developer Experience

Cuentas con herramientas como: depurar el código js con el acceso a una consola en el navegador donde puedes ver todos tus logs. Por ejemplo, si no estás seguro si enlazaste bien un evento. Pero lo mejor es tener Hot y Live Reload que es la característica para redibujar la app automáticamente cuando haces algún cambio.

Esto me funcionó genial en el emulador. Si vas a depurar en el teléfono, usa este tutorial de cómo activarlo que me resolvió la vida. Era cambiar un poco la referencia a mi IP dentro de la configuración de la app. Habría querido saberlo desde un inicio.

Listas

Para mi gran final les tengo el feature de React Native donde sinceramente me sentí un poco tonto al inicio, ListView.

Cabeceras Sticky

React Native ya hizo el trabajo por ti de crear un componente de lista que recibe “cabeceras fixed” No tienes que odiarte para rehacerlo, Esto de las cabeceras fixed son algo que se ve mucho en las aplicaciones para ahorrar espacio y dar contexto de donde estar ubicado, solo tienes que utilizar las propiedad stickySectionHeadersEnabled

Separadores

Cuando haces una lista normalmente pones un borde en la parte inferior de ellas para separarlas visualmente, esto en CSS lo resolvía usando pseudo elementos y pseudo clases al estilo :after o :last-child pero adivinen: No existe tal cosa en React Native, esto dolió mucho. pero el componente ListView pensó en todo y te trae renderSeparator que hace la magia por ti sin tener que pensar en no hacer el render de la último separador ya que esto lo hace automáticamente.

Bonus Tracks

Expo viene includo en create-react-native-app es una forma fácil de arrancar con una aplicación y hacerle debug sin que el teléfono este conectado al computador y puedes compartir con un QR la aplicación en la que estas trabajando o subirla a su store donde cualquiera la podrá buscar por el nombre que elijas, Sin duda una gran opción pero eventualmente tendrás que hacer eject de la app para publicarla o si tienes que utilizar una dependencia que requiera código nativo en tu aplicación. Así que mi consejo aquí es que uses esta opción si vas a hacer una demo o quieres probar algo rápido. Si haces una app enserio ve por el camino tradicional desde un inicio.

Consejos Finales

1. Si vienes del mundo de la web como yo lo más importante al momento de crear una aplicación móvil es pensar primero: “¿cómo se resuelve esto en el mundo de las apps?” esto te ayudará a hacer mejores búsquedas por internet, encontrar los keywords correctos, aprender cosas nuevas y por supuesto ir por el camino correcto.
2. Seguramente encontrarás un componente listo para todo, ya sea en npmjs.com o en la documentación de React Native revisa muy bien todas las propiedades que recibe y sacales todo el jugo y sin duda tambien genera tus aportes a la comunidad con esos componentes que seguro serán de mucha ayuda.

Si te gustaría hacer aplicaciones con React Native Platzi te tiene el curso perfecto en https://platzi.com/cursos/react-native/. Tómalo y únete a los que crean experiencias móviles de valor.