Estilos y Tematización con Restyle en React Native

Rate this content
Bookmark

Haris está hablando sobre la biblioteca recientemente de código abierto Restyle (https://github.com/Shopify/restyle); cómo aborda muchos problemas y puntos de dolor que los desarrolladores experimentan al gestionar estilos en evolución y soporte de temas (¡hay que tener el modo oscuro!) en una aplicación React Native.

8 min
02 Aug, 2021

Video Summary and Transcription

La charla de hoy se centra en estilos y tematización en React Native, específicamente desde la perspectiva de la aplicación arrive. Los desafíos enfrentados al gestionar colores y estilos de fuente son abordados por Restyle, que proporciona un sistema con tipos de datos para construir componentes de interfaz de usuario con capacidad de tematización. Se discute la implementación de paletas de colores, espaciado y modo oscuro, junto con los beneficios de usar los componentes predefinidos de Restyle. Se destacan la autocompletación de TypeScript y otras ventajas, y se anima a los oyentes a explorar el proyecto en GitHub para obtener más características.

Available in English

1. Introducción a los estilos y temas en React Native

Short description:

Hoy estaremos hablando sobre estilos y temas en React Native desde la perspectiva de la aplicación Arrive. Nos enfrentamos a problemas al administrar colores y estilos de fuente. Restyle resolvió estos problemas al proporcionar un sistema con restricciones de tipo para construir componentes de IU con capacidad de personalización. Restyle espera un objeto de tema global definido.

Gracias por ver. Soy un ingeniero senior en Shopify con sede en Toronto, Canadá. Trabajo específicamente en el equipo de clientes en la aplicación Arrive. Es una aplicación que ayuda a realizar un seguimiento de todos tus pedidos en línea. También tengo una tienda en línea llamada Rapid Supply que vende pines de ropa, pegatinas y accesorios para desarrolladores y otros entusiastas de la tecnología.

Así que hoy estaremos hablando sobre estilos y temas en React Native desde la perspectiva de la aplicación Arrive y las experiencias que obtuve mientras trabajaba en la aplicación. La aplicación Arrive es un 95% React Native, con las partes restantes que dependen de algunos módulos nativos tanto para iOS como para Android. Hablaré sobre algunos de los principales problemas que enfrentamos en cuanto a temas y estilos para la aplicación y cómo nuestra biblioteca Restyle ayuda a resolver esos problemas. El primer problema con el que nos encontramos giraba en torno a la gestión de colores. Los colores son notoriamente difíciles de nombrar, son difíciles de realizar un seguimiento. Se volvieron muy difíciles de mantener a medida que se agregaban más y más colores o se necesitaba ajustar los colores antiguos para satisfacer las necesidades cambiantes de la aplicación. El segundo problema giraba en torno a la gestión de estilos de fuente. En primer lugar, teníamos demasiada duplicación de código en toda la aplicación, necesitábamos escribir múltiples declaraciones de estilo diferentes para cada componente de texto en nuestra aplicación. Esto requería demasiado código en todas partes y se volvió muy difícil de administrar. Una de las primeras cosas que hicimos fue intentar simplificar esto construyendo un objeto de estilos de fuente que define algunos de nuestros estilos de fuente predeterminados y luego implementarlos y usarlos según sea necesario para los diferentes componentes de texto en nuestra aplicación. Esto funcionó bien, pero comenzamos a tener problemas cuando, por ejemplo, teníamos un nuevo estilo de fuente que era exactamente igual que uno que ya existía, pero tenía un pequeño cambio. No estábamos seguros de si necesitábamos introducir un nuevo estilo de fuente o usar el estilo de fuente que ya teníamos con una anulación. Y el segundo problema que tuvimos fue tratar de averiguar qué tan amplios o específicos debían ser los estilos de fuente. ¿Era 'body' demasiado genérico? ¿Era 'call to action' demasiado específico? En el último escenario, si nos encontrábamos con una situación en la que necesitábamos usar el mismo estilo de fuente exacto que ya había implementado 'call to action', pero era para algo que no era una llamada a la acción, no sabíamos si necesitábamos refactorizar toda la base de código para acomodar un estilo de fuente de llamada a la acción renombrado o simplemente usarlo tal cual y lidiar con las consecuencias incómodas de perder algo de esa consistencia. El modo oscuro y la personalización son obviamente una parte importante de las aplicaciones móviles, y sabíamos que queríamos implementar y abordar el modo oscuro. Pero ya teníamos varios problemas con respecto a los temas, los colores y los estilos de fuente. Y la idea de agregar más colores y más alternativas de estilos de fuente simplemente no parecía ser el enfoque correcto cuando ya teníamos problemas que estábamos tratando de resolver. Aquí es donde entra en juego Restyle. Restyle es una biblioteca de código abierto. Proporciona un sistema con restricciones de tipo para construir componentes de IU impulsados por TypeScript. Su capacidad de personalización está integrada desde el principio, por lo que si decides implementar el modo oscuro o un tema, es extremadamente trivial y fácil de hacer. Te guiaré a través de algunas de las mejores prácticas o conceptos que surgen a través de Restyle y cómo resolvieron los problemas que tuvimos mientras trabajábamos en Arrive. Restyle espera que tengas un tema definido. Este es un objeto de tema global con un conjunto de valores para colores, espaciado, puntos de interrupción y otros elementos. Luego, este tema se utiliza pasándolo al proveedor de temas mediante la propiedad de tema.

2. Paleta de colores, espaciado y modo oscuro

Short description:

Cada sistema de diseño comúnmente tiene una paleta de colores con colores base y tonos. Implementamos y utilizamos esta paleta para definir los colores dentro de nuestro tema. Los nombres de colores basados en el contexto facilitaron la modificación y gestión de los colores. El espaciado se simplificó utilizando un sistema de multiplicación. Restyle proporciona componentes predefinidos, Box y Text, que utilizan el tema y permiten estilos personalizados. La implementación del modo oscuro implica construir un nuevo tema y alternar el valor. Los componentes de Restyle se ajustan automáticamente al tema actual. La experiencia de desarrollo se mejora con la autocompletación de TypeScript y otros beneficios. Echa un vistazo al proyecto en GitHub para obtener más características. ¡Gracias por escuchar!

Entonces, ¿cómo funcionan los colores ahora? Lo primero que hicimos fue darnos cuenta de que cada sistema de diseño comúnmente tiene una paleta de colores. Estas paletas incluirán una serie de colores base con tonos más claros y más oscuros. Así que lo primero que hicimos fue implementar esta paleta sin preocuparnos por el tema. Lo siguiente que hicimos fue utilizar esta paleta para definir los colores dentro de nuestro tema. Y los nombres que dimos a cada uno de nuestros colores estaban muy basados en el contexto. Por ejemplo, teníamos CardPrimaryBackground y ButtonPrimaryBackground. Este escenario facilitó mucho agregar nuevos colores a la paleta, modificar los colores en nuestra paleta y cambiar la implementación de esa paleta para un contexto muy específico sin preocuparnos por cualquier efecto secundario que pudiera tener en la aplicación. Esto también facilitó la introducción de nuevos colores y mantener un estado general bien gestionado en cuanto a los colores. El espaciado se volvió mucho más fácil cuando implementamos un sistema de multiplicación. Elegimos un número específico y todo nuestro espaciado simplemente seguía múltiplos de ese número de espaciado. En cuanto a los nombres, utilizamos una convención de nomenclatura estilo camiseta, por lo que teníamos small, medium, large, XL. Esto es bastante bueno porque puedes ampliar fácilmente esto para agregar números de espaciado más pequeños y más grandes utilizando la notación X. Por ejemplo, podrías implementar double XL o XS para una medida de espaciado más pequeña.

Restyle también proporciona dos componentes predefinidos llamados Box y Text. Nos dimos cuenta de que los componentes View y Text predeterminados no eran los mejores puntos de partida, así que necesitábamos reemplazarlos con los componentes Text y Box. Estos utilizan el tema desde el principio. Puedes pasar propiedades de estilo a los componentes Text y Box utilizando Props. Las propiedades de color y de medida se asignan a los valores que has proporcionado en tu tema. También puedes pasar una variante de Text para aplicar un estilo de texto predefinido que hayas definido en tu tema. El componente Box proporciona una experiencia similar al componente Text pero agrega varias propiedades adicionales para el relleno, margen, alineaciones y bordes.

¿Cómo abordamos ahora el modo oscuro? Es súper simple. Lo primero que debemos hacer es construir un nuevo tema basado en el tema predeterminado. Lo único que estamos haciendo aquí es reemplazar los colores que necesitamos cambiar para nuestro tema de modo oscuro. Lo siguiente que debemos hacer es encontrar una forma de almacenar ese valor en algún lugar y alternar el valor de ida y vuelta. En este caso, estoy usando un gancho de UState para establecer el valor del modo oscuro. En función de ese valor, pasamos DarkTheme o Theme al proveedor de temas. Y eso es literalmente todo. Tus componentes de Restyle ahora se ajustan automáticamente para adaptarse al tema actual.

La experiencia de desarrollo para todo este proceso también es súper impresionante ya que todo esto está respaldado por TypeScript. Mientras desarrollas tu aplicación, mientras estás aplicando estilos, las cosas se autocompletan automáticamente y obtienes todos los demás beneficios que proporciona TypeScript. Hay muchas otras características de las que no tuvimos la oportunidad de hablar hoy, así que te recomiendo encarecidamente que consultes el proyecto en GitHub. Muchas gracias por tenerme hoy y por escuchar, echa un vistazo a Restyle en GitHub y a la página de carreras de Shopify si estás buscando un nuevo trabajo. Muchas gracias. ¡Salud!

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/