Fully customizable, Gradient, Outline and Solid Button for React Native.
Installation
Add the dependency:
React Native:
npm i @freakycoder/react-native-buttonPeer Dependencies
IMPORTANT! You need install them.
"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"react-native-androw": "0.0.31",
"react-native-vector-icons": ">= 6.x.x",
"react-native-linear-gradient": ">= 2.5.x",
"react-native-dynamic-vector-icons": ">= x.x.x"
Gradient Button Usage
<Button gradient textColor="white" shadowColor="#ff738b" />Solid Background Usage
<Button
solid
textColor="white"
shadowColor="#ff738b"
backgroundColor="#FFAFBD"
/>Outline Button Usage
<Button
outline
color="#ff738b"
textColor="#ff738b"
borderColor="#ff738b"
/>Configuration - Props
| Property | Type | Default | Description |
|---|---|---|---|
| outline | boolean | true | make the button outline |
| solid | boolean | false | make the button with a solid background and a shadow |
| gradient | boolean | false | make the button with a gradient background and a shadow |
| style | style | style | set your own style |
| text | string | null | set the button's text |
| textColor | color | #757575 | change the button's text color |
| textStyle | style | style | set your own style for the button's style |
| borderWidth | number | 0.3 | change the outline's border width |
| borderColor | color | #757575 | change the outline's border color |
| shadowColor | color | #757575 | change the solid and gradient's shadow color |
| backgroundColor | color | #757575 | change the solid's background color |
ToDos
- [x] LICENSE
- [ ] Expo Version
- [ ] Write an article about the lib on Medium
Author
FreakyCoder, kurayogun@gmail.com
License
React Native Button Library is available under the MIT license. See the LICENSE file for more info.