UI Toolset & Components Library for React Native

A Cross-Platform Components Library

Building a cross-platform app can be time consuming especially when one needs to find solutions that suit each platform. While React Native solve this issue, still, some components originated from one platform and don't exist in the other.

ActionSheet is a good example of an iOS component that just does not exist on Android. DatePicker has a different API and behavior for each platform instead of a unified component.

The UILIB aims to solve that.

Toolset for Building Amazing Apps with No Effort

Step 1

Define your app base foundation. Things like colors, typography and spacings.

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

Colors.loadColors({
  primaryColor: '#2364AA',
  secondaryColor: '#81C3D7',
  textColor: '#221D23',
  errorColor: '#E63B2E',
  successColor: '#ADC76F',
  warnColor: '#FF963C'
});

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

Typography.loadTypographies({
  heading: {fontSize: 36, fontWeight: '600'},
  subheading: {fontSize: 28, fontWeight: '500'},
  body: {fontSize: 18, fontWeight: '400'} 
});

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

Spacings.loadSpacings({
  page: 20,
  card: 12,
  gridGutter: 16 
});

Step 2

Set a theme for your components.

import {ThemeManager} from 'react-native-ui-lib';

// with plain object 
ThemeManager.setComponentTheme('Card', {
  borderRadius: 8,
  activeOpacity: 0.9 
});

// with a dynamic function
ThemeManager.setComponentTheme('Button', (props, context) => {
  // 'square' is not an original Button prop, but a custom prop that can
  // be used to create different variations of buttons in your app
  if (props.square) {
    return {
      borderRadius: 0
    };
  }
});

Step 3

Build your app. With our auto-generated modifiers, it's a matter of minutes till you create your first beautiful screen.

import React, {Component} from 'react';
import {View, Text, Card, Button} from 'react-native-ui-lib';

class MyScreen extends Component {
  render() {
    return (
      <View flex padding-page>
        <Text heading marginB-s4>My Screen</Text>
        <Card height={100} center padding-card marginB-s4>
          <Text body>This is an example card </Text>
        </Card>

        <Button label="Button" body bg-blue30 square></Button>
      </View>
    );
  }
}

Over than 60 Beautiful Components

Basic components like Button, Avatar and Card and more sophisticated ones like Hints, ColorPicker and Drawer

RTL and Accessibility in Mind

We provide a full, out-of-the-box support to RTL and Accessibility