@vijaykumartaduri/react-native-animated-switch NPM

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

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>
  );
}

react-native-animated-switch animated switch ui

@everything-registry/sub-chunk-984 @zalastax/nolb-_vij

1.0.1

3 years ago