dhre-ui-kit 0.0.45 → 0.0.46

package/package.json

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

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

@@ -0,0 +1,8 @@
+export interface CustomSwitchBtnProps {
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+  activeText: string;
+  activeTextVariant?: string;
+  inActiveText: string;
+  inActiveTextVariant?: string;
+}

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

@@ -0,0 +1,36 @@
+import {StyleSheet} from 'react-native';
+import {
+  horizontalScale,
+  moderateScale,
+  verticalScale,
+} from '../../utils/stylehelper';
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    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: {
+    position: 'absolute',
+    left: horizontalScale(12),
+  },
+  textAR: {
+    position: 'absolute',
+    top: verticalScale(2),
+    right: horizontalScale(18),
+  },
+});
+
+export default styles;

package/src/components/customSwitchBtn/customSwitchBtn.tsx

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

package/src/components/customSwitchBtn/index.ts

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

package/src/index.ts

@@ -36,6 +36,7 @@ export {default as FeedbackForm} from './components/feedback';
 export {default as CountryPicker} from './components/countryPicker';
 export {default as TextInput} from './components/textInput';
 export {default as DropDown} from './components/dropDown';
+export {default as CustomSwitchBtn} from './components/customSwitchBtn';
 
 export {FONT_STYLES} from './theme/fonts';
 export {FontStyle, Theme} from './utils/appEnum';