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