Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

react-native-options-button

A fully customizable bottom animated options button.

Options button demo

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

You can’t perform that action at this time.