Style

The base foundation of each UI component is its style. We use basic style presets to define the rules and the style guide we follow.

Our presets include: Colors, Typography, Spacings, Shadows, Border Radius and more..

The UILib already comes with a set of predefined constants and presets.

You can easily use it anywhere in your code (as you would use any other constant value), or as a component modifier.

It's also very easy to define your own presets..

import {Typography, Colors, Spacings} from 'react-native-ui-lib';

Colors.loadColors({
  pink: '#FF69B4',
  gold: '#FFD700',
});

Typography.loadTypographies({
  h1: {fontSize: 58, fontWeight: '300', lineHeight: 80},
  h2: {fontSize: 46, fontWeight: '300', lineHeight: 64},
});

Spacings.loadSpacings({
  page: isSmallScreen ? 16 : 20
});

For example, the following line

<Text h1 pink>Hello World</Text>

Will generate this text

It will use the h1 preset for typography and the pink color value we set to style the Text element.