add circleChildrenActive & circleChildrenInActive

meksiabdou · meksiabdou · commit 3fc70ffc2919 · 2023-08-03T12:35:46.000+01:00
diff --git a/README.md b/README.md
@@ -81,6 +81,8 @@ const styles = StyleSheet.create({
 | circleInActiveColor | string    | #fff      |
 | textStyle           | TextStyle | undefined |
 | switchStyle         | ViewStyle | undefined |
+| circleChildrenActive| ReactElement | undefined |
+| circleChildrenInActive| ReactElement | undefined |
 
 ## Contributing
 
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -365,7 +365,7 @@ PODS:
     - React-jsi (= 0.68.2)
     - React-logger (= 0.68.2)
     - React-perflogger (= 0.68.2)
-  - RNReanimated (2.10.0):
+  - RNReanimated (2.17.0):
     - DoubleConversion
     - FBLazyVector
     - FBReactNativeSpec
@@ -591,7 +591,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: 79040b92bfa9c3c2d2cb4f57e981164ec7ab9374
   React-runtimeexecutor: b960b687d2dfef0d3761fbb187e01812ebab8b23
   ReactCommon: 095366164a276d91ea704ce53cb03825c487a3f2
-  RNReanimated: 5bdcbcc3a72aedeee7bb099604262403aa75a1e5
+  RNReanimated: 1f117be601c59177816351a965bc57320b766c15
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: 99652481fcd320aefa4a7ef90095b95acd181952
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
diff --git a/example/package.json b/example/package.json
@@ -13,14 +13,14 @@
   "dependencies": {
     "react": "17.0.2",
     "react-native": "0.68.2",
-    "react-native-reanimated": "^2.13.0"
+    "react-native-reanimated": "^2.17.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/runtime": "^7.12.5",
     "babel-plugin-module-resolver": "^4.1.0",
     "metro-react-native-babel-preset": "^0.67.0",
-    "patch-package": "^6.5.0",
+    "patch-package": "^6.5.1",
     "postinstall-postinstall": "^2.1.0"
   }
 }
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,9 +1,14 @@
 import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Image, StyleSheet, View } from 'react-native';
 import Switch from '@meksiabdou/react-native-switch';
 
 export default function App() {
-  const [value, setValue] = React.useState({ 0: true, 1: false, 2: false });
+  const [value, setValue] = React.useState({
+    0: true,
+    1: false,
+    2: false,
+    3: true,
+  });
 
   return (
     <View style={styles.container}>
@@ -14,8 +19,8 @@ export default function App() {
           onValueChange={(_value) => setValue({ ...value, 0: _value })}
           activeText="حلال"
           inActiveText="حرام"
-          backgroundInActive={"#ff0000"}
-          circleInActiveColor={"#fff"}
+          backgroundInActive={'#ff0000'}
+          circleInActiveColor={'#fff'}
           circleSize={25}
         />
       </View>
@@ -29,10 +34,11 @@ export default function App() {
           switchBorderRadius={30}
           switchPaddingLeft={2}
           switchPaddingRight={2}
-          switchStyle={{paddingVertical: 4}}
+          circleInActiveColor='#ff5454'
+          switchStyle={{ paddingVertical: 4 }}
         />
       </View>
-      <View>
+      <View style={{ marginVertical: 5 }}>
         <Switch
           value={value['2']}
           width={70}
@@ -44,6 +50,34 @@ export default function App() {
           disabled={false}
         />
       </View>
+      <View style={{ marginVertical: 5 }}>
+        <Switch
+          value={value['3']}
+          width={80}
+          onValueChange={(_value) => setValue({ ...value, 3: _value })}
+          activeText=""
+          inActiveText=""
+          circleSize={30}
+          textStyle={{ fontSize: 13 }}
+          disabled={false}
+          circleChildrenInActive={
+            <View>
+              <Image
+                source={require('./assets/images/dark.png')}
+                style={styles.icon}
+              />
+            </View>
+          }
+          circleChildrenActive={
+            <View>
+              <Image
+                source={require('./assets/images/light.png')}
+                style={styles.icon}
+              />
+            </View>
+          }
+        />
+      </View>
     </View>
   );
 }
@@ -53,6 +87,11 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: "#ccc",
+    backgroundColor: '#ccc',
+  },
+  icon: {
+    width: 28,
+    height: 28,
+    resizeMode: 'center',
   },
 });
diff --git a/example/src/assets/images/dark.png b/example/src/assets/images/dark.png
diff --git a/example/src/assets/images/light.png b/example/src/assets/images/light.png
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meksiabdou/react-native-switch",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Customisable switch component for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -49,24 +49,24 @@
     "@arkweid/lefthook": "^0.7.7",
     "@commitlint/config-conventional": "^17.0.2",
     "@react-native-community/eslint-config": "^3.0.2",
-    "@release-it/conventional-changelog": "^5.0.0",
+    "@release-it/conventional-changelog": "^5.1.1",
     "@types/jest": "^28.1.8",
-    "@types/react": "~18.0.21",
+    "@types/react": "~18.0.38",
     "@types/react-native": "0.70.7",
     "commitlint": "^17.0.2",
     "del-cli": "^5.0.0",
     "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "jest": "^28.1.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "jest": "^28.1.3",
     "pod-install": "^0.1.0",
     "prettier": "^2.0.5",
     "react": "18.1.0",
     "react-native": "0.70.6",
-    "react-native-builder-bob": "^0.20.1",
-    "react-native-reanimated": "^2.13.0",
-    "release-it": "^15.0.0",
-    "typescript": "^4.9.3"
+    "react-native-builder-bob": "^0.20.4",
+    "react-native-reanimated": "^2.17.0",
+    "release-it": "^15.11.0",
+    "typescript": "^5.1.6"
   },
   "resolutions": {
     "@types/react": "18.0.21"
diff --git a/src/components/switch.tsx b/src/components/switch.tsx
@@ -43,13 +43,17 @@ const Switch = (IProps: SwitchProps): JSX.Element => {
     switchPaddingRight,
     switchPaddingLeft,
     switchStyle,
+    circleChildrenActive,
+    circleChildrenInActive,
   } = IProps;
 
   const { isRTL } = I18nManager;
   const circleTranslateX = useSharedValue<any>(0);
   const textTranslateXInActive = useSharedValue<any>(0);
   const textTranslateXActive = useSharedValue<any>(0);
   const opacity = useSharedValue<number>(1);
+  const circleChildrenActiveOpacity = useSharedValue<number>(1);
+  const circleChildrenInActiveOpacity = useSharedValue<number>(0);
   const circleColor = useSharedValue<string | undefined>(circleInActiveColor);
 
   const [defaultWidth, setDefaultWidth] = useState<number>(
@@ -103,6 +107,18 @@ const Switch = (IProps: SwitchProps): JSX.Element => {
     };
   });
 
+  const circleChildrenInActiveStyle = useAnimatedStyle(() => {
+    return {
+      opacity: circleChildrenInActiveOpacity.value,
+    };
+  });
+
+  const circleChildrenActiveStyle = useAnimatedStyle(() => {
+    return {
+      opacity: circleChildrenActiveOpacity.value,
+    };
+  });
+
   useEffect(() => {
     setDefaultWidth(isNumbre(width, 100));
   }, [width]);
@@ -135,6 +151,8 @@ const Switch = (IProps: SwitchProps): JSX.Element => {
           stiffness: 100,
         });
       }
+      circleChildrenActiveOpacity.value = spring(1);
+      circleChildrenInActiveOpacity.value = spring(0);
     } else {
       circleTranslateX.value = spring(0, { damping: 15, stiffness: 120 });
       textTranslateXActive.value = spring(-(defaultWidth * factory));
@@ -145,6 +163,8 @@ const Switch = (IProps: SwitchProps): JSX.Element => {
           stiffness: 100,
         });
       }
+      circleChildrenActiveOpacity.value = spring(0);
+      circleChildrenInActiveOpacity.value = spring(1);
     }
   }, [value, defaultWidth, defaultCircleSize, defaultPadding, isRTL]);
 
@@ -184,15 +204,9 @@ const Switch = (IProps: SwitchProps): JSX.Element => {
       >
         <Reanimated.View
           style={[
+            styles.switchTextView,
+            styles.center,
             {
-              position: 'absolute',
-              display: 'flex',
-              right: 0,
-              left: 0,
-              top: 0,
-              bottom: 0,
-              justifyContent: 'center',
-              alignItems: 'center',
               width:
                 defaultWidth +
                 (defaultPadding.paddingLeft + defaultPadding.paddingRight) / 2,
@@ -213,15 +227,9 @@ const Switch = (IProps: SwitchProps): JSX.Element => {
         </Reanimated.View>
         <Reanimated.View
           style={[
+            styles.switchTextView,
+            styles.center,
             {
-              position: 'absolute',
-              display: 'flex',
-              left: 0,
-              right: 0,
-              top: 0,
-              bottom: 0,
-              justifyContent: 'center',
-              alignItems: 'center',
               width: defaultWidth,
               backgroundColor: backgroundInActive,
             },
@@ -240,16 +248,34 @@ const Switch = (IProps: SwitchProps): JSX.Element => {
         </Reanimated.View>
         <Reanimated.View
           style={[
+            styles.circleStyle,
             {
-              position: 'relative',
-              zIndex: 99,
               width: defaultCircleSize,
               height: defaultCircleSize,
               borderRadius: isNumbre(switchBorderRadius, 30),
             },
             circleStyle,
           ]}
-        />
+        >
+          <Reanimated.View
+            style={[
+              styles.circleChildren,
+              styles.center,
+              circleChildrenActiveStyle,
+            ]}
+          >
+            {circleChildrenActive}
+          </Reanimated.View>
+          <Reanimated.View
+            style={[
+              styles.circleChildren,
+              styles.center,
+              circleChildrenInActiveStyle,
+            ]}
+          >
+            {circleChildrenInActive}
+          </Reanimated.View>
+        </Reanimated.View>
       </Reanimated.View>
     </Button>
   );
@@ -283,11 +309,34 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
     overflow: 'hidden',
   },
+  switchTextView: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
   textStyle: {
     fontSize: 14,
     color: '#fff',
     marginHorizontal: 2,
   },
+  circleStyle: {
+    position: 'relative',
+    zIndex: 99,
+  },
+  center: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  circleChildren: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
 });
 
 export default Switch;
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import type { TextStyle, ViewStyle } from 'react-native';
 
 export interface SwitchProps {
@@ -17,4 +18,6 @@ export interface SwitchProps {
   switchStyle?: ViewStyle;
   switchPaddingRight?: number;
   switchPaddingLeft?: number;
+  circleChildrenActive?: ReactElement;
+  circleChildrenInActive?: ReactElement;
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -2,15 +2,19 @@
   "compilerOptions": {
     "baseUrl": "./",
     "paths": {
-      "@meksiabdou/react-native-switch": ["./src/index"]
+      "@meksiabdou/react-native-switch": [
+        "./src/index"
+      ]
     },
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,
     "esModuleInterop": true,
-    "importsNotUsedAsValues": "error",
+    // "importsNotUsedAsValues": "error",
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
-    "lib": ["esnext"],
+    "lib": [
+      "esnext"
+    ],
     "module": "esnext",
     "moduleResolution": "node",
     "noFallthroughCasesInSwitch": true,
