react-native-buttons

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

• API < 21

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.

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 (
      <View style={{marginLeft: 20, marginTop: 20}}>
          <Button
            type="surface"
            size="small"
            theme="orange"
            loadingTitle="正在加载"
            isLoading={true}
            onPress={this._onPressButton}>Small</Button>
          <Button
            selfStyle={{marginLeft: 120}}
            type="ghost"
            size="small"
            theme="blue"
            isLoading={true}
            onPress={this._onPressButton}>Default</Button>
      </View>
      );
  }
}
 
export default button;