Design System for dummies, create your own flavor of React Native app in 3 easy steps

Creating your own app is not a heavy task nowadays. While just a few years ago you would have to master two different ecosystems in order to create a cross-platform app, today, using JavaScript alone with React Native, it’s a matter of minutes till you see your first screen up & running on both iPhone and Android device.

Yes, it’s true, we can discuss the pros and cons of having a react native app vs a native one, but that’s not the reason we gathered here today.

So… creating an app is easy (or somewhat easier), but what about designing one? How can one truly build a beautiful, stunning app?

Let’s Start with some examples

In order to demonstrate what we’re going to talk here today, I created 2 types of screens, screens you’ll probably see in most apps.

• The Login screen
• A typical Form screen

This will help me show, how easy it is to move between different designs and play with concepts when using the uilib.

01 Research

Always start with solid research, every good app based on the same foundations: Colors, Typography & Layout.

Next, there’s the style. Get some style inspirations and ideas from various sites and apps. I can recommend some that always help me.

• Pinterest — just start searching for concepts and you’ll find what you need.
• Muzli — great place for inspirations, the best resource for some top, current designs and trends.
• Coolors - Generate theme colors and get color presets to get you going.
• Google Fonts — Explore different fonts, with different weights and download for free.

Download, capture & print screen everything you find interesting, gather an idea of what you’re trying to achieve, there’s no reason in reinventing the wheel.

02 The Foundation

After you decided on a general idea for your app and have a clear image of how it should look like, it’s time to build it up.

As I mentioned before, every app has its own foundation and the foundation consist of very fundamental concepts in UI. The uilib allows you to set those foundations and use them easily throughout your code.

Fifty Shades of grey

First are colors. Every app has a unique set of colors that identify it. For Spotify it’s green and black, Pinterest is red and Facebook is blue. Google is very clean (meaning white) but still, use its popular blue, red, green & yellow colors in all of their products.

It doesn’t have to be too many colors, but I personally recommend to keep about 5–8 shades per each color you have.

Why? Cause shades are useful for implementing different states (disabled, press feedback, etc…)

If for instance, we have decided to go with #D64933 as our red color, I would include the following shades, and name them red10, red20, …red50 accordingly. (when red30 points to #D64933, the primary shade), of course, you can name it as you like.

Now, with uilib all you need to do is use the Colors.loadColors like this:

import {Colors} from 'react-native-ui-lib';
Colors.loadColors({
  red10: '#C37463',
  red20: '#BD6753',
  red30: '#B95A44',
  red40: '#A9523F',
  red50: '#984938',
});

uilib already comes with a set of colors including their 8 shades for your convenience. Also, it provides helpful utility to move quickly between different shades.

Colors.getColorTint(Colors.red30, 50) // --> Colors.red50
Colors.getColorTint(Colors.blue10, 40) // --> Colors.blue40

Getting the right font

Fonts might be a bit tricker, each typography preset contains several values.fontSize, fontWeight, fontFamily,lineHeight and more…

I would generally recommend on having about 5–6 types of typographies, anyhow, same as colors, uilib offers a set of typographies (text10, text20, …, text100) to get you running, But, it’s still possible to load your own.

Typography.loadTypographies({
  header: {fontSize: 58, fontWeight: '300', lineHeight: 78},
  title: {fontSize: 46, fontWeight: '300', lineHeight: 64},
  body: {fontSize: 18, fontWeight: '400', lineHeight: 22},
});

All presets are incorporated in uilib’s components and can easily be used as modifiers. Read more about modifiers in another blog post of mine.

03 Where it all comes together

So you got your ideas and organized all of your presets and you’re ready to start coding.

One way to use it, the most intuitive one, is passing to a component’s props. Let’s take the Button component for instance.

import {Button, Colors, BorderRadiuses} from 'react-native-ui-lib';
<Button 
  label="Button"
  backgroundColor={Colors.red30}
  color={Colors.white}
  borderRadius={BorderRadiuses.br20} />

or even easier, by using modifiers

<Button label="Button" bg-red30 white br20 />

This will result in the same Button.

A red button with white label and a border radius of 6

While it’s all nice and easy, as we talked earlier, we’re trying to create a general style, a unified look & behavior for our app. That means we’ll probably want to use the same style for this button on all the other buttons in our app. But passing these props over and over is clearly bad practice… entersThemeManager.

The ThemeManager is our last station where it all comes together. Using the ThemeManager can be helpful in creating a global style for your app or better say — your app’s Theme.

In our case, if we want to apply our red button style over all the buttons in the app all you have to do is

import {ThemeManager} from 'react-native-ui-lib`;
ThemeManager.setComponentTheme('Button', {
  backgroundColor: Colors.red30,
  color: Colors.white,
  borderRadius: BorderRadiuses.br20,
});

While this makes sense and fairly easy to do, you would ask yourself why not just overridedefaultProps which comes with every component. Well, that brings us to the real power of the ThemeManager.

Let’s take a more advanced example. The Button component has a prop called fullWidth which as you can guess, renders the button with full width (coast to coast if you may) with no width limitation. With our current app’s theme, it will look something like this.

But maybe a full-width button doesn’t look the best with a full red background, maybe it’s too prominent for us and we’ll like to make it a little lighter. What if we want to change the UI of the button only when thefullWidth prop is on? That’s where our ThemeManager comes in handy.

For the purpose of demonstration, let’s decide that full-width buttons, in our app, will be rendered with a white background, a red label, and a 2pt red outline. It should look something like this

So again, we’re in a pickle, we can start passing on to every instance of “full-width” button the relevant props in order to override the defaults, theme props, we defined earlier, but that’s not really a solution.

The ThemeManager allows setting a component’s theme in two ways

• Passing an object (as you’ve seen already)
• Passing a callback (which you’ll see now)

Passing a callback gives you the option to control the props being passed to the component in runtime. The callback accepts the component’s current props (and its current context) and expects you to return the props you want to change.

ThemeManager.setComponentTheme('Button', (props, context) => {  
  const themeProps = {
    backgroundColor: Colors.red30,
    color: Colors.white,
    borderRadius: BorderRadiuses.br20,
  };
  if (props.fullWidth) {
    themeProps.backgroundColor = Colors.white;
    themeProps.color = Colors.red30;
    themeProps.outlineWidth = 2;
    themeProps.outlineColor = Colors.red30;
  }
  return themeProps;
});

Basically, we’re checking here if the fullWidth prop was passed, if so, we’re overriding some of the props (and adding others) to give the button the right look.

Here you go, all of your Theme logic in one place. Once you have your theme setup, it’s easy to move between different concept or make small changes to your whole app.

Back to the beginning

If I’ll go back to where we started, we’ve seen two examples of two very commons screens: the Login screen & the Form screen.

Now, let’s take a look at some code and see how we’ve implemented it using all of what we’ve learned so far.

Form Screen

Login Screen

Theme Setup

We have here the implementation of both screens and the setup of our theme.

Now, if we would like to try a different take, maybe some monochromatic look.

All we have to do is change our theme configuration.

Voilà, all we did here is changing some props and presets and we got a totally different look.

So what do you think? have a great idea for an app but no clue on how to make it pretty? give uilib a try and see how easy it can be!

Got some ideas for cool, beautiful themes? go ahead and share with us.