1.0.6 • Published 6 years ago
react-native-flat-button v1.0.6
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)