https://github.com/apsl/react-native-options-button
A bottom animated options button
https://github.com/apsl/react-native-options-button
bottom button react-component react-native
Last synced: 4 months ago
JSON representation
A bottom animated options button
- Host: GitHub
- URL: https://github.com/apsl/react-native-options-button
- Owner: APSL
- License: mit
- Created: 2017-05-26T12:51:07.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-09-13T14:39:41.000Z (almost 8 years ago)
- Last Synced: 2025-06-21T07:17:34.029Z (about 1 year ago)
- Topics: bottom, button, react-component, react-native
- Language: JavaScript
- Size: 140 KB
- Stars: 9
- Watchers: 10
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-options-button
A fully customizable bottom animated options button.
## Motivation
With bigger screens, actions should be moved to the bottom of the screen in order to be more accessible.
## Installation
```sh
$ yarn add react-native-options-button
```
## Usage
```js
/* @flow */
import React from 'react'
import { View } from 'react-native'
import { OptionsButton } from 'react-native-options-button'
class App extends React.Component {
render() {
return (
null },
{ title: 'Title 2', id: 1, onPress: () => null },
{ title: 'Title 3', id: 2, onPress: () => null },
{ title: 'Title 4', id: 3, onPress: () => null },
{ title: 'Title 5', id: 4, onPress: () => null },
{ title: 'Title 6', id: '5', onPress: () => null }
]}
title="Menu"
openTitle="Close"
onPress={(i, z) => console.log(i, z)}
buttonStyle={{ borderRadius: 0 }}
optionsStyle={{ borderRadius: 8 }}
buttonTextStyle={{ color: 'white' }}
containerStyle={{ bottom: 15 }}
/>
)
}
}
export default App
```
## API
### `OptionsButton` API
#### `OptionItem`
```js
type OptionItem = {
title: string,
id: string | number,
onPress?: Function
}
```
| Prop | Type | Required |
| ------------- |:-------------:| ---------:|
| `items` | `Array` | Yes |
| `title` | `string` | Yes |
| `openTitle` | `string` | Yes |
| `onPress` | `Function` | |
| `color` | `string` | |
| `openedColor` | `string` | |
| `isLoading` | `boolean` | |
| `containerStyle` | `any` | |
| `buttonStyle` | `any` | |
| `buttonTextStyle` | `any` | |
| `optionsStyle`| `any` | |
| `optionTextStyle` | `any` | |
| `separatorStyle` | `any` | |
## License
MIT.
## Author
Álvaro Medina Ballester `amedina at apsl dot net`