rna

react-native-animated-switch

This libreary is to help react native developers animating and customizing switchs for both ios and android devices hope you all enjoy.

Showing:

Popularity

Downloads/wk

35

GitHub Stars

11

Maintenance

Last Commit

2mos ago

Contributors

0

Package

Dependencies

5

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

demo

Props Table

Common Props for all switch elements

propsdefaulttypedescriptionreqired
Size100numbersize of switch in pixelsyes
valuefalseboolstate of switchyes
onChangenullfunconChange funtion for switchyes
animationSpeedfastfast;medium;slowanimation speed of transitionno

component specific props


DarkModeSwitch

propsdefaulttypedescriptionreqired
inActiveColorblackstring(hex color/rgb)color when value is falseno
activeColorwhitestring(hex color/rgb)color when value is trueno
borderColororangestring(hex color/rgb)border color of switchno
borderWidth2Numberborder width of switch (make sure its lower then 3)no
knobColororangestring(hex color/rgb)knob coloryes

SpringSwitch

propsdefaulttypedescriptionreqired
inActiveColorblackstring(hex color/rgb)color when value is falseno
activeColorwhitestring(hex color/rgb)color when value is trueno

Switcher

propsdefaulttypedescriptionreqired
inActiveColorblackstring(hex color/rgb)color when value is falseno
activeColorwhitestring(hex color/rgb)color when value is trueno

SwitcherFullStrech

propsdefaulttypedescriptionreqired
inActiveColorblackstring(hex color/rgb)color when value is falseno
activeColorwhitestring(hex color/rgb)color when value is trueno

ZeroOneSwitch

propsdefaulttypedescriptionreqired
inActiveColorblackstring(hex color/rgb)color when value is falseno
activeColorwhitestring(hex color/rgb)color when value is trueno
borderColororangestring(hex color/rgb)border color of switchno
borderWidth2Numberborder width of switch (make sure its lower then 3)no
knobColorblackstring(hex color/rgb)knob coloryes
indicatorColorwhitestring(hex color/rgb)Zero one symbol coloryes

GradientSwitch

propsdefaulttypedescriptionreqired
inActiveGradientColors["#777", "#434343"]Arraycolor when value is falseno
activeGradientColors["#38ef7d", "#11998e"]string(hex color/rgb)color when value is trueno
borderWidth2Numberborder width of switch (make sure its lower then 3)no
knobColorwhitestring(hex color/rgb)knob colorno
indicatorColororangestring(hex color/rgb)knob colorno

YesNOSwitch

propsdefaulttypedescriptionreqired
inActiveGradientColors["#777", "#434343"]Arraycolor when value is falseno
activeGradientColors["#38ef7d", "#11998e"]Arraycolor when value is trueno
borderColororangestring(hex color/rgb)border color of switchno
borderWidth2Numberborder width of switch (make sure its lower then 3)no
knobColorwhitestring(hex color/rgb)knob colorno
indicatorColororangestring(hex color/rgb)knob colorno

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100