Animated Switchs
This npm is to help react native developers animating and customizing switchs for both ios and android devices.
Installation
npm i react-native-animated-switch
Importing
import { DarkmodeSwitch } from "react-native-animated-switch";
Usage example
import React, { useState } from "react";
import { View } from "react-native";
import {
DarkModeSwitch,
GradientSwitch,
SliderSwitch,
SpringSwitch,
Switcher,
YesNoSwitch,
SwitcherFullStrech,
ZeroOneSwitch,
} from "react-native-animated-switch";
export default function App() {
const [isOn, setIsOn] = useState(false);
const onChange = () => {
setIsOn((d) => !d);
};
return (
<View style={styles.container}>
<View style={styles.col}>
<View style={styles.cell}>
<DarkModeSwitch
size={100}
value={isOn}
animationSpeed={"fast"}
elevation={10}
activeColor={"white"}
inActiveColor={"black"}
borderWidth={2}
onChange={() => onChange()}
knobColor={"orange"}
borderColor={"orange"}
/>
<Type name={"DarkModeSwitch "} />
</View>
<View style={styles.cell}>
<Switcher
size={100}
value={isOn}
onChange={onChange}
activeColor={"black"}
inActiveColor={"white"}
borderWidth={2}
animationSpeed={"fast"}
elevation={10}
/>
<Type name={"Switcher"} />
</View>
<View style={styles.cell}>
<ZeroOneSwitch
size={100}
value={isOn}
onChange={() => onChange()}
knobColor={"black"}
borderColor={"black"}
indicatorColor={"white"}
backgroundColor={"white"}
borderWidth={2}
animationSpeed={"fast"}
elevation={10}
/>
<Type name={"ZeroOneSwitch "} />
</View>
<View style={styles.cell}>
<YesNoSwitch
size={100}
value={isOn}
onChange={() => onChange()}
borderColor={"#7e86f7"}
inActiveColor={"gray"}
activeColor={"#7e86f7"}
backgroundColor={"white"}
animationSpeed={"fast"}
elevation={10}
/>
<Type name={"YesNoSwitch"} />
</View>
</View>
<View style={styles.col}>
<View style={styles.cell}>
<SpringSwitch
size={100}
value={isOn}
onChange={() => onChange()}
activeColor={"#11998e"}
inActiveColor={"#cb2d3e"}
/>
<Type name={"SpringSwitch"} />
</View>
<View style={styles.cell}>
<SwitcherFullStrech
size={100}
value={isOn}
onChange={() => onChange()}
activeColor={"white"}
inActiveColor={"black"}
animationSpeed={"fast"}
elevation={10}
/>
<Type name={"SwitcherFullStrech"} />
</View>
<View style={styles.cell}>
<GradientSwitch
size={100}
value={isOn}
onChange={() => onChange()}
animationSpeed={"fast"}
elevation={10}
knobColor={"white"}
fontSize={15}
activeGradientColors={["#38ef7d", "#11998e"]}
inActiveGradientColors={["#777", "#434343"]}
/>
<Type name={"GradientSwitch"} />
</View>
<View style={styles.cell}>
<SliderSwitch
size={100}
value={isOn}
onChange={() => onChange()}
knobColor={"#7e86f7"}
activeColor={"#c31432"}
inActiveColor={"#4286f4"}
animationSpeed={"fast"}
elevation={10}
/>
<Type name={"SliderSwitch"} />
</View>
</View>
</View>
);
}
const Type = ({ name }) => (
<View
style={{
top: 20,
}}
>
<Text>{name}</Text>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
flexDirection: "row",
},
col: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
cell: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
});
Demo
Props Table
Common Props for all switch elements
props |
default |
type |
description |
reqired |
Size |
100 |
number |
size of switch in pixels |
yes |
value |
false |
bool |
state of switch |
yes |
onChange |
null |
func |
onChange funtion for switch |
yes |
animationSpeed |
fast |
fast;medium;slow |
animation speed of transition |
no |
component specific props
DarkModeSwitch
props |
default |
type |
description |
reqired |
inActiveColor |
black |
string(hex color/rgb) |
color when value is false |
no |
activeColor |
white |
string(hex color/rgb) |
color when value is true |
no |
borderColor |
orange |
string(hex color/rgb) |
border color of switch |
no |
borderWidth |
2 |
Number |
border width of switch (make sure its lower then 3) |
no |
knobColor |
orange |
string(hex color/rgb) |
knob color |
yes |
SpringSwitch
props |
default |
type |
description |
reqired |
inActiveColor |
black |
string(hex color/rgb) |
color when value is false |
no |
activeColor |
white |
string(hex color/rgb) |
color when value is true |
no |
Switcher
props |
default |
type |
description |
reqired |
inActiveColor |
black |
string(hex color/rgb) |
color when value is false |
no |
activeColor |
white |
string(hex color/rgb) |
color when value is true |
no |
SwitcherFullStrech
props |
default |
type |
description |
reqired |
inActiveColor |
black |
string(hex color/rgb) |
color when value is false |
no |
activeColor |
white |
string(hex color/rgb) |
color when value is true |
no |
ZeroOneSwitch
props |
default |
type |
description |
reqired |
inActiveColor |
black |
string(hex color/rgb) |
color when value is false |
no |
activeColor |
white |
string(hex color/rgb) |
color when value is true |
no |
borderColor |
orange |
string(hex color/rgb) |
border color of switch |
no |
borderWidth |
2 |
Number |
border width of switch (make sure its lower then 3) |
no |
knobColor |
black |
string(hex color/rgb) |
knob color |
yes |
indicatorColor |
white |
string(hex color/rgb) |
Zero one symbol color |
yes |
GradientSwitch
props |
default |
type |
description |
reqired |
inActiveGradientColors |
["#777", "#434343"] |
Array |
color when value is false |
no |
activeGradientColors |
["#38ef7d", "#11998e"] |
string(hex color/rgb) |
color when value is true |
no |
borderWidth |
2 |
Number |
border width of switch (make sure its lower then 3) |
no |
knobColor |
white |
string(hex color/rgb) |
knob color |
no |
indicatorColor |
orange |
string(hex color/rgb) |
knob color |
no |
YesNOSwitch
props |
default |
type |
description |
reqired |
inActiveGradientColors |
["#777", "#434343"] |
Array |
color when value is false |
no |
activeGradientColors |
["#38ef7d", "#11998e"] |
Array |
color when value is true |
no |
borderColor |
orange |
string(hex color/rgb) |
border color of switch |
no |
borderWidth |
2 |
Number |
border width of switch (make sure its lower then 3) |
no |
knobColor |
white |
string(hex color/rgb) |
knob color |
no |
indicatorColor |
orange |
string(hex color/rgb) |
knob color |
no |