react-native-flat-button
Flat button component for react-native
Installation
npm i react-native-flat-button --save
API
| Prop | Type | Default | Description |
|---|---|---|---|
type | string(required) | - | Type of button. Use predefined types: 'primary', 'neutral', 'warn', 'positive', 'negative', 'info' or use 'custom' |
backgroundColor | string | '#34495e' | Sets button's background color. |
borderColor | string | '#2c3e50' | Sets button's border color. |
borderRadius | number | 8 | Sets button's border radius. |
shadowHeight | number | 4 | Sets button's border shadow. |
borderLeftWidth | number | 0.5 | Sets button's border left shadow. |
borderRightWidth | number | 0.5 | Sets button's border right shadow. |
activeOpacity | number | 0.9 | Sets button's onpressing transparency. (It should be between 0 to 1) |
containerStyle | View.propTypes.style | {justifyContent: 'center',alignItems: 'center'} | Sets button's style (Same as TouchableOpacity) |
contentStyle | Text.propTypes.style | {color: 'white',fontSize: 18,fontWeight: 'bold'} | Sets button's text style (Same as Text) |
Example
import React, { Component } from 'react' import { Alert, AppRegistry, StyleSheet, Text, View, } from 'react-native' import Button from 'react-native-flat-button' class Example extends Component { render() { return ( <View style={styles.container}> <Text style={{ fontSize: 20, fontWeight: 'bold' }}> Pre-Defined Buttons </Text> <Button type="primary" onPress={() => Alert.alert('Primary Button')} containerStyle={styles.buttonContainer} > Primary Button </Button> <Button type="positive" onPress={() => Alert.alert('Positive Button')} containerStyle={styles.buttonContainer} > Positive Button </Button> <Button type="negative" onPress={() => Alert.alert('Negative Button')} containerStyle={styles.buttonContainer} > Negative Button </Button> <Button type="neutral" onPress={() => Alert.alert('Neutral Button')} containerStyle={styles.buttonContainer} > Neutral Button </Button> <Button type="warn" onPress={() => Alert.alert('Warn Button')} containerStyle={styles.buttonContainer} > Warn Button </Button> <Button type="info" onPress={() => Alert.alert('Info Button')} containerStyle={styles.buttonContainer} > Info Button </Button> <Text style={{ fontSize: 20, fontWeight: 'bold' }}> Custom Buttons </Text> <Button type="custom" onPress={() => Alert.alert('Custom Button #1')} backgroundColor={"#1abc9c"} borderColor={"#16a085"} borderRadius={10} shadowHeight={5} containerStyle={styles.buttonContainer} contentStyle={styles.content} > Custom Button </Button> <Button type="custom" onPress={() => Alert.alert('Custom Button #2')} backgroundColor={"#9b59b6"} borderColor={"#8e44ad"} borderRadius={6} shadowHeight={8} activeOpacity={0.5} containerStyle={styles.buttonContainer} contentStyle={{ fontSize: 22, fontWeight: '900' }} > Custom Button </Button> </View> ) } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, buttonContainer: { width: 200, height: 50, marginVertical: 5 }, content:{ fontSize: 22 } }) AppRegistry.registerComponent('Example', () => Example)
