From c2a9f3c410cd38556a836a57a56ffe26601e0e6b Mon Sep 17 00:00:00 2001 From: feyy Date: Fri, 3 Mar 2017 16:22:22 +0800 Subject: [PATCH] feat(Button): add Button Component --- README.md | 4 +- components/Button/.npmignore | 3 + components/Button/Button.js | 128 ++++++++++++++ components/Button/ButtonInfo.js | 52 ++++++ components/Button/ButtonStyle.js | 144 ++++++++++++++++ components/Button/LICENSE | 21 +++ components/Button/README.md | 90 ++++++++++ components/Button/__tests__/Button.test.js | 72 ++++++++ components/Button/example/index.js | 156 ++++++++++++++++++ components/Button/judge.js | 8 + components/Button/package.json | 24 +++ components/DatePicker/README.md | 6 +- .../__tests__/{test.js => Drawer.test.js} | 2 +- .../__tests__/{test.js => Grading.test.js} | 0 .../{test.js.snap => Grading.test.js.snap} | 0 .../{test.js => LabelSelect.test.js} | 0 ...{test.js.snap => LabelSelect.test.js.snap} | 0 example/Home.js | 66 ++++---- example/HomeStyle.js | 1 + example/config.js | 4 +- index.js | 5 + package.json | 4 +- 22 files changed, 754 insertions(+), 36 deletions(-) create mode 100644 components/Button/.npmignore create mode 100644 components/Button/Button.js create mode 100644 components/Button/ButtonInfo.js create mode 100644 components/Button/ButtonStyle.js create mode 100644 components/Button/LICENSE create mode 100644 components/Button/README.md create mode 100644 components/Button/__tests__/Button.test.js create mode 100644 components/Button/example/index.js create mode 100644 components/Button/judge.js create mode 100644 components/Button/package.json rename components/Drawer/__tests__/{test.js => Drawer.test.js} (98%) rename components/Grading/__tests__/{test.js => Grading.test.js} (100%) rename components/Grading/__tests__/__snapshots__/{test.js.snap => Grading.test.js.snap} (100%) rename components/LabelSelect/__tests__/{test.js => LabelSelect.test.js} (100%) rename components/LabelSelect/__tests__/__snapshots__/{test.js.snap => LabelSelect.test.js.snap} (100%) diff --git a/README.md b/README.md index b160699..ce4e5b7 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ npm install react-native-ui-xg --save ## Usage ```js -import {DatePicker} from 'react-native-ui-xg'; +import {Button, DatePicker, Drawer, Grading, LabelSelect} from 'react-native-ui-xg'; ``` ## Components @@ -20,6 +20,8 @@ import {DatePicker} from 'react-native-ui-xg'; * [Drawer](https://github.com/xgfe/react-native-ui-xg/blob/master/components/Drawer/README.md) * [Grading](https://github.com/xgfe/react-native-ui-xg/blob/master/components/Grading/README.md) * [LabelSelect](https://github.com/xgfe/react-native-ui-xg/blob/master/components/LabelSelect/README.md) +* [Button](https://github.com/xgfe/react-native-ui-xg/blob/master/components/Button/README.md) +* [StyleSheet](https://github.com/xgfe/react-native-ui-xg/blob/master/components/StyleSheet/README.md) ## Example diff --git a/components/Button/.npmignore b/components/Button/.npmignore new file mode 100644 index 0000000..2b72068 --- /dev/null +++ b/components/Button/.npmignore @@ -0,0 +1,3 @@ +example +__tests__ +.* diff --git a/components/Button/Button.js b/components/Button/Button.js new file mode 100644 index 0000000..87e77eb --- /dev/null +++ b/components/Button/Button.js @@ -0,0 +1,128 @@ +import React, {Component} from 'react'; +import { + Text, + TouchableHighlight, + ActivityIndicator, + TouchableNativeFeedback, + View +} from 'react-native'; +import { + ButtonType, + ButtonOuter, + BasicColor +} from './ButtonStyle'; + +import {judgePlatformLevel} from './judge'; + +class Button extends Component { + + constructor(props) { + super(props); + this.state = {}; + this.renderChildren = this._renderChildren.bind(this); + } + + _renderChildren(size, color) { + const { + children = '', + isLoading = false, + disabled = false, + loadingTitle = 'Loading', + active = false + } = this.props; + let childrenNode = []; + if (isLoading) { + let loadingSize = size; + if (loadingSize === 'default') {loadingSize = 'small';} + return + + + {loadingTitle} + + ; + } else { + React.Children.forEach(children, function (item) { + if (React.isValidElement(item)) { + childrenNode.push(item); + } else if (typeof item === 'string' || item === 'number') { + const node = ( + {item} + ); + childrenNode.push(node); + } + }); + return {childrenNode}; + } + } + + render() { + const { + theme = 'default', + type = 'surface', + size = 'default', + disabled = false, + isLoading = false, + disableColor = '', + activeColor = '', + loadingColor = '', + active = false + } = this.props; + let colorConfig = new BasicColor(theme, type, disableColor, activeColor, loadingColor); + let handleProps = (!disabled && !isLoading) ? this.props : null; + + if (!judgePlatformLevel('TouchableNativeFeedback') || disabled || isLoading) { + return ( + + {this._renderChildren(size, colorConfig)} + + ); + } + return ( + + + {this._renderChildren(size, colorConfig)} + + + ); + } +} + +Button.propTypes = { + onPress: React.PropTypes.func.isRequired, + disabled: React.PropTypes.bool, + theme: React.PropTypes.string.isRequired, + size: React.PropTypes.oneOf(['default', 'small', 'large']), + type: React.PropTypes.oneOf(['ghost', 'surface']) +}; + +export default Button; diff --git a/components/Button/ButtonInfo.js b/components/Button/ButtonInfo.js new file mode 100644 index 0000000..194e759 --- /dev/null +++ b/components/Button/ButtonInfo.js @@ -0,0 +1,52 @@ +const BackgroundColors = { + + //背景颜色 + default: '#06C1AE', + orange: '#FF9900', + blue: '#06C1AE', + red: '#EC5330', + gray: '#D2D2D2' +}; + +const ActiveColor = { + orangeActive: '#D66500', + defaultActive: '#049387', + blueActive: '#049387', + redActive: '#C23E1A', + grayActive: '#8E8E8E' +}; + +const DisableColor = { + orangeDisable: '#FFD084', + blueDisable: '#96E4DA', + defaultDisable: '#96E4DA', + redDisable: '#FDC1B5', + grayDisable: '#E5E5E5' +}; + +const FontColors = { + //字体颜色 + fontWhite: '#FFFFFF', + fontBlue: BackgroundColors.blue, //价格，文字链接 + fontGreen: '#6CDB03', //提示信息 + fontOrange: BackgroundColors.orange, //强提示，标签内容 + fontRed: BackgroundColors.red, //警示信息 + fontGraylevel1: '#CCCCCC', //内容不可用，文本框内引导文字 + fontGraylevel2: '#999999', //次要辅助信息 + fontGraylevel3: '#666666', //次要信息 + fontGraylevel4: '#333333' //列表，正文标题 +}; + +//react中的单位是pt pt=px*(3/4) 四舍五入 +const FontSize = { + fontlevel1: 13, + fontlevel2: 17 +}; + +export { + BackgroundColors as BackgroundColors, + FontColors as FontColors, + FontSize as FontSize, + ActiveColor as ActiveColor, + DisableColor as DisableColor +}; diff --git a/components/Button/ButtonStyle.js b/components/Button/ButtonStyle.js new file mode 100644 index 0000000..5b4c398 --- /dev/null +++ b/components/Button/ButtonStyle.js @@ -0,0 +1,144 @@ +import StyleSheet from 'react-native-stylesheet-xg'; +import {BackgroundColors, FontColors, FontSize, ActiveColor, DisableColor} from './ButtonInfo'; +import {Color, RGB, HSL} from 'react-native-colortool'; + +// set The style base +StyleSheet.setBase(360); + +export class BasicColor { + constructor (theme, type, initDisableColor, initActiveColor, initLoadingColor) { + this.theme = theme || ''; + this.type = type || ''; + this._initActiveColor = initActiveColor || ''; + this._initDisableColor = initDisableColor || ''; + this._initLoadingColor = initLoadingColor || ''; + this._themeColor = this.getBasicColor(); + this._typeColor = this.getTypeColor(); + this.themeColor = this._typeColor.themeColor; + this.textColor = this._typeColor.textColor; + } + + colorJoint (color) { + return 'hsla(' + color.h + ', ' + color.s + '%, ' + color.l + '%, ' + color.a + ')'; + } + colorResolve (color) { + let newHSL = HSL.rgbToHsl(Color.format(color)); + return newHSL; + } + getBasicColor () { + let themeMap = ['orange', 'blue', 'red', 'gray', 'default']; + let themeColor; + if (themeMap.indexOf(this.theme) === -1) { + let newColor = HSL.rgbToHsl(Color.format(this.theme)); + let newColorDisable = this.colorJoint(newColor.lighten(0.3)); + let newColorActive = this.colorJoint(newColor.darken(0.3)); + themeColor = this.colorJoint(newColor); + this.getActiveColor(newColorActive); + this.getDisableColor(newColorDisable); + } else { + themeColor = BackgroundColors[this.theme]; + this.getActiveColor(ActiveColor[this.theme + 'Active']); + this.getDisableColor(DisableColor[this.theme + 'Disable']); + } + return themeColor; + } + getActiveColor (color) { + if (this._initActiveColor) { + this.activeColor = this._initActiveColor; + } else {this.activeColor = color;} + if (this.type === 'surface') { + this.activeColorCSS = {backgroundColor: this.activeColor, borderColor: this.activeColor}; + } else if (this.type === 'ghost') { + this.activeColorCSS = {borderColor: this.activeColor}; + this.activeTextColorCSS = {color: this.activeColor}; + } + } + getLoadingColor (color) { + if (this._initLoadingColor) { + this.loadColor = this._initLoadingColor; + } else { + let beforeHSL = this.colorResolve(color); + this.loadColor = this.colorJoint(beforeHSL.darken(0.4)); + } + } + getDisableColor (color) { + if (this._initDisableColor) { + this.disableColor = this._initDisableColor; + } else {this.disableColor = color;} + this.getLoadingColor(this.disableColor); + if (this.type === 'surface') { + this.disableColorCSS = {backgroundColor: this.disableColor, borderColor: this.disableColor}; + } else if (this.type === 'ghost') { + this.disableColorCSS = {borderColor: this.disableColor}; + this.disableTextColorCSS = {color: this.disableColor}; + } + } + getTypeColor () { + let ButtonThemeType; + switch (this.type) { + case 'surface': + ButtonThemeType = StyleSheet.create({ + themeColor: { + backgroundColor: this._themeColor, + borderColor: this._themeColor + }, + textColor: { + color: FontColors.fontWhite + } + }); + return ButtonThemeType; + default: + ButtonThemeType = StyleSheet.create({ + themeColor: { + borderColor: this._themeColor + }, + textColor: { + color: this._themeColor + } + }); + return ButtonThemeType; + } + } +} + + +export let ButtonType = StyleSheet.create({ + default: { + fontSize: FontSize.fontlevel1 + }, + small: { + fontSize: FontSize.fontlevel1 + }, + large: { + fontSize: FontSize.fontlevel2 + } +}); + +export let ButtonOuter = StyleSheet.create({ + btn: { + position: 'absolute', + alignItems: 'center', + justifyContent: 'center' + }, + small: { + borderRadius: 3, + borderWidth: 1, + height: 25, + paddingRight: 12, + paddingLeft: 12 + }, + default: { + borderRadius: 3, + borderWidth: 1, + height: 30, + paddingRight: 12, + paddingLeft: 12 + }, + large: { + borderRadius: 4, + borderWidth: 1, + height: 40, + paddingRight: 20, + paddingLeft: 20 + } +}); diff --git a/components/Button/LICENSE b/components/Button/LICENSE new file mode 100644 index 0000000..73175f9 --- /dev/null +++ b/components/Button/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 鲜果FE + +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. diff --git a/components/Button/README.md b/components/Button/README.md new file mode 100644 index 0000000..ca69d2b --- /dev/null +++ b/components/Button/README.md @@ -0,0 +1,90 @@ +###The React-Native-Buttons + +react native button based on pure JavaScript with good expansibility. + +### Main + +* This component provide 5 theme color for user to chose. +* This component provide 2 type of button for user to chose. +* This component provide the function that user can define their own theme color, we can help them to calculate the disabled color, active color and so on. Also they can define the disabled color and active color by themselves if they like. +* This component provide the ripple effect of the button. And due to lower Android API which do not have this effect, we use highlight as alternative in the consideration of performance. +* This component provide you add as more other components as you can into the button(eg: icon). + +### Example +* API >= 21 + +![image](https://raw.githubusercontent.com/lulutia/images/master/react-native-button/APIhigh.gif) + +* API < 21 + +![image](https://raw.githubusercontent.com/lulutia/images/master/react-native-button/APIlow.gif) + +### How to install + +``` +npm install react-native-buttons --save +``` + +### Properties + +| Prop | Default | Type | Description | +| :------------ |:---------------:| :---------------:| :-----| +| type | 'surface' | `string` | Specify the type of the button, you can chose form 'surface' and 'ghost' | +| size | 'default' | `string` | Specify the size of the button, you can chose from 'small', 'default', 'large' | +| theme | 'default' | `string | color type` | Specify the theme color, you can chose from 'orange', 'blue', 'red', 'gray', 'default'. Or you can define your own color by use the colort type(eg: 'gba(221,106,167,0.8)', '#BA55D3' and so on) | +| isLoading | false | `bool` | Specify the button is on loading status. In this status, the button is disabled | +| loadingTitle | 'Loading' | `string` | Specify the text of loading status. | +| loadingColor| - | `color type` | Specify the loading color, if you do not specify this color, we can calculate it for you based on the theme color | +| selfStyle | - | `style type` | Specify button's style by yourself | +| disableColor | - | `color type` | Specify the disabled color, if you do not specify this color, we can calculate it for you based on the theme color | +| active | false | `bool` | Specify the active status of the button | +| disabled | false | `bool` | Specify the disable status of the button| +| activeColor | - | `color type` | Specify the active color, if you do not specify this color, we can calculate it for you based on the theme color| + +### Method + +see the react native document of TouchableWithoutFeedback. All methods supported by TouchableWithoutFeedback can be used here. + +### Usage + +* you can see and run the example in the app/index.js. + +```js +import React, { Component } from 'react'; +import { + AppRegistry, + StyleSheet, + Text, + View +} from 'react-native'; +import {Button} from 'react-native-buttons'; + +class button extends Component { + _onPressButton () { + console.log('onpress'); + } + render() { + return ( + + + + + ); + } +} + +export default button; + +``` diff --git a/components/Button/__tests__/Button.test.js b/components/Button/__tests__/Button.test.js new file mode 100644 index 0000000..ca31f95 --- /dev/null +++ b/components/Button/__tests__/Button.test.js @@ -0,0 +1,72 @@ +import {jsdom} from 'jsdom'; +global.document = jsdom(''); +global.window = document.defaultView; +import React, {Component, propTypes} from 'react'; +import { + Platform, + View, + Text, + ActivityIndicator, + TouchableHighlight, + TouchableNativeFeedback +} from 'react-native'; +import {shallow, mount} from 'enzyme'; +import Button from '../Button'; + +describe('TEST PROPS', () => { + it('check the props', () => { + const wrapper = shallow(); + expect(wrapper.props().type).toEqual('surface'); + expect(wrapper.props().size).toEqual('small'); + expect(wrapper.props().theme).toEqual('orange'); + }); + + it('check loading', () => { + const wrapper1 = shallow( + + ); + expect(wrapper1.props().loadingTitle).toEqual('正在加载'); + expect(wrapper1.props().isLoading).toEqual(true); + expect(wrapper1.find(ActivityIndicator).props().size).toEqual('small'); + }); + + it('check active', () => { + Platform.Version = 20; + const wrapper2 = shallow( + + ); + expect(wrapper2.find(TouchableHighlight).props().disabled).toEqual(false); + expect(wrapper2.find(TouchableNativeFeedback).length).toEqual(0); + }); + + it('check platform', () => { + Platform.Version = 23; + TouchableNativeFeedback.Ripple = function(){}; + const wrapper3 = shallow( + + ); + + // TODO + // expect(wrapper3.find(TouchableHighlight).length).toEqual(0); + // expect(wrapper3.find(TouchableNativeFeedback).length).toEqual(1); + }); +}); diff --git a/components/Button/example/index.js b/components/Button/example/index.js new file mode 100644 index 0000000..d1a8041 --- /dev/null +++ b/components/Button/example/index.js @@ -0,0 +1,156 @@ +import React, {Component} from 'react'; +import { + View, + Text +} from 'react-native'; +import Button from '../Button'; + +// data + +class button extends Component { + _onPressButton () { + console.log('onpress'); + } + render() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + ); + } +} + +export default button; diff --git a/components/Button/judge.js b/components/Button/judge.js new file mode 100644 index 0000000..318ab78 --- /dev/null +++ b/components/Button/judge.js @@ -0,0 +1,8 @@ +import {Platform} from 'react-native'; + +export function judgePlatformLevel(module) { + const level = Platform.Version; + if (module === 'TouchableNativeFeedback') { + return level >= 21; + } +} diff --git a/components/Button/package.json b/components/Button/package.json new file mode 100644 index 0000000..dfa6bae --- /dev/null +++ b/components/Button/package.json @@ -0,0 +1,24 @@ +{ + "name": "react-native-buttons", + "version": "0.0.4", + "description": "react native button for android.", + "main": "Button.js", + "repository": { + "type": "git", + "url": "git+https://github.com/xgfe/react-native-ui-xg.git" + }, + "keywords": [ + "react-native", + "Button" + ], + "author": "xgfe", + "license": "MIT", + "bugs": { + "url": "https://github.com/xgfe/react-native-ui-xg/issues" + }, + "homepage": "https://github.com/xgfe/react-native-datepicker/components/Button#readme", + "dependencies": { + "react-native-stylesheet-xg": "^1.0.3", + "react-native-colortool": "^0.0.1" + } +} diff --git a/components/DatePicker/README.md b/components/DatePicker/README.md index 8d38110..9bf42e0 100644 --- a/components/DatePicker/README.md +++ b/components/DatePicker/README.md @@ -1,4 +1,4 @@ -# react-native-datepicker [![Build Status](https://travis-ci.org/xgfe/react-native-datepicker.svg?branch=master)](https://travis-ci.org/xgfe/react-native-datepicker) [![Coverage Status](https://coveralls.io/repos/github/xgfe/react-native-datepicker/badge.svg?branch=master)](https://coveralls.io/github/xgfe/react-native-datepicker?branch=master) +# react-native-datepicker react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS ## Install @@ -10,7 +10,7 @@ npm install react-native-ui-xg --save ``` ## Example -Check [index.android.js](https://github.com/xgfe/react-native-datepicker/blob/master/index.android.js) in the Example. +Check [index.js](https://github.com/xgfe/react-native-ui-xg/blob/master/components/DatePicker/example/index.js) in the Example. ![android](http://xgfe.github.io/react-native-datepicker/img/react-native-datepicker-android.gif) ![ios](http://xgfe.github.io/react-native-datepicker/img/react-native-datepicker-ios.gif) @@ -61,7 +61,7 @@ export default class MyDatePicker extends Component { } ``` -You can check [index.js](https://github.com/xgfe/react-native-datepicker/blob/master/index.android.js) in the Example for detail. +You can check [index.js](https://github.com/xgfe/react-native-ui-xg/blob/master/components/DatePicker/example/index.js) in the Example for detail. ## Properties diff --git a/components/Drawer/__tests__/test.js b/components/Drawer/__tests__/Drawer.test.js similarity index 98% rename from components/Drawer/__tests__/test.js rename to components/Drawer/__tests__/Drawer.test.js index aa2ef8d..a41772b 100644 --- a/components/Drawer/__tests__/test.js +++ b/components/Drawer/__tests__/Drawer.test.js @@ -13,7 +13,7 @@ import Drawer from '../index'; var {width, height, scale} = Dimensions.get('window'); -var drawerContent = ( +var drawerContent = shallow( test diff --git a/components/Grading/__tests__/test.js b/components/Grading/__tests__/Grading.test.js similarity index 100% rename from components/Grading/__tests__/test.js rename to components/Grading/__tests__/Grading.test.js diff --git a/components/Grading/__tests__/__snapshots__/test.js.snap b/components/Grading/__tests__/__snapshots__/Grading.test.js.snap similarity index 100% rename from components/Grading/__tests__/__snapshots__/test.js.snap rename to components/Grading/__tests__/__snapshots__/Grading.test.js.snap diff --git a/components/LabelSelect/__tests__/test.js b/components/LabelSelect/__tests__/LabelSelect.test.js similarity index 100% rename from components/LabelSelect/__tests__/test.js rename to components/LabelSelect/__tests__/LabelSelect.test.js diff --git a/components/LabelSelect/__tests__/__snapshots__/test.js.snap b/components/LabelSelect/__tests__/__snapshots__/LabelSelect.test.js.snap similarity index 100% rename from components/LabelSelect/__tests__/__snapshots__/test.js.snap rename to components/LabelSelect/__tests__/__snapshots__/LabelSelect.test.js.snap diff --git a/example/Home.js b/example/Home.js index ff4db37..7837142 100644 --- a/example/Home.js +++ b/example/Home.js @@ -5,7 +5,9 @@ import { ScrollView, TouchableHighlight, Image, - Navigator + Navigator, + StatusBar, + Platform } from 'react-native'; import CustomNavigationBarStyles from './CustomNavigationBarStyles'; import styles from './HomeStyle'; @@ -55,34 +57,40 @@ export default class reactNativeUiXg extends Component { render() { return ( - { - return ( - - Back - - ); - }, - RightButton: (route, navigator, index, navState) => {}, - Title: (route, navigator, index, navState) => { - return ( - - {this.state.title} - - ); - } - }} - style={styles.navigationBar} - /> - } - /> + + + { + return ( + + Back + + ); + }, + RightButton: (route, navigator, index, navState) => {}, + Title: (route, navigator, index, navState) => { + return ( + + {this.state.title} + + ); + } + }} + style={styles.navigationBar} + /> + } + /> + ); } } diff --git a/example/HomeStyle.js b/example/HomeStyle.js index 95567b5..26a1a59 100644 --- a/example/HomeStyle.js +++ b/example/HomeStyle.js @@ -30,6 +30,7 @@ const styles = StyleSheet.create({ color: '#333' }, sceneStyle: { + flex: 1, marginTop: 44 }, title: { diff --git a/example/config.js b/example/config.js index 4ac2f80..94be0f3 100644 --- a/example/config.js +++ b/example/config.js @@ -2,12 +2,14 @@ import DatePicker from '../components/DatePicker/example'; import Drawer from '../components/Drawer/example'; import LabelSelect from '../components/LabelSelect/example'; import Grading from '../components/Grading/example'; +import Button from '../components/Button/example'; const listData = { DatePicker, Drawer, Grading, - LabelSelect + LabelSelect, + Button }; export default listData; diff --git a/index.js b/index.js index 2a1ef02..c440379 100644 --- a/index.js +++ b/index.js @@ -1,2 +1,7 @@ export {default as DatePicker} from 'react-native-datepicker'; +export {default as Button} from 'react-native-buttons'; +export {default as Drawer} from 'react-native-drawer-menu'; +export {default as Grading} from 'react-native-grading'; +export {default as LabelSelect} from 'react-native-label-select'; +export {default as StyleSheet} from 'react-native-stylesheet-xg'; diff --git a/package.json b/package.json index 14fda5e..a389d63 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,9 @@ "react-native-datepicker": "^1.4.4", "react-native-drawer-menu": "^0.1.0", "react-native-grading": "^1.0.3", - "react-native-label-select": "^1.0.7" + "react-native-label-select": "^1.0.7", + "react-native-buttons": "^0.0.3", + "react-native-stylesheet-xg": "^1.1.0" }, "devDependencies": { "babel-jest": "18.0.0",