npmpackage.info

Gathering detailed insights and metrics for react-native-switch-selector

Other packages similar to react-native-switch-selector

react-native-switch-selector-fix

2.0.4

Switch Selector to React Native.

react-native-multiple-switch

2.0.4

Multiswitch selector for react native

@alejandrocortell/react-native-multiswitch

0.9.11

Multiswitch selector for react native

react-native-multiswitch-selector

1.0.4

switch selector for react-native

Gathering detailed insights and metrics for react-native-switch-selector

react-native-switch-selector - 2.3.0 | npmpackage.info

react-native-switch-selector

Switch Selector for React Native

2.3.0

MIT

JavaScript

228.67 kB

2.9

Installations

npm install react-native-switch-selector

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

16.18.1

NPM Version

8.19.2 Pull Requests

Open

3

Total

12

Closed

3

Merged

6

Issues

Open

11

Total

16

Closed

5

Releases

v2.2.1

Updated on Apr 20, 2022

V2.2.0

v2.2.0

Updated on Mar 15, 2022

2.0.7

v2.0.7

Updated on Aug 18, 2020

2.0.6

Updated on Aug 18, 2020

2.0.5

v2.0.5

Updated on Aug 18, 2020

View All 5 releases

Languages

JavaScript

JavaScript (100%)

Developer

jkdrangel

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

45 Stars

194 Commits

27 Forks

1 Watchers

1 Branches

1 Contributors

Updated on Jun 28, 2025

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

2.3.0

Package Id

react-native-switch-selector@2.3.0

Unpacked Size

228.67 kB

Size

194.35 kB

File Count

NPM Version

8.19.2

Node Version

16.18.1

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

prop-types

Dev Dependencies

@babel/preset-react @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-eslint eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react typescript

SwitchSelector

Switch Selector to React Native.

SwitchSelector

SwitchSelector - Custom Example

SwitchSelector

Installing

1yarn add react-native-switch-selector

1npm i react-native-switch-selector --save

Usage

1import SwitchSelector from "react-native-switch-selector";

1const options = [
2  { label: "01:00", value: "1" },
3  { label: "01:30", value: "1.5" },
4  { label: "02:00", value: "2" }
5];

you can also add testID and accessibilityLabel to each option:

1const options = [
2  { label: "01:00", value: "1", testID: "switch-one", accessibilityLabel: "switch-one" },
3  { label: "01:30", value: "1.5", testID: "switch-one-thirty", accessibilityLabel: "switch-one-thirty" },
4  { label: "02:00", value: "2", testID: "switch-two", accessibilityLabel: "switch-two" }
5];

1<SwitchSelector
2  options={options}
3  initial={0}
4  onPress={value => console.log(`Call onPress with value: ${value}`)}
5/>

Custom Example

1<SwitchSelector
2  initial={0}
3  onPress={value => this.setState({ gender: value })}
4  textColor={colors.purple} //'#7a44cf'
5  selectedColor={colors.white}
6  buttonColor={colors.purple}
7  borderColor={colors.purple}
8  hasPadding
9  options={[
10    { label: "Feminino", value: "f", imageIcon: images.feminino }, //images.feminino = require('./path_to/assets/img/feminino.png')
11    { label: "Masculino", value: "m", imageIcon: images.masculino } //images.masculino = require('./path_to/assets/img/masculino.png')
12  ]}
13  testID="gender-switch-selector"
14  accessibilityLabel="gender-switch-selector"
15/>

Props

Prop	Type	Default	Required	Note
options	array	null	true	Items array to render. Each item has a label and a value and optionals icons
options[].label	string	null	true	Label from each item
options[].value	string	null	true	Value from each item
options[].customIcon	Jsx element ou Function	null	false	Optional custom icon from each item
options[].imageIcon	string	null	false	Source from a image icon form each item. Has the same color then label in render
options[].activeColor	string	null	false	Color from each item when is selected
options[].testID	string	undefined	false	Test ID for each item used for testing (e.g. with Appium)
options[].accessibilityLabel	string	undefined	false	Accessibility Label for each item used for testing (e.g. with Appium)
options[].disabled	boolean	false	false	Disables an item
initial	number	-1	false	Item selected in initial render
value	number	undefined	false	The switch value (will call onPress)
onPress	function	console.log	true	Callback function called after change value.
disableValueChangeOnPress	bool	false	false	Disables the onPress call when the value is manually changed
fontSize	number	null	false	Font size from labels. If null default fontSize of the app is used.
selectedColor	string	'#fff'	false	Color text of the item selected
buttonMargin	number	0	false	Margin of the item selected to component
buttonColor	string	'#BCD635'	false	Color bg of the item selected
textColor	string	'#000'	false	Color text of the not selecteds items
backgroundColor	string	'#ffffff'	false	Color bg of the component
borderColor	string	'#c9c9c9'	false	Border Color of the component
borderRadius	number	50	false	Border Radius of the component
hasPadding	bool	false	false	Indicate if item has padding
animationDuration	number	250	false	Duration of the animation
valuePadding	number	1	false	Size of padding
height	number	40	false	Height of component
bold	bool	false	false	Indicate if text has fontWeight bold
textStyle	object	{}	false	Text style
selectedTextStyle	object	{}	false	Selected text style
textContainerStyle	object	{}	false	Style for text (and icon) container (TouchableOpacity)
selectedTextContainerStyle	object	{}	false	Style for selected text (and icon) container (TouchableOpacity)
imageStyle	object	{}	false	Image style
style	object	{}	false	Container style
returnObject	bool	false	false	Indicate if onPress function return an option instead of option.value
disabled	bool	false	false	Disables the switch
borderWidth	number	1	false	Define border width
testID	string	null	false	Test ID used for testing (e.g. with Appium)
accessibilityLabel	string	null	false	Accessibility Label used for testing (e.g. with Appium)
touchableProps	object	{}	false	Custom props for TouchableOpacity element

Authors

Lucas Santana Carneiro - jkdrangel
Cássio Silva de Sá Santos - ssscassio
Contributors

Contribute

Contributions are always welcome! Create a new Pull Request

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.9

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More