Software Mansion Academy took off in great style! Thanks to our partners — Shopify, and our host — Haris Mahmood, over 150 people learned a thing or two about the new Restyle library.

In case you missed it, we chose a couple of questions* from the post-webinar Q&A session and wrote it down here. All the questions were answered by Haris Mahmood, a senior engineer at Shopify.

At the same time, we encourage you to sign up for our newsletter not to miss our future events or to follow us closely on Twitter!

FYI, you can now register for our next event! It’s going to be a free webinar “React Native Reanimated 2” ran by Krzysztof Magiera. You can read more here.

How are you using the breakpoint prop in theme with React Native?

You provide an entire object with the keys being the breakpoint names and then add the values you want to apply to that specific breakpoint.

Would breakpoints incur rendering performance cost?

We (at Shopify) haven’t noticed any issues at all. We don’t support tablets officially, what we do instead is adjusting our style based on the device size or the mobile phone size. We’ve noticed you can have super small iPhone to a pretty hefty Android device and we won’t be able to have this magical ‘one size fits all’ UI so we were using breakpoint to adjust those different sizes and adjust those variables depending on what your device size was.

We haven’t noticed any performance issues at all.

What do you do if during development you need to add a new spacing with values between e.g. M and L?

This comes back to having a really well design system in place. Ideally, if you design stuff is done properly and your design team is utilizing those same space values, a new value between medium and large should never magically just occur.

Sometimes, if a design is evolving, yes that may happen, for example, the spacing values in the Shop rebrand might have been different than the arrived default styles. As in that case, we had a brand new set of spacing values that we were able to use for that theme.

If you do need to add new values, you would have to go through the exercise of, for example, renaming large to extra large and introducing that new value in the middle and making sure that those new values get updated across the board.

But if you have your design system in place, you’d be able to avoid that.

How did you plan dark mode with your design team?

Fortunately, our design team had experience with working with stuff like that, they took the time to go through all the different screens, all the components to figure out what they needed to look like in dark mode.

One of the first things they did was updating the pallets, to introduce the alternatives that would potentially be used for dark mode and then created the duplicated components and screens with the dark darker values.

That’s what we used to define our new theme and it became almost trivial to switch things out for the new theme.

Do you wind up using Restyle for most components in your app, or is it mostly around View and Text?

Practically everything, like 98% of our UI uses Restyle.

Any time we’re not able to use Restyle values, we get to use the theme hook that Restyle provides. So quite often when you’re using a third-party library that may be a place to use theme hook.

How do you decide when to create custom Restyle components?

Any time we had a component that required a lot of unique functionalities, a lot of dynamic styling, as soon as you realize ‘hey things are getting a little crazy’ that may be a great opportunity to create a custom component.

There is a bunch of additional details on this topic in Reastyle’s readme.

Any tips on how to synchronize values with designers and ensure they do not diverge?

First and foremost, you need to have an awesome working relationship with your designers. You have to understand them, just be friends with them. I cannot express how valuable that is. Communication must be top-notch.

Any synchronization issues we have, I try to talk to them, see where it came from, see if we need to establish a pattern, introduce a new value, or color. We have a conversation where everything is very thought-through.

How do you handle dynamic prop based styles for more advanced use cases? Button components are usually the trickiest with that.

A button component, for example, usually accommodates a type prop and that type prop drives a lot of what that component looks like in terms of icon placement, whether or not it is there, or it’s not there, etc.

bu the style of that is still done in Restyle.

How do you keep or have been following breaking changes in React Native recently released versions? Do you often update the dev mode in a separate branch? How do you handle this?

Someone will take on, they have the responsibility of upgrading the version and go through all of our tests to make sure everything works ok. When something like that does come in, everyone gets a chance to test the new version of React Native. We’re pretty careful with updating given our pretty large user base.

*The answers were edited for length and clarity.

Thanks for reading and hopefully — see you at the next event organized by Software Mansion Academy!