README
Animated Switchs
This npm is to help react native developers animating and customizing switchs for both ios and android devices.
props | default | type | description | reqired | ||
---|---|---|---|---|---|---|
Size | 100 | number | size of switch in pixels | yes | ||
value | false | bool | state of switch | yes | ||
handleSwitch | null | func | onChange funtion for switch | yes | ||
darkModeBg | black | string(hex color/rgb) | nightmode color | no | ||
lightModeBg | white | string(hex color/rgb) | day mode color | no | ||
borderColor | orange | string(hex color/rgb) | border color of switch | no | ||
borderWidth | orange | string(hex color/rgb) | border width of switch | no | ||
elevation | 5 | number | to add shadow to switch if needed | no | ||
knobColor | orange | string(hex color/rgb) | knob color | yes | ||
animationSpeed | fast | fast | medium | slow |
animation speed of transition | no |
Demo
Usage example
import React, { useState } from "react";
import { View } from "react-native";
import AnimatedSwitch from "react-native-animated-switch";
export default function App() {
const [isOn, setIsOn] = useState(false);
const handleSwitch = () => {
setIsOn((d) => !d);
};
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<AnimatedSwitch
size={100}
value={isOn}
handleSwitch={handleSwitch}
knobColor={"orange"}
borderColor={"orange"}
lightModeBg={"white"}
darkModeBg={"black"}
borderWidth={2}
animationSpeed={"fast"}
elevation={10}
/>
</View>
);
}