diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml new file mode 100644 index 0000000..6f6dae9 --- /dev/null +++ b/.github/workflows/release.yml @@ -0,0 +1,22 @@ +name: "📚 release" +on: + push: + branches: + - main + +jobs: + release: + name: 📚 release + runs-on: ubuntu-latest + steps: + - name: checkout + uses: actions/checkout@v1 + - name: Setup Node.js + uses: actions/setup-node@v1 + with: + node-version: 12 + registry-url: https://registry.npmjs.org + - name: Release + run: npm publish + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} \ No newline at end of file diff --git a/README.md b/README.md index a0a51ca..f5d4f96 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,7 @@ A simple and customizable React Native switch component. ❤️ [Expo Snack](https://snack.expo.dev/@nithinpp69/react-native-switch-toggles) ![](demo.gif) +![](demo2.gif) ## Prerequisites @@ -45,18 +46,167 @@ const [isEnabled, setIsEnabled] = React.useState(false); .... setIsEnabled(value)} + renderOffIndicator={() => 🌚} + renderOnIndicator={() => 🌝} +/> + + setIsEnabled(value)} + activeTrackColor={"#45D058"} + renderOffIndicator={() => OFF} + renderOnIndicator={() => ON} /> ``` ![](demo.gif) +``` +import Switch from 'react-native-switch-toggles'; + + +const [isEnabled, setIsEnabled] = React.useState(false); +.... + +<> + Simple Switch + setIsEnabled(value)} + /> + + + +<> + Switch with on/off indicator + setIsEnabled(value)} + activeTrackColor={'#45D058'} + renderOffIndicator={() => ( + OFF + )} + renderOnIndicator={() => ( + ON + )} + /> + + + +<> + Switch with on/off thumb indicator + setIsEnabled(value)} + activeTrackColor={'#6ab04c'} + renderInactiveThumbIcon={() => ( + 💩 + )} + renderActiveThumbIcon={() => ( + 🔥 + )} + /> + + + +<> + + Switch with on/off thumb/track indicator + + setIsEnabled(value)} + activeTrackColor={'#6ab04c'} + inactiveTrackColor={'#eb4d4b'} + renderInactiveThumbIcon={() => ( + 💩 + )} + renderActiveThumbIcon={() => ( + 🔥 + )} + renderOffIndicator={() => ( + OFF + )} + renderOnIndicator={() => ( + ON + )} + /> + + + +<> + Big switch + setIsEnabled(value)} + activeTrackColor={'#4b7bec'} + inactiveTrackColor={'#ff7f50'} + renderInactiveThumbIcon={() => ( + 💩 + )} + renderActiveThumbIcon={() => ( + 🔥 + )} + renderOffIndicator={() => ( + OFF + )} + renderOnIndicator={() => ( + ON + )} + /> + + + +<> + Big switch with thumb color + setIsEnabled(value)} + activeThumbColor={'#f9ca24'} + inactiveThumbColor={'#6ab04c'} + activeTrackColor={'#6ab04c'} + inactiveTrackColor={'#ffffff'} + renderInactiveThumbIcon={() => ( + 💩 + )} + renderActiveThumbIcon={() => ( + 🔥 + )} + renderOffIndicator={() => ( + OFF + )} + renderOnIndicator={() => ( + ON + )} + /> + + +``` +![](demo2.gif) + ## Props -| Prop | Description | Type | Default Value | Required | -| :--------------------------:|:--------------------------------------------------------------------------------------|:-----------------------------:|:--------------------------:|:--------:| -| value | switch state value | Boolean | | true | -| onChange | Callback on switch value change | Function | (value: boolean) => void; | true | +| Prop | Description | Type | Default Value | Required | +| :--------------------------:|:--------------------------------------------------------------------------------------|:-----------------------------:|:--------------------------:|:---------:| +| size | size of the switch component | Number | 25 | true | +| value | switch on/off state value | Boolean | | true | +| onChange | callback on switch value change | Function | (value: boolean) => void; | true | +| disabled | enable/disable switch | Boolean | false | false | +| activeTrackColor | track color when switch value is true | String | "rgba(255,255,255,0.6)" | false | +| inactiveTrackColor | track color when switch value is false | String | "rgba(0,0,0,0.2)" | false | +| activeThumbColor | thumb color when switch value is true | String | "#ffffff" | false | +| inactiveThumbColor | thumb color when switch value is false | String | "#ffffff" | false | +| renderOnIndicator | render a custom view on switch track when the switch value is true | Function | () => null | false | +| renderOffIndicator | render a custom view on switch track when the switch value is false | Function | () => null | false | +| renderActiveThumbIcon | render a custom view on switch thumb when the switch value is true | Function | () => null | false | +| renderInactiveThumbIcon | render a custom view on switch thumb when the switch value is false | Function | () => null | false | ## License This project is licenced under the MIT License. diff --git a/demo.gif b/demo.gif new file mode 100644 index 0000000..1803bb9 Binary files /dev/null and b/demo.gif differ diff --git a/demo2.gif b/demo2.gif new file mode 100644 index 0000000..34f330a Binary files /dev/null and b/demo2.gif differ diff --git a/src/switch/colors.ts b/src/switch/colors.ts new file mode 100644 index 0000000..2b8b45f --- /dev/null +++ b/src/switch/colors.ts @@ -0,0 +1,7 @@ +const Colors = { + activeTrackColor: "rgba(255,255,255,0.6)", + inactiveTrackColor: "rgba(0,0,0,0.2)", + white: "#ffffff", +}; + +export default Colors; diff --git a/src/switch/index.tsx b/src/switch/index.tsx index c27f57c..4cded28 100644 --- a/src/switch/index.tsx +++ b/src/switch/index.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useMemo, useState } from "react"; -import { TouchableOpacity, StyleSheet } from "react-native"; +import { TouchableOpacity } from "react-native"; import Animated, { interpolate, interpolateColor, @@ -8,31 +8,19 @@ import Animated, { useSharedValue, withTiming, } from "react-native-reanimated"; - -interface SwitchProps { - size?: number; - value: boolean; - disabled?: boolean; - onChange: (value: boolean) => void; - activeTrackColor?: string; - inactiveTrackColor?: string; - activeThumbColor?: string; - inactiveThumbColor?: string; - renderOnIndicator?: () => React.ReactNode; - renderOffIndicator?: () => React.ReactNode; - renderActiveThumbIcon?: () => React.ReactNode; - renderInactiveThumbIcon?: () => React.ReactNode; -} +import Colors from './colors'; +import styles from './styles'; +import { SwitchProps } from './types'; const Switch: React.FC = ({ size = 25, value, disabled = false, onChange, - activeTrackColor = "rgba(255,255,255,0.6)", - inactiveTrackColor = "rgba(0,0,0,0.2)", - activeThumbColor = "white", - inactiveThumbColor = "white", + activeTrackColor = Colors.activeTrackColor, + inactiveTrackColor = Colors.inactiveTrackColor, + activeThumbColor = Colors.white, + inactiveThumbColor = Colors.white, renderOnIndicator = () => null, renderOffIndicator = () => null, renderActiveThumbIcon = () => null, @@ -43,7 +31,7 @@ const Switch: React.FC = ({ useEffect(() => { setSwitchValue(value); - }, [value]) + }, [value]); const switchWidth = useMemo(() => { return size * 1.8; @@ -94,7 +82,7 @@ const Switch: React.FC = ({ translateX.value = withTiming(toValue, undefined, () => { runOnJS(onChange)?.(switchValue); }); - }, [switchValue]) + }, [switchValue]); const onPress = () => { setSwitchValue(value => !value); @@ -202,61 +190,4 @@ const Switch: React.FC = ({ ); }; - -const styles = (props) => - StyleSheet.create({ - switchContainer: { - opacity: props.disabled ? 0.6 : 1, - }, - container: { - width: props.switchWidth, - height: props.switchHeight, - backgroundColor: "rgba(0,0,0,0.25)", - borderRadius: props.switchBorderRadius, - justifyContent: "center", - overflow: "hidden", - }, - thumb: { - height: props.switchHeight - 10, - width: props.switchHeight - 10, - borderRadius: props.switchBorderRadius, - margin: 5, - shadowColor: "#000", - shadowOffset: { - width: 0, - height: 2, - }, - shadowOpacity: 0.25, - shadowRadius: 3.84, - elevation: 5, - flexDirection: "row", - alignItems: "center", - justifyContent: "center", - overflow: "hidden", - }, - onIndicator: { - width: "50%", - height: "100%", - backgroundColor: "transparent", - position: "absolute", - left: 0, - alignItems: "center", - justifyContent: "center", - }, - offIndicator: { - width: "50%", - height: "100%", - backgroundColor: "transparent", - position: "absolute", - right: 0, - alignItems: "center", - justifyContent: "center", - }, - thumbIconContainer: { - flex: 1, - alignItems: "center", - justifyContent: "center", - }, - }); - export default Switch; diff --git a/src/switch/styles.ts b/src/switch/styles.ts new file mode 100644 index 0000000..c6f9a0d --- /dev/null +++ b/src/switch/styles.ts @@ -0,0 +1,59 @@ +import { StyleSheet } from 'react-native'; + +const styles = (props) => + StyleSheet.create({ + switchContainer: { + opacity: props.disabled ? 0.6 : 1, + }, + container: { + width: props.switchWidth, + height: props.switchHeight, + backgroundColor: 'rgba(0,0,0,0.25)', + borderRadius: props.switchBorderRadius, + justifyContent: 'center', + overflow: 'hidden', + }, + thumb: { + height: props.switchHeight - 10, + width: props.switchHeight - 10, + borderRadius: props.switchBorderRadius, + margin: 5, + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.25, + shadowRadius: 3.84, + elevation: 5, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + overflow: 'hidden', + }, + onIndicator: { + width: '50%', + height: '100%', + backgroundColor: 'transparent', + position: 'absolute', + left: 0, + alignItems: 'center', + justifyContent: 'center', + }, + offIndicator: { + width: '50%', + height: '100%', + backgroundColor: 'transparent', + position: 'absolute', + right: 0, + alignItems: 'center', + justifyContent: 'center', + }, + thumbIconContainer: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + }); + +export default styles; diff --git a/src/switch/types.d.ts b/src/switch/types.d.ts index e69de29..4cd377d 100644 --- a/src/switch/types.d.ts +++ b/src/switch/types.d.ts @@ -0,0 +1,56 @@ +import React from "react"; + +export interface SwitchProps { + /** + * size of the switch + */ + size?: number; + /** + * switch on/off state value + */ + value: boolean; + /** + * enable/disable switch + */ + disabled?: boolean; + /** + * callback on switch value change + */ + onChange: (value: boolean) => void; + /** + * track color when switch value is true + */ + activeTrackColor?: string; + /** + * track color when switch value is false + */ + inactiveTrackColor?: string; + /** + * thumb color when switch value is true + */ + activeThumbColor?: string; + /** + * thumb color when switch value is false + */ + inactiveThumbColor?: string; + /** + * render a custom view on switch track when the switch value is true + */ + renderOnIndicator?: () => React.ReactNode; + /** + * render a custom view on switch track when the switch value is false + */ + renderOffIndicator?: () => React.ReactNode; + /** + * ender a custom view on switch thumb when the switch value is true + */ + renderActiveThumbIcon?: () => React.ReactNode; + /** + * render a custom view on switch thumb when the switch value is false + */ + renderInactiveThumbIcon?: () => React.ReactNode; +} + +declare const Switch: React.FC; + +export default Switch;