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 |