Highly customizable and theming components for React Native

Overview

@blankapp/ui

@blankapp/ui

Build Status npm version npm Join the chat

English | 简体中文

Table of Contents

Created by gh-md-toc

Introduction

Highly customizable and theming components for React Native

Browse the docs on blankapp.org or try it out on our live demo.

Features

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

Live Demo

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

Now, simply copy the following to your index.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';

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

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

Discussion

If you have any suggestions or questions about this project, you can discuss it by Telegram or my private wechat.

License

MIT License

Copyright (c) 2018 JianyingLi <[email protected]>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
You might also like...
A framework for building native Windows apps with React.
A framework for building native Windows apps with React.

React Native for Windows Build native Windows apps with React. See the official React Native website for an introduction to React Native. React Native

iOS Today Widget in React Native
iOS Today Widget in React Native

React Native Today Widget Experimental library investigating limits of implementation iOS App Extensions using React Native. Sample result from Comple

 🤖 React Native Android widgets bridged to JS, a proof of concept
🤖 React Native Android widgets bridged to JS, a proof of concept

React Native Android Widget Proof Of Concept 🤖 Using React Native and having Android widgets is possible. Create buttons in Java / Android XML to tri

A simple Facebook Chat Head like bubble for react native
A simple Facebook Chat Head like bubble for react native

react-native-floating-bubble A simple Facebook Chat Head like bubble for react native. Special thanks to bubble-for-android because this is just react

React-Native library for the WidgetKit framework. Integrate a Widget into your App 🍏📱
React-Native library for the WidgetKit framework. Integrate a Widget into your App 🍏📱

react-native-widgetkit React-Native Library for the iOS 🍏 WidgetKit framework Table of Contents 📚 Introduction 👨‍🏫 Installation 🖇‍ Usage 👨🏻‍💻

Compile time interactive, responsive and theming utilities for React Native.
Compile time interactive, responsive and theming utilities for React Native.

Compile time interactive, responsive and theming utilities for React Native.

a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience Documentation Visit the Grommet website for more information. Support / Contributing Before opening an issu

a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience Documentation Visit the Grommet website for more information. Support / Contributing Before opening an issu

Highly customizable material design components for React Native
Highly customizable material design components for React Native

React Native Material UI (iOS and Android supported) Highly customizable material design components for React Native! Documentation Getting Started Us

Highly customizable atomic components for React calendar date pickers

calendar-blocks Flexible, customizable React calendar / date-picker primitives. Compose your own Calendar UI easily with keyboard navigation Supports

An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using the Tenor and/or the Giphy API
An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using the Tenor and/or the Giphy API

react-native-gif-search An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using

A React Native library provides Image blur shadows, highly customizable and mutable component. Supports Android, iOS and Web.
A React Native library provides Image blur shadows, highly customizable and mutable component. Supports Android, iOS and Web.

A React Native library provides Image Blur Shadows, highly customizable and mutable component. Supports Android, iOS and Web.

A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-picker A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sectio

A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-selector A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sect

react-native-select is a highly customizable dropdownlist for android and ios.

rect-native-select react-native-select is a highly customizable dropdownlist for android and ios.

A cross-platform (iOS / Android), selector/picker component for React Native that is filterable, highly customizable and supports sections.
A cross-platform (iOS / Android), selector/picker component for React Native that is filterable, highly customizable and supports sections.

react-native-modal-selector-searchable A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and su

A react native modals library. Swipeable. Highly customizable. Support multi modals & Support custom animation. For IOS & Android.
A react native modals library. Swipeable. Highly customizable. Support multi modals & Support custom animation. For IOS & Android.

React Native Modals React Native Modals Library for iOS & Android. How to thank me ? Just click on ⭐️ button 😘 Try it with Exponent BREAKING CHANGE A

A cross-platform (iOS / Android), full-featured, highly customizable web browser module for React Native apps.
A cross-platform (iOS / Android), full-featured, highly customizable web browser module for React Native apps.

react-native-webbrowser A cross-platform (iOS / Android), full-featured in-app web browser component for React Native that is highly customizable. Cur

qier-player is a simple and easy-to-use h5 video player with highly customizable UI and rich features.
qier-player is a simple and easy-to-use h5 video player with highly customizable UI and rich features.

A simple and easy-to-use h5 video player with highly customizable UI and rich features.

Comments
  • Add a Gitter chat badge to README.md

    Add a Gitter chat badge to README.md

    blankapp/ui now has a Chat Room on Gitter

    @lijy91 has just created a chat room. You can visit it here: https://gitter.im/blankapp/ui.

    This pull-request adds this badge to your README.md:

    Gitter

    If my aim is a little off, please let me know.

    Happy chatting.

    PS: Click here if you would prefer not to receive automatic pull-requests from Gitter in future.

    opened by gitter-badger 0
  • Bump mixin-deep from 1.3.1 to 1.3.2

    Bump mixin-deep from 1.3.1 to 1.3.2

    Bumps mixin-deep from 1.3.1 to 1.3.2.

    Commits
    Maintainer changes

    This version was pushed to npm by doowb, a new releaser for mixin-deep since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v1.0.6)
Customizable set of components for React Native applications

Shoutem UI Shoutem UI is a set of styleable components that enables you to build beautiful React Native applications for iOS and Android. All of our c

Shoutem 4.8k Jan 5, 2023
A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control.

Teaset ???? 中文完整文档版 A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control. Installation

null 2.9k Jan 9, 2023
react-native stateless functional UI components to get you up and running quickly

panza Panza is a collection of ui-components for react-native modelled after iOS. This library is currently undergoing a rewrite and will be updated s

null 258 Dec 16, 2022
React Native Components and APIs for the Web

React Native for Web "React Native for Web" makes it possible to run React Native components and APIs on the web using React DOM. Documentation The do

Nicolas Gallagher 20.4k Jan 3, 2023
UI & API Components Library for React Native

React Native Common Cross Platform React Native UI Toolkit & API Get Started Installation $ yarn add react-native-common or $ npm install react-native

Reza Ghorbani 63 Feb 14, 2022
An "awesome" type curated list of how to use React Native and Meteor together

Awesome React Native Meteor An "awesome" type curated list of how to use React Native and Meteor together. Based on Awesome React Native which was bas

Meteor Factory 153 Oct 23, 2022
Component library for React Native

first-born Getting Started These instructions will get you a copy of the project up and running on your local machine for development and testing purp

99x 272 Dec 9, 2022
An utility style framework for React Native

An utility React Native style framework for rapidly building custom user interfaces. Documentation For full documentation, please check https://osmics

OsmiCSX 222 Dec 26, 2022
A framework to test a React Native app during runtime

react-native-diagnose A react runtime diagnose component Rationale Testing native applications is complicated There are features that can only be test

Netbeast 24 Feb 14, 2022
Cross-Platform React Native UI Toolkit

Cross Platform React Native UI Toolkit Get Started Installation Follow these instructions to install React Native Elements! Usage Start using the comp

React Native Elements 23.1k Dec 31, 2022