@samcode/react-native-switch v1.0.3

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

Contributing

Pull requests are welcome.