react-native-custom-switches

A library (in construction) with several (not yet) switches options for React Native projects.

Usage no npm install needed!

<script type="module">
  import reactNativeCustomSwitches from 'https://cdn.skypack.dev/react-native-custom-switches';
</script>

README

:snail: React Native Custom Switches

A library (in construction) with several (not yet) switches options for React Native projects.

This lib uses only React Native Animated.

Install

npm install react-native-custom-switches

Usage

Select the switch that you like (see options in 'Available switches'), import and have fun.

Available Switches

Labeled switch

Labeled switch gif

Example:

import React, {useState} from 'react';
import {View, Text} from 'react-native';
import LabeledSwitch from 'react-native-custom-switches/LabeledSwitch';

export default function App() {
  const [state, setState] = useState(false);
  return (
    <View style={{padding: 20, alignItems: 'center'}}>
      <LabeledSwitch
        value={state}
        onChange={setState}
        disabledColor="#f35588"
        enabledColor="#05dfd7"
        disabledLabel="Pink means false"
        enabledLabel="Blue means true"
        width={165}
      />
    </View>
  );
}

Props:

Props Type Default Description
value boolean false state of the switch
onChange function () => {} function to update the value
enabledLabel string Opened label for true value
disabledLabel string Closed label for false value
enabledLabelColor string #fff label color for true value
disabledLabelColor string #fff label color for false value
enabledColor string #00b33 color for true value
disabledColor string #ff3333 color for false value
width number 120 width of the switch
duration number 400 timing to execute animation