Teaset

🇨🇳中文完整文档版

A UI library for react native, provides 20+ pure JS(ES6)+typescript components, focusing on content display and action control.

Installation

npm install --save react-native-teaset
npm install --save react-native-legacy-components

Example

Clone teaset project from github (or download zip file):

git clone https://github.com/gyfgyf/react-native-teaset.git
cd Example
npm install

To run example on iOS:

cd ios && pod install && cd ..
react-native run-ios

To run example on Android:

react-native run-android

Tips: In the Android system, the animations is not smooth, switch to the release mode can be resolved.

iPhoneX

iPhoneX and iPhoneXS are fully supported after 0.6.0, and this option is true by default.

If SafeAreaView is used, please use Theme.set({fitIPhoneX: false}) to manually turn off it.

Redux

If you use Redux, you need to use the <TopView> package container (thanks @Alexorz ).

import { TopView } from 'react-native-teaset';

container => () => <Provider store={store}><TopView>{container}</TopView></Provider>

change theme

if you use TeaNavigator change theme use can or setTheme

  // Theme.set(item);
  // this.navigator.popToTop();

if you use react-navigation change theme,You have to add a BasePage for each page

 import {setTheme,BasePage,Button,ConfigProvider} from 'react-native-teaset';
 setTheme(theme:string);
  <ConfigProvider> //add to root view
    <BasePage>
      <Button/>
    </BasePage>
  </ConfigProvider>
 

Documentation

The document is being written, please refer to the example source code.

Translation project

Screenshots

Components

Theme

Label

Button

Checkbox

Input

Select

Stepper

SearchInput

Badge

Popover

NavigationBar

ListRow

Carousel

Projector

SegmentedBar

SegmentedView

TabView

TransformView

AlbumView

Wheel

Overlay

Toast

ActionSheet

ActionPopover

PullPicker

PopoverPicker

Menu

Drawer

ModalIndicator

License

MIT