Saltar al contenido principal

React Native 0.71: TypeScript por defecto, Flexbox Gap y más...

· 14 min de lectura
Matt Carroll
Matt Carroll
Developer Advocate @ Meta
Nick Gerleman
Nick Gerleman
Software Engineer @ Meta
Nicola Corti
Nicola Corti
Software Engineer @ Meta
Lorenzo Sciandra
Lorenzo Sciandra
Senior Software Engineer @ Microsoft
Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

¡Hoy lanzamos React Native versión 0.71! Esta versión está repleta de características, entre las que se incluyen:

En esta publicación cubriremos algunos de los aspectos más destacados de la versión 0.71.

información

Para ver la lista completa de cambios, consulta CHANGELOG.md.

TypeScript por defecto​

En esta versión, estamos mejorando la experiencia con TypeScript en React Native.

A partir de la versión 0.71, cuando crees una nueva aplicación de React Native mediante la CLI de React Native, obtendrás una aplicación TypeScript por defecto. El nuevo proyecto ya viene configurado con un tsconfig.json, por lo que tu IDE te ayudará desde el primer momento a escribir código tipado.

También ofrecemos declaraciones TypeScript integradas y más precisas directamente en el paquete react-native. Esto significa que ya no necesitarás @types/react-native, y los tipos se actualizarán en sincronía con los lanzamientos de React Native.

Finalmente, hemos actualizado nuestra documentación para incluir TypeScript en todos los ejemplos.

nota

Después de actualizar a React Native 0.71, recomendamos eliminar @types/react-native de las devDependencies en tu package.json.

Para más detalles sobre este cambio, incluidos pasos de migración y cómo afecta a usuarios de Flow, consulta nuestra publicación anterior Soporte de primera clase para TypeScript.

Simplificación de diseños con Flexbox gap​

Con React Native puedes diseñar componentes flexiblemente en diferentes tamaños de pantalla usando Flexbox. Los navegadores han admitido las propiedades Flexbox gap, rowGap y columnGap, que permiten especificar el espacio entre todos los elementos en un contenedor Flexbox.

Estas propiedades han sido solicitadas durante mucho tiempo en React Native, y la versión 0.71 añade soporte inicial para espacios (gaps) definidos con valores en píxeles. En futuras versiones, añadiremos soporte para más valores, como porcentajes.

Para entender su utilidad, imagina construir un diseño responsivo con tarjetas de tamaño variable, separadas 10px entre sí y pegadas a los bordes del contenedor padre. Lograr este diseño con márgenes en los elementos hijos puede ser complicado.

Lo siguiente muestra un diseño donde comenzamos aplicando a cada elemento hijo el estilo margin: 10:

Dos diagramas. A la izquierda se muestra un esquema de una aplicación con tres cajas que tienen márgenes alrededor, lo que causa que las cajas tengan márgenes en todos los lados. A la derecha, se muestra el mismo diagrama resaltado para demostrar los márgenes en todos los lados.

Los márgenes se aplican uniformemente a los bordes de todos los elementos hijos y no colapsan bajo Flexbox, lo que genera espacio en el exterior de las tarjetas y el doble de espacio en el interior de lo que queríamos. Podemos solucionar esto aplicando márgenes no uniformes, usando márgenes negativos en el contenedor padre, reduciendo a la mitad el espacio previsto, etc., pero se puede simplificar mucho.

Con flex gap, este diseño se puede lograr configurando gap: 10 en el contenedor para obtener un espacio de 10 píxeles entre el interior de las tarjetas:

Dos diagramas. A la izquierda se muestra un esquema de una aplicación con tres cajas que tienen márgenes solo en los lados internos y no en los lados externos, debido a la propiedad Flexbox gap. A la derecha, el mismo diagrama resaltado demuestra los márgenes solo en los lados internos.

Para más información sobre gaps en Flexbox, consulta este artículo de CSS Tricks.

Propiedades inspiradas en la web para accesibilidad, estilos y eventos​

Esta versión incluye varias propiedades nuevas inspiradas en estándares web para alinear las APIs de React Native en múltiples plataformas. Estas nuevas propiedades son puramente aditivas, por lo que no se esperan migraciones ni cambios de comportamiento para propiedades equivalentes de accesibilidad, comportamiento o estilos.

Para cualquier nuevo alias de propiedad introducido, si existe una propiedad existente con nombre diferente y ambas están especificadas, el valor del nuevo alias tendrá prioridad. Por ejemplo, esta versión añade un alias src para source en el componente Image para alinearse con la propiedad src en la web. Si se proporcionan tanto src como source, se usará la nueva propiedad src.

nota

Para más contexto sobre la alineación de React Native con estándares web, consulta esta propuesta y discusión relacionada.

Accesibilidad​

Hemos introducido propiedades ARIA como alias para las propiedades de accesibilidad existentes en React Native.

Estas propiedades ahora existen en todos los componentes principales de React Native: aria-label, aria-labelledby, aria-modal, id, aria-busy, aria-checked, aria-disabled, aria-expanded, aria-selected, aria-valuemax, aria-valuemin, aria-valuenow y aria-valuetext.

También introdujimos comportamientos web equivalentes para: aria-hidden, aria-live, role y tabIndex.

Consulta este issue para más detalles.

Comportamiento específico de componentes​

También se introdujeron propiedades para alinear nombres de props con equivalentes del DOM en componentes principales.

  • Image: alt, tintColor, crossOrigin, height, referrerPolicy, src, srcSet y width.

  • TextInput: autoComplete, enterKeyHint, inputMode, readOnly y rows.

Consulta este issue para más detalles.

Estilos​

Para alinearnos con ciertos estilos CSS, se han extendido las funcionalidades de los siguientes estilos:

Se han añadido los siguientes alias para reflejar estilos existentes de React Native:

Consulta este issue para más detalles.

Eventos​

También hemos añadido una implementación opcional de PointerEvents

Una vez habilitados, los siguientes manejadores en View soportarán hover:

  • onPointerOver, onPointerOut

  • onPointerEnter, onPointerLeave

Estos eventos también están implementados en Pressability para nuevo soporte opcional de hover.

Para habilitar estas características, establece las siguientes flags como true:

import ReactNativeFeatureFlags from 'react-native/Libraries/ReactNative/ReactNativeFeatureFlags';

// enable the JS-side of the w3c PointerEvent implementation
ReactNativeFeatureFlags.shouldEmitW3CPointerEvents = () => true;

// enable hover events in Pressibility to be backed by the PointerEvent implementation.
// shouldEmitW3CPointerEvents should also be true
ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover =
  () => true;
nota

También necesitarás habilitar las feature flags de React en tu configuración nativa para Android e iOS.

Consulta nuestra publicación dedicada a PointerEvents para aprender más.

Restauración de PropTypes​

Los PropTypes de React Native, como ViewPropTypes y Text.propTypes, fueron marcados como obsoletos en la versión 0.66 y su acceso generaba advertencias. Cuando se eliminaron en la versión 0.68, muchos desarrolladores experimentaron errores al actualizar a la última versión de React Native.

Tras investigar, identificamos problemas que impedían a la comunidad actuar sobre las advertencias: primero, las advertencias no siempre eran accionables (issue uno, issue dos); segundo, las advertencias se filtraban incorrectamente mediante LogBox.ignoreLogs. Ambos problemas ya están solucionados, pero queremos dar más tiempo para migrar los sitios de llamada obsoletos.

Por ello, en esta versión restauramos los PropTypes de React Native para facilitar las actualizaciones y migraciones. El paquete deprecated-react-native-prop-types también se ha actualizado para todas las props de la versión 0.71. En el futuro, planeamos continuar con la depreciación y eliminarlos nuevamente, esperando que la comunidad experimente menos problemas.

precaución

Como parte de este cambio, también eliminamos el filtrado de consola de LogBox.ignoreLog. Esto significa que los logs que previamente habías filtrado con Logbox.ignoreLog reaparecerán en la consola al actualizar.

Esto es esperado, ya que permite detectar y corregir advertencias como las de depreciación.

Mejoras en la Experiencia del Desarrollador​

React DevTools​

En esta versión, hemos traído dos populares características de React DevTools para web a React Native.

"Click to inspect" es la opción en la esquina superior izquierda de React Dev Tools que te permite hacer clic en un elemento de la aplicación para inspeccionarlo en Dev Tools, similar al inspector de elementos de Chrome.

El resaltado de componentes marcará el elemento que selecciones en DevTools dentro de la aplicación, permitiéndote ver qué componentes de React corresponden a qué elementos en pantalla.

Aquí puedes ver ambas funciones en acción:

Video del comportamiento descrito anteriormente. A la izquierda se muestra una aplicación React Native ejecutándose en un simulador de iPhone. A la derecha están las React DevTools. En ambos flujos, al hacer clic en un elemento en DevTools se resaltan los componentes correspondientes en la aplicación.

Hermes​

En React Native 0.70, establecimos Hermes como el motor predeterminado para React Native.

En React Native 0.71, actualizamos Hermes con varias mejoras destacables:

  • Mejora en los source maps: Al cargar los source maps a través de la red con Metro, hemos restaurado la capacidad de usar source maps en versiones recientes de Chrome Dev Tools fuera de Flipper.

  • Mejora en el rendimiento de JSON.parse: Esta versión incluye una optimización que mejora el rendimiento de JSON.parse hasta un 30%.

  • Soporte para .at(): Hermes ahora admite .at() para String, TypedArray y Array.

Para ver la lista completa de cambios, consulta el issue Road to 71.

Nueva Arquitectura​

Esta versión incluye numerosas mejoras en la experiencia experimental de la Nueva Arquitectura, basadas en comentarios de usuarios y reportes recopilados hasta ahora.

  • Tiempos de compilación reducidos: El nuevo modelo de distribución usa Maven Central, lo que nos permite reducir considerablemente el tiempo de compilación en Android, resolver muchos problemas de compilación en Windows y ofrecer una experiencia más fluida con la Nueva Arquitectura. Más información aquí.

  • Menos código C++: Ahora puedes habilitar la Nueva Arquitectura sin añadir código C++ en tu aplicación, y la plantilla CLI ha sido limpiada de todo el código C++ y archivos CMake. Más información aquí.

  • Mejor encapsulación de la configuración de apps iOS: En iOS, seguimos un enfoque similar a Android y encapsulamos la mayor parte de la lógica para configurar la Nueva Arquitectura en la clase RCTAppDelegate, lo que simplificará futuras actualizaciones con menos cambios manuales disruptivos.

  • Mejor gestión de dependencias en iOS: Para mantenedores de bibliotecas, hemos añadido una nueva función install_module_dependencies para llamar dentro de tu podspec, que instalará todas las dependencias requeridas para la Nueva Arquitectura.

  • Corrección de errores y mejor soporte para IDEs: Corregimos varios errores y problemas (como mejor soporte para IDEs en Android) reportados por usuarios en el Grupo de Trabajo de Nueva Arquitectura.

Recordamos que la Nueva Arquitectura sigue siendo una experiencia API experimental mientras iteramos para facilitar su adopción. Prueba los nuevos pasos simplificados en la documentación de Nueva Arquitectura y comparte tus comentarios en el Grupo de Trabajo de Nueva Arquitectura.

Otras correcciones destacadas​

  • Mejor colapso de stack frames: Hemos actualizado la lista de frames internos para React Native, haciendo que LogBox muestre tu código con más frecuencia en lugar de frames internos de React Native, ayudándote a depurar problemas más rápido.

  • Mejoras en el tiempo de compilación: Migramos los assets a Maven Central para prefabs con el fin de mejorar los tiempos de compilación (tanto en iOS como Android) para Hermes en las arquitecturas actual y nueva.

  • Mejoras en la plantilla de Android: La plantilla de Android fue completamente depurada y ahora depende totalmente del React Native Gradle Plugin. Puedes encontrar las instrucciones de configuración directamente en la plantilla o en la nueva página dedicada del sitio web.

Cambios importantes​

  • Cambios en el registro de la consola: LogBox.ignoreLog ya no filtra los logs de la consola. Esto significa que comenzarás a ver en la consola logs que habías silenciado en LogBox. Consulta este comentario para más detalles.

  • Eliminación de AsyncStorage y MaskedViewIOS: Estos componentes estaban en desuso desde la versión 0.59, por lo que es momento de eliminarlos por completo. Para alternativas, consulta el Directorio de React Native donde encontrarás paquetes comunitarios que cubren esos casos de uso.

  • JSCRuntime movido a react-jsc: react-jsi ahora está dividido en react-jsc y react-jsi. Si usas JSCRuntime, deberás añadir react-jsc como dependencia (facebook/react-native@6b129d8).

Agradecimientos​

Esta versión ha sido posible gracias al trabajo de más de 70 colaboradores que han añadido más de 1000 commits.

Queremos agradecer especialmente a quienes contribuyeron a estos importantes proyectos de React Native:

Por último, ¡gracias a @cortinico, @kelset, @dmytrorykun, @cipolleschi y @titozzz por lanzar esta versión!

¡Prueba 0.71.0 ahora!​

Para usuarios de React Native CLI, consulta la documentación de actualización para ver cómo actualizar tu proyecto existente o crea uno nuevo con npx react-native init MyProject.

La versión 0.71 de React Native será compatible con Expo SDK 48.

información

0.71 es ahora la última versión estable de React Native, y las versiones 0.68.x ya no son compatibles. Para más información, consulta la política de soporte de React Native.