react-native-options-button

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

$ yarn add react-native-options-button

Usage

/* @flow */

import React from 'react'
import { View } from 'react-native'
import { OptionsButton } from 'react-native-options-button'

class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <OptionsButton
          items={[
            { title: 'Title 1', id: 0, onPress: () => 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 }}
        />
      </View>
    )
  }
}

export default App

API

OptionsButton API

OptionItem

type OptionItem = {
  title: string,
  id: string | number,
  onPress?: Function
}

Prop	Type	Required
items	Array<OptionItem>	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