https://github.com/bjonamu/react-native-btns
React native buttons for real world apps. Easy to setup, configure and use.
https://github.com/bjonamu/react-native-btns
buttons react-native react-native-btns react-native-buttons
Last synced: about 1 month ago
JSON representation
React native buttons for real world apps. Easy to setup, configure and use.
- Host: GitHub
- URL: https://github.com/bjonamu/react-native-btns
- Owner: bjonamu
- License: mit
- Created: 2017-09-14T08:06:59.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-18T08:03:50.000Z (over 8 years ago)
- Last Synced: 2025-10-24T03:32:56.782Z (5 months ago)
- Topics: buttons, react-native, react-native-btns, react-native-buttons
- Language: JavaScript
- Homepage:
- Size: 8.79 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-btns
React native buttons for real world apps. Easy to setup, configure and use.
[](https://postimg.org/image/t60ihg6f9/)
## Installation
```bash
npm install react-native-btns --save
```
or
```bash
yarn add react-native-btns
```
## Usage
```js
import { LinkButton, IconButton, SuperButton, FooterButton } from 'react-native-btns'
```
### LinkButton
```js
this.doSomethingUseful()}
/>
```
#### LinkButton props
| Props | Default values | Possible values |
| ---------------------- | -------------- | ------------------------------------------ |
| label | Link button | **any string** |
| labelStyle | | **style object** |
| uppercase | false | Boolean |
| leftIcon | **none** | Icon element e.g react-native-vector-icons |
| rightIcon | **none** | Icon element e.g react-native-vector-icons |
| active | false | Boolean |
| disabled | false | Boolean |
| activityIndicatorColor | white | Color string (hex or rbg/a) |
| onPress | **none** | function |
### IconButton
```js
}
backgroundColor='#F70044'
onPress={() => this.doSomethingUseful()}
/>
```
#### IconButton props
| Props | Default values | Possible values |
| ---------------------- | -------------- | --------------------------- |
| size | 50 | Integer |
| round | false | Boolean |
| active | false | Boolean |
| disabled | false | Boolean |
| activityIndicatorColor | white | Color string (hex or rbg/a) |
| borderColor | **none** | Color string (hex or rbg/a) |
| onPress | **none** | function |
### SuperButton
```js
this.doSomethingUseful()}
/>
```
#### SuperButton props
| Props | Default values | Possible values |
| ---------------------- | -------------- | ------------------------------------------ |
| size | 'normal' | enum 'tiny', 'normal', 'large' |
| label | Link button | **any string** |
| labelStyle | | **style object** |
| uppercase | false | Boolean |
| leftIcon | **none** | Icon element e.g react-native-vector-icons |
| rightIcon | **none** | Icon element e.g react-native-vector-icons |
| round | false | Boolean |
| softCorners | false | Boolean |
| active | false | Boolean |
| disabled | false | Boolean |
| backgroundColor | transparent | Color string (hex or rbg/a) |
| activityIndicatorColor | white | Color string (hex or rbg/a) |
| borderColor | transparent | Color string (hex or rbg/a) |
| borderWidth | 0 | Number |
| onPress | **none** | function |
### FooterButton
```js
}
onPress={() => this.doSomethingUseful()}
/>
```
#### FooterButton props
| Props | Default values | Possible values |
| ---------------------- | -------------- | ------------------------------------------ |
| size | 'normal' | enum 'tiny', 'normal', 'large' |
| label | Link button | **any string** |
| labelStyle | | **style object** |
| uppercase | false | Boolean |
| leftIcon | **none** | Icon element e.g react-native-vector-icons |
| rightIcon | **none** | Icon element e.g react-native-vector-icons |
| active | false | Boolean |
| disabled | false | Boolean |
| backgroundColor | transparent | Color string (hex or rbg/a) |
| activityIndicatorColor | white | Color string (hex or rbg/a) |
| onPress | **none** | function |
TODO
* ADD: disabledColor prop
* ADD: elevation prop