¡Continúa nuestra reunión mensual de React Native! En esta sesión nos acompañó Infinite Red, los creadores de Chain React, la Conferencia de React Native. Como la mayoría de los asistentes estaban presentando charlas en Chain React, pospusimos la reunión una semana. Las charlas de la conferencia ya están disponibles online y les recomiendo verlas. Veamos qué están haciendo nuestros equipos.

Equipos​

En esta segunda reunión, nos acompañaron 9 equipos:

• Airbnb

• Callstack

• Expo

• Facebook

• GeekyAnts

• Infinite Red

• Microsoft

• Shoutem

• Wix

Notas​

Estas son las notas de cada equipo:

Airbnb​

• Consulta el repositorio de Airbnb para ver proyectos relacionados con React Native.

Callstack​

• Mike Grabowski sigue gestionando las versiones mensuales de React Native como siempre, incluyendo algunas betas publicadas. En particular, está trabajando en publicar la versión v0.43.5 en npm ¡ya que desbloquea a los usuarios de Windows!

• El trabajo en Haul avanza lento pero constante. Hay un pull request que añade HMR y ya se han implementado otras mejoras. Recientemente varios líderes de la industria lo han adoptado. Posiblemente comenzaremos trabajo remunerado a tiempo completo en esta área.

• Michał Pierzchała del equipo de Jest se ha unido a Callstack este mes. Ayudará a mantener Haul y posiblemente trabajará en Metro Bundler y Jest.

• Satyajit Sahoo ya está con nosotros, ¡yay!

• Tenemos varias novedades interesantes de nuestro departamento de OSS. En particular, estamos trabajando en integrar Material Palette API en React Native. Planeamos finalmente lanzar nuestro kit nativo para iOS que busca ofrecer un look & feel idéntico a los componentes nativos.

Expo​

• Recientemente lanzamos Native Directory para mejorar el descubrimiento y evaluación de bibliotecas en el ecosistema React Native. El problema: existen muchas bibliotecas, son difíciles de probar, requieren aplicar heurísticas manualmente y no es evidente cuáles son las mejores que deberías usar. También es difícil determinar si algo es compatible con CRNA/Expo. Native Directory busca resolver estos problemas. ¡Visítalo y añade tu biblioteca! La lista de bibliotecas está aquí. Esta es solo nuestra primera versión, y queremos que sea propiedad y gestión de la comunidad, no solo del equipo de Expo. ¡Contribuye si crees que es valioso y quieres mejorarlo!

• Añadimos soporte inicial para instalar paquetes npm en Snack con Expo SDK 19. Avísanos si encuentras problemas, aún estamos resolviendo algunos errores. Junto con Native Directory, esto debería facilitar probar bibliotecas con dependencias solo JavaScript o incluidas en el Expo SDK. Pruébalo:

  • react-native-modal
  • react-native-animatable
  • react-native-calendars

• Lanzamos Expo SDK19 con múltiples mejoras generales, y ahora usamos Android JSC actualizado.

• Trabajando en una guía documental con Alexander Kotliarskyi con consejos para mejorar la experiencia de usuario en apps. ¡Únete para ampliar la lista o colaborar en la redacción!

  • Issue: #14979
  • Pull request inicial: #14993

• Continuamos trabajando en: audio/video, cámara, gestos (con Software Mansion, react-native-gesture-handler), integración de cámara GL. Esperamos lanzar algunas novedades en SDK20 (agosto) con mejoras significativas. Estamos iniciando la infraestructura en el cliente Expo para trabajos en segundo plano (geolocalización, audio, manejo de notificaciones, etc.).

• Adam Miskiewicz avanzó en imitar transiciones de UINavigationController para react-navigation. Mira una versión preliminar en su tweet - lanzamiento próximo. También revisa MaskedViewIOS que integró. ¡Sería genial si implementas MaskedView para Android!

Facebook​

• Facebook explora internamente integrar componentes nativos de ComponentKit y Litho dentro de React Native.

• ¡Las contribuciones a React Native son muy bienvenidas! Si te preguntas cómo puedes contribuir, la guía "Cómo contribuir" describe nuestro proceso de desarrollo y detalla los pasos para enviar tu primer pull request. Hay otras formas de contribuir que no requieren escribir código, como clasificar incidencias o actualizar la documentación.

  • Al momento de escribir, React Native tiene 635 incidencias abiertas y 249 pull requests abiertos. Esto resulta abrumador para nuestros mantenedores, y cuando los problemas se solucionan internamente, es difícil actualizar las tareas correspondientes.
  • No estamos seguros del mejor enfoque para manejar esto manteniendo satisfecha a la comunidad. ¡Algunas opciones (no todas!) incluyen cerrar incidencias obsoletas, otorgar permisos a más personas para gestionar incidencias y cerrar automáticamente aquellas que no sigan la plantilla. Creamos la guía "Qué esperar de los mantenedores" para establecer expectativas y evitar sorpresas. Si tienes ideas para mejorar esta experiencia tanto para mantenedores como para quienes reportan incidencias o envían pull requests (asegurando que se sientan escuchados y valorados), ¡háznoslo saber!

GeekyAnts​

• Presentamos nuestra herramienta de diseño que funciona con archivos de React Native en Chain React. Muchos asistentes se inscribieron en la lista de espera.

• También estamos explorando otras soluciones multiplataforma como Google Flutter (próximamente una comparativa detallada), Kotlin Native y Apache Weex para entender diferencias arquitectónicas y aprender cómo mejorar el rendimiento general de React Native.

• Migramos a react-navigation en la mayoría de nuestras apps, mejorando significativamente el rendimiento.

• Además, anunciamos NativeBase Market: un marketplace para componentes y aplicaciones de React Native (creado por y para desarrolladores).

Infinite Red​

• Queremos presentar Reactotron. Mira el video introductorio. ¡Pronto añadiremos más funcionalidades!

• Organizamos la Conferencia Chain React. ¡Fue increíble, gracias a todos por asistir! ¡Los videos ya están disponibles!

Microsoft​

• CodePush se integró en Mobile Center. Los usuarios actuales no verán cambios en su flujo de trabajo.

  • Algunos reportaron problemas con apps duplicadas (por tener apps existentes en Mobile Center). Estamos resolviendo estos casos; si tienes apps duplicadas, avísanos para fusionarlas.

• Mobile Center ahora soporta Notificaciones Push para CodePush. Mostramos cómo combinar Notificaciones y CodePush para pruebas A/B en apps, algo único en la arquitectura de React Native.

• VS Code tiene un problema conocido en la depuración con React Native; la próxima versión de la extensión (en pocos días) lo solucionará.

• Dado que múltiples equipos en Microsoft trabajan con React Native, mejoraremos la representación de todos los grupos en próximas reuniones.

Shoutem​

• Finalizamos las mejoras para simplificar el desarrollo con React Native en Shoutem. Ahora puedes usar todos los comandos estándar de react-native al desarrollar apps en Shoutem.

• Dedicamos mucho esfuerzo para determinar el mejor enfoque para el análisis de rendimiento en React Native. Gran parte de la documentación está desactualizada, así que haremos nuestro mejor esfuerzo para crear un pull request en la documentación oficial o al menos publicar nuestras conclusiones en una entrada de blog.

• Estamos migrando nuestra solución de navegación a react-navigation, por lo que pronto podríamos tener comentarios al respecto.

• Lanzamos un nuevo componente HTML en nuestro kit que transforma HTML crudo en un árbol de componentes de React Native.

Wix​

• Comenzamos a trabajar en un pull request para Metro Bundler con capacidades de react-native-repackager. Actualizamos react-native-repackager para soportar RN 44 (que usamos en producción). Lo estamos utilizando para nuestra infraestructura de simulación en detox.

• Durante las últimas tres semanas hemos cubierto la aplicación de Wix con pruebas detox. Ha sido una experiencia increíble para aprender cómo reducir el control de calidad manual en una aplicación de esta escala (más de 40 ingenieros). Como resultado, resolvimos varios problemas con detox y acabamos de publicar una nueva versión. Me complace informar que estamos cumpliendo con la "política de cero imprevisibilidad" y las pruebas hasta ahora pasan consistentemente.

• Detox para Android avanza muy bien. Estamos recibiendo ayuda significativa de la comunidad. Esperamos tener una versión inicial en aproximadamente dos semanas.

• DetoxInstruments, nuestra herramienta de pruebas de rendimiento, está creciendo más de lo que planeamos originalmente. Ahora planeamos convertirla en una herramienta independiente que no estará tan acoplada a detox. Permitirá investigar el rendimiento de aplicaciones iOS en general. También se integrará con detox para ejecutar pruebas automatizadas sobre métricas de rendimiento.

Próxima sesión​

La próxima sesión está programada para el 16 de agosto de 2017. Como esta fue solo nuestra segunda reunión, nos gustaría saber cómo estas notas benefician a la comunidad de React Native. No dudes en contactarme en Twitter si tienes sugerencias sobre cómo mejorar el resultado de estas reuniones.

En Shoutem, hemos tenido la fortuna de trabajar con React Native desde sus inicios. Decidimos que queríamos ser parte de esta increíble comunidad desde el primer día. Pronto nos dimos cuenta de que era casi imposible seguir el ritmo al que la comunidad crecía y mejoraba. Por eso decidimos organizar una reunión mensual donde los principales contribuidores de React Native puedan presentar brevemente sus esfuerzos y planes.

Reuniones mensuales​

Tuvimos nuestra primera sesión el 14 de junio de 2017. La misión de React Native Monthly es simple y directa: mejorar la comunidad de React Native. Presentar los esfuerzos de los equipos facilita la colaboración entre ellos fuera de línea.

Equipos​

En la primera reunión, nos acompañaron 8 equipos:

• Airbnb

• Callstack

• Expo

• Facebook

• GeekyAnts

• Microsoft

• Shoutem

• Wix

¡Esperamos que más contribuidores clave se unan en las próximas sesiones!

Notas​

Dado que los planes de los equipos pueden interesar a una audiencia más amplia, los compartiremos aquí, en el blog de React Native. Así que aquí están:

Airbnb​

• Planean añadir APIs de accesibilidad (A11y) a View y al módulo nativo AccessibilityInfo.

• Investigarán cómo añadir APIs a módulos nativos de Android para especificar hilos de ejecución.

• Han estado investigando mejoras potenciales en el rendimiento de inicialización.

• Han explorado estrategias de empaquetado más sofisticadas sobre "unbundle".

Callstack​

• Buscan mejorar el proceso de lanzamientos usando Detox para pruebas E2E. El pull request debería integrarse pronto.

• Su pull request sobre Blob ha sido fusionado, vendrán más pull requests relacionados.

• Incrementando la adopción de Haul en proyectos internos para comparar su rendimiento con Metro Bundler. Trabajan con el equipo de webpack en mejoras de rendimiento multihilo.

• Internamente han implementado mejor infraestructura para gestionar proyectos open source. Planean publicar más contenido en las próximas semanas.

• La conferencia React Native Europe avanza, aún sin novedades destacables, ¡pero todos estáis invitados!

• Se han tomado un descanso de react-navigation para investigar alternativas (especialmente navegaciones nativas).

Expo​

• Trabajan en permitir instalar módulos npm en Snack, será útil para que bibliotecas añadan ejemplos en su documentación.

• Trabajando con Krzysztof y otras personas de Software Mansion en una actualización de JSC para Android y una biblioteca de gestión de gestos.

• Adam Miskiewicz está trasladando su enfoque hacia react-navigation.

• Create React Native App está incluido en la guía de inicio de la documentación. Expo quiere animar a los autores de bibliotecas a explicar claramente si sus librerías funcionan con CRNA o no, y en caso afirmativo, detallar cómo configurarlas.

Facebook​

• El empaquetador de React Native ahora es Metro Bundler, en un repositorio independiente. El equipo de Metro Bundler en Londres está entusiasmado por abordar las necesidades de la comunidad, mejorar la modularidad para casos de uso más allá de React Native, y aumentar la capacidad de respuesta en issues y PRs.

• En los próximos meses, el equipo de React Native trabajará en refinar las APIs de componentes primitivos. Esperen mejoras en peculiaridades de diseño, accesibilidad y tipado con Flow.

• El equipo de React Native también planea mejorar la modularidad del núcleo este año, mediante refactorizaciones para soportar completamente plataformas de terceros como Windows y macOS.

GeekyAnts​

• El equipo está trabajando en una aplicación de diseño UI/UX (nombre en clave: Builder) que funciona directamente con archivos .js. Actualmente solo soporta React Native. Es similar a Adobe XD y Sketch.

• El equipo trabaja intensamente para que puedas cargar una aplicación React Native existente en el editor, hacer cambios (visualmente, como diseñador) y guardarlos directamente en el archivo JS.

• Buscan acortar la brecha entre diseñadores y desarrolladores, uniéndolos en el mismo repositorio.

• Además, NativeBase alcanzó recientemente 5,000 estrellas en GitHub.

Microsoft​

• CodePush se ha integrado ahora en Mobile Center. Este es el primer paso para ofrecer una experiencia mucho más integrada con distribución, analíticas y otros servicios. Consulten su anuncio aquí.

• VS Code tiene un error con la depuración; están trabajando en solucionarlo ahora y lanzarán una nueva versión.

• Investigando Detox para pruebas de integración, explorando JSC Context para obtener variables junto con informes de fallos.

Shoutem​

• Facilitando el trabajo en aplicaciones Shoutem con herramientas de la comunidad React Native. Podrás usar todos los comandos de React Native para ejecutar aplicaciones creadas en Shoutem.

• Investigando herramientas de profiling para React Native. Tuvieron muchos problemas de configuración y compartirán algunas conclusiones descubiertas en el proceso.

• Shoutem está trabajando para facilitar la integración de React Native con aplicaciones nativas existentes. Documentarán el concepto desarrollado internamente para obtener retroalimentación de la comunidad.

Wix​

• Trabajando internamente para adoptar Detox y trasladar partes significativas de la aplicación Wix a "QA manual cero". Como resultado, Detox se usa intensivamente en producción por docenas de desarrolladores y está madurando rápidamente.

• Trabajando para añadir soporte en Metro Bundler que permita sobrescribir cualquier extensión de archivo durante la compilación. En lugar de solo "ios" y "android", soportaría extensiones personalizadas como "e2e" o "detox". Planean usar esto para simulación E2E. Ya existe una biblioteca llamada react-native-repackager, y ahora están trabajando en un PR.

• Investigando la automatización de pruebas de rendimiento. Este es un nuevo repositorio llamado DetoxInstruments. Puedes echarle un vistazo, se está desarrollando como código abierto.

• Colaborando con un contribuidor de KPN en Detox para Android y soporte para dispositivos físicos.

• Explorando el concepto de "Detox como plataforma" para permitir construir otras herramientas que necesiten automatizar simuladores/dispositivos. Un ejemplo es Storybook para React Native o la idea de Ram para pruebas de integración.

Próxima sesión​

Las reuniones se realizarán cada cuatro semanas. La próxima sesión está programada para el 12 de julio de 2017. Como acabamos de comenzar con este formato, nos gustaría saber cómo estas notas benefician a la comunidad de React Native. No dudes en contactarme en Twitter si tienes sugerencias sobre qué deberíamos cubrir en futuras sesiones o cómo mejorar los resultados de estas reuniones.

Muchos de ustedes ya han empezado a probar nuestros nuevos componentes de lista tras nuestro anuncio preliminar en el grupo comunitario, ¡pero hoy los anunciamos oficialmente! Adiós a los ListView, DataSource, filas obsoletas, errores ignorados y consumo excesivo de memoria. Con el último candidato a lanzamiento de React Native de marzo 2017 (0.43-rc.1), puedes elegir entre esta nueva suite de componentes lo que mejor se adapte a tu caso de uso, con gran rendimiento y funciones listas para usar:

<FlatList>​

Este es el componente de trabajo para listas simples y de alto rendimiento. Proporciona un array de datos y una función renderItem, y listo:

<FlatList
  data={[{title: 'Title Text', key: 'item1'}, ...]}
  renderItem={({item}) => <ListItem title={item.title} />}
/>

<SectionList>​

Si necesitas renderizar datos organizados en secciones lógicas (como en una agenda alfabética con encabezados), o con datos heterogéneos y renderizados diversos (por ejemplo: una vista de perfil con botones, seguida de un compositor, luego una cuadrícula de fotos, otra de amigos y finalmente historias), esta es la opción ideal.

<SectionList
  renderItem={({item}) => <ListItem title={item.title} />}
  renderSectionHeader={({section}) => <H1 title={section.key} />}
  sections={[ // homogeneous rendering between sections
    {data: [...], key: ...},
    {data: [...], key: ...},
    {data: [...], key: ...},
  ]}
/>

<SectionList
  sections={[ // heterogeneous rendering between sections
    {data: [...], key: ..., renderItem: ...},
    {data: [...], key: ..., renderItem: ...},
    {data: [...], key: ..., renderItem: ...},
  ]}
/>

<VirtualizedList>​

La implementación subyacente con una API más flexible. Especialmente útil cuando tus datos no están en un array simple (ej. una lista inmutable).

Características​

Dado que las listas se usan en muchos contextos, hemos equipado los nuevos componentes con funciones para cubrir la mayoría de casos de uso:

• Carga al hacer scroll (onEndReached).

• Pull to refresh (onRefresh / refreshing).

• Callbacks de visibilidad (VPV) configurables (onViewableItemsChanged / viewabilityConfig).

• Modo horizontal (horizontal).

• Separadores inteligentes de ítems y secciones.

• Soporte multicolumna (numColumns)

• scrollToEnd, scrollToIndex y scrollToItem

• Mejor tipado con Flow.

Consideraciones importantes​

• El estado interno de los subcomponentes no se preserva al salir de la ventana de renderizado. Asegúrate de capturar todos los datos en el ítem o almacenes externos como Flux, Redux o Relay.

• Estos componentes se basan en PureComponent, lo que significa que no se rerenderizarán si los props permanecen superficialmente iguales. Asegúrate que todo lo que usa tu función renderItem se pase como prop que no sea === tras actualizaciones, o tu UI podría no actualizarse. Esto incluye el prop data y el estado del componente padre. Ejemplo:

  <FlatList
    data={this.state.data}
    renderItem={({item}) => (
      <MyItem
        item={item}
        onPress={() =>
          this.setState(oldState => ({
            selected: {
              // New instance breaks `===`
              ...oldState.selected, // copy old data
              [item.key]: !oldState.selected[item.key], // toggle
            },
          }))
        }
        selected={
          !!this.state.selected[item.key] // renderItem depends on state
        }
      />
    )}
    selected={
      // Can be any prop that doesn't collide with existing props
      this.state.selected // A change to selected should re-render FlatList
    }
  />
  

• Para optimizar memoria y permitir scroll fluido, el contenido se renderiza asíncronamente fuera de pantalla. Esto puede causar que al hacer scroll muy rápido aparezca contenido vacío momentáneamente. Es una compensación ajustable por aplicación, y estamos trabajando en mejoras internas.

• Por defecto, estas listas buscan una prop key en cada ítem para la clave de React. Alternativamente, puedes usar keyExtractor.

Rendimiento​

Además de simplificar la API, los nuevos componentes de lista también ofrecen mejoras significativas de rendimiento, siendo la principal un uso de memoria casi constante para cualquier cantidad de filas. Esto se logra "virtualizando" elementos fuera de la ventana de renderizado desmontándolos completamente de la jerarquía de componentes y liberando la memoria JS de los componentes React, junto con la memoria nativa del shadow tree y las vistas de UI. Esto tiene una salvedad: el estado interno del componente no se conservará, así que asegúrate de guardar cualquier estado importante fuera de los componentes mismos, por ejemplo en almacenes de Relay, Redux o Flux.

Limitar la ventana de renderizado también reduce el trabajo requerido por React y la plataforma nativa, como en recorridos de vistas. Incluso al renderizar el último de un millón de elementos, con estas nuevas listas no necesitas iterar todos los elementos para renderizar. Puedes saltar al centro con scrollToIndex sin renderizado excesivo.

También mejoramos la programación para aumentar la capacidad de respuesta de las aplicaciones. Los elementos en el borde de la ventana de renderizado se procesan con menos frecuencia y menor prioridad, después de completarse gestos, animaciones u otras interacciones activas.

Uso Avanzado​

A diferencia de ListView, todos los elementos en la ventana de renderizado se vuelven a renderizar cuando cambian las props. Suele ser aceptable porque la ventana reduce los elementos a una cantidad constante, pero si tus elementos son complejos, sigue las mejores prácticas de React para rendimiento usando React.PureComponent y/o shouldComponentUpdate según corresponda en tus componentes para limitar re-renderizados del subárbol recursivo.

Si puedes calcular la altura de tus filas sin renderizarlas, mejora la experiencia del usuario proporcionando la prop getItemLayout. Esto suaviza el desplazamiento a elementos específicos con ej. scrollToIndex, y mejora la UI del indicador de scroll al determinar la altura del contenido sin renderizarlo.

Para tipos de datos alternativos como listas inmutables, usa <VirtualizedList>. Toma una prop getItem que devuelve datos del elemento para cualquier índice, con tipado de Flow más flexible.

Hay múltiples parámetros ajustables para casos inusuales: usa windowSize para equilibrar memoria/experiencia de usuario, maxToRenderPerBatch para ajustar tasa de llenado/capacidad de respuesta, onEndReachedThreshold para controlar la carga al desplazar, y más.

Trabajo Futuro​

• Migración de superficies existentes (y eventual depreciación de ListView).

• Más características según necesidades detectadas (¡coméntanos!).

• Soporte para encabezados de sección fijos (sticky).

• Más optimizaciones de rendimiento.

• Soporte para componentes funcionales de elemento con estado.

En Facebook, a menudo necesitamos acceder a valores profundamente anidados en estructuras de datos obtenidas con GraphQL. Al intentar acceder a estos valores, es común que uno o más campos intermedios sean nulos. Estos campos intermedios pueden ser nulos por diversas razones, desde controles de privacidad fallidos hasta el simple hecho de que null es la forma más flexible de representar errores no fatales.

Desafortunadamente, acceder a estos valores profundamente anidados es actualmente tedioso y verboso.

props.user &&
  props.user.friends &&
  props.user.friends[0] &&
  props.user.friends[0].friends;

Existe una propuesta de ECMAScript para introducir el operador existencial que haría esto mucho más conveniente. Pero hasta que esa propuesta se finalice, queremos una solución que mejore nuestra calidad de vida, mantenga la semántica existente del lenguaje y fomente la seguridad de tipos con Flow.

Creamos una función existencial que llamamos idx.

idx(props, _ => _.user.friends[0].friends);

La invocación en este fragmento de código se comporta de manera similar a la expresión booleana en el fragmento anterior, pero con significativamente menos repetición. La función idx toma exactamente dos argumentos:

• Cualquier valor, típicamente un objeto o array del cual quieres acceder a un valor anidado.

• Una función que recibe el primer argumento y accede a un valor anidado en él.

En teoría, la función idx capturará errores que resulten de acceder a propiedades en null o undefined. Si se detecta tal error, devolverá null o undefined. (Puedes ver cómo se implementa esto en idx.js.)

En la práctica, capturar errores en cada acceso a propiedades anidadas es lento, y diferenciar entre tipos específicos de TypeErrors es frágil. Para abordar estas limitaciones, creamos un plugin de Babel que transforma la invocación de idx anterior en la siguiente expresión:

props.user == null
  ? props.user
  : props.user.friends == null
    ? props.user.friends
    : props.user.friends[0] == null
      ? props.user.friends[0]
      : props.user.friends[0].friends;

Finalmente, añadimos una declaración de tipo personalizada de Flow para idx que permite verificar correctamente el recorrido en el segundo argumento mientras permite el acceso anidado en propiedades que pueden ser nulas.

La función, el plugin de Babel y la declaración de Flow están ahora disponibles en GitHub. Se utilizan instalando los paquetes npm idx y babel-plugin-idx, y agregando "idx" a la lista de plugins en tu archivo .babelrc.

Hoy anunciamos Create React Native App: ¡una nueva herramienta que facilita significativamente comenzar con un proyecto de React Native! Está fuertemente inspirada en el diseño de Create React App y es el resultado de una colaboración entre Facebook y Expo (anteriormente Exponent).

Muchos desarrolladores enfrentan dificultades al instalar y configurar las dependencias nativas actuales de React Native, especialmente para Android. Con Create React Native App, no es necesario usar Xcode ni Android Studio, y puedes desarrollar para dispositivos iOS usando Linux o Windows. Esto se logra mediante la aplicación Expo, que carga y ejecuta proyectos CRNA escritos en JavaScript puro sin compilar código nativo.

Prueba crear un nuevo proyecto (reemplaza con comandos de yarn si lo tienes instalado):

$ npm i -g create-react-native-app
$ create-react-native-app my-project
$ cd my-project
$ npm start

Esto iniciará el empaquetador de React Native y mostrará un código QR. Ábrelo en la aplicación Expo para cargar tu JavaScript. Las llamadas a console.log se redirigen a tu terminal. Puedes utilizar cualquier API estándar de React Native, así como el SDK de Expo.

¿Qué pasa con el código nativo?​

Muchos proyectos de React Native tienen dependencias en Java u Objective-C/Swift que requieren compilación. La aplicación Expo sí incluye APIs para cámara, video, contactos y más, además de incluir bibliotecas populares como react-native-maps de Airbnb o autenticación de Facebook. Sin embargo, si necesitas una dependencia de código nativo que Expo no incluye, probablemente necesitarás tu propia configuración de compilación. Al igual que Create React App, CRNA admite la "expulsión" (ejecting).

Puedes ejecutar npm run eject para obtener un proyecto muy similar al que generaría react-native init. En ese punto, necesitarás Xcode y/o Android Studio, como si hubieras comenzado con react-native init. Agregar bibliotecas con react-native link funcionará y tendrás control total sobre el proceso de compilación de código nativo.

¿Preguntas? ¿Comentarios?​

Create React Native App es ahora lo suficientemente estable para uso general, ¡lo que significa que estamos muy interesados en conocer tu experiencia usándolo! Puedes encontrarme en Twitter o abrir un issue en el repositorio de GitHub. ¡Las solicitudes de extracción (pull requests) son bienvenidas!

Durante el último año, hemos trabajado en mejorar el rendimiento de las animaciones que utilizan la biblioteca Animated. Las animaciones son muy importantes para crear una experiencia de usuario atractiva, pero también pueden ser difíciles de implementar correctamente. Queremos facilitar a los desarrolladores la creación de animaciones de alto rendimiento sin que tengan que preocuparse por que parte de su código cause retrasos.

¿Qué es esto?​

La API Animated se diseñó con una restricción muy importante en mente: es serializable. Esto significa que podemos enviar toda la información sobre la animación al entorno nativo antes de que comience, lo que permite que el código nativo ejecute la animación en el hilo de la interfaz de usuario sin tener que pasar por el puente en cada fotograma. Es muy útil porque una vez que la animación ha comenzado, el hilo de JavaScript puede bloquearse y la animación seguirá ejecutándose sin problemas. En la práctica, esto puede ocurrir con frecuencia porque el código del usuario se ejecuta en el hilo de JavaScript y los renders de React también pueden bloquear JS durante mucho tiempo.

Un poco de historia...​

Este proyecto comenzó hace aproximadamente un año, cuando Expo construyó la aplicación li.st en Android. Contrataron a Krzysztof Magiera para construir la implementación inicial en Android. Terminó funcionando bien y li.st fue la primera aplicación en implementar animaciones nativas usando Animated. Unos meses después, Brandon Withrow construyó la implementación inicial en iOS. Luego, Ryan Gomba y yo trabajamos en agregar funciones faltantes como soporte para Animated.event, además de corregir errores que encontramos al usarlo en aplicaciones de producción. Este fue verdaderamente un esfuerzo comunitario y me gustaría agradecer a todos los involucrados, así como a Expo por patrocinar gran parte del desarrollo. Ahora se utiliza en los componentes Touchable de React Native, así como para animaciones de navegación en la biblioteca recién lanzada React Navigation.

¿Cómo funciona?​

Primero, veamos cómo funcionan actualmente las animaciones usando Animated con el controlador JS. Al usar Animated, declaras un grafo de nodos que representan las animaciones que deseas realizar, y luego usas un controlador para actualizar un valor Animated usando una curva predefinida. También puedes actualizar un valor Animated conectándolo a un evento de una View mediante Animated.event.

Aquí hay un desglose de los pasos para una animación y dónde ocurren:

• JS: El controlador de animación usa requestAnimationFrame para ejecutarse en cada fotograma y actualizar el valor que controla, utilizando el nuevo valor que calcula basado en la curva de animación.

• JS: Se calculan valores intermedios y se pasan a un nodo de propiedades que está adjunto a una View.

• JS: La View se actualiza mediante setNativeProps.

• Puente de JS a Native.

• Nativo: Se actualiza el UIView o android.View.

Como puedes ver, la mayor parte del trabajo ocurre en el hilo de JS. Si este se bloquea, la animación omitirá fotogramas. También necesita pasar por el puente de JS a Native en cada fotograma para actualizar las vistas nativas.

Lo que hace el controlador nativo es mover todos estos pasos al entorno nativo. Como Animated produce un grafo de nodos animados, puede serializarse y enviarse a native solo una vez al iniciar la animación, eliminando la necesidad de volver al hilo de JS; el código nativo puede encargarse de actualizar las vistas directamente en el hilo de UI en cada fotograma.

Aquí un ejemplo de cómo podemos serializar un valor animado y un nodo de interpolación (no la implementación exacta, solo un ejemplo).

Crea el nodo de valor nativo, este es el valor que se animará:

NativeAnimatedModule.createNode({
  id: 1,
  type: 'value',
  initialValue: 0,
});

Crea el nodo de interpolación nativo, que indica al controlador nativo cómo interpolar un valor:

NativeAnimatedModule.createNode({
  id: 2,
  type: 'interpolation',
  inputRange: [0, 10],
  outputRange: [10, 0],
  extrapolate: 'clamp',
});

Crea el nodo de propiedades nativo, que indica al controlador nativo a qué propiedad de la vista está conectado:

NativeAnimatedModule.createNode({
  id: 3,
  type: 'props',
  properties: ['style.opacity'],
});

Conecta los nodos entre sí:

NativeAnimatedModule.connectNodes(1, 2);
NativeAnimatedModule.connectNodes(2, 3);

Conecta el nodo de propiedades a una vista:

NativeAnimatedModule.connectToView(3, ReactNative.findNodeHandle(viewRef));

Con esto, el módulo animado nativo tiene toda la información necesaria para actualizar las vistas nativas directamente sin tener que pasar por JS para calcular ningún valor.

Solo queda iniciar la animación especificando el tipo de curva de animación deseado y qué valor animado actualizar. Las animaciones de temporización también pueden simplificarse precalculando cada fotograma de la animación en JS para reducir la implementación nativa.

NativeAnimatedModule.startAnimation({
  type: 'timing',
  frames: [0, 0.1, 0.2, 0.4, 0.65, ...],
  animatedValueId: 1,
});

Y este es el desglose de lo que ocurre cuando se ejecuta la animación:

• Nativo: El controlador de animación nativo usa CADisplayLink o android.view.Choreographer para ejecutarse en cada fotograma y actualizar el valor que controla usando el nuevo valor calculado según la curva de animación.

• Nativo: Se calculan valores intermedios y se pasan a un nodo de propiedades conectado a una vista nativa.

• Nativo: Se actualiza el UIView o android.View.

Como puedes ver, ¡no hay más hilo JS ni puente, lo que significa animaciones más rápidas! 🎉🎉

¿Cómo uso esto en mi aplicación?​

Para animaciones normales la respuesta es simple: solo agrega useNativeDriver: true a la configuración de animación al iniciarla.

Antes:

Animated.timing(this.state.animatedValue, {
  toValue: 1,
  duration: 500,
}).start();

Después:

Animated.timing(this.state.animatedValue, {
  toValue: 1,
  duration: 500,
  useNativeDriver: true, // <-- Add this
}).start();

Los valores animados solo son compatibles con un controlador. Si usas el controlador nativo al iniciar una animación en un valor, asegúrate de que todas las animaciones posteriores en ese valor también usen el controlador nativo.

También funciona con Animated.event, lo cual es muy útil para animaciones que deben seguir la posición de desplazamiento, ya que sin el controlador nativo siempre irán un fotograma atrás del gesto debido a la naturaleza asíncrona de React Native.

Antes:

<ScrollView
  scrollEventThrottle={16}
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: this.state.animatedValue } } }]
  )}
>
  {content}
</ScrollView>

Después:

<Animated.ScrollView // <-- Use the Animated ScrollView wrapper
  scrollEventThrottle={1} // <-- Use 1 here to make sure no events are ever missed
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: this.state.animatedValue } } }],
    { useNativeDriver: true } // <-- Add this
  )}
>
  {content}
</Animated.ScrollView>

Advertencias​

No todo lo que puedes hacer con Animated está actualmente soportado en Animated Nativo. La principal limitación es que solo puedes animar propiedades no relacionadas con el diseño: propiedades como transform y opacity funcionarán, pero Flexbox y propiedades de posición no. Otra limitación es que Animated.event solo funciona con eventos directos, no con eventos de propagación. Esto significa que no funciona con PanResponder pero sí con elementos como ScrollView#onScroll.

Animated Nativo ha sido parte de React Native durante bastante tiempo, pero nunca se documentó porque se consideraba experimental. Por eso, asegúrate de usar una versión reciente (0.40+) de React Native si quieres usar esta función.

Recursos​

Para más información sobre Animated, te recomiendo ver esta charla de Christopher Chedeau.

Si quieres un análisis profundo sobre animaciones y cómo delegarlas a nativo puede mejorar la experiencia de usuario, también está esta charla de Krzysztof Magiera.

Poco después de que se introdujera React Native, comenzamos a realizar lanzamientos cada dos semanas para ayudar a la comunidad a adoptar nuevas características, manteniendo las versiones estables para uso en producción. En Facebook, teníamos que estabilizar la base de código cada dos semanas para el lanzamiento de nuestras aplicaciones iOS de producción, por lo que decidimos publicar las versiones de código abierto con el mismo ritmo. Ahora, muchas aplicaciones de Facebook se publican una vez por semana, especialmente en Android. Como publicamos desde la rama principal semanalmente, necesitamos mantenerla bastante estable. Por lo tanto, el ritmo de lanzamiento quincenal ya ni siquiera beneficia a los colaboradores internos.

Con frecuencia recibimos comentarios de la comunidad indicando que es difícil seguir el ritmo de los lanzamientos. Herramientas como Expo tuvieron que omitir versiones alternas para gestionar los cambios rápidos. Así que está claro que los lanzamientos quincenales no sirvieron bien a la comunidad.

Ahora lanzamos mensualmente​

Nos complace anunciar el nuevo ritmo de lanzamientos mensuales, y la versión de diciembre de 2016, v0.40, que se ha estado estabilizando durante el último mes y está lista para adoptar. (Solo asegúrate de actualizar los encabezados en tus módulos nativos de iOS).

Aunque podría variar unos días para evitar fines de semana o manejar problemas imprevistos, ahora puedes esperar que cada lanzamiento esté disponible el primer día del mes y se publique oficialmente el último día.

Usa el mes actual para el mejor soporte​

El candidato de lanzamiento de enero está listo para probar, y puedes ver las novedades aquí.

Para ver los próximos cambios y proporcionar mejor retroalimentación a los colaboradores de React Native, utiliza siempre el candidato de lanzamiento del mes actual cuando sea posible. Cuando cada versión se publique a finales de mes, los cambios que contiene ya habrán estado en producción en las aplicaciones de Facebook durante más de dos semanas.

Puedes actualizar fácilmente tu aplicación con el nuevo comando react-native-git-upgrade:

npm install -g react-native-git-upgrade
react-native-git-upgrade 0.41.0-rc.0

¡Esperamos que este enfoque más simple facilite a la comunidad seguir los cambios en React Native y adoptar nuevas versiones lo más rápido posible!

(Agradecemos a Martin Konicek por idear este plan y a Mike Grabowski por hacerlo realidad)

Actualizar a nuevas versiones de React Native siempre ha sido complicado. Probablemente te has encontrado con algo así antes:

Ninguna de estas opciones es ideal. Si sobrescribimos el archivo, perdemos nuestros cambios locales. Si no sobrescribimos, no obtenemos las últimas actualizaciones.

Hoy me complace presentar una nueva herramienta que ayuda a resolver este problema. Se llama react-native-git-upgrade y utiliza Git en segundo plano para resolver conflictos automáticamente siempre que sea posible.

Uso​

Requisito: Git debe estar disponible en el PATH. Tu proyecto no necesita estar gestionado por Git.

Instala react-native-git-upgrade globalmente:

$ npm install -g react-native-git-upgrade

o usando Yarn:

$ yarn global add react-native-git-upgrade

Luego, ejecútalo dentro del directorio de tu proyecto:

$ cd MyProject
$ react-native-git-upgrade 0.38.0

Nota: No ejecutes 'npm install' para instalar una nueva versión de react-native. La herramienta necesita poder comparar la plantilla de proyecto antigua y la nueva para funcionar correctamente. Simplemente ejecútala dentro de la carpeta de tu aplicación como se muestra arriba, manteniéndote en la versión anterior.

Ejemplo de salida:

También puedes ejecutar react-native-git-upgrade sin argumentos para actualizar a la última versión de React Native.

Intentamos preservar tus cambios en los archivos de compilación de Android e iOS, por lo que no necesitas ejecutar react-native link después de una actualización.

Hemos diseñado la implementación para que sea lo menos intrusiva posible. Se basa completamente en un repositorio Git local creado sobre la marcha en un directorio temporal. No interferirá con tu repositorio de proyecto (sin importar qué VCS uses: Git, SVN, Mercurial... o ninguno). Tus fuentes se restauran en caso de errores inesperados.

¿Cómo funciona?​

El paso clave es generar un parche de Git. Este parche contiene todos los cambios realizados en las plantillas de React Native entre la versión que usa tu aplicación y la nueva versión.

Para obtener este parche, necesitamos generar una aplicación a partir de las plantillas incluidas en el paquete react-native dentro de tu directorio node_modules (estas son las mismas plantillas que usa el comando react-native init). Luego, después de generar las aplicaciones nativas desde las plantillas tanto en la versión actual como en la nueva, Git puede producir un parche adaptado a tu proyecto (es decir, que incluye el nombre de tu aplicación):

[...]

diff --git a/ios/MyAwesomeApp/Info.plist b/ios/MyAwesomeApp/Info.plist
index e98ebb0..2fb6a11 100644
--- a/ios/MyAwesomeApp/Info.plist
+++ b/ios/MyAwesomeApp/Info.plist
@@ -45,7 +45,7 @@
        <dict>
            <key>localhost</key>
            <dict>
-               <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+               <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
[...]

Ahora solo necesitamos aplicar este parche a tus archivos fuente. Mientras que el antiguo proceso react-native upgrade te pedía confirmación para cada pequeña diferencia, Git puede fusionar automáticamente la mayoría de los cambios usando su algoritmo de fusión de 3 vías, dejándonos eventualmente con delimitadores de conflicto familiares:

    13B07F951A680F5B00A75B9A /* Release */ = {
      isa = XCBuildConfiguration;
      buildSettings = {
        ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
        CODE_SIGN_IDENTITY = "iPhone Developer";
        FRAMEWORK_SEARCH_PATHS = (
          "$(inherited)",
          "$(PROJECT_DIR)/HockeySDK.embeddedframework",
          "$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
        );
=======
        CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
        HEADER_SEARCH_PATHS = (
          "$(inherited)",
          /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
          "$(SRCROOT)/../node_modules/react-native/React/**",
          "$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
        );

Estos conflictos suelen ser fáciles de entender. El delimitador ours representa a "tu equipo" mientras que theirs puede verse como "el equipo de React Native".

¿Por qué introducir un nuevo paquete global?​

React Native incluye una CLI global (el paquete react-native-cli) que delega comandos en la CLI local integrada en el directorio node_modules/react-native/local-cli.

Como mencionamos anteriormente, el proceso debe iniciarse desde tu versión actual de React Native. Si hubiéramos integrado la implementación en la CLI local, no podrías disfrutar de esta característica al usar versiones antiguas de React Native. Por ejemplo, no podrías actualizar de la versión 0.29.2 a la 0.38.0 si este nuevo código de actualización solo se hubiera lanzado en la 0.38.0.

La actualización basada en Git es una gran mejora en la experiencia del desarrollador y es importante ponerla a disposición de todos. Al usar un paquete separado react-native-git-upgrade instalado globalmente, puedes utilizar este nuevo código hoy sin importar qué versión de React Native esté utilizando tu proyecto.

Otra razón es la reciente eliminación de Yeoman por Martin Konicek. No queríamos volver a incluir esas dependencias de Yeoman en el paquete de react-native para poder evaluar la plantilla antigua y así crear el parche.

Pruébalo y danos tu opinión​

Para concluir, me gustaría decir: disfruta de esta característica y no dudes en sugerir mejoras, informar sobre problemas y especialmente enviar pull requests. Cada entorno es un poco diferente y cada proyecto de React Native es único, por lo que necesitamos tu opinión para que esto funcione bien para todos.

¡Gracias!​

Me gustaría agradecer a las increíbles empresas Zenika y M6 Web (archivado) sin las cuales nada de esto habría sido posible!

Mucha gente nos ha comentado que hay tanto trabajo en React Native que puede ser difícil seguir todo lo que ocurre. Para ayudar a comunicar qué trabajo está en progreso, ahora publicamos una hoja de ruta para React Native. A grandes rasgos, este trabajo se puede dividir en tres prioridades:

• Bibliotecas principales. Añadir más funcionalidad a los componentes y APIs más útiles.

• Estabilidad. Mejorar la infraestructura subyacente para reducir errores y mejorar la calidad del código.

• Experiencia del desarrollador. Ayudar a los desarrolladores de React Native a ser más productivos.

Si tienes sugerencias de características que crees que serían valiosas en la hoja de ruta, visita Canny, donde puedes proponer nuevas funcionalidades y debatir propuestas existentes.

Novedades en React Native​

La versión 0.37 de React Native, publicada hoy, incluye un nuevo componente central que facilita enormemente añadir un botón táctil a cualquier aplicación. También presentamos soporte para el nuevo gestor de paquetes Yarn, que acelerará todo el proceso de actualizar las dependencias de tu aplicación.

Presentamos Button​

Hoy presentamos un componente básico <Button /> que tiene un aspecto excelente en todas las plataformas. Esto responde a uno de los comentarios más recurrentes que recibimos: React Native es uno de los pocos kits de desarrollo móvil que no incluye un botón listo para usar desde el primer momento.

<Button
  onPress={onPressMe}
  title="Press Me"
  accessibilityLabel="Learn more about this Simple Button"
/>

Los desarrolladores experimentados de React Native saben cómo crear un botón: usan TouchableOpacity para la apariencia predeterminada en iOS, TouchableNativeFeedback para el efecto de onda en Android, y luego aplican algunos estilos. Los botones personalizados no son especialmente difíciles de construir o instalar, pero nuestro objetivo es que React Native sea radicalmente fácil de aprender. Al añadir un botón básico al núcleo, los recién llegados podrán desarrollar algo impresionante en su primer día, en lugar de perder ese tiempo formateando un botón y aprendiendo los matices de los componentes táctiles.

Button está diseñado para funcionar perfectamente y verse nativo en todas las plataformas, por lo que no incluirá todas las funcionalidades avanzadas que tienen los botones personalizados. Es un excelente punto de partida, pero no pretende reemplazar todos tus botones existentes. Para más detalles, consulta la nueva documentación de Button, ¡que incluye un ejemplo ejecutable!

Acelera react-native init con Yarn​

Ahora puedes usar Yarn, el nuevo gestor de paquetes para JavaScript, para acelerar significativamente react-native init. Para notar la diferencia, instala yarn y actualiza tu react-native-cli a la versión 1.2.0:

$ npm install -g react-native-cli

Ahora deberías ver "Using yarn" al configurar nuevas aplicaciones:

En pruebas locales simples, react-native init finalizó en aproximadamente 1 minuto con buena conexión (frente a unos 3 minutos usando npm 3.10.8). Instalar yarn es opcional pero muy recomendable.

¡Gracias!​

Agradecemos a todos los que contribuyeron a esta versión. Las notas de la versión completas ya están disponibles en GitHub. Con más de dos docenas de correcciones de errores y nuevas funcionalidades, React Native sigue mejorando gracias a ustedes.

Hoy lanzamos React Native 0.36. Sigue leyendo para conocer las novedades.

Headless JS​

Headless JS permite ejecutar tareas en JavaScript mientras tu aplicación está en segundo plano. Puede usarse, por ejemplo, para sincronizar datos nuevos, gestionar notificaciones push o reproducir música. Por ahora, solo está disponible en Android.

Para comenzar, define tu tarea asíncrona en un archivo dedicado (ej. SomeTaskName.js):

module.exports = async taskData => {
  // Perform your task here.
};

Luego, registra tu tarea en AppRegistry:

AppRegistry.registerHeadlessTask('SomeTaskName', () =>
  require('SomeTaskName'),
);

Usar Headless JS requiere escribir código nativo Java para iniciar el servicio cuando sea necesario. ¡Consulta nuestra nueva documentación de Headless JS para aprender más!

La API del teclado​

Ahora es más fácil trabajar con el teclado en pantalla usando Keyboard. Puedes escuchar eventos nativos del teclado y responder a ellos. Por ejemplo, para ocultar el teclado activo, simplemente llama a Keyboard.dismiss():

import {Keyboard} from 'react-native';

// Hide that keyboard!
Keyboard.dismiss();

División animada​

React Native ya admitía combinar valores animados mediante suma, multiplicación y módulo. Con la versión 0.36, ahora es posible combinar valores animados mediante división. Hay casos donde un valor animado necesita invertir otro valor animado para cálculos. Por ejemplo, al invertir una escala (2x --> 0.5x):

const a = Animated.Value(1);
const b = Animated.divide(1, a);

Animated.spring(a, {
  toValue: 2,
}).start();

b seguirá entonces la animación de resorte de a y producirá el valor de 1 / a.

El uso básico es así:

<Animated.View style={{transform: [{scale: a}]}}>
  <Animated.Image style={{transform: [{scale: b}]}} />
<Animated.View>

En este ejemplo, la imagen interna no se deformará porque la escala del elemento padre se cancela. Si quieres aprender más, consulta la guía de animaciones.

Barras de estado oscuras​

Se ha añadido un nuevo valor barStyle a StatusBar: dark-content. Con esto, ahora puedes usar barStyle tanto en Android como en iOS. El comportamiento será:

• default: Usa el valor predeterminado de la plataforma (claro en iOS, oscuro en Android).

• light-content: Barra de estado clara con texto e iconos negros.

• dark-content: Barra de estado oscura con texto e iconos blancos.

...y más​

Esto es solo una muestra de los cambios en 0.36. Consulta las notas de lanzamiento en GitHub para ver la lista completa de nuevas funciones, correcciones de errores y cambios importantes.

Puedes actualizar a la versión 0.36 ejecutando estos comandos en la terminal:

$ npm install --save react-native@0.36
$ react-native upgrade