Bugfix: Style problems fixed for spreadBehaviour stretch state in TextInput component.

example/package.json

@@ -19,6 +19,7 @@
         "react-dom": "19.2.0",
         "react-native": "0.83.2",
         "react-native-portalize": "^1.0.7",
+        "react-native-safe-area-context": "^5.7.0",
         "react-native-svg": "^15.15.3",
         "react-native-web": "~0.21.0"
     },

example/src/index.tsx

@@ -12,6 +12,7 @@ import {
     useFonts
 } from "expo-font";
 import packageJSON from "../package.json";
+import TextInput from "../../src/components/textInput";
 
 const NCoreUIKitBase = setupNCoreUIKit({
     initialSelectedGapPropagation: "compact",
@@ -31,6 +32,9 @@ const App = () => {
             }
         ]}
     >
+        <TextInput
+            variant="hidden"
+        />
         <Text>Version: v{packageJSON.version}</Text>
         <Button
             onPress={() => {

react-native.config.js

@@ -3,5 +3,5 @@ module.exports = {
         assets: [
             "./src/assets/fonts"
         ]
-    },
+    }
 };

src/components/textInput/index.tsx

@@ -216,13 +216,13 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
             return null;
         }
 
-        return <View
+        return <TouchableOpacity
             style={[
                 cleanIconStyle,
                 stylesheet.cleanButton,
                 cleanButtonDynamicStyle
             ]}
-            onClick={() => {
+            onPress={() => {
                 if(onChangeText) {
                     onChangeText("");
                 }
@@ -233,7 +233,7 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
                 color="mid"
                 size={20}
             />
-        </View>;
+        </TouchableOpacity>;
     };
 
     const renderIcon = () => {
@@ -241,8 +241,8 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
             return null;
         }
 
-        return <View
-            onClick={iconOnPress}
+        return <TouchableOpacity
+            onPress={iconOnPress}
             style={[
                 iconStyle,
                 stylesheet.icon,
@@ -253,7 +253,7 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
                 color={iconProps.color}
                 size={iconProps.size}
             />
-        </View>;
+        </TouchableOpacity>;
     };
 
     const renderRightIcon = () => {
@@ -269,8 +269,8 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
             return null;
         }
 
-        return <View
-            onClick={rightIconOnPress}
+        return <TouchableOpacity
+            onPress={rightIconOnPress}
             style={[
                 rightIconStyle,
                 stylesheet.rightIcon,
@@ -281,7 +281,7 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
                 color={iconProps.color}
                 size={iconProps.size}
             />
-        </View>;
+        </TouchableOpacity>;
     };
 
     const renderHideTextIcon = () => {
@@ -293,8 +293,8 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
             return null;
         }
 
-        return <View
-            onClick={toggleValueVisibility}
+        return <TouchableOpacity
+            onPress={toggleValueVisibility}
             style={[
                 hideTextIconStyle,
                 stylesheet.hideTextIconContainer,
@@ -311,7 +311,7 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
                     size={20}
                 />
             }
-        </View>;
+        </TouchableOpacity>;
     };
 
     const renderHintIcon = () => {

src/components/textInput/stylesheet.ts

@@ -106,7 +106,8 @@ const stylesheet = StyleSheet.create({
         borderStyle: "solid",
         alignItems: "center",
         position: "relative",
-        display: "flex"
+        display: "flex",
+        minWidth: 250
     },
     input: {
         backgroundColor: "transparent",
@@ -118,8 +119,8 @@ const stylesheet = StyleSheet.create({
         borderWidth: 0,
         paddingTop: 0,
         minHeight: 20,
-        width: "100%",
-        zIndex: 99
+        zIndex: 99,
+        flex: 1
     },
     cleanButton: {
         justifyContent: "center",

yarn.lock

@@ -13058,6 +13058,7 @@ __metadata:
     react-native-builder-bob: "npm:0.40.13"
     react-native-monorepo-config: "npm:0.3.3"
     react-native-portalize: "npm:^1.0.7"
+    react-native-safe-area-context: "npm:^5.7.0"
     react-native-svg: "npm:^15.15.3"
     react-native-web: "npm:~0.21.0"
   languageName: unknown
@@ -13093,7 +13094,7 @@ __metadata:
     react-native: "npm:0.83.2"
     react-native-builder-bob: "npm:0.40.13"
     react-native-portalize: "npm:1.0.7"
-    react-native-safe-area-context: "npm:^5.7.0"
+    react-native-safe-area-context: "npm:5.7.0"
     react-native-svg: "npm:15.15.3"
     release-it: "npm:19.0.4"
     turbo: "npm:2.5.6"
@@ -13105,6 +13106,7 @@ __metadata:
     react: "*"
     react-native: "*"
     react-native-portalize: ">= 1.0.7"
+    react-native-safe-area-context: ">= 5.7.0"
     react-native-svg: ">= 15.15.3"
   languageName: unknown
   linkType: soft
@@ -14636,7 +14638,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-safe-area-context@npm:^5.7.0":
+"react-native-safe-area-context@npm:5.7.0, react-native-safe-area-context@npm:^5.7.0":
   version: 5.7.0
   resolution: "react-native-safe-area-context@npm:5.7.0"
   peerDependencies: