Saltar al contenido principal

Anunciamos React Native 0.63 con LogBox

· 8 min de lectura
Mike Grabowski
Mike Grabowski
CTO and Co-Founder @ Callstack
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 0.63 que incluye LogBox activado por defecto.

LogBox​

Hemos recibido comentarios frecuentes de la comunidad indicando que los errores y advertencias son difíciles de depurar en React Native. Para abordar estos problemas, revisamos todo el sistema de errores, advertencias y logs en React Native y lo rediseñamos desde cero.

Captura de pantalla de LogBox

LogBox es una experiencia completamente rediseñada de redbox, yellowbox y registro de logs en React Native. En la versión 0.62 presentamos LogBox como opcional. En este lanzamiento, implementamos LogBox como experiencia predeterminada en todo React Native.

LogBox aborda las quejas sobre errores y advertencias demasiado verbosos, mal formateados o inaccionables centrándose en tres objetivos principales:

  • Conciso: Los logs deben proporcionar la mínima información necesaria para depurar un problema.

  • Formateado: Los logs deben estar estructurados para que puedas encontrar rápidamente la información que necesitas.

  • Accionable: Los logs deben ser prácticos para que puedas resolver el problema y continuar.

Para lograr estos objetivos, LogBox incluye:

  • Notificaciones de logs: Hemos rediseñado las notificaciones de advertencias y añadido soporte para errores, haciendo que todos los mensajes de console.warn y console.log aparezcan como notificaciones en lugar de cubrir tu aplicación.

  • Marcos de código: Cada error y advertencia ahora incluye un marco de código que muestra el código fuente del log directamente en la app, permitiéndote identificar rápidamente el origen del problema.

  • Pilas de componentes: Todas las pilas de componentes ahora se extraen de los mensajes de error y se colocan en su propia sección con los tres primeros marcos visibles. Esto te da un espacio único y consistente para obtener información de marcos de pila sin saturar el mensaje del log.

  • Contracción de marcos de pila: Por defecto, ahora contraemos los marcos de pila de llamada no relacionados con el código de tu aplicación para que puedas ver rápidamente el problema sin revisar internos de React Native.

  • Formateo de errores de sintaxis: Hemos mejorado el formato para errores de sintaxis y añadido marcos de código con resaltado de sintaxis para que puedas ver el origen del error, corregirlo y continuar programando sin que React Native interfiera.

Hemos integrado todas estas características en un diseño visual mejorado, consistente entre errores y advertencias, que permite navegar por todos los logs en una interfaz única y agradable.

Con este cambio también estamos dejando obsoleta YellowBox en favor de las APIs de LogBox:

  • LogBox.ignoreLogs(): Esta función reemplaza a YellowBox.ignoreLogs([]) como forma de silenciar logs que coincidan con las cadenas o expresiones regulares dadas.

  • LogBox.ignoreAllLogs(): Esta función reemplaza a console.disableYellowBox como forma de desactivar notificaciones de errores o advertencias. Nota: esto solo desactiva las notificaciones; los errores no capturados aún abrirán un LogBox a pantalla completa.

En la versión 0.63, mostraremos advertencias al usar estos módulos o métodos obsoletos. Por favor, actualiza tus puntos de llamada de estas APIs antes de que se eliminen en la versión 0.64.

Para más información sobre LogBox y depuración en React Native, consulta la documentación aquí.

Pressable​

React Native se creó para que las aplicaciones cumplan con las expectativas de los usuarios en cada plataforma. Esto incluye evitar "indicios": pequeños detalles que revelan que la experiencia fue construida con React Native. Una fuente importante de estos indicios han sido los componentes táctiles: Button, TouchableWithoutFeedback, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback y TouchableBounce. Estos componentes hacen que tu aplicación sea interactiva al permitirte proporcionar retroalimentación visual a las interacciones del usuario. Sin embargo, como incluyen estilos y efectos incorporados que no coinciden con la interacción nativa de la plataforma, los usuarios pueden detectar cuando las experiencias están escritas con React Native.

Además, a medida que React Native ha evolucionado y nuestros estándares para aplicaciones de alta calidad han aumentado, estos componentes no han evolucionado con él. React Native ahora admite plataformas como Web, Escritorio y TV, pero ha carecido de soporte para modalidades de entrada adicionales. React Native necesita ofrecer experiencias de interacción de alta calidad en todas las plataformas.

Para abordar estos problemas, presentamos un nuevo componente central llamado Pressable. Este componente puede detectar varios tipos de interacciones. Su API fue diseñada para proporcionar acceso directo al estado actual de la interacción sin necesidad de mantener manualmente el estado en un componente padre. También se diseñó para permitir que las plataformas amplíen sus capacidades e incluyan hover, blur, focus y más. Esperamos que la mayoría de las personas construyan y compartan componentes que utilicen Pressable internamente, en lugar de depender de la experiencia predeterminada de componentes como TouchableOpacity.

import {Pressable, Text} from 'react-native';

<Pressable
  onPress={() => {
    console.log('pressed');
  }}
  style={({pressed}) => ({
    backgroundColor: pressed ? 'lightskyblue' : 'white',
  })}>
  <Text style={styles.text}>Press Me!</Text>
</Pressable>;

A simple example of a Pressable component in action

Puedes obtener más información en la documentación.

Colores nativos (PlatformColor, DynamicColorIOS)​

Cada plataforma nativa tiene el concepto de colores definidos por el sistema. Son colores que responden automáticamente a configuraciones del sistema como modo Claro u Oscuro, ajustes de accesibilidad como modo Alto Contraste, e incluso su contexto dentro de la aplicación como las características de una vista o ventana contenedora.

Si bien es posible detectar algunas de estas configuraciones mediante la API Appearance y/o AccessibilityInfo y ajustar los estilos en consecuencia, tales abstracciones no solo son costosas de desarrollar sino que aproximan la apariencia de los colores nativos. Estas inconsistencias son particularmente notorias en aplicaciones híbridas, donde los elementos de React Native coexisten junto a los nativos.

React Native ahora ofrece una solución lista para usar estos colores del sistema. PlatformColor() es una nueva API que puede usarse como cualquier otro color en React Native.

Por ejemplo, en iOS, el sistema proporciona un color llamado labelColor. Puede usarse en React Native con PlatformColor así:

import {Text, PlatformColor} from 'react-native';

<Text style={{color: PlatformColor('labelColor')}}>
  This is a label
</Text>;

Sets the color of the Text component to labelColor as defined by iOS.

Android, por otro lado, proporciona colores como colorButtonNormal. Puedes usar este color en React Native con:

import {View, Text, PlatformColor} from 'react-native';

<View
  style={{
    backgroundColor: PlatformColor('?attr/colorButtonNormal'),
  }}>
  <Text>This is colored like a button!</Text>
</View>;

Sets the background color of the View component to colorButtonNormal as defined by Android.

Puedes obtener más información sobre PlatformColor en la documentación. También puedes consultar los ejemplos de código en RNTester.

DynamicColorIOS es una API exclusiva de iOS que te permite definir qué color usar en modo claro y oscuro. Similar a PlatformColor, puede usarse en cualquier lugar donde se usen colores. DynamicColorIOS utiliza internamente colorWithDynamicProvider de iOS.

import {Text, DynamicColorIOS} from 'react-native';

const customDynamicTextColor = DynamicColorIOS({
  dark: 'lightskyblue',
  light: 'midnightblue',
});

<Text style={{color: customDynamicTextColor}}>
  This color changes automatically based on the system theme!
</Text>;

Changes the text color based on the system theme

Puedes obtener más información sobre DynamicColorIOS en la documentación.

Eliminación del soporte para iOS 9 y Node.js 8​

Después de más de cuatro años desde su lanzamiento, eliminamos el soporte para iOS 9. Este cambio nos permitirá avanzar más rápido al reducir las comprobaciones de compatibilidad necesarias en el código nativo para detectar si una función era compatible con cierta versión de iOS. Con su cuota de mercado del 1%, no debería tener un impacto negativo significativo en tus usuarios.

Al mismo tiempo, estamos eliminando el soporte para Node 8. Su ciclo de mantenimiento LTS expiró en diciembre de 2019. La versión LTS actual es Node 10 y ahora es la versión que estamos utilizando como objetivo. Si aún usas Node 8 para el desarrollo de aplicaciones React Native, te recomendamos actualizar para recibir todas las correcciones de seguridad y actualizaciones más recientes.

Otras mejoras destacadas​

  • Soporte para renderizar <View /> dentro de <Text /> sin tamaño explícito: Ahora puedes renderizar cualquier <View /> dentro de cualquier componente <Text /> sin establecer explícitamente su ancho y alto, algo que no siempre era posible. En versiones anteriores de React Native, esto resultaba en un RedBox.

  • Cambio de LaunchScreen en iOS de xib a storyboard: A partir del 30 de abril de 2020, todas las aplicaciones enviadas a App Store deben usar un storyboard de Xcode para proporcionar la pantalla de inicio, y todas las apps para iPhone deben admitir todas las pantallas de iPhone. Este cambio ajusta la plantilla predeterminada de React Native para cumplir con este requisito.

Agradecimientos​

¡Agradecemos a los cientos de colaboradores que hicieron posible la versión 0.63!

nota

Agradecimientos especiales a Rick Hanlon por escribir la sección sobre LogBox y a Eli White por redactar la parte de Pressable en este artículo.

Para ver todas las actualizaciones, consulta el registro de cambios de la versión 0.63.