Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/melihmucuk/react-native-flat-button
Flat button component for react-native
https://github.com/melihmucuk/react-native-flat-button
android button flat ios react-native
Last synced: about 1 month ago
JSON representation
Flat button component for react-native
- Host: GitHub
- URL: https://github.com/melihmucuk/react-native-flat-button
- Owner: melihmucuk
- License: mit
- Created: 2016-09-08T20:46:15.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-18T11:29:17.000Z (over 6 years ago)
- Last Synced: 2024-11-18T18:00:06.268Z (about 2 months ago)
- Topics: android, button, flat, ios, react-native
- Language: JavaScript
- Size: 14.6 KB
- Stars: 27
- Watchers: 4
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-flat-button
[](https://badge.fury.io/js/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
```javascript
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 (
Pre-Defined Buttons
Alert.alert('Primary Button')}
containerStyle={styles.buttonContainer}
>
Primary Button
Alert.alert('Positive Button')}
containerStyle={styles.buttonContainer}
>
Positive Button
Alert.alert('Negative Button')}
containerStyle={styles.buttonContainer}
>
Negative Button
Alert.alert('Neutral Button')}
containerStyle={styles.buttonContainer}
>
Neutral Button
Alert.alert('Warn Button')}
containerStyle={styles.buttonContainer}
>
Warn Button
Alert.alert('Info Button')}
containerStyle={styles.buttonContainer}
>
Info Button
Custom Buttons
Alert.alert('Custom Button #1')}
backgroundColor={"#1abc9c"}
borderColor={"#16a085"}
borderRadius={10}
shadowHeight={5}
containerStyle={styles.buttonContainer}
contentStyle={styles.content}
>
Custom Button
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
)
}
}
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)
```