Cómo construir una animación interactiva de “Rueda de la Fortuna” con React Native

Rate this content
Bookmark

- Introducción - Cleo & nuestra misión

- Lo que queremos construir, cómo encaja en nuestro producto & propósito, revisar los diseños

- Comenzando con la configuración del entorno & “hola mundo”

- Introducción a la animación de React Native

- Paso 1: Hacer girar la rueda al presionar un botón

- Paso 2: Arrastrar la rueda para darle velocidad

- Paso 3: Agregar fricción a la rueda para frenarla

- Paso 4 (extra): Agregar hápticos para una sensación inmersiva

This workshop has been presented at React Summit Remote Edition 2021, check out the latest edition of this React Conference.

FAQ

Los presentadores son Oli, desarrollador front end y líder técnico, y Alan, desarrollador back end que también trabaja con React Native.

La masterclass se centra en construir una 'rueda de la fortuna' interactiva utilizando React Native, una característica destinada a ser atractiva para los usuarios.

Clio es una aplicación de gestión de finanzas personales que busca ir más allá del ahorro y la presupuestación para cambiar la relación de las personas con su dinero. Su misión es luchar por la salud financiera del mundo.

Los pasos incluyen arrastrar la rueda, añadir impulso y animación, y algunas tácticas competitivas junto con mejoras adicionales.

Se utiliza Expo para facilitar el desarrollo con una plantilla de inicio en React Native, además de las bibliotecas core de React Native como 'pan responder' y 'animated' para manejar gestos y animaciones.

Clio utiliza ahorros gamificados y vinculados a premios para motivar a los usuarios a ahorrar más, basándose en la investigación que demuestra que esto puede incrementar significativamente los ahorros anuales de las personas.

Oli Bates
Oli Bates
60 min
10 Jun, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Esta masterclass se centra en la construcción de una característica interactiva de rueda de la fortuna con React Native. La característica, llamada gira para ganar, incentiva a los usuarios a ahorrar más al permitirles girar una rueda y contribuir a sus ahorros. El tutorial cubre la configuración del pan responder para detectar gestos de usuario, calcular la rotación utilizando el manejo de gestos, mapear los valores de animación a la rotación, agregar impulso a la rueda para un efecto de giro realista, y abordar problemas como la rotación incorrecta y la falta de velocidad. La masterclass también explora extensiones como agregar confeti y retroalimentación háptica para una mejor experiencia de usuario.

1. Introducción al Tutorial de la Rueda de la Fortuna

Short description:

Comencemos. Genial. Gracias a todos por unirse y bienvenidos a este tipo de masterclass. Vamos a hablar sobre cómo construir una rueda de la fortuna interactiva o animación de gira para ganar con React Native. Daremos una rápida visión general de Clio y nuestra misión, así como de la idea de girar para ganar. Luego, nos pondremos en marcha con Expo y repasaremos los pasos principales de arrastrar la rueda, añadir impulso y animación, e implementar tácticas competitivas y mejoras adicionales. Concluiremos con una sesión de preguntas y respuestas. Clio es una aplicación de dinero que tiene como objetivo redefinir la gestión de finanzas personales cambiando cómo las personas sienten acerca de su dinero. Nuestra aplicación impulsada por IA ayuda a los usuarios con la presupuestación, el ahorro, la gestión de facturas y la construcción de puntajes de crédito. Luchamos por la salud financiera del mundo. La idea de girar para ganar se alinea con nuestra misión al ayudar a los usuarios a construir un colchón de seguridad. Sumérgete en el tutorial y crea una característica atractiva para nuestros usuarios.

Comencemos. Genial. Así que sí, gracias a todos por unirse y bienvenidos a este tipo de masterclass. Mi nombre es Oli, soy un desarrollador front end y líder técnico en Clio y estoy acompañado por Alan también. Sí, soy Alan, soy un desarrollador back end pero sí, también hago algo de React, React cosas nativas de vez en cuando. Y he estado en Clio también durante un par de años. Así que sí, vamos a hablar o más bien a recorrer un pequeño tutorial sobre cómo construir una especie de rueda de la fortuna interactiva o algo así como girar para ganar como nos gusta llamarlo animation con React nativo. Así que esto es algo de lo que hablaremos un poco más en unos minutos, pero algo que hemos construido o hemos estado hablando de construir bastante en Clio y algo que hemos encontrado que es una característica realmente atractiva, supongo, para nuestros usuarios. Así que sí, una rápida visión general de la agenda. Sí, como una rápida introducción a Clio y lo que estamos tratando de lograr en nuestra misión. Una rápida visión general de la idea de girar para ganar, sabes, de dónde vino, dónde existe en el producto. Y también, también tenemos algunos diseños de Trev, uno de los increíbles diseñadores de Clio también. Así que un gran agradecimiento a él por proporcionar los diseños. Luego vamos a empezar con Expo. Tenemos un repositorio con un tipo de plantilla de inicio en él. Así que he publicado un enlace a eso en el chat de Discord. Pero si alguien no tiene acceso a eso, simplemente avise. Hay un par de instrucciones para empezar en eso también. Así que siéntete libre de empezar con eso. Pero también lo repasaremos durante un par de minutos también. Asegurémonos de que todos estén al día y listos para empezar. Y luego sí, lo hemos dividido, supongo, en tres pasos principales. Tenemos el tipo de arrastrar la rueda, añadir impulso y algo de animation, y luego algunas tácticas competitivas agradables de tener y otras mejoras adicionales. Y luego una rápida recapitulación y QA. Así que creo que estamos apuntando a ser menos de una hora, esperemos. Intentaremos terminarlo bastante rápido. Pero si alguien tiene alguna pregunta o problema o algo así, no dude en gritar en el Discord o en el chat de Zoom también. Como, sí, ambos podemos saltar y ayudar a cualquiera o sí, encantados de responder cualquier pregunta en el camino también. Así que genial. Así que sí, supongo que empezando un poco sobre Clio y nuestra misión. Así que Clio es una aplicación de dinero que te respalda. Con Clio, estamos tratando de definir una especie de nueva categoría de aplicaciones de gestión de finanzas personales, y una que va más allá del ahorro y la presupuestación para cambiar realmente cómo las personas sienten acerca de su dinero. Así que durante los últimos años, hemos construido una AI que más de 4 millones de personas están utilizando en los Estados Unidos, Canadá y el Reino Unido para ser criticados sobre su gasto para presupuestar y ahorrar también, ayudar a gestionar sus facturas, obtener adelantos de salario y también entender y construir su puntaje de crédito. Así que todo esto se entrega de una manera de chat primero. Tenemos una especie de, supongo, sí, como una pantalla de chatbot, que es donde podemos entregarle sus percepciones. Y también puedes preguntarle a Clio sobre tu dinero. Y esto es entregado en un tono de voz atractivo. Y supongo que lo que estamos tratando de hacer finalmente es crear ese amigo que está cuidando de ti y de tu dinero. Es alguien que tiene tu espalda y también no tiene miedo de decirte cuando la has cagado. Así que sí, esa es la visión general de Clio. Y supongo que nuestra misión general es que estamos tratando de luchar por la salud financiera del mundo. Y eso es, sí, eso es lo que estamos tratando de lograr. La idea de girar para ganar se alinea bastante bien con eso. El último trimestre, Alan y yo estábamos trabajando en el escuadrón de ahorros. Y nuestra misión del escuadrón para el trimestre era ayudar a los usuarios a construir un colchón de seguridad para ese día lluvioso. El problema que estábamos enfrentando era que los usuarios venían al producto y nunca habían ahorrado antes. No tenían ahorros, ahorros existentes, y no tenían colchón de seguridad. Sabes, un mal día podría volcarlos

2. Construyendo la Función de Girar para Ganar

Short description:

Queríamos ayudar a los usuarios a comenzar a ahorrar por primera vez y a construir una red de seguridad. Los ahorros gamificados o los ahorros vinculados a premios pueden incentivar a los usuarios a ahorrar más. Se nos ocurrió la idea de un girar para ganar, donde los usuarios pueden girar una rueda y contribuir a sus ahorros. Esta característica atractiva promueve el ahorro regular y ayuda a los usuarios a ahorrar más. Usaremos Expo para construir esta característica rápidamente. Si tienes alguna pregunta, no dudes en preguntar en el chat. Comencemos con la construcción. Primero, añadiremos rotación a la rueda a medida que el usuario mueve su dedo.

al límite. Así que su coche se avería y no tienen el dinero para arreglarlo. Podrían, ya sabes, no ser capaces de ir a su trabajo. Pierden su trabajo, se endeudan. Y esto era algo, ya sabes, problemas reales que veíamos, o problemas que los usuarios enfrentaban. Así que nuestro desafío o nuestra misión para el trimestre era ayudar a los usuarios a empezar a ahorrar por primera vez y construir esta red de seguridad para que pudieran, sí, para que pudieran, supongo, sí, si tienen un mal día, podrían permitirse arreglarlo ellos mismos. Y sí, una de las cosas que investigamos junto con los ahorros automáticos y redondeos que ya habíamos construido fue la idea de los ahorros gamificados o los ahorros vinculados a premios. Y esto era algo, no es una idea nueva, y de hecho he enlazado un par de, supongo, artículos y documentos sobre esto. Pero la idea general es que podríamos incentivar a los usuarios a ahorrar más gamificándolo o vinculando premios a la acción de ahorrar. Y se ha demostrado que esto aumenta la cantidad de dinero que la gente ahorra en un año en una cantidad bastante sustancial. Así que supongo que es una situación en la que todos ganan, donde hemos construido un producto que puede incentivar a los usuarios a ahorrar más y a construir esa red de seguridad, al mismo tiempo que construimos una característica atractiva y divertida. Y sí, la idea, supongo, que se nos ocurrió fue esta idea de un girar para ganar. Así que en su forma más básica, teníamos una pantalla que después de ahorrar o en cualquier momento que depositaras manualmente en tu cuenta de ahorros, podrías girar una rueda, te daría un número aleatorio y ese número también contribuiría a tus ahorros. Esa era, esa era la idea, supongo que nuestra hipótesis era que esta sería una característica atractiva para los usuarios y también promovería la idea de ahorros regulares y en última instancia ayudaría a los usuarios a ahorrar más y a construir esa red de seguridad. Así que esa es la idea general. Alan, no sé si tienes algo que quieras añadir sobre eso. No, creo, creo que eso resume bastante bien. Lo interesante, supongo, es que a la gente le gusta mucho la idea de pagar, de dar dinero potencialmente, si eso significa que recibirán una gran recompensa, como una idea, como una de las cosas que realmente demuestra eso es, supongo, si piensas en los billetes de lotería, mucha gente gastará dinero en billetes de lotería, pero será menos probable que ponga el dinero que pagaron en los billetes en una cuenta de ahorros. Así que sí, es, creo, pensamos que era una forma muy interesante de intentar que los usuarios ahorren. Pero sí, eso es genial. Sí, y sí, supongo que este GIF es lo que vamos a intentar construir en los próximos 40 minutos o así. Y sí, como mencioné antes, es un poco un MVP. Así que, ya sabes, estábamos intentando sacar esto y ver si era una característica atractiva para empezar. Pero sí, vamos a empezar con la construcción. Y sí, como mencioné antes, si alguien tiene alguna pregunta mientras avanzamos, no dude en ponerlas en el Discord o en el chat de Zoom. Y sí, podemos responder a cualquiera de esas. Genial. Así que para empezar, vamos a usar Expo para construir esto encima. Así que hemos construido, sí, supongo que para cualquiera que no haya usado Expo antes, es una especie de envoltorio alrededor de React Native que gestiona muchas de las dependencias y te permite poner en marcha muy rápido. Así que es el caso de uso perfecto para este tipo de cosas donde sólo queremos demostrar una característica rápida. Tenemos un repositorio, he puesto el enlace aquí y también en el Discord donde puedes clonar la, nuestra aplicación de inicio. Si nunca has usado Expo antes, puedes instalar el CLI usando este script y luego, sí, clonar el repositorio e instalar las dependencias y ejecutar Expo start para ponerlo en marcha. Luego, creo que después de que Expo haya empezado, creo que puedes pulsar la tecla I si estás en un Mac y se abrirá un simulador de iOS localmente, o puedes pulsar la tecla W y se abrirá en la página web y puedes desarrollarlo allí. Así que sí. Sí, copiaré los enlaces en el chat, lo siento. Así que sí, las diapositivas están en un Google Drive, pero la aplicación de inicio está en ese enlace de GitHub, que debería llevarte al lugar para empezar. Daré unos minutos para que la gente se ponga en marcha allí. Pero sí, si consigues poner esto en marcha, esta debería ser la pantalla que ves. Así que tenemos una aplicación muy simple, sí, React Native funcionando en Expo. Hemos añadido algunos componentes de inicio a ella. Así que tenemos nuestro título, tenemos una pequeña flecha y luego el spinner, que es sólo una imagen en este momento. Y vamos a usar esto como nuestra plantilla de inicio. Así que genial. ¿Creemos que estamos bien para seguir adelante? Sí, si alguien tiene problemas para poner eso en marcha, grita en el chat. Y sí, podemos volver sobre cualquier parte. Pero si no, empezaré a empezar. Así que la primera cosa que vamos a querer hacer, así que supongo que volviendo un poco atrás, esto es lo que queremos, o vamos a querer construir al final. La idea es que puedes hacer clic o supongo que tocar y mantener la rueda, la rueda giratoria. Y luego vas a querer moverla con tu pulgar. Y a medida que mueves ese gesto alrededor o hacia abajo, vamos a querer rotar esa rueda a lo largo. Y creo que, supongo, lo hemos dividido más o menos en tres pasos. Así que el primero es simplemente añadir una rotación a esa imagen a medida que mueves tu dedo,

Watch more workshops on topic

Presentando FlashList: Construyamos juntos una lista performante en React Native
React Advanced 2022React Advanced 2022
81 min
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI & JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
React Summit 2022React Summit 2022
117 min
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
A diferencia de las pruebas unitarias, las pruebas de extremo a extremo buscan interactuar con su aplicación tal como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles.
Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador.
Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E.
Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes.
Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass
Despliegue de aplicaciones React Native en la nube
React Summit 2023React Summit 2023
88 min
Despliegue de aplicaciones React Native en la nube
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Desplegar aplicaciones React Native manualmente en una máquina local puede ser complejo. Las diferencias entre Android e iOS requieren que los desarrolladores utilicen herramientas y procesos específicos para cada plataforma, incluidos los requisitos de hardware para iOS. Los despliegues manuales también dificultan la gestión de las credenciales de firma, las configuraciones de entorno, el seguimiento de las versiones y la colaboración en equipo.
Appflow es la plataforma de DevOps móvil en la nube creada por Ionic. Utilizar un servicio como Appflow para construir aplicaciones React Native no solo proporciona acceso a potentes recursos informáticos, sino que también simplifica el proceso de despliegue al proporcionar un entorno centralizado para gestionar y distribuir tu aplicación en múltiples plataformas. Esto puede ahorrar tiempo y recursos, permitir la colaboración, así como mejorar la confiabilidad y escalabilidad general de una aplicación.
En este masterclass, desplegarás una aplicación React Native para su entrega en dispositivos de prueba Android e iOS utilizando Appflow. También aprenderás los pasos para publicar en Google Play y Apple App Stores. No se requiere experiencia previa en el despliegue de aplicaciones nativas, y obtendrás una comprensión más profunda del proceso de despliegue móvil y las mejores prácticas para utilizar una plataforma de DevOps móvil en la nube para enviar rápidamente a gran escala.
Pruebas Efectivas con Detox
React Advanced 2023React Advanced 2023
159 min
Pruebas Efectivas con Detox
Workshop
Josh Justice
Josh Justice
Así que has configurado Detox para probar tu aplicación React Native. ¡Buen trabajo! Pero aún no has terminado: todavía hay muchas preguntas que necesitas responder. ¿Cuántas pruebas escribes? ¿Cuándo y dónde las ejecutas? ¿Cómo te aseguras de que hay datos de prueba disponibles? ¿Qué haces con partes de tu aplicación que utilizan APIs móviles que son difíciles de automatizar? Podrías invertir mucho esfuerzo en estas cosas, ¿vale la pena?
En esta masterclass de tres horas abordaremos estas preguntas discutiendo cómo integrar Detox en tu flujo de trabajo de desarrollo. Saldrás con las habilidades e información que necesitas para hacer de las pruebas Detox una parte natural y productiva del desarrollo diario.
Tabla de contenidos:
- Decidir qué probar con Detox vs React Native Testing Library vs pruebas manuales- Configuración de una capa de API falsa para pruebas- Cómo hacer que Detox funcione en CI en GitHub Actions de forma gratuita- Decidir cuánto de tu aplicación probar con Detox: una escala móvil- Integración de Detox en tu flujo de trabajo de desarrollo local
Prerrequisitos
- Familiaridad con la construcción de aplicaciones con React Native- Experiencia básica con Detox- Configuración de la máquina: un entorno de desarrollo CLI de React Native en funcionamiento que incluye Xcode o Android Studio
Creación para Web y Móvil con Expo
React Day Berlin 2022React Day Berlin 2022
155 min
Creación para Web y Móvil con Expo
Workshop
Josh Justice
Josh Justice
Sabemos que React es para la web y React Native es para Android e iOS. Pero ¿has oído hablar de react-native-web? ¡Para escribir una aplicación para Android, iOS y la web en un solo código base! Al igual que React Native abstrae los detalles de iOS y Android, React Native Web también abstrae los detalles del navegador. Esto abre la posibilidad de compartir aún más código entre plataformas.
En este masterclass, aprenderás a configurar el esqueleto de una aplicación React Native Web que funcione de manera excelente y se vea increíble. Puedes utilizar el código resultante como base para construir la aplicación que desees, utilizando los paradigmas de React y muchas bibliotecas de JavaScript a las que estás acostumbrado. ¡Te sorprenderá la cantidad de tipos de aplicaciones que realmente no requieren un código base separado para móvil y web!
Qué se incluye1. Configuración de navegadores de cajón y de pila con React Navigation, incluyendo la capacidad de respuesta2. Configuración de React Navigation con URLs3. Configuración de React Native Paper, incluyendo el estilo del cajón y los encabezados de React Navigation4. Configuración de un tema de color personalizado que admita el modo oscuro5. Configuración de favicons/iconos de aplicaciones y metadatos6. Qué hacer cuando no puedes o no quieres proporcionar la misma funcionalidad en la web y en el móvil
Requisitos previos- Familiaridad con la construcción de aplicaciones con React o React Native. No es necesario conocer ambos.- Configuración de la máquina: Node LTS, Yarn, ser capaz de crear y ejecutar correctamente una nueva aplicación Expo siguiendo las instrucciones en https://docs.expo.dev/get-started/create-a-new-app/
Introducción a React Native Testing Library
React Advanced 2022React Advanced 2022
131 min
Introducción a React Native Testing Library
Workshop
Josh Justice
Josh Justice
¿Estás satisfecho con tus suites de pruebas? Si dijiste que no, no estás solo, la mayoría de los desarrolladores no lo están. Y hacer pruebas en React Native es más difícil que en la mayoría de las plataformas. ¿Cómo puedes escribir pruebas en JavaScript cuando el código JS y nativo están tan entrelazados? ¿Y qué diablos se supone que debes hacer con esa persistente advertencia de act()? Ante estos desafíos, algunos equipos nunca logran avanzar en las pruebas de su aplicación de React Native, y otros terminan con pruebas que no parecen ayudar y solo requieren tiempo adicional para mantener.
Pero no tiene que ser así. React Native Testing Library (RNTL) es una excelente biblioteca para pruebas de componentes, y con el modelo mental adecuado puedes usarla para implementar pruebas de bajo costo y alto valor. En este taller de tres horas aprenderás las herramientas, técnicas y principios que necesitas para implementar pruebas que te ayudarán a lanzar tu aplicación de React Native con confianza. Saldrás con una visión clara del objetivo de tus pruebas de componentes y con técnicas que te ayudarán a superar cualquier obstáculo que se interponga en ese objetivo.aprenderás:- Los diferentes tipos de pruebas en React Native, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos de texto, imagen y código nativo para verificar e interactuar con ellos- El valor de las simulaciones y por qué no se deben evitar- Los desafíos con la asincronía en las pruebas de RNTL y cómo manejarlos- Opciones para manejar funciones y componentes nativos en tus pruebas de JavaScript
Requisitos previos:- Familiaridad con la construcción de aplicaciones con React Native- Experiencia básica en la escritura de pruebas automatizadas con Jest u otro framework de pruebas unitarias- No necesitas experiencia previa con React Native Testing Library- Configuración de la máquina: Node 16.x o 18.x, Yarn, ser capaz de crear y ejecutar con éxito una nueva aplicación Expo siguiendo las instrucciones en https://docs.expo.dev/get-started/create-a-new-app/

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

Elevando el Listón: Nuestro Viaje Haciendo de React Native una Opción Preferida
React Advanced 2023React Advanced 2023
29 min
Elevando el Listón: Nuestro Viaje Haciendo de React Native una Opción Preferida
This Talk discusses Rack Native at Microsoft and the efforts to improve code integration, developer experience, and leadership goals. The goal is to extend Rack Native to any app, utilize web code, and increase developer velocity. Implementing web APIs for React Native is being explored, as well as collaboration with Meta. The ultimate aim is to make web code into universal code and enable developers to write code once and have it work on all platforms.
Llevando los Componentes del Servidor React a React Native
React Day Berlin 2023React Day Berlin 2023
29 min
Llevando los Componentes del Servidor React a React Native
Top Content
React Server Components (RSC) offer a more accessible approach within the React model, addressing challenges like big initial bundle size and unnecessary data over the network. RSC can benefit React Native development by adding a new server layer and enabling faster requests. They also allow for faster publishing of changes in mobile apps and can be integrated into federated super apps. However, implementing RSC in mobile apps requires careful consideration of offline-first apps, caching, and Apple's review process.
Herramienta Multiplataforma de React Native Kotlin
React Day Berlin 2022React Day Berlin 2022
26 min
Herramienta Multiplataforma de React Native Kotlin
Top Content
The Talk discusses the combination of React Native and Kotlin Multiplatform for cross-platform app development. Challenges with native modules in React Native are addressed, and the potential improvements of using Kotlin Multiplatform Mobile are explored. The integration of Kotlin Multiplatform with React Native streamlines native implementation and eliminates boilerplate code. Questions about architecture and compatibility, as well as the possibility of supporting React Native Web, are discussed. The React Native toolkit works with native animations and has potential for open-source development.
Construyendo Bibliotecas de Componentes Multiplataforma para Web y Nativo con React
React Advanced 2021React Advanced 2021
21 min
Construyendo Bibliotecas de Componentes Multiplataforma para Web y Nativo con React
Top Content
This Talk discusses building cross-platform component libraries for React and React Native, based on a successful project with a large government-owned news organization. It covers the requirements for React Native knowledge, building cross-platform components, platform-specific components, styling, and the tools used. The Talk also highlights the challenges of implementing responsive design in React Native.
“Microfrontends” para móviles en React Native
React Advanced 2023React Advanced 2023
24 min
“Microfrontends” para móviles en React Native
Top Content
Micro frontends are an architectural style where independent deliverable frontend applications compose a greater application. They allow for independent development and deployment, breaking down teams into feature verticals. React Native's architecture enables updating the JavaScript layer without going through the app store. Code Push can be used to deploy separate JavaScript bundles for each micro frontend. However, there are challenges with managing native code and dependencies in a micro frontend ecosystem for mobile apps.