feat: 🎉 Initial release v0.0.1

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["module:metro-react-native-babel-preset"]
+}

.gitignore

@@ -0,0 +1,11 @@
+# Logs
+*.log
+npm-debug.log
+
+# Runtime data
+tmp
+build
+dist
+
+# Dependency directory
+node_modules

.npmignore

@@ -0,0 +1,12 @@
+# Logs
+*.log
+npm-debug.log
+
+# Dependency directory
+node_modules
+
+# Runtime data
+tmp
+
+# Examples (If applicable to your project)
+examples

index.js

@@ -0,0 +1,3 @@
+import RNSwitch from "./src/Switch";
+
+export default RNSwitch;

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "react-native-reanimated-switch",
+  "version": "0.0.1",
+  "description": "A simple reanimated switch for iOS and Android",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "peerDependencies": {
+    "react": "16.x",
+    "react-native": "0.62.x",
+    "react-native-reanimated": "*",
+    "react-native-svg": "*"
+  },
+  "files": [
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/timelessco/react-native-reanimated-switch.git"
+  },
+  "keywords": [
+    "react-native",
+    "react-component",
+    "mobile",
+    "ios",
+    "android",
+    "ui",
+    "reanimated",
+    "switch"
+  ],
+  "author": "Karthik B",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/timelessco/react-native-reanimated-switch/issues"
+  },
+  "homepage": "https://github.com/timelessco/react-native-reanimated-switch#readme",
+  "devDependencies": {
+    "metro-react-native-babel-preset": "^0.60.0",
+    "standard-version": "^9.0.0"
+  }
+}

src/Switch/index.js

@@ -0,0 +1,109 @@
+import PropTypes from "prop-types";
+import React, { useEffect, useState } from "react";
+import { Pressable, StyleSheet } from "react-native";
+import Animated, { interpolateColors, spring } from "react-native-reanimated";
+
+const RNSwitch = ({
+  handleOnPress,
+  activeTrackColor,
+  inActiveTrackColor,
+  thumbColor,
+}) => {
+  const [switchTranslate] = useState(new Animated.Value(0));
+  const [on, setOn] = useState(false);
+  useEffect(() => {
+    if (on) {
+      spring(switchTranslate, {
+        toValue: 21,
+        mass: 1,
+        damping: 15,
+        stiffness: 120,
+        overshootClamping: false,
+        restSpeedThreshold: 0.001,
+        restDisplacementThreshold: 0.001,
+      }).start();
+    } else {
+      spring(switchTranslate, {
+        toValue: 0,
+        mass: 1,
+        damping: 15,
+        stiffness: 120,
+        overshootClamping: false,
+        restSpeedThreshold: 0.001,
+        restDisplacementThreshold: 0.001,
+      }).start();
+    }
+  }, [on, switchTranslate]);
+  const interpolateBackgroundColor = {
+    backgroundColor: interpolateColors(switchTranslate, {
+      inputRange: [0, 22],
+      outputColorRange: [inActiveTrackColor, activeTrackColor],
+    }),
+  };
+  const handlePressAction = () => {
+    handleOnPress(!on);
+    setOn(!on);
+  };
+  return (
+    <Pressable onPress={handlePressAction}>
+      <Animated.View
+        style={[styles.containerStyle, interpolateBackgroundColor]}
+      >
+        <Animated.View
+          style={[
+            styles.circleStyle,
+            { backgroundColor: thumbColor },
+            {
+              transform: [
+                {
+                  translateX: switchTranslate,
+                },
+              ],
+            },
+            styles.shadowValue,
+          ]}
+        />
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  circleStyle: {
+    width: 24,
+    height: 24,
+    borderRadius: 24,
+  },
+  containerStyle: {
+    width: 50,
+    paddingVertical: 2,
+    paddingHorizontal: 2,
+    borderRadius: 36.5,
+  },
+  shadowValue: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.23,
+    shadowRadius: 2.62,
+
+    elevation: 4,
+  },
+});
+
+RNSwitch.propTypes = {
+  handleOnPress: PropTypes.func.isRequired,
+  activeTrackColor: PropTypes.string,
+  inActiveTrackColor: PropTypes.string,
+  thumbColor: PropTypes.string,
+};
+
+RNSwitch.defaultProps = {
+  activeTrackColor: "#007AFF",
+  inActiveTrackColor: "#F2F5F7",
+  thumbColor: "#FFF",
+};
+
+export default RNSwitch;