@teamnhz/rn-ui-toolkit 1.0.2 → 1.0.3

package/dist/components/ImagePicker/index.js

@@ -1,10 +1,10 @@
 import React, { useCallback } from "react";
-import { View, Text, TouchableOpacity, StyleSheet, Image, Alert } from "react-native";
+import { View, Text, TouchableOpacity, StyleSheet, Image, Alert, } from "react-native";
 import { BottomSheet, Dividers } from "../index";
 import { launchCamera, launchImageLibrary } from "react-native-image-picker";
 import ImageCropPicker from "react-native-image-crop-picker";
 import { Colors, Images, Scale, Typography } from "../../styles";
-const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onClose, }) => {
+const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onClose, containerStyle, rowStyle, textStyle, iconStyle, }) => {
     const onComplete = useCallback((data) => {
         onSuccess(data);
         onClose();
@@ -42,7 +42,11 @@ const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onC
     const onGallery = () => {
         if (mediaType === "photo") {
             if (isMultiSelect) {
-                ImageCropPicker.openPicker({ mediaType: "photo", multiple: true, maxFiles: 5 })
+                ImageCropPicker.openPicker({
+                    mediaType: "photo",
+                    multiple: true,
+                    maxFiles: 5,
+                })
                     .then((images) => {
                     if (images.length > 5) {
                         Alert.alert("Limit Exceeded", "You can only select up to 5 images.");
@@ -76,19 +80,19 @@ const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onC
             });
         }
     };
-    return (React.createElement(BottomSheet, { visible: visible, onClose: onClose, height: 210 },
-        React.createElement(View, { style: styles.container },
-            React.createElement(TouchableOpacity, { style: styles.row, onPress: onCamera },
-                React.createElement(Image, { source: Images.video_icon, style: styles.icon }),
-                React.createElement(Text, { style: styles.text }, "Camera")),
+    return (React.createElement(BottomSheet, { visible: visible, onClose: onClose, height: 230 },
+        React.createElement(View, { style: [styles.container, containerStyle] },
+            React.createElement(TouchableOpacity, { style: [styles.row, rowStyle], onPress: onCamera },
+                React.createElement(Image, { source: Images.video_icon, style: [styles.icon, iconStyle] }),
+                React.createElement(Text, { style: [styles.text, textStyle] }, "Camera")),
             React.createElement(Dividers, { small: true }),
-            React.createElement(TouchableOpacity, { style: styles.row, onPress: onGallery },
-                React.createElement(Image, { source: Images.image_icon, style: styles.icon }),
-                React.createElement(Text, { style: styles.text }, "Gallery")),
+            React.createElement(TouchableOpacity, { style: [styles.row, rowStyle], onPress: onGallery },
+                React.createElement(Image, { source: Images.image_icon, style: [styles.icon, iconStyle] }),
+                React.createElement(Text, { style: [styles.text, textStyle] }, "Gallery")),
             React.createElement(Dividers, { small: true }),
-            React.createElement(TouchableOpacity, { style: styles.row, onPress: onClose },
-                React.createElement(Image, { source: Images.image_icon, style: styles.icon }),
-                React.createElement(Text, { style: styles.text }, "Cancel")))));
+            React.createElement(TouchableOpacity, { style: [styles.row, rowStyle], onPress: onClose },
+                React.createElement(Image, { source: Images.cancel, style: [styles.icon, iconStyle] }),
+                React.createElement(Text, { style: [styles.text, textStyle] }, "Cancel")))));
 };
 export default ImagePicker;
 const styles = StyleSheet.create({
@@ -96,14 +100,146 @@ const styles = StyleSheet.create({
     row: {
         flexDirection: "row",
         alignItems: "center",
-        // paddingVertical: 12,
     },
-    text: { ...Typography.style.standardU(), color: Colors.black },
-    separator: { height: 1, backgroundColor: Colors.borderGrey, marginVertical: 8 },
+    text: { ...Typography.style.standardU(), color: Colors.white },
     icon: {
         width: Scale.moderateScale(20),
         height: Scale.moderateScale(20),
         marginRight: 10,
-        tintColor: Colors.darkBlue,
+        tintColor: Colors.white,
     },
 });
+// import React, { useCallback } from "react";
+// import { View, Text, TouchableOpacity, StyleSheet, Image, Alert } from "react-native";
+// import { BottomSheet, Dividers } from "../index";
+// import { launchCamera, launchImageLibrary } from "react-native-image-picker";
+// import ImageCropPicker from "react-native-image-crop-picker";
+// import { Colors, Images, Scale, Typography } from "../../styles";
+// type Props = {
+//   mediaType: "photo" | "video";
+//   isMultiSelect?: boolean;
+//   onSuccess: (data: any) => void;
+//   visible: boolean;
+//   onClose: () => void;
+// };
+// const ImagePicker: React.FC<Props> = ({
+//   mediaType,
+//   isMultiSelect = false,
+//   onSuccess,
+//   visible,
+//   onClose,
+// }) => {
+//   const onComplete = useCallback(
+//     (data: any) => {
+//       onSuccess(data);
+//       onClose();
+//     },
+//     [onSuccess, onClose]
+//   );
+//   const onCamera = () => {
+//     if (mediaType === "photo") {
+//       if (isMultiSelect) {
+//         ImageCropPicker.openCamera({ mediaType: "photo" })
+//           .then((response) => onComplete([response]))
+//           .catch(() => {});
+//       } else {
+//         ImageCropPicker.openCamera({ mediaType: "photo" })
+//           .then((response) =>
+//             ImageCropPicker.openCropper({
+//               path: response?.path,
+//               width: response?.width,
+//               height: response?.height,
+//               mediaType: "photo",
+//               freeStyleCropEnabled: true,
+//             }).then(onComplete)
+//           )
+//           .catch(() => {});
+//       }
+//     } else {
+//       launchCamera({ mediaType: "video" }, (response) => {
+//         if (response?.assets) {
+//           onComplete({
+//             path: response.assets[0]?.uri,
+//             duration: response.assets[0]?.duration,
+//           });
+//         }
+//       });
+//     }
+//   };
+//   const onGallery = () => {
+//     if (mediaType === "photo") {
+//       if (isMultiSelect) {
+//         ImageCropPicker.openPicker({ mediaType: "photo", multiple: true, maxFiles: 5 })
+//           .then((images) => {
+//             if (images.length > 5) {
+//               Alert.alert("Limit Exceeded", "You can only select up to 5 images.");
+//             } else {
+//               onComplete(images);
+//             }
+//           })
+//           .catch(() => {});
+//       } else {
+//         ImageCropPicker.openPicker({ mediaType: "photo" })
+//           .then((response) =>
+//             ImageCropPicker.openCropper({
+//               path: response?.path,
+//               width: response?.width,
+//               height: response?.height,
+//               mediaType: "photo",
+//               freeStyleCropEnabled: true,
+//             }).then(onComplete)
+//           )
+//           .catch(() => {});
+//       }
+//     } else {
+//       launchImageLibrary({ mediaType: "video" }, (result) => {
+//         if (result?.assets) {
+//           onComplete({
+//             path: result.assets[0]?.uri,
+//             duration: result.assets[0]?.duration,
+//           });
+//         }
+//       });
+//     }
+//   };
+//   return (
+//     <BottomSheet visible={visible} onClose={onClose} height={210}>
+//       <View style={styles.container}>
+//         {/* Camera */}
+//         <TouchableOpacity style={styles.row} onPress={onCamera}>
+//           <Image source={Images.video_icon} style={styles.icon} />
+//           <Text style={styles.text}>Camera</Text>
+//         </TouchableOpacity>
+//       <Dividers small/>
+//         {/* Gallery */}
+//         <TouchableOpacity style={styles.row} onPress={onGallery}>
+//           <Image source={Images.image_icon} style={styles.icon} />
+//           <Text style={styles.text}>Gallery</Text>
+//         </TouchableOpacity>
+//         <Dividers small/>
+//         {/* Cancel */}
+//         <TouchableOpacity style={styles.row} onPress={onClose}>
+//           <Image source={Images.image_icon} style={styles.icon} />
+//           <Text style={styles.text}>Cancel</Text>
+//         </TouchableOpacity>
+//       </View>
+//     </BottomSheet>
+//   );
+// };
+// export default ImagePicker;
+// const styles = StyleSheet.create({
+//   container: { flex: 1, padding: 16 },
+//   row: {
+//     flexDirection: "row",
+//     alignItems: "center",
+//     // paddingVertical: 12,
+//   },
+//   text: { ...Typography.style.standardU(), color: Colors.black },
+//   separator: { height: 1, backgroundColor: Colors.borderGrey, marginVertical: 8 },
+//   icon: {
+//     width: Scale.moderateScale(20),
+//     height: Scale.moderateScale(20),
+//     marginRight: 10,
+//     tintColor: Colors.darkBlue,
+//   },
+// });

package/dist/components/Input/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { TextInputProps, ImageSourcePropType } from "react-native";
+import { TextInputProps, ImageSourcePropType, ReturnKeyTypeOptions } from "react-native";
 import { InputType } from "../../utils/regex";
 interface InputProps extends TextInputProps {
     intlType?: string;
@@ -9,8 +9,7 @@ interface InputProps extends TextInputProps {
     onLeftIconPress?: () => void;
     onRightIconPress?: () => void;
     type?: InputType;
-    disabled?: boolean;
-    /** error message from parent (Formik, RHF, Zod, etc.) */
+    editable?: boolean;
     error?: string | boolean;
     value?: string;
     customRegex?: RegExp;
@@ -21,12 +20,21 @@ interface InputProps extends TextInputProps {
         hasError: boolean;
         message?: string;
     }) => void;
-    /** 🔥 custom styles from parent */
     containerStyle?: object;
     inputStyle?: object;
     errorTextStyle?: object;
     leftIconStyle?: object;
     rightIconStyle?: object;
+    leftIconWrapperStyle?: object;
+    rightIconWrapperStyle?: object;
+    maxLength?: number;
+    placeholder?: string;
+    inputPlaceholderTextColor?: string;
+    returnKeyType?: ReturnKeyTypeOptions | undefined;
+    countryCode?: string;
+    onPressCountryCode?: () => void;
+    countryCodeWrapperStyle?: object;
+    countryCodeTextStyle?: object;
 }
 declare const Input: React.FC<InputProps>;
 export default Input;

package/dist/components/Input/index.js

@@ -4,17 +4,22 @@ import { useTranslation } from "react-i18next";
 import { Colors, Typography, Scale, Images } from "../../styles";
 import { defaultRegex } from "../../utils/regex";
 import { messages } from "../../constants/messages";
-const Input = ({ intlType, textKey, placeholder, leftIcon, rightIcon, onLeftIconPress, onRightIconPress, style, containerStyle, inputStyle, errorTextStyle, leftIconStyle, rightIconStyle, type = "text", disabled = false, error, value = "", customRegex, customErrorMessage, onChangeText, onValidation, onBlur: restOnBlur, onFocus: restOnFocus, multiline = false, ...rest }) => {
+const Input = ({ intlType, textKey, placeholder, inputPlaceholderTextColor, leftIcon, rightIcon, onLeftIconPress, onRightIconPress, style, containerStyle, inputStyle, errorTextStyle, leftIconStyle, rightIconStyle, leftIconWrapperStyle, rightIconWrapperStyle, type = "text", editable = true, error, value = "", customRegex, customErrorMessage, onChangeText, onValidation, onBlur: restOnBlur, onFocus: restOnFocus, multiline = false, maxLength, returnKeyType, countryCode, onPressCountryCode, countryCodeTextStyle, countryCodeWrapperStyle, ...rest }) => {
     const { t } = useTranslation();
     const [secureText, setSecureText] = useState(type === "password");
     const [internalError, setInternalError] = useState(null);
     const [wasBlurred, setWasBlurred] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
-    const translatedPlaceholder = intlType && textKey ? String(t(textKey, { ns: intlType, value })) : placeholder;
-    const keyboardType = type === "email" ? "email-address" : type === "number" ? "numeric" : "default";
-    // internal validator (non-Formik, non-RHF)
+    const translatedPlaceholder = intlType && textKey
+        ? String(t(textKey, { ns: intlType, value }))
+        : placeholder;
+    const keyboardType = type === "email"
+        ? "email-address"
+        : type === "number"
+            ? "numeric"
+            : "default";
     const validateInternal = useCallback((text) => {
-        if (!wasBlurred)
+        if (!wasBlurred || !editable)
             return;
         const regexToUse = customRegex ?? defaultRegex[type];
         const fallbackMsg = messages.invalid[type] || "Invalid input";
@@ -27,7 +32,7 @@ const Input = ({ intlType, textKey, placeholder, leftIcon, rightIcon, onLeftIcon
             setInternalError(null);
             onValidation?.({ type, hasError: false });
         }
-    }, [wasBlurred, type, customRegex, customErrorMessage, onValidation]);
+    }, [wasBlurred, editable, type, customRegex, customErrorMessage, onValidation]);
     useEffect(() => {
         if (!customRegex)
             return;
@@ -49,36 +54,48 @@ const Input = ({ intlType, textKey, placeholder, leftIcon, rightIcon, onLeftIcon
         setIsFocused(false);
         if (!wasBlurred)
             setWasBlurred(true);
-        validateInternal(value || "");
+        if (editable)
+            validateInternal(value || "");
         restOnBlur?.(e);
     };
-    // Decide which error to show: external error (Formik/RHF/etc) > internal error
     const rawError = (typeof error === "string" ? error : undefined) ?? internalError ?? null;
+    // const showError = (() => {
+    //   if (!rawError || !editable) return null;
+    //   return wasBlurred && !isFocused ? rawError : null;
+    // })();
     const showError = (() => {
-        if (!rawError)
+        if (!rawError || !editable)
             return null;
+        // If error comes from parent, show it directly
+        if (typeof error === "string" && error.length > 0) {
+            return rawError;
+        }
         return wasBlurred && !isFocused ? rawError : null;
     })();
-    return (React.createElement(View, { style: { marginBottom: 10 } },
+    return (React.createElement(View, null,
         React.createElement(View, { style: [
                 styles.container,
-                disabled && styles.disabled,
+                !editable && styles.disabled,
                 !!showError && styles.errorBorder,
                 isFocused && styles.focusedBorder,
-                style, // legacy style (container)
-                containerStyle, // 🔥 custom container style
-                multiline && styles.multilineContainer, // adjust container for multiline
+                style,
+                containerStyle,
+                multiline && styles.multilineContainer,
             ] },
-            leftIcon && (React.createElement(TouchableOpacity, { onPress: onLeftIconPress, disabled: !onLeftIconPress, style: styles.iconWrapper },
+            leftIcon && (React.createElement(TouchableOpacity, { onPress: onLeftIconPress, disabled: !onLeftIconPress, style: [styles.iconWrapper, leftIconWrapperStyle] },
                 React.createElement(Image, { source: leftIcon, style: [styles.icon, leftIconStyle], resizeMode: "contain" }))),
+            countryCode && (React.createElement(TouchableOpacity, { onPress: onPressCountryCode, disabled: !onPressCountryCode, style: [styles.countryCodeWrapper, countryCodeWrapperStyle] },
+                React.createElement(Text, { style: [styles.countryCodeText, countryCodeTextStyle] }, countryCode))),
             React.createElement(TextInput, { style: [
                     styles.input,
-                    disabled && styles.disabledText,
-                    multiline && styles.multilineInput, // adjust text for multiline
-                    inputStyle, // 🔥 parent custom input style
-                ], placeholder: translatedPlaceholder, placeholderTextColor: Colors.textGrey, editable: !disabled, secureTextEntry: secureText, keyboardType: keyboardType, value: value, onChangeText: handleChangeText, onFocus: handleFocus, onBlur: handleBlur, multiline: multiline, ...rest }),
-            type === "password" ? (React.createElement(TouchableOpacity, { onPress: () => setSecureText(!secureText), style: styles.iconWrapper },
-                React.createElement(Image, { source: secureText ? Images.Eyeoff : Images.Eyeon, style: [styles.icon, rightIconStyle], resizeMode: "contain" }))) : (rightIcon && (React.createElement(TouchableOpacity, { onPress: onRightIconPress, disabled: !onRightIconPress, style: styles.iconWrapper },
+                    !editable && styles.disabledText,
+                    multiline && styles.multilineInput,
+                    inputStyle,
+                ], placeholder: translatedPlaceholder, placeholderTextColor: inputPlaceholderTextColor
+                    ? inputPlaceholderTextColor
+                    : Colors.textGrey, editable: editable, secureTextEntry: secureText, keyboardType: keyboardType, value: value, onChangeText: handleChangeText, onFocus: handleFocus, onBlur: handleBlur, multiline: multiline, maxLength: maxLength, returnKeyType: returnKeyType, ...rest }),
+            type === "password" ? (React.createElement(TouchableOpacity, { onPress: () => setSecureText(!secureText), style: [styles.iconWrapper, rightIconWrapperStyle] },
+                React.createElement(Image, { source: secureText ? Images.Eyeon : Images.Eyeoff, style: [styles.icon, rightIconStyle], resizeMode: "contain" }))) : (rightIcon && (React.createElement(TouchableOpacity, { onPress: onRightIconPress, disabled: !onRightIconPress, style: [styles.iconWrapper, rightIconWrapperStyle] },
                 React.createElement(Image, { source: rightIcon, style: [styles.icon, rightIconStyle], resizeMode: "contain" }))))),
         showError && (React.createElement(Text, { style: [styles.errorText, errorTextStyle] }, showError))));
 };
@@ -92,7 +109,7 @@ const styles = StyleSheet.create({
         borderColor: Colors.primaryColor,
         backgroundColor: Colors.white,
         height: Scale.moderateScale(50),
-        paddingHorizontal: Scale.moderateScale(10),
+        paddingHorizontal: Scale.moderateScale(4),
     },
     multilineContainer: {
         height: "auto",
@@ -136,4 +153,253 @@ const styles = StyleSheet.create({
         fontSize: Scale.moderateScale(12),
         marginTop: 3,
     },
+    countryCodeWrapper: {
+        paddingHorizontal: Scale.moderateScale(6),
+        justifyContent: "center",
+        alignItems: "center",
+        borderRightWidth: 1,
+        borderRightColor: Colors.borderGrey,
+        marginRight: Scale.moderateScale(6),
+    },
+    countryCodeText: {
+        ...Typography.style.standardU(),
+        fontSize: Scale.moderateScale(14),
+        color: Colors.textColor,
+    },
 });
+// import React, { useState, useCallback, useEffect } from "react";
+// import {
+//   View,
+//   TextInput,
+//   TextInputProps,
+//   StyleSheet,
+//   Image,
+//   ImageSourcePropType,
+//   TouchableOpacity,
+//   Text,
+//   NativeSyntheticEvent,
+//   TextInputFocusEventData,
+// } from "react-native";
+// import { useTranslation } from "react-i18next";
+// import { Colors, Typography, Scale, Images } from "../../styles";
+// import { defaultRegex, InputType } from "../../utils/regex";
+// import { messages } from "../../constants/messages";
+// interface InputProps extends TextInputProps {
+//   intlType?: string;
+//   textKey?: string;
+//   leftIcon?: ImageSourcePropType;
+//   rightIcon?: ImageSourcePropType;
+//   onLeftIconPress?: () => void;
+//   onRightIconPress?: () => void;
+//   type?: InputType;
+//   editable?: boolean;
+//   error?: string | boolean;
+//   value?: string;
+//   customRegex?: RegExp;
+//   customErrorMessage?: string;
+//   onChangeText?: (text: string) => void;
+//   onValidation?: (errorObj: { type: InputType; hasError: boolean; message?: string }) => void;
+//   containerStyle?: object;
+//   inputStyle?: object;
+//   errorTextStyle?: object;
+//   leftIconStyle?: object;
+//   rightIconStyle?: object;
+// }
+// const Input: React.FC<InputProps> = ({
+//   intlType,
+//   textKey,
+//   placeholder,
+//   leftIcon,
+//   rightIcon,
+//   onLeftIconPress,
+//   onRightIconPress,
+//   style,
+//   containerStyle,
+//   inputStyle,
+//   errorTextStyle,
+//   leftIconStyle,
+//   rightIconStyle,
+//   type = "text",
+//   editable = true,
+//   error,
+//   value = "",
+//   customRegex,
+//   customErrorMessage,
+//   onChangeText,
+//   onValidation,
+//   onBlur: restOnBlur,
+//   onFocus: restOnFocus,
+//   multiline = false,
+//   ...rest
+// }) => {
+//   const { t } = useTranslation();
+//   const [secureText, setSecureText] = useState(type === "password");
+//   const [internalError, setInternalError] = useState<string | null>(null);
+//   const [wasBlurred, setWasBlurred] = useState(false);
+//   const [isFocused, setIsFocused] = useState(false);
+//   const translatedPlaceholder =
+//     intlType && textKey ? String(t(textKey, { ns: intlType, value })) : placeholder;
+//   const keyboardType: TextInputProps["keyboardType"] =
+//     type === "email" ? "email-address" : type === "number" ? "numeric" : "default";
+//   const validateInternal = useCallback(
+//     (text: string) => {
+//       if (!wasBlurred || !editable) return;
+//       const regexToUse = customRegex ?? defaultRegex[type];
+//       const fallbackMsg = messages.invalid[type] || "Invalid input";
+//       const msg = customErrorMessage || fallbackMsg;
+//       if (text === "" || !regexToUse.test(text)) {
+//         setInternalError(msg);
+//         onValidation?.({ type, hasError: true, message: msg });
+//       } else {
+//         setInternalError(null);
+//         onValidation?.({ type, hasError: false });
+//       }
+//     },
+//     [wasBlurred, editable, type, customRegex, customErrorMessage, onValidation]
+//   );
+//   useEffect(() => {
+//     if (!customRegex) return;
+//     if (internalError && value && customRegex.test(value)) {
+//       setInternalError(null);
+//       onValidation?.({ type, hasError: false });
+//     }
+//   }, [value]);
+//   const handleChangeText = (text: string) => {
+//     onChangeText?.(text);
+//     if (wasBlurred) validateInternal(text);
+//   };
+//   const handleFocus = (e?: NativeSyntheticEvent<TextInputFocusEventData>) => {
+//     setIsFocused(true);
+//     restOnFocus?.(e as any);
+//   };
+//   const handleBlur = (e?: NativeSyntheticEvent<TextInputFocusEventData>) => {
+//     setIsFocused(false);
+//     if (!wasBlurred) setWasBlurred(true);
+//     if (editable) validateInternal(value || "");
+//     restOnBlur?.(e as any);
+//   };
+//   const rawError = (typeof error === "string" ? error : undefined) ?? internalError ?? null;
+//   const showError = (() => {
+//     if (!rawError || !editable) return null;
+//     return wasBlurred && !isFocused ? rawError : null;
+//   })();
+//   return (
+//     <View style={{ marginBottom: 10 }}>
+//       <View
+//         style={[
+//           styles.container,
+//           !editable && styles.disabled,
+//           !!showError && styles.errorBorder,
+//           isFocused && styles.focusedBorder,
+//           style,
+//           containerStyle,
+//           multiline && styles.multilineContainer,
+//         ]}
+//       >
+//         {leftIcon && (
+//           <TouchableOpacity
+//             onPress={onLeftIconPress}
+//             disabled={!onLeftIconPress}
+//             style={styles.iconWrapper}
+//           >
+//             <Image source={leftIcon} style={[styles.icon, leftIconStyle]} resizeMode="contain" />
+//           </TouchableOpacity>
+//         )}
+//         <TextInput
+//           style={[
+//             styles.input,
+//             !editable && styles.disabledText,
+//             multiline && styles.multilineInput,
+//             inputStyle,
+//           ]}
+//           placeholder={translatedPlaceholder}
+//           placeholderTextColor={Colors.textGrey}
+//           editable={editable}
+//           secureTextEntry={secureText}
+//           keyboardType={keyboardType}
+//           value={value}
+//           onChangeText={handleChangeText}
+//           onFocus={handleFocus}
+//           onBlur={handleBlur}
+//           multiline={multiline}
+//           {...rest}
+//         />
+//         {type === "password" ? (
+//           <TouchableOpacity onPress={() => setSecureText(!secureText)} style={styles.iconWrapper}>
+//             <Image
+//               source={secureText ? Images.Eyeoff : Images.Eyeon}
+//               style={[styles.icon, rightIconStyle]}
+//               resizeMode="contain"
+//             />
+//           </TouchableOpacity>
+//         ) : (
+//           rightIcon && (
+//             <TouchableOpacity
+//               onPress={onRightIconPress}
+//               disabled={!onRightIconPress}
+//               style={styles.iconWrapper}
+//             >
+//               <Image source={rightIcon} style={[styles.icon, rightIconStyle]} resizeMode="contain" />
+//             </TouchableOpacity>
+//           )
+//         )}
+//       </View>
+//       {showError && <Text style={[styles.errorText, errorTextStyle]}>{showError}</Text>}
+//     </View>
+//   );
+// };
+// export default Input;
+// const styles = StyleSheet.create({
+//   container: {
+//     flexDirection: "row",
+//     alignItems: "center",
+//     borderRadius: 5,
+//     borderWidth: 1,
+//     borderColor: Colors.primaryColor,
+//     backgroundColor: Colors.white,
+//     height: Scale.moderateScale(50),
+//     paddingHorizontal: Scale.moderateScale(4),
+//   },
+//   multilineContainer: {
+//     height: "auto",
+//     minHeight: Scale.moderateScale(80),
+//     alignItems: "flex-start",
+//     paddingVertical: Scale.moderateScale(8),
+//   },
+//   focusedBorder: {
+//     borderColor: Colors.primaryColor,
+//   },
+//   input: {
+//     flex: 1,
+//     ...Typography.style.standardU(),
+//     textTransform: "none",
+//     color: Colors.textColor,
+//   },
+//   multilineInput: {
+//     textAlignVertical: "top",
+//     paddingTop: Scale.moderateScale(5),
+//   },
+//   iconWrapper: {
+//     padding: Scale.moderateScale(5),
+//   },
+//   icon: {
+//     width: Scale.moderateScale(20),
+//     height: Scale.moderateScale(20),
+//     tintColor: Colors.primaryColor,
+//   },
+//   disabled: {
+//     backgroundColor: Colors.lightGrey,
+//     borderColor: Colors.borderGrey,
+//   },
+//   disabledText: {
+//     color: Colors.disabledGrey,
+//   },
+//   errorBorder: {
+//     borderColor: Colors.dangerRed,
+//   },
+//   errorText: {
+//     color: Colors.dangerRed,
+//     fontSize: Scale.moderateScale(12),
+//     marginTop: 3,
+//   },
+// });

package/dist/components/KeyboardScroll/index.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const KeyboardScroll: (props: any) => React.JSX.Element;
+export default KeyboardScroll;