Switch Selector for React Native

Overview

SwitchSelector

Switch Selector to React Native.

npm version downloads

SwitchSelector

SwitchSelector

SwitchSelector - Custom Example

SwitchSelector

Installing

yarn add react-native-switch-selector

or

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

Usage

import SwitchSelector from "react-native-switch-selector";
const options = [
  { label: "01:00", value: "1" },
  { label: "01:30", value: "1.5" },
  { label: "02:00", value: "2" }
];

you can also add testID and accessibilityLabel to each option:

const options = [
  { label: "01:00", value: "1", testID: "switch-one", accessibilityLabel: "switch-one" },
  { label: "01:30", value: "1.5", testID: "switch-one-thirty", accessibilityLabel: "switch-one-thirty" },
  { label: "02:00", value: "2", testID: "switch-two", accessibilityLabel: "switch-two" }
];
<SwitchSelector
  options={options}
  initial={0}
  onPress={value => console.log(`Call onPress with value: ${value}`)}
/>

Custom Example

<SwitchSelector
  initial={0}
  onPress={value => this.setState({ gender: value })}
  textColor={colors.purple} //'#7a44cf'
  selectedColor={colors.white}
  buttonColor={colors.purple}
  borderColor={colors.purple}
  hasPadding
  options={[
    { label: "Feminino", value: "f", imageIcon: images.feminino }, //images.feminino = require('./path_to/assets/img/feminino.png')
    { label: "Masculino", value: "m", imageIcon: images.masculino } //images.masculino = require('./path_to/assets/img/masculino.png')
  ]}
  testID="gender-switch-selector"
  accessibilityLabel="gender-switch-selector"
/>

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

Authors

Contribute

Contributions are always welcome! Create a new Pull Request

Comments
  • Some information

    Some information

    @App2Sales, @jkdrangel : Hello, congratulations for the module. I did this: https://snack.expo.io/ryhqT6aJm I have to do something like this:

    screenshot_20180531-212937

    1. How do I reduce the height of the switch-selector?
    2. To put a bold effect on the text of the switch-selector?
    opened by Angelk90 14
  • Slider Unresponsive on Device

    Slider Unresponsive on Device

    Hi there,

    Tested on Android and iOS.. When tapping the slider to 'toggle' the options, it works as expected on simulator with the animation sliding over to the 'tapped' option.

    But when testing on device.. the toggle is unresponsive and it doesn't slide over. Any ideas on what is causing this?

    Example options:

    const currencyOptions = [ { label: 'USD', value: 'USD' }, { label: 'AUD', value: 'AUD' }, { label: 'CAD', value: 'CAD' }, ];

    Example use of the component: <SwitchSelector buttonColor='#404F5B' options={currencyOptions} initial={0} onPress={value => this.selectItemToBuyToggle(value)}/>

    What's weird is that it works flawlessly on the iOS sim.. Any help would be appreciated

    opened by nikohosn 5
  • No spacing at the top on the button

    No spacing at the top on the button

    Hello firt of all, thank you for this module. It looks great, and smooth. I'm trying to implement this in my app, but the buttons style seems wrong. The margin at the top is always 0, then the selector looks like this : Screenshot_20200121-155106 Do you know why ? :)

    My code:

    
            <SwitchSelector
              initial={1}
              value={appMode}
              options={options}
              onPress={onchangeAppMode}
              height={35}
              hasPadding
              buttonMargin={0}
            />
    
    
    opened by dragma 4
  • Fix: types warning for style and options props

    Fix: types warning for style and options props

    Warning: Failed prop type: Invalid prop style of type array supplied to SwitchSelector, expected object. Warning: Failed prop type: Invalid prop options of type array supplied to SwitchSelector, expected object.

    opened by allandiego 3
  • text string must be rendered within a text component

    text string must be rendered within a text component

    My code doesn't work. Here is the code:

    `<View style={styles.generalViewPart}> <Text style={styles.stepText}>ADIM 1 / 3 <Text style={styles.topTitle}>Lorem ipsum <Text style={styles.topText}>Lorem ipsumLorem ipsum <View style={styles.promoTextView}> <Text style={styles.promoText}>Lorem ipsumLorem ipsumLorem ipsum

                <SwitchSelector
                  initial={0}
                  onPress={value => console.warn('deneme')} //this.setState({ gender: value })
                  textColor={'#7a44cf'} //'#7a44cf'
                  selectedColor={'red'}
                  buttonColor={'blue'}
                  borderColor={'black'}
                  hasPadding
                  options={[
                    { label: "Feminino", value: "f", imageIcon: '' }, 
                    { label: "Masculino", value: "m", imageIcon: '' } 
                  ]}
                />
    

    `

    good first issue Hacktoberfest 
    opened by gunduzcihat 3
  • Adjust Button Styling?

    Adjust Button Styling?

    Hi there, I created a toggle which looks a bit odd in one of the states. When state is 0, it looks just fine, but in state 1 the margin to the border is not kept. grafik

    This is my code:

          <Container style={{height: 40, maxWidth: 120}}>
            <SwitchSelector
              initial={index}
              onPress={value => this.onToggle(value)}
              backgroundColor={"transparent"}
              textColor={colors.white}
              selectedColor={colors.secondary3}
              buttonColor={colors.secondary1}
              borderColor={colors.secondary1}
              hasPadding
              valuePadding={1}
              options={[
                {value: false, customIcon: iconUnlocked},
                {value: true, customIcon: iconLocked}
              ]}/>
          </Container>
    

    The issue also appears whitout the container component around it. Any ideas how to fix this or how this is caused?

    opened by Zukye 3
  • Problems with textColor and selectedColor

    Problems with textColor and selectedColor

    I've styled the text using the attribute textColor="#949494" and selectedColor="#FFF" but only textColor is being displayed with the correct color, It seems that selectedColor="#FFF" is being ignored. Could you help me?

    opened by PauloFilipini 2
  • Warning: componentWillReceiveProps is deprecated in 0.60

    Warning: componentWillReceiveProps is deprecated in 0.60

    Hi there, I am using this component, It's Cool. Working fine with all the React-native version in Android/ IOS. but since last React-native update 0.60 It shows Warning of componentWillReceiveProps is deprecated in 0.60.

    Please take a look. -Thanks

    bug good first issue Hacktoberfest 
    opened by harshdvaid24 2
  • Add check for valid index / value prop documentation / types

    Add check for valid index / value prop documentation / types

    I added a check for invalid index values in toggleItem. Sometimes when re-rendering the switch, I was getting an error because it would try to evaluate using invalid indexes that were being passed to toggleItem.

    opened by is343 2
  • Change value according to state

    Change value according to state

    Hi I did not found a possibility, that the current selected value, can be change without pressing it manually on the screen. Could it be, that there is no way, to change the value according to the current state? I found the state 'selected' and a toogle-fuction in the library-code, but there is no way, to acces this code from outside. Do I miss something? Thank you! Something like:

    <SwitchSelector
        options={options}
        initial={this.state.value}
        value={this.state.value}
        onPress={value => this.toggleButton(value)}
    />
    
    opened by lucaingold 2
  • Bump lodash from 4.17.15 to 4.17.19

    Bump lodash from 4.17.15 to 4.17.19

    Bumps lodash from 4.17.15 to 4.17.19.

    Release notes

    Sourced from lodash's releases.

    4.17.16

    Commits
    Maintainer changes

    This version was pushed to npm by mathias, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump minimist from 1.2.5 to 1.2.6

    Bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • SyntaxError: Support for the experimental syntax 'jsx' isn't currently enabled (154:9)

    SyntaxError: Support for the experimental syntax 'jsx' isn't currently enabled (154:9)

    Have anyone encountered the same problem while importing this package?

    `./node_modules/react-native-switch-selector/index.js
     SyntaxError: C:\Users\HP\Desktop\MSU_Work\Tool2_CPT_JS\Refactored_CPT\frontend\node_modules\react-native-switch-selector\index.js: Support for the experimental syntax 'jsx' isn't currently enabled (154:9):
    
       152 |
       153 |       return (
           |         ^
       155 |           key={index}
       156 |           disabled={disabled}
       157 |           style={[
    
     Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
     If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.`
    
    

    I had these Babel plugins installed in my local node modules but it didn't work, so is it a problem coming along with the package?

    opened by lymine1996 1
  • Bump ajv from 6.12.0 to 6.12.6

    Bump ajv from 6.12.0 to 6.12.6

    Bumps ajv from 6.12.0 to 6.12.6.

    Release notes

    Sourced from ajv's releases.

    v6.12.6

    Fix performance issue of "url" format.

    v6.12.5

    Fix uri scheme validation (@​ChALkeR). Fix boolean schemas with strictKeywords option (#1270)

    v6.12.4

    Fix: coercion of one-item arrays to scalar that should fail validation (failing example).

    v6.12.3

    Pass schema object to processCode function Option for strictNumbers (@​issacgerges, #1128) Fixed vulnerability related to untrusted schemas (CVE-2020-15366)

    v6.12.2

    Removed post-install script

    v6.12.1

    Docs and dependency updates

    Commits
    • fe59143 6.12.6
    • d580d3e Merge pull request #1298 from ajv-validator/fix-url
    • fd36389 fix: regular expression for "url" format
    • 490e34c docs: link to v7-beta branch
    • 9cd93a1 docs: note about v7 in readme
    • 877d286 Merge pull request #1262 from b4h0-c4t/refactor-opt-object-type
    • f1c8e45 6.12.5
    • 764035e Merge branch 'ChALkeR-chalker/fix-comma'
    • 3798160 Merge branch 'chalker/fix-comma' of git://github.com/ChALkeR/ajv into ChALkeR...
    • a3c7eba Merge branch 'refactor-opt-object-type' of github.com:b4h0-c4t/ajv into refac...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Only one is usable per page

    Only one is usable per page

    Hi, I love the work you all did but it seems that only one of these components is usable per page and the other doesn't respond at all. Thanks! Michael

    opened by mikeybellissimo 0
  • Allow change easing animation

    Allow change easing animation

    Great library, very useful for gender selection or if there are more than two options. I patched the library to use Easing.elastic(1) which in my opinion looks much better. It would be nice to have an option to change it.

    opened by Kiura 0
Owner
App2Sales
We are open source because we believe that, just like apps, knowledge empowers people.
App2Sales
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-picker A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sectio

Dan 398 Nov 11, 2022
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-selector A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sect

Peace 354 Dec 26, 2022
React native week selector

react-native-week-selector Usage import { IRangeDateSelectorItem, RangeDateSelector, } from "@phankiet/react-native-week-selector"; <RangeDateSel

Phan Kiet 1 Nov 28, 2021
Animated switch button with fully customizable React Native Component

Installation Add the dependency: npm i @freakycoder/react-native-switch-button Peer Dependencies IMPORTANT! You need install them "@freakycoder/react-

FreakyCoder 17 Oct 9, 2022
A lightweight, fully customizable switch component for React Native

React-Native-Custom-Switch A lightweight, fully customizable switch component for React Native. Installation npm install react-native-custom-switch Us

null 21 Dec 23, 2022
A tiny and simple helper set to make it easy to switch your styles in React Native when switching between light and dark mode. 🌟

A tiny and simple helper set to make it easy to switch your styles in React Native when switching between "light" and "dark" mode

Lewis Yearsley 5 Jan 3, 2023
✨ A React Native Month Switch Components

✨ A React Native Month Switch Components

Simon 7 Jul 31, 2022
✨ A React Native Month Switch Component

✨ A React Native Month Switch Component

SJ Distributor 7 Jul 31, 2022
a universal switch for android and iOS

react-native-switch-pro (2.0 is coming) A universal switch for android and iOS, it could be the best switch for react-native on Github. Preview Featur

PoberWong 277 Nov 20, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

FuYaoDe 3.2k Dec 24, 2022
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

YunJiang.Fang 114 Jul 18, 2022
react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper

react-native-swiper2 react-native-swiper is now active again, so swiper2 will stop maintaining. Changelogs [v2.0.7] correct onPageChange index. https:

Sunny Luo 84 Feb 23, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Shinix 62 Jul 15, 2022
A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handler.

react-native-image-cropview A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handle

Cristian Tomescu 13 Nov 26, 2022
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

Kim Døfler 415 Oct 9, 2022
SVG library for React Native, React Native Web, and plain React web projects.

react-native-svg react-native-svg provides SVG support to React Native on iOS and Android, and a compatibility layer for the web. Check out the demo F

null 6.5k Jan 2, 2023
PicPay Application using React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient and styled-components

React Native - PicPay Aplicação PicPay usando React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient e styl

Osvaldo Kalvaitir Filho 25 Nov 8, 2022
react-native-splashscreen ★358 - A splash screen for react-native

React Native SplashScreen (remobile) A splashscreen for react-native, hide when application loaded Installation npm install @remobile/react-native-spl

YunJiang.Fang 371 Dec 12, 2022
Beautifully crafted off canvas menu components for react native applications. Built on top of react-native's Animated library.

react-native-off-canvas-menu Beautifully crafted off canvas menu components for react native applications. Features - Gesture Support Orientation Comp

Provash Shoumma 412 Dec 12, 2022