dhre-ui-kit 0.0.10 → 0.0.12

package/package.json

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

package/src/components/button/Button.tsx

@@ -20,7 +20,7 @@ interface CustomButtonProps {
   titleColor?: string;
   titleVariant?: string;
   imagePosition?: 'left' | 'right';
-  testID?:string
+  testID?: string;
 }
 
 const CustomButton = ({
@@ -37,7 +37,8 @@ const CustomButton = ({
   imagePosition = 'right',
 }: CustomButtonProps) => {
   return (
-    <TouchableOpacity testID={testID}
+    <TouchableOpacity
+      testID={testID}
       style={[styles.buttonContainer, containerStyle]}
       onPress={onPress}>
       {imagePosition === 'left' && leftIcon && (

package/src/components/customLoader/CustomLoader.inteface.ts

@@ -0,0 +1,3 @@
+export interface CustomLoaderProps {
+  loading: boolean;
+}

package/src/components/customLoader/CustomLoader.styles.ts

@@ -0,0 +1,16 @@
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    zIndex: 1000,
+  },
+});
+
+export default styles;

package/src/components/customLoader/CustomLoader.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {View, ActivityIndicator} from 'react-native';
+import {CustomLoaderProps} from './CustomLoader.inteface';
+import styles from './CustomLoader.styles';
+
+const CustomLoader = ({loading}: CustomLoaderProps) => {
+  if (!loading) return null;
+
+  return (
+    <View style={styles.container}>
+      <ActivityIndicator size="large" color="#686868" />
+    </View>
+  );
+};
+
+export default CustomLoader;

package/src/components/customLoader/index.ts

@@ -0,0 +1 @@
+export {default} from './CustomLoader';

package/src/components/customSearchBar/CustomSearchBar.tsx

@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import {TextInput, View} from 'react-native';
+import {Pressable, TextInput, View} from 'react-native';
 import {CrossIcon, SearchIcon} from '../../assets';
 import {moderateScale, verticalScale} from '../../utils/stylehelper';
 import {CustomSearchBarProps} from './CustomSearchBar.interface';
@@ -42,12 +42,15 @@ const CustomSearchBar = ({
           handleOnChangeText?.(val);
         }}
       />
-      {value &&
-        React.cloneElement(<CrossIcon onPress={() => setValue('')} />, {
-          width: moderateScale(24),
-          height: moderateScale(24),
-          style: styles.crossIconStyle,
-        })}
+      {value && (
+        <Pressable onPress={() => setValue('')}>
+          {React.cloneElement(<CrossIcon />, {
+            width: moderateScale(24),
+            height: moderateScale(24),
+            style: styles.crossIconStyle,
+          })}
+        </Pressable>
+      )}
     </View>
   );
 };

package/src/index.ts

@@ -24,4 +24,5 @@ export {default as CustomHeader} from './components/customHeader';
 export {default as SwipableList} from './components/swipableList';
 export {default as CustomTypography} from './components/customTypography';
 export {default as CustomIcon} from './components/customIcon';
+export {default as CustomLoader} from './components/customLoader';
 export * from './utils/stylehelper';

package/src/theme/colors.ts

@@ -153,7 +153,7 @@ export const DHRE_DEFAULT = {
   DH_LINE_GREY_600: '#B4B2B2',
   DH_LINE_GREY_700: '#959494',
   DH_LINE_GREY_800: '#727171',
-  DH_LINE_GREY_900: '#4D4C4C',
+  DH_NETURAL_GRAY_800: '#373737',
   DH_BLUE: '#007AFF',
 
   DH_BG_GREY_0: '#F5F7FF',