Installations

npm install react-native-switch-selector-fix

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

1

JavaScript

JavaScript (100%)

Developer

chen1zee

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

MIT License

135 Commits

1 Forks

1 Branches

1 Contributors

Updated on Nov 16, 2019

Maintainers

1

View All 1 Contributors

Package Meta Information

Latest Version

2.0.4

Package Id

react-native-switch-selector-fix@2.0.4

Unpacked Size

287.31 kB

Size

208.33 kB

File Count

13

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

5

@typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-react typescript

SwitchSelector

Switch Selector to React Native.

SwitchSelector

SwitchSelector - Custom Example

SwitchSelector

Installing

1yarn add react-native-switch-selector

or

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];

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/>

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
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

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

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.

0

SAST

Determines if the project uses static code analysis.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

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

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

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.7

/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