Styles and Theming with Restyle in React Native

From:

React Summit Remote Edition 2020

Haris is talking about the newly open-sourced library Restyle (https://github.com/Shopify/restyle); how it addresses many problems and pain points developers experience when managing evolving styles and theme support (gotta have dark mode!) in a React Native app.

Transcript

Intro

Hi folks, my name is Haris Mahmood. I'm a Senior Engineer at Shopify based in Toronto, Canada. I work specifically on the client team on the Arrive app. It's an app that helps keep track of all of your online orders. I also run an online store called Rep It Supply, which sells apparel, pins, stickers, and accessories for developers and other tech enthusiasts. So today we'll be chatting about styles and theming in React Native from the perspective of the Arrive app and the experiences that I gained while working on the app. React... Sorry, the Arrive app is 95% React Native with the remaining portions relying on a couple of Native modules for both iOS and Android. I'll be talking about some of the main problems that we faced when it came to theming and styling for the app and how our Restyle Library helps solve those problems.

The Main Problems around Theming and Styling

[01:18] The first issue that we came across revolved on managing colors. Colors are notoriously hard to name, they're hard to keep track of, they became super hard to maintain as more and more colors got added or old colors need to be adjusted to meet changing needs for the app.

The second issue revolved around managing font styles. First of all, we had far too much code duplication throughout the app. We needed to write down multiple different style declarations for every single text component that we had in our app. This required far too much code all over the place and became super hard to manage. One of the first things we did there was to just try and simplify this is to build out a font styles object that defines some of our default font styles and then implement those and use those as necessary for the different text components throughout our app.

[02:07] This worked okay, but we started to run into issues when for example, we'd have a new font style. That was exactly the same as one that existed, but had one small change. So we weren't sure whether we needed to introduce a brand-new font style or use the font style that we already have with one override. And the second problem that we had was trying to figure out then how broad or specific the font styles needed to be. Was body far too generic? Was Call-to-Action far too specific? In the latter scenario, if we came across the situation where we needed to use the exact same font style that Call-to-Action already implemented, but it was for something that wasn't a Call-to-Action, we didn't know whether we needed to refactor the entire code base to accommodate a renamed Call-to-Action font style, or just use it as is and kind of deal with the awkward consequences of losing some of that consistency.

Dark mode and theming is obviously a huge portion of mobile apps, and we knew that we wanted to implement and tackle dark mode, but we already had a number of issues with regards to themes, with regards to colors and font styles, and the thought of adding more colors and more font style alternatives just didn't seem like the right approach when we already had problems that we were trying to figure out.

Meet Restyle

[03:27] So this is sort of where Restyle comes into play. Restyle is an open-source library. It provides a type-enforced system for building UI components powered by TypeScript. It's theme ability is baked right in from the get go so if and when you decide to implement dark mode or a theme, it's extremely trivial and easy to do so.

I'm going to walk you through some of the best practices or concepts that come about through Restyle and how they solved the problems that we had while working on Arrive.

[03:57] Restyle expects you to have a defined theme. This is a global theme object with a set of values for colors, spacing, break points, and a number of other things. This theme is then used by passing into the theme provider using the theme prop.

So how do colors work now? The first thing that we did was realize that, "Hey, every design system will commonly have a color palette. These palettes will include a number of base colors with lighter and darker shades." So the first thing we did was implement this palette without worrying about the theme. The next thing we did was then use this pallet to define the colors within our theme and the names that we gave each of our colors was very context driven.

[04:44] So for example, we had Card Primary Background and Button Primary Background. This scenario made it very easy for us to add new colors to the palette, modify colors in our palette and change the implementation of that palette for a very specific context without worrying about any ripple effects that it might have across the app. This made it very easy to introduce new colors as well, and just keep an overall well-managed state with regards to colors.

Spacing became a lot easier when we implemented a number multiplication system. We chose one specific number and all of our spacing essentially just followed a multiples of that spacing number. With regards to naming, we used a t-shirt style naming convention. So we have small, medium, large, XL. This is pretty nice because you can easily extend this to add smaller and larger sizing or spacing numbers using the X notation. So you could implement double XL or XS for a smaller spacing measurement.

[05:46] Restyle also provides two predefined components called Box and Text. We realized that the default View and Text components just weren't the best starting points so we needed to override these with the Text and Box components. These utilize the theme right off the bat. So you can pass in-style properties using props to the Text and Box components. Color properties and measurement properties all map to values that you've provided in your theme.

You can also pass in a text variant to apply a predefined text style that you'll have defined in your theme. The Box provides a similar experience with the Text component, but adds a number of additional props for padding, margin, alignments and borders.

[06:30] So how do we tackle dark mode now? It's super, super simple. The first thing we need to do is build a new theme based off of the default theme. The only thing we're doing here is overriding the colors that we need to change for our dark mode theme.

The next thing we need to do is find a way to be able to store that value someplace and toggle the value back and forth. So in this case, I'm using a useState hook to set the dark mode value. Based on that value, we pass in dark theme or theme to the theme provider.

[07:01] And that's literally it, your Restyle components now automatically adjust to accommodate the current theme. The Dev experience for this entire process is also super awesome. Since this is all backed by TypeScript, as you're developing your app, as you're styling things, things automatically autocomplete, and you get all the other benefits that TypeScript provides. There's a number of other features that we didn't get a chance to talk about today so I highly recommend checking out the project on GitHub.

Thanks so much for having me today and for listening, check out Restyle on GitHub and Shopify's career page if you're looking for a new gig. Thanks so much, cheers.

Transcription

Hi, folks. My name is Haris Mahmoud. I'm a senior engineer at shopify based in Toronto, Canada. I work specifically on the client team on the Arrive app. It's an app that helps keep track of all of your online orders. I also run an online store called Rapid Supply, which sells apparel, pins, stickers, and accessories for developers and other tech enthusiasts. So today we'll be chatting about styles and theming in react Native from the perspective of the Arrive app and the experiences that I gained while working on the app. The Arrive app is 95% react Native, with the remaining portions relying on a couple of native modules for both iOS and Android. I'll be talking about some of the main problems that we faced when it came to theming and styling for the app and how our restyle library helps solve those problems. The first issue that we came across revolved around managing colors. Colors are notoriously hard to name, they're hard to keep track of, they became super hard to maintain as more and more colors got added, or old colors need to be adjusted to meet changing needs for the app. The second issue revolved around managing font styles. First of all, we had far too much code duplication throughout the app. We needed to write down multiple different style declarations for every single text component that we had in our app. This required far too much code all over the place and became super hard to manage. One of the first things we did there was to try and simplify this, is to build out a font styles object that defines some of our default font styles, and then implement those and use those as necessary for the different text components throughout our app. This worked okay, but we started to run into issues when, for example, we'd have a new font style that was exactly the same as one that existed, but had one small change. So we weren't sure whether we needed to introduce a brand new font style, or use the font style that we already have with one override. And the second problem that we had was trying to figure out then how broad or specific the font styles needed to be. Was body far too generic? Was call to action far too specific? In the latter scenario, if we came across a situation where we needed to use the exact same font style that call to action already implemented, but it was for something that wasn't a call to action, we didn't know whether we needed to refactor the entire code base to accommodate a renamed call to action font style, or just use it as is and kind of deal with the awkward consequences of losing some of that consistency. Dark mode and theming is obviously a huge portion of mobile apps, and we knew that we wanted to implement and tackle dark mode, but we already had a number of issues with regards to themes, with regards to colors and font styles. And the thought of adding more colors and more font style alternatives just didn't seem like the right approach when we already had problems that we were trying to figure out. So this is sort of where Restyle comes into play. Restyle is an open source library. It provides a type enforced system for building UI components powered by typescript. Its themability is baked right in from the get go. So if and when you decide to implement dark mode or a theme, it's extremely trivial and easy to do so. I'm going to walk you through some of the best practices or concepts that come about through Restyle and how they solved the problems that we had while working on Arrive. Restyle expects you to have a defined theme. This is a global theme object with a set of values for colors, spacing, breakpoints, and a number of other things. This theme is then used by passing into the theme provider using the theme prop. So how do colors work now? The first thing that we did was realize that, hey, every design system will commonly have a color palette. These palettes will include a number of base colors with lighter and darker shades. So the first thing we did was implement this palette without worrying about the theme. The next thing we did was then use this palette to define the colors within our theme. And the names that we gave each of our colors was very context driven. So for example, we had card primary background and button primary background. This scenario made it very easy for us to add new colors to the palette, modify colors in our palette, and change the implementation of that palette for a very specific context without worrying about any ripple effects that it might have across the app. This made it very easy to introduce new colors as well and just keep an overall well-managed state with regards to colors. Spacing became a lot easier when we implemented a number multiplication system. We chose one specific number and all of our spacing essentially just followed a multiples of that spacing number. With regards to naming, we used a t-shirt style naming convention. So we had small, medium, large, XL. This is pretty nice because you can easily extend this to add smaller and larger sizing or spacing numbers using the X notation. So you could implement double XL or XS for a smaller spacing measurement. Resell also provides two predefined components called box and text. We realized that the default view and text components just weren't the best starting points. So we needed to override these with the text and box components. We used utilize the theme right off the bat. So you can pass in style properties using props to the text and box components. Color properties and measurement properties all map to values that you've provided in your theme. You can also pass in a text variant to apply a predefined text style that you'll have defined in your theme. The box provides a similar experience to the text component but adds a number of additional props for padding, margin, alignments, and borders. So how do we tackle dark mode now? It's super, super simple. The first thing we need to do is build a new theme based off of the default theme. The only thing we're doing here is overriding the colors that we need to change for our dark mode theme. The next thing we need to do is find a way to be able to store that value someplace and toggle the value back and forth. So in this case, I'm using a use state hook to set the dark mode value. Based on that value, we pass in dark theme or theme to the theme provider. And that's literally it. Your restyle components now automatically adjust to accommodate the current theme. The dev experience for this entire process is also super awesome. Since this is all backed by typescript, as you're developing your app, as you're styling things, things automatically autocomplete and you get all the other benefits that typescript provides. There's a number of other features that we didn't get a chance to talk about today, so I highly recommend checking out the project on GitHub. Thanks so much for having me today. And for listening, check out Restyle on GitHub and shopify's career page if you're looking for a new gig. Thanks so much. Thanks for listening.

react native css-in-js