react-native-switch-with-drag-touch-and-loader

Switch component in react native with behavious like touch, drag & loading for api or any side effect

Installation

yarn add react-native-switch-with-drag-touch-and-loader

Usage

import * as React from "react";
import { StyleSheet, Text, Platform, View } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import SwitchWithTouchAndDrag from "react-native-switch-with-drag-touch-and-loader";

export default function App() {
	const [showLoading, setShowLoading] = React.useState<boolean>(false);
	const [switchStateWithLoader, setSwitchStateWithLoader] = React.useState<
		"right" | "left"
	>("left");
	const [switchStateNormal, setSwitchStateNormal] = React.useState<
		"right" | "left"
	>("right");
	const anyAsyncWork = (state: any) =>
		new Promise((resolve, reject) => {
			console.log(state, "promise");
			if (state === "right" || state === "left") {
				setTimeout(() => {
					if (switchStateNormal === "left") {
						reject("Done");
						if (Platform.OS === "web") {
						} else {
							require("react-native").ToastAndroid.show("LOADING FAILED", 1000);
						}
					} else {
						if (Platform.OS === "web") {
						} else {
							require("react-native").ToastAndroid.show(
								"LOADING SUCCESS",
								1000
							);
						}
						resolve("Done");
					}
				}, 500);
			} else {
				reject("");
			}
		});

	return (
		<GestureHandlerRootView style={styles.containerStyle}>
			<Text>
				{
					"switchChangeCallback always tells about the next state\nFor loading switch you will have control for switch state\n\n"
				}
			</Text>

			<Text style={{ fontSize: 16, fontWeight: "bold" }}>NORMAL SWITCH</Text>
			<Text style={{ fontSize: 12, textAlign: "center" }}>
				In this switch you have to provide switchType as normal and switchState
				is internally handled and provided in switchChangeCallback
			</Text>
			<View style={{ marginTop: 10 }} />
			<View style={{ flexDirection: "row", alignItems: "center" }}>
				<Text>{"LOADING SUCCESS"}</Text>
				<View style={{ marginLeft: 10 }} />
				<SwitchWithTouchAndDrag
					switchBackgroundColor={
						switchStateNormal === "right" ? "#22733D" : "rgba(0, 0, 0,0.3);"
					}
					switchBorderColor={"rgba(255, 255, 255, 0.4)"}
					pieceBackgroundColor="#FFFFFF"
					switchBorderWidth={2}
					pieceWidth={35}
					pieceHeight={35}
					switchHeight={35}
					switchWidth={80}
					switchBorderRadius={30}
					initialSwitchState={"right"}
					switchType={"normal"}
					switchChangeCallback={(state: "right" | "left") => {
						setSwitchStateNormal(state);
					}}
				/>
			</View>
			<View style={{ marginTop: 20 }} />
			<Text style={{ fontSize: 16, fontWeight: "bold" }}>
				SWITCH WITH LOADING
			</Text>
			<Text style={{ fontSize: 12 }}>
				In this switch you have to provide switchType as loading and switchState
				will always depend on outside switch state
			</Text>
			<View style={{ marginTop: 5 }} />
			<View style={{ flexDirection: "row" }}>
				<SwitchWithTouchAndDrag
					switchBackgroundColor={
						switchStateWithLoader === "right" ? "#50C878" : "rgba(0, 0, 0,0.4)"
					}
					switchBorderColor={"rgba(255, 255, 255, 0.4)"}
					pieceBackgroundColor={"#FFFFFF"}
					switchBorderWidth={2}
					pieceWidth={37}
					pieceHeight={40}
					switchHeight={41}
					switchWidth={90}
					switchBorderRadius={50}
					initialSwitchState={"right"}
					activityIndicatorColor={"rgba(0, 0, 0,0.8)"}
					switchType={"loading"}
					switchChangeCallback={(state: "right" | "left") => {
						setSwitchStateWithLoader(state);
						setShowLoading(true);
						anyAsyncWork(state)
							.then(() => {
								// In case of success update it to next State
								setSwitchStateWithLoader(state);
								setShowLoading(false);
							})
							.catch(() => {
								// In case of failure update it to previous state
								setSwitchStateWithLoader(state === "right" ? "left" : "right");
								setShowLoading(false);
							});
					}}
					showLoader={showLoading}
					changeSwitchState={switchStateWithLoader}
				/>
			</View>
		</GestureHandlerRootView>
	);
}

const styles = StyleSheet.create({
	containerStyle: { flex: 1, alignItems: "center", justifyContent: "center" }
});

Props

Property	Description	Type	Example Value	Mandatory / Optional
switchChangeCallback	Callback function triggered when the switch state changes.	(...args: TSwitchState[]) => unknown | WorkletFunction<unknown[], unknown>	(newValue) => console.log('Switch changed:', newValue)	Mandatory for loading switch
initialSwitchState	Initial state of the switch (either "right" or "left").	TSwitchState (enum: "right" | "left")	"left"	Mandatory
switchWidth	Width of the entire switch component.	number	200	Mandatory
switchBorderRadius	Border radius of the switch component.	number	10	Mandatory
pieceWidth	Width of the draggable switch piece.	number	50	Mandatory
switchHeight	Height of the switch component.	number	40	Mandatory
switchBackgroundColor	Background color of the switch component.	string (color value)	"#3498db"	Mandatory
switchBorderColor	Border color of the switch component.	string (color value)	"#000"	Mandatory
pieceBackgroundColor	Background color of the draggable switch piece.	string (color value)	"#ffffff"	Mandatory
switchBorderWidth	Border width of the switch component.	number	2	Mandatory
pieceHeight	Height of the draggable switch piece.	number	30	Mandatory
showLoader	Boolean determining whether to display a loader when the switch is in loading state.	boolean	true or false	Optional
switchType	Type of switch, either "loading" or "normal".	TSwitchType (enum: "loading" | "normal")	"normal"	Mandatory
activityIndicatorComponent	Optional React component to display as an activity indicator when showLoader is true.	ReactElement	<ActivityIndicator />	Optional
changeSwitchState	Desired state to change the switch programmatically.	TSwitchState (enum: "right" | "left")	"right"	Optional

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library