dhre-ui-kit 0.0.87 → 0.0.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.87",
+  "version": "0.0.89",
   "main": "src/index.ts",
   "files": [
     "src",
@@ -34,6 +34,7 @@
     "react-native-country-picker-modal": "^2.0.0",
     "react-native-document-picker": "^9.3.1",
     "react-native-element-dropdown": "^2.12.1",
+    "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "2.17.0",
     "react-native-otp-verify": "^1.1.8",
     "react-native-paper": "^5.12.5",

package/src/App.tsx

@@ -1,13 +1,40 @@
 import React from 'react';
 import {ThemeProvider} from './theme/ThemeContext';
-import {CustomDocumentPicker} from './index';
-import { View } from 'react-native';
+import {Badge, Line} from './index';
+import {ArrowLeft, CalenderDots} from './assets';
+import {View} from 'react-native';
+import CustomButton from './components/button/Button';
 
 const App = () => {
   return (
     <ThemeProvider>
-      <View style={{flex:1,justifyContent:'center'}}>
-      <CustomDocumentPicker onDocumentUpload={() => {}} />
+      <View style={{marginTop: 50}}>
+        <Badge
+          handleIconPress={function (): void {}}
+          text="gggsdfghjhgf"
+          style={{margin: 20}}
+          iconName={<CalenderDots width={20} height={20} />}
+          textStyle={{color: 'black'}}
+          iconStyle={{}}
+        />
+        <Line />
+        <CustomButton
+          title="Yes"
+          onPress={() => console.log('Yes Button Pressed')}
+          leftIcon={<ArrowLeft />}
+          // titleColor={color.CONTENT_SECONDRY[currentTheme]}
+          titleVariant="L2_REGULAR"
+          containerStyle={[
+            {
+              borderWidth: 1,
+              borderRadius: 20,
+
+              height: 40,
+            },
+          ]}
+          // iconStyle={styles.iconStyle}
+          imagePosition="left"
+        />
       </View>
     </ThemeProvider>
   );

package/src/components/customDocumentPicker/CustomDocumentPicker.interface.ts

@@ -2,7 +2,7 @@ import {TextStyle, ViewStyle} from 'react-native';
 import {DocumentPickerResponse} from 'react-native-document-picker';
 
 export interface CustomDocumentPickerProps {
-  onDocumentUpload: (document: DocumentPickerResponse) => void;
+  onDocumentUpload: (base64: string, document?: DocumentPickerResponse) => void;
   title?: string;
   hint?: string;
   maxFileSize?: number;

package/src/components/customDocumentPicker/CustomDocumentPicker.tsx

@@ -3,6 +3,7 @@ import {View, Pressable, Alert} from 'react-native';
 import DocumentPicker, {
   DocumentPickerResponse,
 } from 'react-native-document-picker';
+import RNFS from 'react-native-fs';
 import {FileIcon, Trash, UploadFile} from '../../assets';
 import {FontStyle} from '../../utils/appEnum';
 import CustomTypography from '../customTypography';
@@ -40,7 +41,8 @@ const CustomDocumentPicker = ({
 
       setError(''); // Clear error on successful upload
       setDocDetails(res);
-      onDocumentUpload(res);
+      const base64Data = await RNFS.readFile(res.uri, 'base64');
+      onDocumentUpload(base64Data, res); // Pass base64 data to onDocumentUpload
     } catch (err) {
       if (DocumentPicker.isCancel(err)) {
         Alert.alert('User canceled the picker');

package/src/components/customSlideButton/index.tsx

@@ -48,14 +48,14 @@ const CustomSlideButton = ({label, onComplete}: CustomSlideButtonProps) => {
     <View
       style={{
         ...styles.sliderContainer,
-        backgroundColor: theme.SURFACE_PRIMARY,
+        backgroundColor: theme.SURFACE_INVERTED,
       }}>
       <View style={styles.buttonTextCOntainer}>
         <CustomTypography
           text={label}
           variant={FontStyle.L1_REGULAR}
           style={{
-            color: theme.CONTENT_PRIMARY,
+            color: theme.CONTENT_INVERTED,
           }}
         />
       </View>
@@ -65,7 +65,7 @@ const CustomSlideButton = ({label, onComplete}: CustomSlideButtonProps) => {
         <View
           style={{
             ...styles.button,
-            backgroundColor: theme.SURFACE_INVERTED,
+            backgroundColor: theme.SURFACE_PRIMARY,
             width: BUTTON_WIDTH,
           }}>
           <CaretRight />

package/src/theme/ThemeContext.tsx

@@ -14,8 +14,8 @@ interface ThemeProviderProps {
 
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({children}) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  // const mode = useSelector((state: any) => state.theme.currentTheme);
-  const mode = 'light'
+  const mode = useSelector((state: any) => state.theme.currentTheme);
+  // const mode = 'light'
   // Filter the theme based on the mode (light or dark)
   const filteredTheme = Object.keys(theme).reduce((acc, key) => {
     acc[key] = theme[key][mode];