: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

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 |