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.


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


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

Live Demo

Quick Start


Before starting make sure you have:


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', [

class Examples extends Component {
render() {
return (
<Text>Hello World</Text>

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