Bugfix: General problems fixed.

example/src/pages/components/markdownViewer/index.tsx

@@ -74,13 +74,21 @@ const MarkdownViewerPage = () => {
             >
                 {localize("markdownViewer-desc")}
             </Text>
+            <TextAreaInput
+                placeholder={localize("markdownViewer-enterContent")}
+                title={localize("markdownViewer-contentLabel")}
+                spreadBehaviour="stretch"
+                onChangeText={setContent}
+                isUpdateOnRealtime={true}
+                value={content}
+            />
             <View
                 style={[
                     stylesheet.paddedMarginContainer,
                     {
                         borderColor: colors.content.border.subtle,
-                        marginBottom: spaces.spacingMd,
                         borderRadius: radiuses.form,
+                        marginTop: spaces.spacingMd,
                         borderWidth: borders.line,
                         padding: spaces.spacingMd
                     }
@@ -90,17 +98,6 @@ const MarkdownViewerPage = () => {
                     content={content}
                 />
             </View>
-            <TextAreaInput
-                placeholder={localize("markdownViewer-enterContent")}
-                title={localize("markdownViewer-contentLabel")}
-                style={{
-                    marginBottom: spaces.spacingMd
-                }}
-                spreadBehaviour="stretch"
-                onChangeText={setContent}
-                isUpdateOnRealtime={true}
-                value={content}
-            />
         </View>
     </PageContainer>;
 };

example/src/pages/components/markdownViewer/stylesheet.ts

@@ -41,6 +41,9 @@ const stylesheet = StyleSheet.create({
     },
     paddedMarginContainer: {
         minHeight: 120
+    },
+    markdownEditor: {
+        minHeight: 350
     }
 });
 export default stylesheet;

src/components/modal/index.tsx

@@ -1,7 +1,10 @@
 import {
     useImperativeHandle,
+    isValidElement,
+    cloneElement,
     forwardRef,
     useEffect,
+    Children,
     useState,
     useRef
 } from "react";
@@ -223,13 +226,30 @@ const Modal: RefForwardingComponent<IModalRef, IModalProps> = ({
             return null;
         }
 
+        let contentToRender = children;
+
+        if(Children.count(children) === 1) {
+            const singleChild = Children.toArray(children)[0];
+
+            if(isValidElement<{ style?: unknown }>(singleChild)) {
+                contentToRender = cloneElement(singleChild, {
+                    style: [
+                        singleChild.props.style,
+                        {
+                            zIndex: stylesheet.content.zIndex
+                        }
+                    ]
+                });
+            }
+        }
+
         return <View
             style={[
                 contentStyle,
                 stylesheet.content
             ]}
         >
-            {children}
+            {contentToRender}
         </View>;
     };
 

src/components/modal/stylesheet.ts

@@ -13,6 +13,7 @@ const stylesheet = StyleSheet.create({
         top: 0
     },
     overlay: {
+        pointerEvents: "none",
         position: "absolute",
         zIndex: 99995,
         bottom: 0,

src/components/textAreaInput/index.tsx

@@ -69,6 +69,7 @@ const TextAreaInput: RefForwardingComponent<ITextAreaInputRef, ITextAreaInputPro
     type = "default",
     rightIconOnPress,
     maxHeight = 350,
+    minHeight = 250,
     customLocalize,
     rightIconStyle,
     isShowSubTitle,
@@ -144,6 +145,7 @@ const TextAreaInput: RefForwardingComponent<ITextAreaInputRef, ITextAreaInputPro
         typography,
         isFocused,
         maxHeight,
+        minHeight,
         radiuses,
         borders,
         spaces,
@@ -502,6 +504,7 @@ const TextAreaInput: RefForwardingComponent<ITextAreaInputRef, ITextAreaInputPro
 
     const renderOverlay = () => {
         return <View
+            pointerEvents="none"
             style={[
                 stylesheet.overlay,
                 overlayDynamicStyle
@@ -509,23 +512,27 @@ const TextAreaInput: RefForwardingComponent<ITextAreaInputRef, ITextAreaInputPro
         />;
     };
 
-    return <TouchableOpacity
-        disabled={isDisabled}
+    return <View
         style={[
             style,
             stylesheet.container,
             containerDynamicStyle
         ]}
-        onPress={() => {
-            if(!isDisabled) inputRef.current?.focus();
-        }}
         {...Platform.select({
+            default: {
+                onResponderRelease: () => {
+                    if (!isDisabled) inputRef.current?.focus();
+                },
+                onStartShouldSetResponder: () => false
+            },
             web: {
-                dataSet: {
-                    disablePressableDownEffect: "true"
+                onClick: () => {
+                    if (!isDisabled) inputRef.current?.focus();
+                },
+                style: {
+                    cursor: isDisabled ? "default" : "text"
                 }
-            },
-            default: {}
+            } as Record<string, unknown>
         })}
     >
         {renderTitle()}
@@ -548,6 +555,6 @@ const TextAreaInput: RefForwardingComponent<ITextAreaInputRef, ITextAreaInputPro
         </View>
 
         {renderHintText()}
-    </TouchableOpacity>;
+    </View>;
 };
 export default forwardRef(TextAreaInput);

src/components/textAreaInput/stylesheet.ts

@@ -193,6 +193,7 @@ export const useStyles = ({
     isDisabled,
     isFocused,
     maxHeight,
+    minHeight,
     radiuses,
     borders,
     colors,
@@ -218,6 +219,7 @@ export const useStyles = ({
         input: {
             ...typography.labelLargeSize,
             color: colors.content.text[currentType.inputColor],
+            minHeight: minHeight,
             maxHeight: maxHeight
         } as Mutable<TextStyle>,
         cleanButton: {

src/components/textAreaInput/type.ts

@@ -31,6 +31,7 @@ export type TextAreaInputDynamicStyleType = {
     type: TextAreaInputType;
     isDisabled?: boolean;
     maxHeight?: number;
+    minHeight?: number;
     isFocused: boolean;
     title?: string;
     icon?: boolean;
@@ -92,6 +93,7 @@ interface ITextAreaInputProps extends TextInputProps {
     isOptional?: boolean;
     onFocus?: () => void;
     onBlur?: () => void;
+    minHeight?: number;
     maxHeight?: number;
     hintText?: string;
     subTitle?: string;