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.