React Native, como se ve en la TV

Rate this content
Bookmark

Tal vez hayas oído hablar de la visión de React Native de Muchas Plataformas, ¿pero qué hay de las TVs? ¡Descubre las alegrías y desafíos de desarrollar para 7 plataformas a la vez con un solo código base!

20 min
21 Jun, 2022

Video Summary and Transcription

Esta Charla discute el desarrollo de aplicaciones de TV utilizando React Native, centrándose en limitaciones y consideraciones específicas. El orador demuestra cómo obtener y mostrar imágenes aleatorias de perros utilizando React Native hooks. También explican cómo manejar el enfoque y la navegación espacial en aplicaciones de TV, incluyendo el uso de teclas de enfoque y una biblioteca de navegación espacial. La Charla enfatiza la importancia de la optimización y el rendimiento en el desarrollo de aplicaciones de TV y sugiere el uso de useMemo y useCallback para evitar renderizados innecesarios. El orador concluye mencionando oportunidades de trabajo en JustWatch.

Available in English

1. Introducción al desarrollo de aplicaciones de TV

Short description:

En esta parte, Michele presenta Just Watch, una guía de TV para servicios de streaming, y comparte su experiencia en la búsqueda de información sobre el desarrollo de aplicaciones de TV. Discuten las limitaciones y consideraciones específicas para construir aplicaciones de TV utilizando React Native, incluyendo la navegación direccional y el uso de React Native tvOS y React Native web para diferentes plataformas.

Soy Michele, soy un desarrollador de software en Just Watch. ¿Qué es Just Watch en caso de que no lo sepas? Es la guía de TV para servicios de streaming. Así que si no sabes dónde está disponible tu película o programa de TV favorito, o si quieres recibir una notificación la próxima vez que salga una nueva temporada de tu programa de TV favorito, puedes visitar nuestro sitio web o usar una de nuestras muchas aplicaciones, que incluyen no solo iOS y Android, sino también televisores.

Cuando me uní a Just Watch, no sabía mucho sobre el desarrollo de aplicaciones de TV, y honestamente me resultó difícil encontrar información al respecto en línea. Porque sí, hay una sección dedicada a ello en el sitio web de React Native, pero no hay mucho. Así que el año pasado, cuando el equipo de React publicó esta entrada de blog titulada la Visión de Muchas Plataformas, estaba emocionado y pensé, oh, genial, finalmente están hablando del desarrollo de aplicaciones de TV. Pero resulta que no lo estaban haciendo. Estaban hablando realmente de React Native Windows y Mac OS y VR, pero no mencionaron las TVs. Así que esta cosa aquí en la animación no es una TV en caso de que lo pensaras, en realidad es un escritorio. Qué decepción.

Así que en mi charla de hoy, voy a hablarles sobre cómo pueden construir sus aplicaciones de TV utilizando React Native. Qué es especial sobre el desarrollo de aplicaciones de TV en comparación con el desarrollo de aplicaciones móviles. Y finalmente, les daré un par de pequeños consejos y trucos que pueden usar para hacer que su aplicación tenga un mejor rendimiento en un entorno limitado como el entorno de TV. Cuando estás construyendo para TVs, las tres plataformas principales a las que te vas a dirigir son Android TV y Fire TV, basadas en Android, y tvOS. Para estas, puedes usar React Native tvOS, que es un fork del repositorio principal de React Native, lo cual es un poco desafortunado porque significa que siempre estará un poco atrasado, pero se actualiza con bastante regularidad. Y este repositorio de React Native tvOS te brinda una serie de funcionalidades y características que puedes usar para construir tus aplicaciones de TV. Sin embargo, esto no es todo, porque si quieres apuntar a TVs LG y TVs Samsung o Xboxes como nosotros, necesitarás construir tu aplicación como una aplicación HTML. Y para hacerlo mientras aún usas la misma base de código que estás usando para las otras plataformas, puedes usar React Native web. Hablando de cosas específicas del desarrollo de aplicaciones de TV, definitivamente hay navegación direccional o navegación basada en teclas de flecha. Tus usuarios interactuarán con tu aplicación solo usando su control remoto. Así que sus opciones están limitadas allí. Solo pueden ir hacia arriba, abajo, izquierda, derecha, seleccionar, retroceder, a menos que tengan un TV LG, que tiene su propio control remoto mágico. Así se llama realmente, que es una interfaz basada en puntero. Pero aparte de eso, tendrán esta navegación basada en teclas de flecha. React Native tvOS te brinda este controlador de eventos de TV que te permite interceptar estas teclas eventos. Y también te brinda una serie de props como focusable, unfocus, unblur. Estos funcionan exactamente como lo hacen en pressable en el repositorio regular de React Native. Pero también algunos que son específicos para el desarrollo de aplicaciones de TV, como hasTVPreferredFocus, que le dice al sistema operativo qué componente debe recibir el enfoque de forma predeterminada al renderizar tu vista. O las props next focus down, left, up y right.

2. Desarrollo de aplicaciones de TV con React Native

Short description:

En esta parte, Michele discute la complejidad del enfoque en el desarrollo de aplicaciones de TV en comparación con el desarrollo de aplicaciones móviles. Demuestran una aplicación de React Native que se ejecuta en el simulador de Apple TV y explican cómo limpiar el código para desarrollar aplicaciones de TV con React Native. Michele también presenta una API pública llamada Docs.io y explica cómo obtener y mostrar imágenes aleatorias de perros utilizando React Native hooks.

Y también se utilizan para indicar al sistema operativo dónde debe ir el enfoque, en este caso, cuando los usuarios presionan las teclas de flecha. Así que en comparación con el desarrollo de aplicaciones móviles, el enfoque es mucho más complejo. Por lo general, con las aplicaciones móviles, lo que haces es simplemente decir, hey, si este campo de entrada tiene el enfoque, por favor, muestra el teclado. Algo así. Por lo general, no es mucho más que eso.

Así que veamos algo de código. Tengo un repositorio aquí, que creé utilizando la plantilla de React Native CLI, clonando esta plantilla de React Native con TypeScript para TV. Así que si ejecuto Yarn iOS, esto abrirá el simulador de Apple TV y la aplicación de demostración regular de React Native. Se ve un poco raro con estos colores. No estoy seguro por qué. Y aparte de eso, es solo tu aplicación regular. Pero puedes ver en la parte superior derecha aquí, puedes ver que me está diciendo qué tecla de flecha estoy presionando. Esto es React Native TV OS.

Así que limpiemos todo aquí dentro para mostrarte cómo es desarrollar aplicaciones de TV con React Native. Tengo mis propios estilos, nada extravagante, solo, sí, son míos. Los estoy importando y limpiando las importaciones. Así que ahora tenemos un lienzo en blanco. Aquí vamos. Tengo esta API, que es una API pública llamada Docs.io. No es mía. Solo la estoy usando. Estoy obteniendo 10 imágenes aleatorias de perros y dándoles un ID basado en su posición en el array. Así que vamos a obtenerlas cuando el componente se monte. Estoy usando hooks. Así que dogs, set dogs. Vamos a tener un useState, que contendrá un array de imágenes. Queremos obtenerlo, así que vamos a tener un useEffect, que realmente obtendrá las imágenes de perros. Aquí vamos. Es una promesa. Cuando obtengo el resultado, llamo a setDogs.

3. Renderización de imágenes de perros y manejo del enfoque

Short description:

Quiero ejecutar esto solo una vez en React Native 17. TypeScript no conoce el tipo de array. La función fetchDogs devuelve una promesa. Ahora estoy mapeando los perros y renderizando una lista de imágenes de perros. Necesito manejar el enfoque y realizar un seguimiento del componente actualmente enfocado.

Y quiero ejecutar esto solo una vez, al menos en React Native 17. Y esto no es bueno porque TypeScript no sabe qué tipo de array es. Entonces este será el tipo de retorno de la función que acabo de llamar. Entonces fetchDogs. Aquí vamos.

Aún no es bueno porque es una promesa y quiero obtener el valor del resultado en su lugar. Así que ahora está todo bien, pero aún no estoy renderizando nada. Así que vamos a renderizarlo aquí. Vamos a mapear nuestros perros. Así que ahora tengo un perro aquí, en realidad una imagen de perro. Y vamos a renderizar un pressable, que es exactamente el mismo pressable que conoces y amas de React Native. Aquí vamos. Pressable. Vamos a darle una clave porque está dentro de un array. Y vamos a renderizar una imagen dentro, que es la imagen del perro, más o menos lo que queremos. Así que URI de la imagen del perro. Aquí vamos. Vamos a darle un estilo. Estilo. Una imagen. Y digamos que debe ocupar toda el área disponible. Aquí vamos. Así que ahora deberíamos tener, y tenemos, una lista de imágenes de perros.

Y si mantengo presionada la tecla Opción y desplazo aquí, puedes ver que en realidad se desplaza. Pero si presiono las teclas de flecha en su lugar, puedes ver que todavía se desplaza, pero nada cambia porque no estoy renderizando nada diferente si algo está enfocado. Así que primero, déjame hacerlo horizontal porque me gusta más. Y vamos a realizar un seguimiento del enfoque, que es algo que harás todo el tiempo en las aplicaciones de TV. Así que vamos a mantener el estado aquí. Y digamos que este es el ID del componente que está actualmente enfocado. El ID será simplemente una cadena.

4. Seguimiento del enfoque y agregar botones

Short description:

Y vamos a realizar un seguimiento del perro enfocado actualizando el ID de enfoque con una devolución de llamada. Si el perro está enfocado, actualizamos el estilo para incluir un marco azul. Agregamos otro botón para la navegación 2D. ¡Eso es todo!

Y vamos a realizar un seguimiento de eso. Entonces, cada vez que uno de esos perros esté enfocado, quiero actualizar el ID de enfoque. ¿Cómo hago eso? Con una devolución de llamada. Llamémoslo en el enfoque. Y digamos que useCallback. Voy a pasarle este ID a esta función. Y seguirá siendo una devolución de llamada. Así que quiero otra flecha aquí. Y quiero llamar a setFocusedID, pasándole el ID. Aquí vamos. Array de dependencias. Boom.

En el enfoque. Y ahora vamos a pasarle el ID del perro. Aún no cambia nada en la representación. Quiero actualizar el estilo. Tengo los estilos presionables. Pero si está enfocado, quiero que también tenga un marco, un marco azul alrededor, que está en un estilo que he llamado estilos enfocados. Y así que si este es el perro con el ID de enfoque, entonces el ID del perro es igual al ID de enfoque, quiero agregar este otro estilo. Así que no solo presionable, sino también enfocado. Aquí vamos. Y ahora, si me muevo con la tecla de flecha, puedes ver que todo funciona.

Así que agreguemos otro botón justo debajo para tener al menos navegación 2D. Así que digamos estilos.botones. Sí. Y agreguemos otro presionable. Y le daremos el mismo tratamiento que le dimos a los perros. Así que si el ID de enfoque es igual a, llamémoslo botón, voy a decir estilos.botón, pero también estilos.enfocado. Si no, solo estilos.botón. ¿Qué fue eso? No lo sé.

5. Manejo del enfoque y navegación espacial

Short description:

Styles.button. Necesitamos actualizar el enfoque y renderizar la etiqueta dentro del botón. Para habilitar la navegación de enfoque, establezca la propiedad next focus down utilizando refs y la función findNodeHandle. Asegúrese de tener la última versión de React Native tvOS para correcciones de errores. Para React Native web, use una biblioteca de navegación espacial como Norwegian Spatial Navigation.

Styles.button. Aquí vamos. También necesitamos actualizar el enfoque. Entonces, nuevamente, en el enfoque, y esto es el botón que acabamos de mencionar. Y dentro de él, vamos a renderizar solo la etiqueta. Estilo de etiqueta. Aquí vamos. Y digamos que esto es un botón. Esto simplemente agrega otro botón aquí, y puedo navegar hacia él.

Pero si presiono aquí abajo, por ejemplo, o aquí en cualquier imagen de perro que no sea la primera , tvOS no me permite enfocar el botón. Esto se debe a que tvOS, de forma predeterminada, no te permite mover hacia abajo con enfoque si el componente al que deseas enfocar no está directamente debajo del que está actualmente enfocado. Entonces, funciona aquí, pero no funciona aquí. Entonces, ¿cómo le digo a tvOS lo contrario? Se lo digo estableciendo la propiedad next focus down. Esto funciona en base a refs. Así que tendré que crear una ref, llamándola button.ref. Establezcámoslo en null para que TypeScript no se queje. Y establezcámoslo en el botón. Entonces, justo aquí, ref es igual a button.ref.

Y podrías pensar que todo lo que necesito hacer aquí es simplemente decir next focus down button.ref, lo cual tendría sentido, pero no funciona porque realmente quiere un número y no una ref. Entonces, para obtener un número de una ref, necesitas usar la función findNodeHandle de React Native. FindNodeHandle. Aquí vamos. Entonces, toma, por supuesto, un valor actual de alguna ref, y en realidad no me deja establecer así porque no puede ser null, pero puede ser undefined. Entonces, puedo simplemente decir esto. Entonces, ahora si guardo y cargo y presiono aquí abajo, todo funciona. No importa dónde esté.

Asegúrese de tener la última versión de React Native tvOS porque había un error para tvOS relacionado con next focus down o next focus anything solo en tvOS, pero se solucionó en la última versión. Hemos visto esto para React Native tvOS, pero si estás en React Native web en su lugar, no hay gestión de enfoque nativa porque es solo una página HTML. En ese caso, deberás agregar tu propia biblioteca de navegación espacial, como Norwegian Spatial Navigation, que estamos usando. Solía llamarse React Spatial Navigation.

6. Usando Claves de Enfoque y Navegación Espacial

Short description:

Esta biblioteca se basa en una clave de enfoque única, que te permite establecer imperativamente el enfoque en un componente específico. Puedes definir tus propias props de enfoque siguiente y crear tus propias funciones de enfoque. Para habilitar la navegación espacial en React Native Web, puedes usar la biblioteca de navegación espacial noruega. El gancho useFocusable es esencial para establecer refs en componentes enfocables. Extraer componentes para diferentes plataformas, como web, es una práctica común en el desarrollo de aplicaciones de TV.

Recientemente fue renombrada porque la reescribieron para usar hooks en lugar de componentes de alto orden. Esta biblioteca se basa en una clave de enfoque única, que es una cadena, que es mejor que una ref, creo, aunque tendrás que lidiar con refs, pero ya veremos eso. Y puedes pasar estas IDs de enfoque únicas a las claves de enfoque de esta función de establecimiento de enfoque, que también es proporcionada por la biblioteca.

Y esa función de establecimiento de enfoque te permite establecer imperativamente el enfoque en un componente específico, lo cual es agradable. Aún puedes definir tus propias props de enfoque siguiente porque esas son específicas de React Native tvOS, pero puedes crear las tuyas propias, como enfoque siguiente hacia abajo en web, por ejemplo, usando la función onArrowPressed, que es proporcionada por la biblioteca. Así que vamos a verlo.

Así que tengo otra rama aquí que quiero revisar en la que instalé React Native Web. Tengo una configuración de webpack. Si ejecuto yarn web, esto va a iniciar un servidor de desarrollo de webpack. Tengo una configuración regular para TypeScript. Y si veo localhost:8080, ahora debería estar funcionando. El enfoque funciona si presiono cosas como lo estoy haciendo ahora. Pero si presiono las teclas de flecha, no hace nada, como puedes ver, porque no hay navegación espacial.

Aquí agregué la navegación espacial noruega. Hice la configuración. Hay esta función init. Puedes pasarle algunos valores que no lo hice. Necesitas envolver tu aplicación alrededor de este proveedor de enfoque. Y esta clave de enfoque que mencioné antes es pasada por el gancho useFocusable. Este es el gancho número uno que quieres usar de esta biblioteca. Lo usarás en todas partes. También te estaba diciendo antes que aún tendrás que lidiar con refs. ¿Y por qué? Porque estos ganchos useFocusable realmente devolverán una ref que necesitas establecer en cada componente que pueda ser enfocado por la biblioteca. Entonces, dado que necesitas usar una ref para cada componente, estos deben ser extraídos a un componente diferente, lo cual hice en este componente doc. Como puedes ver, es exactamente lo mismo. Entonces, algo que harás más de una vez, al menos, mientras desarrollas aplicaciones de TV, es crear diferentes variantes de componentes, dependiendo de si estás en web o no. Para hacer esto, lo haces como lo haces para iOS y Android. Estoy copiando y pegando esta clase y renombrándola como doc.web.tsx. Esto será cargado solo por Webpack y no por el empaquetador regular de React Native metro.

7. Mejorando la interfaz de usuario con Navegación Espacial

Short description:

Y agreguemos todos los atributos faltantes. Cuando estamos en la versión web, la Navegación Espacial se encarga del enfoque. La prop focused, devuelta por el gancho useFocusable, debe establecerse en el componente que puede tener enfoque. Sincroniza el estado de la interfaz de usuario con React Spatial Navigation o una Navegación Espacial de origen utilizando la función focusSelf. Usa useEffect para manejar la prop hasToBePreferredFocus. Establece el ID para la clave de enfoque utilizando el gancho useFocusable. Actualiza la definición de tipo en todas partes para que TypeScript lo entienda.

Así como esto. Y agreguemos todos los atributos faltantes. Entonces, la imagen es doc.image y su enfoque no siempre es falso, sino focusedId igual a docId. Entonces, lo que queremos hacer cuando estamos en la versión web es dejar que la Navegación Espacial se encargue del enfoque. Este atributo se ignorará. Incluso si estará en la interfaz, no lo usaremos aquí.

Queremos tener la prop focused, que es devuelta por el gancho useFocusable. Y te estaba diciendo que esto se basa en refs porque devuelve algunas refs que necesitas establecer en tu componente que puede tener enfoque. Eso es todo lo que necesitas hacer. Aquí dijimos que estamos usando focused. Y otra cosa que debemos hacer aquí es sincronizar el estado de la interfaz de usuario con el estado de React Spatial Navigation o una Navegación Espacial de origen. Para hacerlo, hay esta función focusSelf que debes llamar cuando tu componente tiene enfoque. Esto mantiene ambos en sincronía.

Todavía hay una cosa que no hemos hecho aquí, que es lidiar con hasToBePreferredFocus porque también es una prop específica de React Native tvOS. Así que hagamos un useEffect porque esto solo se afecta en el montaje. Entonces, si está enfocado, si debe tener enfoque, llama a focusSelf. Eso es todo lo que hay que hacer. Y finalmente, otra cosa que podemos hacer es decidir el ID que se utiliza para nuestra clave de enfoque. Y para hacerlo, puedes establecerlo como un parámetro del gancho useFocusable. Entonces puedes decir focusKey. Y si tienes IDs, te sugiero que los uses porque facilita la depuración. Por supuesto, necesitas definirlo. No está ordenado alfabéticamente, pero sí, lo que sea. Y esto es ID. Y necesito pasarlo. Pero ahora algo que también sucede mucho cuando tienes diferentes variantes es que necesitas actualizar la definición de tipo en todas partes para que TypeScript lo entienda. Por lo general, puedes extraer eso a un archivo común. Eso es solo para los tipos. Eso es lo que suelo hacer. Eso es todo.

8. Configuración de enfoque y rendimiento de TV

Short description:

Necesitamos establecer el componente con enfoque de forma predeterminada. Extrae el botón a un componente y agrega el gancho useFocusable. Usa la función setFocus para establecer el enfoque de forma imperativa. Las TVs tienen CPUs menos potentes en comparación con los teléfonos móviles. Las TVs no se reemplazan con tanta frecuencia como los teléfonos, por lo que las TVs más antiguas pueden tener CPUs más lentas y versiones de software más antiguas.

Y, por supuesto, ahora, dado que esto no es nativo, tenemos que decirle, oye, este es el componente que tiene el enfoque de forma predeterminada. Entonces, el primer perro tendrá el enfoque de forma predeterminada. Así que guardemos todo. Veamos cuando se recargue. Y ahora todo funciona. Muy bien.

Entonces, ahora el botón no funciona porque, nuevamente, esto no se ha extraído a un componente y no tiene el gancho. Entonces, para hacerlo, necesitamos extraerlo. Tengo lo mismo que te mostré para los perros, para un botón, y eso es todo lo que hace. Tiene su propio useFocusable y ref.

Así que te hablé de una función setFocus, y eso también es devuelto por este gancho useFocusable. Podemos, por ejemplo, establecer el enfoque de forma imperativa cuando presionas ese botón. Digamos que lo que queremos hacer es, al presionar, establecer el enfoque en el tercer perro, tal vez. Digamos solo para mostrar algo. Así que digamos setFocus dog2. Y necesitamos agregarlo. Aquí vamos. Y ahora onPress hará eso. onPress. Guardando todo de nuevo. Aquí vamos. Estoy usando las teclas de flecha. Y si presiono el botón, puedes ver que el enfoque va al tercer perro como queremos.

Entonces, consideraciones finales. Las TVs son muy poco potentes en general. Sus CPUs son más pequeñas y más lentas que los últimos y mejores teléfonos móviles. Y eso también se debe a que se reemplazan con menos frecuencia que los teléfonos, gracias a Dios, porque son dispositivos grandes. Pero por lo general, las personas no cambian su TV cada dos años como lo hacen con los teléfonos. Entonces, si estás viendo una TV del 2017, eso no es realmente antiguo. Y una TV de alta gama del 2017 podría tener una CPU de 1 GHz y Chromium 38, que en realidad es del 2014.

9. Optimización y Enfoque en el Desarrollo de Aplicaciones de TV

Short description:

El desarrollo de aplicaciones de TV requiere optimización debido a limitaciones y la necesidad de rendimiento. Es crucial utilizar useMemo y useCallback para evitar renderizados innecesarios y mantener el rendimiento. Un truco es solo volver a renderizar componentes cuando cambia el enfoque, utilizando el segundo argumento de React memos. Esta funcionalidad es similar a shouldComponentUpdate en componentes de clase. Desafortunadamente, no hay suficiente tiempo para explicar en detalle, pero JustWatch está contratando y puedes contactarnos en Twitter o en el sitio web de React Summit.

Y en algunos casos no se reemplazan nunca. Por lo tanto, deberás usar mucho Babel, agregar muchos polyfills, por lo que se volverá más lento. Así que sacando cosas del pasado, como una TV del 2017, como un Meme del 2005. Por lo tanto, tendrás que optimizar mucho.

Así que recuerda usar useMemo, useCallback y measurePerformance. ¿Por qué digo esto? Porque últimamente ha habido una tendencia en contra de useMemo y useCallback, diciendo que es una optimización prematura. Creo que es todo lo contrario, al menos para el desarrollo de aplicaciones de TV, porque no sabes si realmente requieren mucha CPU para usar useMemo y useCallback. Pero definitivamente sabes que si olvidas usarlos, y no tienes integridad referencial, es decir, si las funciones siguen cambiando y siguen provocando renderizados todo el tiempo, esto afectará mucho el rendimiento.

Un truco que puedes aplicar específicamente en aplicaciones de TV es volver a renderizar solo un componente cuando cambia el enfoque. ¿Qué quiero decir con esto? Entonces, los componentes de aplicaciones de TV son bastante complejos y tienen muchas props y valores que les pasas. Pero generalmente, solo quieres volver a renderizarlos cuando son el componente que está actualmente enfocado o el que solía estar enfocado. Entonces, tal vez tengas un marco como el que tenía en mi aplicación de demostración, y quieres moverlo. Solo necesito volver a renderizar esos dos. ¿Cómo lo hago? Puedo usar el segundo argumento de React memos, que no es un secreto, pero no muchos lo conocen. Aunque esta es exactamente la misma funcionalidad que proporciona shouldComponentUpdate en los antiguos componentes de clase del ciclo de vida. Está invertido. Entonces, en lugar de ser shouldComponentUpdate, es más bien shouldComponentStayTheSame. Por lo tanto, estás verificando las props anteriores y las props siguientes. Y si el enfoque no cambió, no quieres volver a renderizar.

Desearía tener más tiempo para profundizar y explicar todos estos trucos. Pero desafortunadamente, sí, mis 20 minutos han terminado. Así que muchas gracias por ver. JustWatch está contratando, así que por favor contáctame en Twitter o en cualquiera de mis contactos, que están publicados en el sitio web de React Summit. Y muchas gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2023React Advanced Conference 2023
29 min
Raising the Bar: Our Journey Making React Native a Preferred Choice
At Microsoft, we're committed to providing our teams with the best tools and technologies to build high-quality mobile applications. React Native has long been a preferred choice for its high performance and great user experience, but getting stakeholders on board can be a challenge. In this talk, we will share our journey of making React Native a preferred choice for stakeholders who prioritize ease of integration and developer experience. We'll discuss the specific strategies we used to achieve our goal and the results we achieved.
React Finland 2021React Finland 2021
27 min
Opensource Documentation—Tales from React and React Native
Documentation is often your community's first point of contact with your project and their daily companion at work. So why is documentation the last thing that gets done, and how can we do it better? This talk shares how important documentation is for React and React Native and how you can invest in or contribute to making your favourite project's docs to build a thriving community
React Day Berlin 2023React Day Berlin 2023
29 min
Bringing React Server Components to React Native
React Server Components are new topic in community, bunch of frameworks are implementing them, people are discussing around this topic. But what if we could use React Server Components in React Native? And bring all optimisation features that RSC allows to mobile apps? In this talk I would present what we are able to do with RSC in React Native!
React Advanced Conference 2021React Advanced Conference 2021
21 min
Building Cross-Platform Component Libraries for Web and Native with React
Top Content
Building products for multiple platforms such as web and mobile often requires separate code-based despite most of the components being identical in look and feel. Is there a way where we could use shared React component library on different platforms and save time? In this presentation I'll demonstrate one way to build truly cross-platform component library with a unique approach of using React & React Native in combination.

Workshops on related topic

React Advanced Conference 2022React Advanced Conference 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
WorkshopFree
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
Top Content
Workshop
- Intro - Cleo & our mission- What we want to build, how it fits into our product & purpose, run through designs- Getting started with environment set up & “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel
React Advanced Conference 2023React Advanced Conference 2023
159 min
Effective Detox Testing
Workshop
So you’ve gotten Detox set up to test your React Native application. Good work! But you aren’t done yet: there are still a lot of questions you need to answer. How many tests do you write? When and where do you run them? How do you ensure there is test data available? What do you do about parts of your app that use mobile APIs that are difficult to automate? You could sink a lot of effort into these things—is the payoff worth it?
In this three-hour workshop we’ll address these questions by discussing how to integrate Detox into your development workflow. You’ll walk away with the skills and information you need to make Detox testing a natural and productive part of day-to-day development.
Table of contents:
- Deciding what to test with Detox vs React Native Testing Library vs manual testing- Setting up a fake API layer for testing- Getting Detox running on CI on GitHub Actions for free- Deciding how much of your app to test with Detox: a sliding scale- Fitting Detox into you local development workflow
Prerequisites
- Familiarity with building applications with React Native- Basic experience with Detox- Machine setup: a working React Native CLI development environment including either Xcode or Android Studio
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
React Advanced Conference 2022React Advanced Conference 2022
131 min
Introduction to React Native Testing Library
Workshop
Are you satisfied with your test suites? If you said no, you’re not alone—most developers aren’t. And testing in React Native is harder than on most platforms. How can you write JavaScript tests when the JS and native code are so intertwined? And what in the world are you supposed to do about that persistent act() warning? Faced with these challenges, some teams are never able to make any progress testing their React Native app, and others end up with tests that don’t seem to help and only take extra time to maintain.
But it doesn’t have to be this way. React Native Testing Library (RNTL) is a great library for component testing, and with the right mental model you can use it to implement tests that are low-cost and high-value. In this three-hour workshop you’ll learn the tools, techniques, and principles you need to implement tests that will help you ship your React Native app with confidence. You’ll walk away with a clear vision for the goal of your component tests and with techniques that will help you address any obstacle that gets in the way of that goal.you will know:- The different kinds React Native tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting text, image, and native code elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RNTL tests and how to handle them- Options for handling native functions and components in your JavaScript tests
Prerequisites:- Familiarity with building applications with React Native- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Native Testing Library- Machine setup: Node 16.x or 18.x, Yarn, be able to successfully create and run a new Expo app following the instructions on https://docs.expo.dev/get-started/create-a-new-app/