smancebo / react-native-switch

React Native Simple Switch component with icon support

react-native-switch

A simple switch component with icons support.

Dependencies

This library requires react-native-vector-icons,

Example

Installation

npm i @samcode/react-native-switch

or

yarn add @samcode/react-native-switch

Simple Usage

import React, { useState } from 'react'
import Switch from '@samcode/react-native-switch';

const App = () => {
  const [value, setValue] = useState(false);
  return (
    <Switch
      onValueChange={val => setValue(val))}
      value={value}
    />
  )
}

Change Track and thumb color

import React, { useState } from 'react'
import Switch from '@samcode/react-native-switch';

const trackColor = {
  true: 'rgb(74,164,144)',
  false: 'rgb(48,48,52)'
}

const thumbColor = {
  true: 'rgb(251,251,251)',
  false: 'rgb(251,251,251)',
}


const App = () => {
  const [value, setValue] = useState(false);
  return (
    <Switch
      onValueChange={val => setValue(val))}
      value={value}
      trackColor={trackColor}
      thumbColor={thumbColor}
    />
  )
}

Switch Icon

The icon object supports a React component or an object with the following props

{
  iconType: 'Ionicons', // React Native Vector Icon Font
  name: 'ios-lock-closed', // Icon name
  size: 19, //Icon size
  color: '#1c1c1e' // Icon Color
}

Example

import React, { useState } from 'react'
import Switch from '@samcode/react-native-switch';

const trackColor = {
  true: 'rgb(74,164,144)',
  false: 'rgb(48,48,52)'
}

const thumbColor = {
  true: 'rgb(251,251,251)',
  false: 'rgb(251,251,251)',
}

const Icons = {
  true: { iconType: 'Ionicons', name: 'ios-lock-closed', size: 19, color: '#1c1c1e' },
  false: { iconType: 'Ionicons', name: 'ios-lock-open', size: 19, color: '#1c1c1e' }
}


const App = () => {
  const [value, setValue] = useState(false);
  return (
    <Switch
      onValueChange={val => setValue(val))}
      value={value}
      trackColor={trackColor}
      thumbColor={thumbColor}
      icons={Icons}
    />
  )
}

Or using a SVG icon as a React Component

// icons/like.js
import React from 'react';
import Svg, { Path } from 'react-native-svg';
import { Colors } from 'styles';
import { SVGIconProps } from './icon-props';

const LikeIcon = (props) => {
  const {
    color,
    width,
    height,
    fillColor,
  } = props;
  return (
    <Svg
      width={width}
      height={height}
      viewBox="0 0 26 26"
      fill="none"
      {...props}
    >
      <Path
        d="M13 21.233C31.385 9.486 19.27-.027 13 6.416 6.73-.027-5.385 9.485 13 21.233z"
        stroke={color}
        strokeLinecap="round"
        strokeLinejoin="round"
        fill={fillColor}
      />
    </Svg>
  );
}

export default LikeIcon;

import React, { useState } from 'react'
import Switch from '@samcode/react-native-switch';
import LikeIcon from './icons/like';

const trackColor = {
  true: 'rgb(74,164,144)',
  false: 'rgb(48,48,52)'
}

const thumbColor = {
  true: 'rgb(251,251,251)',
  false: 'rgb(251,251,251)',
}

const Icons = {
  true: <LikeIcon />,
  false: { iconType: 'Ionicons', name: 'ios-lock-open', size: 19, color: '#1c1c1e' }
}


const App = () => {
  const [value, setValue] = useState(false);
  return (
    <Switch
      onValueChange={val => setValue(val))}
      value={value}
      trackColor={trackColor}
      thumbColor={thumbColor}
      icons={Icons}
    />
  )
}

Props

Prop	Description	Type	Default
value	The value to be represented	Boolean	false
disabled	Defines if user can interact	Boolean	false
onValueChange	Change value callback	Function	-
icons	The icons to be displayed	Object or Component	-
trackColor	The colors of the track	Object	{true: "rgb(144, 195, 240)", false: "rgb(187, 194, 204)"}
thumbColor	The colors of the thumb	Object	{true: "rgb(52, 149, 235)", false: "rgb(255, 255, 255)"}
disabledThumbColor	The color of the thumb when disabled	String	"#9499AD"
disabledTrackColor	The color of the track when disabled	String	"#BCBFC9"
disabledIconColor	The color of the icon when disabled	String	"#FFFFFF"
animationDuration	The duration of the animation	Number	200
trackHeight	the height of the switch track	Number	26
thumbSize	the size of the switch thumb	Number	26
thumbStyle	thumb style object	Object	26

Contributing

Pull requests are welcome.