npm

Join us for the "JavaScript Supply Chain Security" tech talk, presented by VP of Security, Adam Baldwin. 6/20 at 10am PT.Sign up here »

react-native-options-button

1.0.0 • Public • Published

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

install

npm i react-native-options-button

Downloadsweekly downloads

8

version

1.0.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability