npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-selectmultiple-button

v0.1.105

Published

A button (or a group buttons) for multiple or radio selection by building with React Native

Downloads

451

Readme

React Native SelectMultiple Button

This library is a button (or a grouped buttons) supporting multiple or radio selection by building with React Native

You can specify any Layout and Style for container view,button view and text through View Style Props, Layout Props and Text Style Props supporting by React Native

Example running in iOS and Andorid(captured by GIPHY CAPTURE)

captured by GIPHY CAPTURE

Note:Runing a Android Virtual Device is TMDing too large memory eated.

Instruction

  • SelectMultipleButton

  • SelectMultipleGroupButton

SelectMultipleButton

You need to set the props selected as true to highlight button's selected status and manage the data selected through event props singleTap(valueTap) by hard coding yourself.

SelectMultipleGroupButton

You needn't to set these settings like SelectMultipleButton, because these features are build in the SelectMultipleGroupButton. What you do is set the event props singleTap(valueTap) to hold the value tap and the event props onSelectedValuesChange(selectedValues) to hold the array of values selected.

Installation

cd your project root direction

$ npm install react-native-selectmultiple-button --save

Usage

code example

App.js

code snap

import { SelectMultipleButton, SelectMultipleGroupButton } from 'react-native-selectmultiple-button'

<SelectMultipleButton

buttonViewStyle={{

borderRadius: 10,

height: 40

}}

textStyle={{

fontSize: 15,

}}

highLightStyle={{

borderColor: 'gray',

backgroundColor: 'transparent',

textColor: 'gray',

borderTintColor: ios_blue,

backgroundTintColor: ios_blue,

textTintColor: 'white',

}}

multiple={true}

value={interest}

selected={this.state.multipleSelectedData.includes(interest)}

singleTap={(valueTap) => this._singleTapMultipleSelectedButtons(interest)} />

<SelectMultipleGroupButton

containerViewStyle={{

justifyContent: 'flex-start'

}}

highLightStyle={{

borderColor: 'gray',

backgroundColor: 'transparent',

textColor: 'gray',

borderTintColor: ios_blue,

backgroundTintColor: 'transparent',

textTintColor: ios_blue,

}}

onSelectedValuesChange={(selectedValues) => this._groupButtonOnSelectedValuesChange(selectedValues)}

group={multipleGroupData} />

Props

SelectMultipleButton

|props |type |required |desc | |--|--|--|--| |selected |bool |no |Default is false. The selected prop determines whether the button is selected and highlighted | |value |one of types(string,number) |yes |Your business key | |displayValue |one of types(string,number) |no |Default is == value prop if not set displayValue prop. Displayed as button's text | |singleTap |function(valueTap) |no |Handler to be called when the user taps the button. The button's props value is passed as an argument to the callback hanlder |


highLightStyle

Normal or highlighted style, the style object {} contains the following keys.

  • borderColor: PropTypes.string.isRequired---Normal color of button border.

  • backgroundColor: PropTypes.string.isRequired---Normal color of button backgroud.

  • textColor: PropTypes.string.isRequired---Normal color of text.

  • borderTintColor: PropTypes.string.isRequired---Highlighted color of button border.

  • backgroundTintColor: PropTypes.string.isRequired---Highlighted color of button background.

  • textTintColor: PropTypes.string.isRequired--Highlighted color of text.

Default style is

{

borderColor: 'gray',

backgroundColor: 'transparent',

textColor: 'gray',

borderTintColor: ios_blue,

backgroundTintColor: 'transparent',

textTintColor: ios_blue,

}


buttonViewStyle

Sytle of button view. You can specify any View Style Props.

Default style is

{

margin: 5,

borderRadius: 3,

alignItems: 'center',

justifyContent: 'center',

borderWidth: 1

}


textStyle

Style of text. You can specify any Text Style Props

Default style is

{

textAlign: 'center',

marginTop: 5,

marginBottom: 5,

marginLeft: 10,

marginRight: 10,

}

SelectMultipleGroupButton

|props |type |required |desc | |--|--|--|--| |multiple |bool |no |Default is true. The multiple prop determines the grouped buttons are multiple or radio selected | |defaultSelectedIndexes |array |no |The indexes array in group of the grouped buttons to be default selected and highlighted | |maximumNumberSelected |number |no |Specifies maximum number for selecting buttons, and its smallest value is 2. Only enabled for multiple prop is set true | |group |array of {value,displayValue} |yes |Just a plain array, value and displayValue props are akin to value and displayValue props of SelectMultipleButton. | |singleTap |function(valueTap) |no |Handler to be called when the user taps the button. The button's props value is passed as an argument to the callback hanlder. | |onSelectedValuesChange |function(selectedValues) |no |Handler to be called when the user taps the button.the array of selected values is passed as an argument to the callback hanlder. |


highLightStyle

Normal or highlighted style, akin to highLightStyle of SelectMultipleButton.


buttonViewStyle

Sytle of button view, akin to buttonViewStyle of SelectMultipleButton.


textStyle

Sytle of text, akin to textStyle of SelectMultipleButton.


containerViewStyle

Sytle of the grouped buttons container view. You can specify any View Style Props and Layout Props.

Default View Style and Layout props is

{

flexWrap: 'wrap',

flexDirection: 'row',

justifyContent: 'center'

}

License

react-native-selectmultiple-button is MIT Licensed.