dhre-ui-kit 0.0.46 → 0.0.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "main": "src/index.ts",
   "files": [
     "src",

package/src/components/customSwitchBtn/customSwitchBtn.interface.ts

@@ -1,3 +1,5 @@
+import {TextStyle, ViewStyle} from 'react-native';
+
 export interface CustomSwitchBtnProps {
   value: boolean;
   onValueChange: (value: boolean) => void;
@@ -5,4 +7,7 @@ export interface CustomSwitchBtnProps {
   activeTextVariant?: string;
   inActiveText: string;
   inActiveTextVariant?: string;
+  containerStyle?: ViewStyle;
+  activeTextStyle?: TextStyle;
+  inActiveTextStyle?: TextStyle;
 }

package/src/components/customSwitchBtn/customSwitchBtn.styles.ts

@@ -13,20 +13,18 @@ const styles = StyleSheet.create({
     width: horizontalScale(75),
     height: verticalScale(32),
     borderRadius: moderateScale(25),
-    backgroundColor: '#FFFFFF33',
     padding: moderateScale(4),
   },
   circle: {
     width: horizontalScale(38),
     height: verticalScale(24),
-    backgroundColor: '#FFF',
     borderRadius: moderateScale(25),
   },
-  textEN: {
+  activeText: {
     position: 'absolute',
     left: horizontalScale(12),
   },
-  textAR: {
+  inActiveText: {
     position: 'absolute',
     top: verticalScale(2),
     right: horizontalScale(18),

package/src/components/customSwitchBtn/customSwitchBtn.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {Pressable, Animated} from 'react-native';
 import CustomTypography from '../customTypography';
 import {FontStyle} from '../../utils/appEnum';
@@ -12,6 +12,9 @@ const CustomSwitchBtn = ({
   activeTextVariant = FontStyle.L2_BOLD,
   inActiveText,
   inActiveTextVariant = FontStyle.B3_REGULAR,
+  containerStyle,
+  activeTextStyle,
+  inActiveTextStyle,
 }: CustomSwitchBtnProps) => {
   const [animatedValue] = useState(new Animated.Value(value ? 1 : 0));
 
@@ -19,27 +22,34 @@ const CustomSwitchBtn = ({
     inputRange: [0, 1],
     outputRange: [0, 28],
   });
-
-  const toggleSwitch = () => {
-    const newValue = !value;
+  useEffect(() => {
     Animated.timing(animatedValue, {
       toValue: value ? 1 : 0,
       duration: 300,
       useNativeDriver: false,
     }).start();
+  }, [value]);
+
+  const toggleSwitch = () => {
+    const newValue = !value;
+
     onValueChange(newValue);
   };
-
   return (
-    <Pressable onPress={toggleSwitch} style={styles.mainContainer}>
+    <Pressable
+      onPress={toggleSwitch}
+      style={{...styles.mainContainer, ...containerStyle}}>
       <Animated.View style={[styles.circle, {transform: [{translateX}]}]} />
       <CustomTypography
-        style={styles.textEN}
+        style={[styles.activeText, value ? inActiveTextStyle : activeTextStyle]}
         text={activeText}
         variant={activeTextVariant}
       />
       <CustomTypography
-        style={styles.textAR}
+        style={[
+          styles.inActiveText,
+          value ? activeTextStyle : inActiveTextStyle,
+        ]}
         text={inActiveText}
         variant={inActiveTextVariant}
       />

package/src/components/customSwitchBtn/index.ts

@@ -1,3 +1 @@
-import CustomSwitchBtn from './customSwitchBtn';
-
-export default {CustomSwitchBtn};
+export {default} from './customSwitchBtn';