Merge pull request #1 from nithinpp69/develop

switch initial release
nithinpp69 · Nov 29, 2021 · d80fe32 · d80fe32
2 parents aebf7ef + d309a29
commit d80fe32
Show file tree

Hide file tree

Showing 8 changed files with 308 additions and 83 deletions.
diff --git a/.github/workflows/release.yml 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 }}
diff --git 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);
 ....
 
 <Switch
+  size={50}
   value={isEnabled}
   onChange={(value) => setIsEnabled(value)}
+  renderOffIndicator={() => <Text style={{ fontSize: 16, color: 'white' }}>🌚</Text>}
+  renderOnIndicator={() => <Text style={{ fontSize: 16, color: 'white' }}>🌝</Text>}
+/>
+
+<Switch
+  size={50}
+  value={isEnabled}
+  onChange={(value) => setIsEnabled(value)}
+  activeTrackColor={"#45D058"}
+  renderOffIndicator={() => <Text style={{ fontSize: 16, color: 'white' }}>OFF</Text>}
+  renderOnIndicator={() => <Text style={{ fontSize: 16, color: 'white' }}>ON</Text>}
 />
 
 ```
 ![](demo.gif)
 
+```
+import Switch from 'react-native-switch-toggles';
+
+
+const [isEnabled, setIsEnabled] = React.useState(false);
+....
+
+<>
+  <Text style={styles.label}>Simple Switch</Text>
+  <Switch
+    value={isEnabled}
+    onChange={(value) => setIsEnabled(value)}
+  />
+</>
+
+
+<>
+  <Text style={styles.label}>Switch with on/off indicator</Text>
+  <Switch
+    value={isEnabled}
+    onChange={(value) => setIsEnabled(value)}
+    activeTrackColor={'#45D058'}
+    renderOffIndicator={() => (
+      <Text style={{ fontSize: 8, color: 'white' }}>OFF</Text>
+    )}
+    renderOnIndicator={() => (
+      <Text style={{ fontSize: 8, color: 'white' }}>ON</Text>
+    )}
+  />
+</>
+
+
+<>
+  <Text style={styles.label}>Switch with on/off thumb indicator</Text>
+  <Switch
+    size={40}
+    value={isEnabled}
+    onChange={(value) => setIsEnabled(value)}
+    activeTrackColor={'#6ab04c'}
+    renderInactiveThumbIcon={() => (
+      <Text style={{ fontSize: 12, color: 'black' }}>💩</Text>
+    )}
+    renderActiveThumbIcon={() => (
+      <Text style={{ fontSize: 12, color: 'black' }}>🔥</Text>
+    )}
+  />
+</>
+
+
+<>
+  <Text style={styles.label}>
+    Switch with on/off thumb/track indicator
+  </Text>
+  <Switch
+    size={40}
+    value={isEnabled}
+    onChange={(value) => setIsEnabled(value)}
+    activeTrackColor={'#6ab04c'}
+    inactiveTrackColor={'#eb4d4b'}
+    renderInactiveThumbIcon={() => (
+      <Text style={{ fontSize: 12, color: 'black' }}>💩</Text>
+    )}
+    renderActiveThumbIcon={() => (
+      <Text style={{ fontSize: 12, color: 'black' }}>🔥</Text>
+    )}
+    renderOffIndicator={() => (
+      <Text style={{ fontSize: 12, color: 'white' }}>OFF</Text>
+    )}
+    renderOnIndicator={() => (
+      <Text style={{ fontSize: 12, color: 'white' }}>ON</Text>
+    )}
+  />
+</>
+
+
+<>
+  <Text style={styles.label}>Big switch</Text>
+  <Switch
+    size={60}
+    value={isEnabled}
+    onChange={(value) => setIsEnabled(value)}
+    activeTrackColor={'#4b7bec'}
+    inactiveTrackColor={'#ff7f50'}
+    renderInactiveThumbIcon={() => (
+      <Text style={{ fontSize: 16, color: 'black' }}>💩</Text>
+    )}
+    renderActiveThumbIcon={() => (
+      <Text style={{ fontSize: 16, color: 'black' }}>🔥</Text>
+    )}
+    renderOffIndicator={() => (
+      <Text style={{ fontSize: 12, color: 'white' }}>OFF</Text>
+    )}
+    renderOnIndicator={() => (
+      <Text style={{ fontSize: 12, color: 'white' }}>ON</Text>
+    )}
+  />
+</>
+
+
+<>
+  <Text style={styles.label}>Big switch with thumb color</Text>
+  <Switch
+    size={60}
+    value={isEnabled}
+    onChange={(value) => setIsEnabled(value)}
+    activeThumbColor={'#f9ca24'}
+    inactiveThumbColor={'#6ab04c'}
+    activeTrackColor={'#6ab04c'}
+    inactiveTrackColor={'#ffffff'}
+    renderInactiveThumbIcon={() => (
+      <Text style={{ fontSize: 14, color: 'black' }}>💩</Text>
+    )}
+    renderActiveThumbIcon={() => (
+      <Text style={{ fontSize: 14, color: 'black' }}>🔥</Text>
+    )}
+    renderOffIndicator={() => (
+      <Text style={{ fontSize: 12, color: 'black' }}>OFF</Text>
+    )}
+    renderOnIndicator={() => (
+      <Text style={{ fontSize: 12, color: 'white' }}>ON</Text>
+    )}
+  />
+</>
+
+```
+![](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
diff --git a/demo2.gif b/demo2.gif
diff --git a/src/switch/colors.ts 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
@@ -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<SwitchProps> = ({
   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<SwitchProps> = ({
 
   useEffect(() => {
     setSwitchValue(value);
-  }, [value])
+  }, [value]);
 
   const switchWidth = useMemo(() => {
     return size * 1.8;
@@ -94,7 +82,7 @@ const Switch: React.FC<SwitchProps> = ({
     translateX.value = withTiming(toValue, undefined, () => {
       runOnJS(onChange)?.(switchValue);
     });
-  }, [switchValue])
+  }, [switchValue]);
 
   const onPress = () => {
     setSwitchValue(value => !value);
@@ -202,61 +190,4 @@ const Switch: React.FC<SwitchProps> = ({
     </TouchableOpacity>
   );
 };
-
-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
@@ -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;