Explorando AR Try-On con React Native

Rate this content
Bookmark

React Native puede ser mucho más que un conjunto de herramientas para construir interfaces de usuario móviles en JavaScript. Exploraremos cómo utilizar características más allá de la biblioteca principal y utilizar el sistema de módulos nativos incorporado para integrar capacidades de AR en tu aplicación móvil.

20 min
17 Jun, 2022

Video Summary and Transcription

Esta charla discute la exploración de AR Try-On con React Native, la implementación de experiencias de prueba de AR en aplicaciones de comercio electrónico y consideraciones para el desarrollo de AR. También cubre la integración de plataformas de AR como ARKit y ARCore con React Native utilizando el puente Duvero. La charla destaca el uso de soluciones listas para usar como el SDK de Wanna para pruebas virtuales y la tecnología AR y la extensión de compras de Snap. También se menciona la importancia de crear modelos 3D para AR Try-On y los desafíos de escribir código nativo para el desarrollo de AR.

Available in English

1. Introducción a AR y VR

Short description:

Estoy emocionado de hablar sobre la exploración de AR Tryon con React Native. Discutiré lo que está sucediendo en el espacio de AR y VR y compartiré un estudio de caso de implementación de una función de prueba virtual. AR mejora el mundo real con gráficos asistidos por computadora, mientras que VR ofrece una experiencia completamente simulada. AR se está convirtiendo en una parte esperada de la experiencia de compra, como se ve en la prueba virtual de zapatos con AR de Amazon. Ejemplos incluyen la prueba de AR de Bailey Nelson para gafas y la aplicación de Gucci con varias características de AR.

Estoy muy emocionado de estar aquí hoy y voy a hablar sobre la exploración de AR Tryon con React Native. Así que aquí está la diapositiva de introducción.

Hola, mi nombre es Kadi. Como dijo Yanni, entre sus amables palabras, actualmente soy el jefe de desarrollo móvil en Formidable. He sido ingeniero durante unos diez años, pero durante los últimos cinco años desde 2017, he estado construyendo cosas en React Native. He tenido la gran fortuna de poder trabajar en proyectos realmente emocionantes en React Native y estoy muy emocionado de compartir uno de ellos con ustedes hoy.

Entonces, en esta charla, habrá dos partes. Primero, hablaremos en general sobre lo que está sucediendo en el espacio de AR y VR, y en la segunda parte, repasaremos un estudio de caso de cómo implementamos una función de prueba virtual en una aplicación de React Native.

Para comenzar, ¿qué está sucediendo actualmente en el espacio de AR y VR? Haré una rápida aclaración sobre la diferencia entre AR y VR, porque tendemos a usar esos términos juntos. VR significa realidad virtual y es una experiencia completamente simulada, por lo que puede parecerse al mundo real o puede ser completamente diferente. La característica distintiva de una experiencia de VR es que necesitarás usar algún tipo de auriculares de VR, como Oculus, Google Cardboard o Index VR, pero el punto es que necesitas usar algo para tener esta experiencia inmersiva, y un ejemplo de eso es, por ejemplo, Beatsaber que verás en la pantalla.

AR significa realidad aumentada y es un proceso en el que el mundo real se mejora con gráficos asistidos por computadora. Por lo general, para una experiencia de AR, estarás mirando a través de una pantalla, puede ser la pantalla de tu teléfono, puede ser la pantalla de tu computadora portátil que tiene una cámara que está grabando el mundo real, y luego tu dispositivo agregará algunas mejoras asistidas por computadora. Por ejemplo, podrías usarlo para colocar muebles en tu espacio. Si has seguido las noticias recientemente, es posible que hayas visto que la semana pasada hubo una noticia que circulaba que Amazon ha lanzado una experiencia de prueba virtual de zapatos con AR en su aplicación de iOS. Esto en sí mismo no es particularmente innovador. Amazon está lejos de ser la primera empresa, y no será la última, en lanzar algo así. Pero la razón por la que encontré que era significativo es que nos habla de una tendencia que está sucediendo cada vez más. En el comercio electrónico, AR dejará de ser un truco. Ya no será algo genial que quizás el 5% de las personas usaría. Cada vez más, se está convirtiendo en una parte esperada de nuestra experiencia de compra. Solo para darte un par de ejemplos de cómo he usado AR en mi experiencia de compra. Estas fueron un par de cosas que usé antes de saber que iba a dar esta charla. Bailey Nelson es una empresa que vende gafas. Me gustan mucho sus gafas. En su sitio web, tienen una función de prueba de AR donde puedes probarte las gafas antes de comprarlas. Otra cosa, Gucci tiene una aplicación que es solo para funciones de experiencia. Tienen varias características de AR. Tienen una prueba de zapatos. Tienen una prueba de maquillaje y en este ejemplo, también puedes probar diferentes esmaltes de uñas.

2. Moving into an Unfurnished House

Short description:

Recientemente me mudé a una casa completamente sin amueblar y tuve que amueblarla desde cero. Tuve dificultades para colocar un sofá en mi sala de estar con una forma extraña, pero al final me decidí por un sofá de dos plazas.

Recientemente me mudé de casa. Bueno, digo recientemente. Fue a principios de año. Y fue la primera vez que me mudé a una casa completamente sin amueblar. Fue la primera vez que me mudé, perdón, puedo escuchar un eco. Fue la primera vez que me mudé a una casa completamente sin amueblar, así que tuve que amueblarla desde cero. Y aquí estaba yo tratando de descubrir cómo colocar un sofá en mi sala de estar con una forma muy extraña. Como puedes ver, ese sofá de esquina era un deseo, pero al final terminé eligiendo una versión más pequeña de esto, um, el sofá de dos plazas.

3. Introduction to AR Platforms and Duvero

Short description:

Tanto iOS como Android proporcionan plataformas de AR llamadas ARKit y ARCore respectivamente. React Native tiene un puente llamado Duvero que conecta React Native con ARKit y ARCore. Duvero es una biblioteca de código abierto que simplifica el desarrollo de AR en React Native.

Ahora te estarás preguntando, ¿cómo hago esto en React Native? Bueno, con todo en React Native, vamos a empezar por mirar las plataformas subyacentes. Tanto iOS como Android proporcionan una plataforma de AR. En iOS se llama ARKit. Fue lanzado en 2017 y está disponible desde iOS 11 en adelante. En Android, para no quedarse atrás, lanzó el equivalente en la plataforma de Android, llamado ARCore, que fue lanzado en 2018 y es compatible con Android 7 en adelante. Como siempre con React Native, alguien en algún lugar ha escrito el puente de React Native para las bibliotecas nativas, y en este caso se llama Duvero, que básicamente construye el puente de React Native para ARKit y ARCore. Es una biblioteca de código abierto. Creo que ahora la han trasladado al espacio de la comunidad. No la están manteniendo activamente. Pero si solo quieres probar AR en React Native sin tener que escribir código nativo por ti mismo, este sería un buen lugar para empezar.

4. Implementando AR Try-On

Short description:

Implementamos una experiencia de prueba virtual en una aplicación React Native para un cliente de comercio electrónico. Querían que los usuarios probaran zapatos antes de comprarlos, como parte de la aplicación principal de compras. El diseño de la interfaz de usuario se realizó antes de encontrar un proveedor o construir cualquier código. Debido a los recursos limitados, no pudimos comenzar desde cero. Encontramos una solución adecuada basada en estos requisitos.

Ahora, veamos cómo implementamos realmente una experiencia de prueba virtual en una aplicación React Native en el mundo real. Como siempre, comencemos con los requisitos. Entonces, lo que nuestro cliente necesitaba era una experiencia de prueba de zapatos de realidad aumentada. Estamos en el espacio del comercio electrónico. Estamos vendiendo zapatos, entre otras cosas, y en nuestra página de detalles del producto, queremos que los usuarios puedan probar los zapatos antes de comprarlos y, con suerte, mejorar la conversión. Querían que esto fuera parte de la aplicación principal de compras. Algunas empresas han decidido tener una aplicación separada específicamente para funciones de experiencia, como gucci es un ejemplo de eso, pero para este cliente, querían que fuera parte de la aplicación que todos los usuarios tendrán, independientemente de si realmente usan la función de AR. También querían que esto fuera una interfaz de usuario personalizada, por lo que el diseño de la interfaz de usuario se realizó mucho antes de que incluso encontráramos un proveedor o construyéramos cualquier código. Y en cuanto a los recursos, teníamos en el orden de semanas en lugar de meses o años para construir esto, lo que significa que es poco probable que podamos comenzar completamente desde cero. Entonces, en base a estos requisitos, encontramos la solución que funcionará para nosotros.

5. Consideraciones para AR Try-On

Short description:

Para construir la función de AR Try-On en nuestra aplicación de compras, tuvimos que considerar el tamaño del paquete, el nivel de API y el tiempo limitado de desarrollo. Optamos por una solución lista para usar para la plataforma nativa e la integramos con React Native. Aprender código nativo, como Swift para iOS y Kotlin para Android, puede mejorar en gran medida las capacidades de una aplicación React Native.

Debido a que es parte de la aplicación principal de compras, el tamaño del paquete y el nivel de API son importantes, por lo que no podemos agregar nada que agregue cientos de megabytes de espacio porque cada usuario tendrá que descargar esta aplicación independientemente de si usan la función. Además, con el nivel de API, debemos asegurarnos de que nuestro nivel de API mínimo sea lo más bajo posible, nuevamente, para asegurarnos de que la mayor cantidad de usuarios pueda instalar esta aplicación.

Y finalmente, debido a que tenemos semanas y no meses para construirlo, nuestra única opción real es utilizar una solución lista para usar para la plataforma nativa e integrar la integración de React Native con ella. Y solo como una nota al margen en este punto, para llevar realmente tu ingeniería de React Native al siguiente nivel, te recomiendo mucho que comiences a aprender código nativo. Entonces, si eres alguien que viene de la web, como yo, es posible que encuentres y tu primera experiencia con el desarrollo de iOS fue un poco de Objective C, lo siento. Sí. Un poco de Objective C. Puede resultarte aterrador, ¿qué son todos estos corchetes? En iOS, puedes usar Swift. Y en Android, puedes usar Kotlin. Y ambos lenguajes son mucho más livianos. Son mucho más funcionales y mucho más fáciles de entender para un desarrollador de JavaScript. Y una vez que te familiarices más con la plataforma nativa y los lenguajes nativos, realmente mejorará la cantidad de funciones que puedes agregar a tu aplicación React Native porque se abre la puerta para poder instalar SDK exclusivos de nativos y escribir tus propias conexiones cómodamente.

6. AR Trion con Wanna

Short description:

Analizamos una empresa llamada Wanna que se especializa en Trion virtual y proporciona un SDK para construir tu propia integración. El SDK te permite probar la experiencia de Trion virtual para zapatos. Recibimos un SDK de demostración de Wanna e lo integramos en nuestra aplicación. La API era sencilla, requiriendo un código nativo mínimo. Sin embargo, los niveles de API mínimos más altos para Android e iOS fueron un obstáculo para nosotros, ya que nuestro cliente quería admitir dispositivos más antiguos.

Para nuestro AR Trion, analizamos dos empresas diferentes. La primera empresa que utilizamos se llama Wanna. Es una empresa especializada en Trion virtual. Tienen un SDK donde han implementado una experiencia de Trion virtual para zapatos. Puedes usar su SDK para construir tu propia integración. Puedes probar esto por ti mismo. Esta es su aplicación de ejemplo, que está disponible en las tiendas de iOS y Android. Esta es una aplicación que utiliza su propio SDK y puedes ver cómo sería la experiencia de Trion. Desde el punto de vista de la implementación, nos pusimos en contacto con ellos. Nos enviaron un SDK de demostración para que pudiéramos ver cómo integrarlo y cómo se vería en nuestra aplicación. Aquí tienes algunas capturas de pantalla cuando construimos la integración. Obviamente, esto fue una prueba de concepto. La interfaz de usuario no es nada destacable. Pero en general, la API en sí era bastante sencilla. No tuvimos que escribir una gran cantidad de código nativo para construir la integración. Era completamente personalizable, por lo que pudimos renderizar el video de Trion virtual y hacer todo lo demás en JavaScript. Lo que fue un obstáculo para nosotros es que tenía niveles de API mínimos bastante altos en comparación con lo que estábamos buscando. Requiere Android API 26, mientras que nosotros estábamos en 24, y requiere iOS 13, mientras que nosotros estábamos en 11. Esto es un compromiso para algunos clientes, para algunos casos de uso. No importa. Y puedes apuntar a APIs más altas. Pero en nuestro caso, nuestro cliente era bastante sensible para asegurarse de que nadie se quedara fuera debido a sus niveles de API más antiguos. No queríamos actualizar.

7. La tecnología AR de Snap y la extensión de compras

Short description:

Snap, la empresa detrás de Snapchat, tiene un portal para desarrolladores donde puedes acceder a su tecnología AR. Ofrecen bibliotecas como CameraKit, que impulsa Snap y proporciona más que solo la prueba virtual de zapatos. También tienen una nueva extensión de compras AR en beta que crea una experiencia integrada para AR en las páginas de productos de comercio electrónico.

¿Sabías que Snap, la empresa que desarrolla Snapchat, tiene un portal para desarrolladores? Y puedes utilizar mucha de su tecnología AR en tu propia aplicación. Puedes visitar developers.snap.com. En realidad, hacen más que solo la prueba virtual de AR. Pero el punto es que proporcionan un par de bibliotecas, especialmente una biblioteca llamada CameraKit, que es básicamente el SDK que impulsa Snap en sí mismo. Por lo tanto, hace mucho más que solo la prueba virtual de zapatos. Hace maquillaje, hace ropa, hace cámara frontal, cámara trasera, todo lo que ves en Snap. Por lo tanto, es muy, muy potente. Y bajo ciertas circunstancias, puedes usarlo en tu propia aplicación. Y algo nuevo que se ha construido recientemente para mejorarlo y que actualmente está en beta es la extensión de compras AR. Esto es algo que Snap proporciona. Es junto con su CameraKit. Y está específicamente diseñado para crear una experiencia integrada para AR en la página de detalles del producto de comercio electrónico. Dentro de la experiencia de compra. Y utilizando el SDK de Snap, esto es lo que obtuvimos. Así que, comenzando desde la izquierda, tenemos la página de detalles del producto con el distintivo de AR en los productos que tienen AR. Luego tenemos la página de detalles del producto con el distintivo de AR. Y finalmente, a la derecha, tenemos el módulo con la experiencia de AR real.

8. Implementando Experiencia de AR

Short description:

No les he mostrado ningún código, lo cual es básicamente un crimen, así que he agregado algo de código. Utilizamos los SDK para determinar si un producto tiene una experiencia de AR y mostrar el distintivo de AR. La experiencia de AR real se renderiza utilizando React Native, mientras que la experiencia de la cámara se renderiza nativamente utilizando el SDK de Stubbs. Analizamos el ID del producto al componente nativo, obtenemos los productos y Lens utilizando el SDK de Stubbs, y llamamos a los callbacks necesarios. La experiencia de extremo a extremo incluye el lanzamiento de AR, ver un modelo 3D del zapato, cambiar a la experiencia de AR y tomar fotos para compartir.

Me doy cuenta de que esta es una charla técnica y no les he mostrado ningún código, lo cual es básicamente un crimen, así que he agregado algo de código. No voy a mostrarles el lado nativo de las cosas, así que solo les mostraré lo que realmente importamos y usamos en el lado de JavaScript.

Entonces, en la página de listado de productos, tenemos estos distintivos de AR, y lo que necesitamos saber de los SDK, que es la fuente de verdad sobre si algo tiene una experiencia de AR, es pasar los IDs de los productos, y hace su magia y nos dice si este producto tiene o no una experiencia de AR. Y si lo tiene, mostraremos el distintivo de AR. Utilizamos el mismo método aquí en la página de detalles del producto.

Y esta es la parte interesante. Esta es la experiencia de AR real. Siendo los desarrolladores de React Native que somos, tomamos la decisión consciente de tener la mayor parte del código posible en el lado de React Native. Por lo tanto, la atribución, el nombre del producto, el botón de la cámara y el selector de variantes, todo esto se renderiza utilizando React Native. Lo único que se renderiza nativamente utilizando el SDK de Stubbs es la experiencia de la cámara real.

La forma en que hemos expuesto esto es como un componente nativo. Y la forma en que funciona en el fondo es que analizamos el ID del producto en este componente nativo. Luego, utilizando este SDK de Stubbs, obtenemos los productos. Esto es del kit de tienda. Obtenemos los productos para esa variante. Luego llamamos al callback de productos cargados, que luego poblará los productos debajo de la pantalla. Luego, lo que hace el SDK es obtener los Lens para el producto seleccionado. Un Lens es una terminología de Snap, pero básicamente es la experiencia de realidad virtual con algo adentro. En este caso, el par de zapatos. Y cuando se obtiene el Lens, llamamos al callback de Lens cargado, que nos dirá que es hora de detener el spinner de carga y que el usuario está listo para continuar.

Y veamos esta experiencia de extremo a extremo. Aquí estoy en una página de detalles del producto. Voy a desplazarme hacia abajo para lanzar AR. En este caso, es la primera vez que lo lanzamos, así que tenemos que decir que sí a la cámara, aceptar los términos, que definitivamente hemos leído. Aquí también podemos ver el modelo 3D del zapato, que está integrado en el Lens, lo cual es bastante genial. Puedes cambiar los colores y ver cómo se ve desde ambos lados como si lo estuvieras sosteniendo. Y luego, si cambias a la experiencia de AR, obviamente puedes mirar hacia abajo y ver los zapatos en tus pies, en los pies de tus amigos. También puedes combinar y mezclar y mostrar uno en tu pie, uno en el pie de tu amigo. Eso también funciona. Y finalmente, puedes tomar una foto y compartirla con tus amigos.

QnA

Snap SDK y Preguntas y Respuestas

Short description:

El Snap SDK requirió escribir una cantidad significativa de código nativo, pero proporcionó una aplicación de ejemplo completamente funcional. La interfaz de usuario tuvo que ser personalizada, pero la experiencia general fue fluida. El SDK funciona desde Android API 24 e iOS 11 en adelante. En esta charla, discutí sobre Viro, Wana y Snap para desarrolladores. Un reconocimiento especial a Formidable, la empresa para la que trabajo. Ahora, pasemos a las preguntas y respuestas. La primera pregunta es sobre cómo obtener modelos 3D de zapatos.

Entonces, en resumen, el Snap SDK, diré que tuvimos que escribir una cantidad considerable de código nativo. Así que la diapositiva anterior que escribí sobre abrazar el código nativo, estaba allí por una razón. Definitivamente tuve que abrazar el código nativo para este proyecto. Pero por otro lado, nos proporcionaron una aplicación de ejemplo completamente funcional. Obviamente, la interfaz de usuario no se parecía en nada a nosotros. Tuvimos que cambiar muchas cosas y construirla desde cero, pero fue de gran ayuda para comenzar. Por otro lado, fue una experiencia muy, muy fluida. Se puede decir que este es un SDK que impulsa una aplicación realmente potente, la propia aplicación de Snapchat. Han tenido muchos ingenieros y años y años de práctica para hacerlo lo más fluido y agradable posible. Así que fue una experiencia final muy agradable con un esfuerzo mínimo de nuestra parte. Y muy importante para nosotros, funciona desde Android API 24 e iOS 11 en adelante.

Entonces, en resumen, en esta charla, las tres cosas principales de las que hablé fueron Viro, que es un puente de React para IA. Si solo quieres probar la realidad virtual y React Native, definitivamente deberías probarlo. Y luego, para la prueba virtual de productos en particular, hablamos sobre Wana y hablamos sobre Snap para desarrolladores. Así que si estás interesado en cualquiera de estas cosas, definitivamente deberías echarles un vistazo. Y un reconocimiento especial a Formidable, la empresa para la que trabajo, gracias a quienes estoy aquí, son increíbles. Hacemos mucho código abierto. Visítanos en formidable.com. Muchas gracias. Muchas gracias.

Oh, hola. Muchas gracias, Kati. Ahora vamos a hacer una breve sesión de preguntas y respuestas. Estamos un poco retrasados, así que lo haremos en unos minutos. Y luego, si tienes más preguntas para Kati, puedes encontrarla en el stand de preguntas y respuestas de los ponentes después. Entonces, la primera pregunta de la audiencia es, ¿cómo obtuviste el modelo 3D de los zapatos que estás vendiendo? Esa es una excelente pregunta. En realidad, hay otra empresa llamada Vertebrae con la que trabajamos, y ellos son los que realmente, bueno, les envían los zapatos. Ellos toman el modelo 3D del zapato y luego trabajan con Snap para integrarlo. ¿Entonces cualquier persona puede ir y obtener sus zapatos modelados, o es como un tipo de acuerdo empresarial? Creo que este en particular es un tipo de acuerdo empresarial, pero estoy seguro de que también hay formas de hacerlo como persona individual.

Creación de modelos 3D y Preguntas y Respuestas

Short description:

La forma más sencilla de crear un modelo 3D para AR Try-On es utilizar software de modelado 3D. Sarah Viera hablará sobre el modelado en Blender. A pesar del plazo desafiante, encontramos el mejor SDK y herramienta para el trabajo. Si tienes más preguntas, visita el stand de preguntas y respuestas de los ponentes.

Creo que la forma más sencilla de hacerlo sería crear un modelo 3D en algún tipo de software de modelado 3D y utilizar eso en lugar del zapato real. Eso es genial. Y por cierto, creo que tenemos una charla sobre eso. Sarah está hablando sobre el modelado en Blender más adelante, así que podría ser un buen momento.

Perfecto. Tengo una pregunta para ti. Esto no es de Slido, pero te dieron un resumen para hacer esto en unas pocas semanas o dentro del plazo de semanas. Eso suena aterrador y difícil. ¿Cómo resultó al final? Creo que siempre hay, creo que cuando la gente intenta resolver las cosas en función de los plazos que tenemos. Creo que si nos hubieran dicho que teníamos dos años para construir esto, probablemente habríamos comenzado desde un nivel mucho más bajo y habríamos dicho, sí, vamos a construir nuestra propia solución de AR personalizada. Pero sabiendo que teníamos un par de semanas, esa opción se descartó de inmediato. Necesitábamos encontrar el mejor SDK, la mejor herramienta para este trabajo.

Genial. Gracias. Ahora, si tienes más preguntas para Catty, eso es todo lo que tenemos en Slido. Así que no dudes en ir y hablar con Catty en el stand de preguntas y respuestas de los ponentes. Pasaremos a nuestra próxima charla. Muchas gracias, Catty. ¡Gracias! Una más para Catty Kramer.

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

JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.
Check the article as well to see the full content including code samples: article. 
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/