Package Commit

Author: mmusaib

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 musaib999
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

index.d.ts

@@ -0,0 +1,39 @@
+import {ViewStyle} from 'react-native';
+
+export interface ToggleProps  {
+    
+
+    /**
+    * Color of the switch
+    */
+    color?: string,
+
+     /**
+    * Size of the switch
+    */
+    size?: number,
+
+    /**
+    * Pass a true value if you want to use a filled color switch
+    */
+    filled?: boolean
+
+
+    /**
+    * Color of the circle in switch
+    */
+    circleColor?: string,
+
+   
+    /**
+    * toggle status of the switch
+    */
+    toggle?: boolean
+
+
+     /**
+    * Function to set the status of toggle switch which will be stored in your local state
+    */
+    setToggle: React.Dispatch<React.SetStateAction<undefined>>,
+
+}

index.tsx

@@ -0,0 +1,88 @@
+import React,{JSXElementConstructor} from 'react';
+import {View,StyleSheet,Pressable} from 'react-native';
+
+
+interface ToggleProps  {
+    
+    /**
+    * Color of the switch
+    */
+    color?: string,
+
+     /**
+    * Size of the switch
+    */
+    size?: number,
+
+    /**
+    * Pass a true value if you want to use a filled color switch
+    */
+    filled?: boolean
+
+
+    /**
+    * Color of the circle in switch
+    */
+    circleColor?: string,
+
+   
+    /**
+    * toggle status of the switch
+    */
+    toggle: boolean
+
+
+     /**
+    * Function to set the status of toggle switch which will be stored in your local state
+    */
+    setToggle: React.Dispatch<React.SetStateAction<undefined>>,
+
+}
+
+
+const Toggle: React.FC<ToggleProps> = ({color,size,filled,circleColor,toggle,setToggle}) => {
+    const _color = color ?? "#4C956C";
+    const _circle = circleColor ?? _color;
+    const _filled = filled ?? false;
+    const _size = size ?? 25;
+
+
+    function toggleContainerStyles(){
+        if(!_filled){
+            return [styles(_color,_size,_circle).toggleContainer, (!toggle) ? {borderColor: "#AAAAAA"} : null]
+        }else{
+            return [styles(_color,_size,_circle).toggleContainer,styles(_color,_size,_circle).toggleContainerFilled, (!toggle) ? {backgroundColor: "#AAAAAA", borderColor: "#AAAAAA"} : null]
+        }
+    }
+
+    function toggleCircleStyles(){
+        if(!_filled){
+            return [styles(_color,_size,_circle).circle, (toggle) ? {alignSelf: "flex-end"} : { backgroundColor: "#AAAAAA"}];
+        }else{
+            return [styles(_color,_size,_circle).circle, styles(_color,_size,_circle).circleFilled,  (toggle) ? {alignSelf: "flex-end"} : { backgroundColor: "#FEFEFE"}]
+        }
+    }
+
+    return(
+        <View>
+            <Pressable style={toggleContainerStyles()} onPress={() => setToggle(!toggle)}>
+                <View style={toggleCircleStyles()}></View>
+            </Pressable>
+        </View>
+    )
+
+    
+}
+
+export default Toggle;
+
+
+
+const styles = (color:string, size:number, circleColor:string) => {
+    return StyleSheet.create({
+        toggleContainer: { padding: size/10, width: 2.3*size, borderRadius: size, borderColor: color, borderWidth: 2.5  },
+        toggleContainerFilled: { backgroundColor: color, borderColor: color },
+        circle: { width: size, height: size, borderRadius: size/2, backgroundColor: circleColor },
+        circleFilled: { backgroundColor: circleColor },
+    });
+}

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "react-native-toggle-input",
+  "version": "1.0.0",
+  "description": "Customized toggle button \u001b[D\u001b[Cinput for react native and expo\u001b[D\u001b[D\u001b[C\u001b[C",
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/musaib999/react-native-toggle-input.git"
+  },
+  "keywords": [
+    "toggle",
+    "toggleinput",
+    "easyswitch",
+    "switch",
+    "button",
+    "toggleswitch"
+  ],
+  "author": "Muhammad Musaib",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/musaib999/react-native-toggle-input/issues"
+  },
+  "homepage": "https://github.com/musaib999/react-native-toggle-input#readme"
+}