Introduction

UI toolkit

Shoutem UI toolkit enables you to build professionally looking React Native apps with ease.

It consists of three libraries:

Prerequsites

Before starting make sure you have:

Installation

Create new React Native project:

$ react-native init HelloWorld && cd HelloWorld

Install and link @shoutem/ui in your project:

$ react-native install @shoutem/ui
$ react-native link

To check which components we have in UI toolkit, simply copy the following to your index.ios.js file of React Native project:

#file: index.ios.js
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Examples } from '@shoutem/ui';

class HelloWorld extends Component {
  render() {
    return (
      <Examples />
    );
  }
}

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

Finally, run the app!

$ react-native run-ios

To see other components, just import them from @shoutem/ui and render them.

You can also use standard React Native components in your layouts anywhere you want, but they will not inherit either the theme or the parent styles, so you will need to style them manually.

Style names

Style names are similar to CSS classes. Once you apply specific styleName, it will inherit styling rules that are defined in Theme.

This section covers common style names that can be used in several UI toolkit components, and their variations.

Size-based style name variations

  • sm-gutter : small size, defaults to 5px.
  • md-gutter : medium size, defaults to 15px.
  • lg-gutter : large size, defaults to 30px.
  • xl-gutter : extra large size, defaults to 45px.

On View, Tile and Overlay components gutter is applied as padding, while on Text (Typography) and Button components gutter is applied as margin.

If you want to apply gutter only to specific side of component (i.e. right), or to vertical sides, you can specify that by using additional position style name keywords listed below.

Position based style name variations

  • size-gutter-left : gutter will be applied only to left side of targeted component.
  • size-gutter-right : gutter will be applied only to right side of targeted component.
  • size-gutter-top : gutter will be applied only to top side of targeted component.
  • size-gutter-bottom : gutter will be applied only to bottom side of targeted component.
  • size-gutter-horizontal : gutter will be applied only to horizontal sides (left and right) of targeted component.
  • size-gutter-vertical : gutter will be applied only to vertical sides (top and bottom) of targeted component.

rounded-corners

  • This style name applies border radius (defaults to 2 px) to targeted component.

flexible

  • This style name applies flexbox to targeted component, so that it fills parent container component.

inflexible

  • With this style name, component is sized according to its width/height properties, but makes it fully inflexible.

collapsible

  • This style name causes component to shrink if it overflows parent container.

stretch

  • This style name causes component to fully fill parent container.

Below is one example where and how common Style names can be used:

JSX Declaration

<Overlay>
  <Overlay styleName="collapsed"><Heading>-20%</Heading></Overlay>
  <Title styleName="md-gutter-top">COOL BLACK AND WHITE STYLISH WATCHES</Title>
  <Subtitle styleName="line-through sm-gutter-top">$280.00</Subtitle>
  <Heading>$250.00</Heading>
  <Button styleName="md-gutter-top"><Icon name="cart" /><Text>ADD TO BASKET</Text></Button>
</Overlay>