Overview

Welcome to use @blankapp/ui, This documentation will help you get started. If you encounter any problems when using, have a look at the troubleshooting guide, or raise an issue on GitHub.

Introduction

Highly customizable and theming components for React Native, A live demo is here.

Features

  • Lightly dependency, very little dependency
  • Global theming, a variety of style selector implementation
  • Rich base components
  • Friendly API design

Live Demo



Quick Start

Prerequisites

Before starting make sure you have:

Installation

Create a new React Native App:

$ react-native init HelloWorld
$ cd HelloWorld

Install @blankapp/ui to your project:

$ yarn add @blankapp/ui

If you need to use advanced components, Install @blankapp/ui-pro and link in your project:

$ yarn add @blankapp/ui-pro

Now, simply copy the following to your index.ios.js file of React Native project:

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Theme, { ThemeProvider, Screen, Text} from '@blankapp/ui';
import defaultTheme from '@blankapp/ui/src/resources/themes/default';
import defaultThemePro from '@blankapp/ui-pro/src/resources/themes/default';

// Register a default theme
Theme.registerTheme('default', [
defaultTheme,
defaultThemePro,
]);

class Examples extends Component {
render() {
return (
<ThemeProvider>
<Screen>
<Text>Hello World</Text>
</Screen>
</ThemeProvider>
);
}
}

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

P.S. If you want to start a project quickly, you can use the project template that we prepared for you react-native-template-ui-based.

Run the new app

  • Running on Android:
$ react-native run-android
$ adb reverse tcp:8081 tcp:8081 # required to ensure the Android app can
  • Running on iOS:
$ react-native run-ios