Design Systems in React Native

Basically, its scope depends on the design system itself. A perfect one contains basic typography, colour themes, layouts and of course designed components. These components help development teams to build consistent products in a smooth way. How?

Imagine that you’ve built several products under one brand. Each of them was built in different circumstances: time, team, goals etc. As a result they look completely different and the users of your products are confused. They see all the different colours, fonts, components. They do not connect any visual part of your products with your brand, so they won’t recall it. You are probably asking yourself: “What should I do to avoid that?”. “How to maintain a consistent brand communication between different products?”.

And the answer is: create a design system. One of the most important aspects of branding is to keep a coherent design, and design systems are a good foundation for achieving this. As a result your users will remember your brand the way you want them to.

What are the benefits of using design systems?

By having a design system internally you will:

1. Save time - Your designers do not have to struggle with making designs from scratch. They can build layouts using your library. It is the same with developers. They just grab already built components and put them into the code. It reduces the time needed for mobile and web development significantly.
2. Reduce errors - With a properly built design system you are sure that your developers will implement well-tested components into the source code of your product.
3. Boost your satisfaction - Your satisfaction grows as you cut down development time, implement a consistent design, and deploy tested code.

All the above benefits apply to React Native. Using a design system based on React Native has its own additional unique advantage. You can have a consistent design both on iOS and Android.

Tools for design system implementation in React Native development

At Netguru we use a design system based on React Native for a smooth mobile development process. We have come a long way, checking out the available tools and open source libraries as well as building our own solution. Now we want to share our knowledge to help you to simplify the whole mobile development process and improve code safety:

1. Storybook is a user interface development environment and playground for UI components. The tool enables developers to create components independently and showcase them interactively in an isolated development environment. Storybook runs outside of the main app so users can develop UI components in isolation without worrying about the app’s specifics and requirements.
2. Zeplin is a collaboration app for designers and engineers that helps simplify the handoff process by generating style guides, specs, and assets automatically. Basically we used Zeplin to “transpile” designs to React Native code.
3. IcoMoon is an icon library which lets users build and use their own icon packs. In our case, the tool helped us to manage the implementation of designs containing dozens of custom icons. We couldn’t use the react-native-svg package to implement them as it would take a couple of working days to achieve that. We gave Icomoon a try. Using Icomoon we were able to add all the required icons to a mobile project in a couple of minutes.
4. Jest is a testing framework for React Native applications. With Jest, you will be able to test each component’s behaviour, delivering well-tested code without bugs as a result.
5. Styled-components allow users to write CSS styles and transpile them to React Native styles. We decided to use styled-components as our main styling pattern. Our components contain a lot of logic, so we decided to keep at least a part of the computations inside custom styled-components. Thanks to that, the code is more structured and readable.
6. Patch-package lets app authors instantly make fixes to npm dependencies. In our case some components required custom behaviour. We used npm dependencies to build those components, but their overall scope did not meet our requirements. Patch-package let us change the source code of dependencies and fulfill these requirements.
7. React-native-shadow is an npm package that lets users implement custom shadows on Android. Unfortunately, React Native has a small shadow implementation issue. On iOS there is no problem with achieving a custom-looking shadow. React Native provides shadow color, size, and opacity customisation out of the box. It looks quite different on the Android platform. React Native provides only one shadow styling prop - Elevation. This prop unfortunately did not meet our expectations as it only handles black shadows. As we had to implement shadows in many colors, we used the React-native-shadow package to do so.
8. React-native-svg is an npm package that lets users use SVGs in React Native applications. Our design system required a few custom SVGs like circles, lines, squares, etc. To achieve that we chose the react-native-svg package, which let us implement all the custom vectors.

Documentation and an example app for a flawless implementation of a design system in React Native

A typical design system contains dozens of components and an overall style guide. It would be very hard to use design system elements without any description of basic usage. The most common solution is to use a custom webpage or GitHub Readme/Pages. At Netguru we support both options. Well-written and well-designed documentation helps developers to understand each component better.

In addition to documentation, an example app is the second thing we do in parallel. In most cases it is a simple app with navigation to switch between the specific components. If required, we can also align the example application to the client’s requirements.

What are the limitations of using design systems in React Native?

React Native as a technology has its own limits. We have faced a couple of issues during design system implementation:

1. Third-party packages: The main problems with external packages are support and technical limitations. We faced quite a dilemma during design system development. We could implement some features quickly by using poorly supported dependencies or write them from scratch. Patch-package came to the rescue and we could achieve the desired effects. However, you don’t need to avoid third-party packages. Instead just choose them wisely and patch them if needed. After all, you can build complex/complicated features from scratch if it’s really necessary.
2. Visual regression tests: We learned a lesson in terms of visual regression in React Native. At first we decided to use Loki. As our development team and component base grew, we noticed that Loki wasn’t working as expected. Visual regression tests failed each time we changed the simulator’s size or pixel density. That was quite annoying, especially because of the fact that we did not make any changes in the design system components. Loki does not support various simulator sizes. In the end we found out that there is no proven solution to compare screenshots and we are relying on Jest snapshots.
3. Complicated charts: To build our chart components we decided to use victory-native, And it worked well. The problem can arise when you decide to load a large amount of data, which may cause chart performance to suffer. Having that in mind we recommend not to go too far with chart complexity.

Design systems in other technologies

Besides React Native, Netguru has worked on design systems in React. It is a big advantage to have the same design system implemented on mobile and web: it allows multiple platforms and products to be really consistent in terms of looks and behaviour of components.

Why do you need a design system?

A design system is a really powerful tool. For a React Native developer, well-built components and style guide collections help in daily development. They speed up development time and improve app stability. It is recommended to have a design system, especially if you are building many products under one brand.