Merge pull request #4942 from GeekyAnts/fix/textarea-value

Fix/textarea minor issues

Author: surajahmed

example/storybook/stories/components/primitives/TextArea/value.tsx

@@ -3,14 +3,12 @@ import { TextArea, Box } from 'native-base';
 
 export const Example = () => {
   const [textAreaValue, setTextAreaValue] = useState('Value Controlled');
-  const demoValueControlledTextArea = (e: any) => {
-    setTextAreaValue(e.currentTarget.value);
-  };
   return (
     <Box alignItems="center" w="100%">
       <TextArea
         value={textAreaValue}
-        onChange={demoValueControlledTextArea}
+        onChange={(e: any) => setTextAreaValue(e.currentTarget.value)} // for web
+        onChangeText={(text: any) => setTextAreaValue(text)} // for android and ios
         w="75%"
         maxW="300"
       />

src/components/primitives/TextArea/index.tsx

@@ -19,20 +19,34 @@ export interface ITextAreaProps
 }
 
 const TextArea = (
-  { wrapperRef, isDisabled, isInvalid, isReadOnly, ...props }: ITextAreaProps,
+  {
+    wrapperRef,
+    isDisabled,
+    isInvalid,
+    isReadOnly,
+    isFocused: isFocusedProp,
+    isHovered: isHoveredProp,
+    ...props
+  }: ITextAreaProps,
   ref: any
 ) => {
   const _ref = React.useRef(null);
   const { isHovered } = useHover({}, _ref);
-  const [isFocused, setIsFocused] = React.useState(false);
+  const [isFocused, setIsFocused] = React.useState(isFocusedProp);
   const handleFocus = (focusState: boolean, callback: any) => {
     setIsFocused(focusState);
     callback();
   };
   const { totalLines, onFocus, onBlur, ...newProps } = usePropsResolution(
     'TextArea',
     props,
-    { isHovered, isDisabled, isFocused, isInvalid, isReadOnly },
+    {
+      isHovered: isHoveredProp || isHovered,
+      isDisabled,
+      isFocused,
+      isInvalid,
+      isReadOnly,
+    },
     { extendTheme: ['Input'] }
   );
   //TODO: refactor for responsive prop

src/theme/components/input.ts

@@ -27,6 +27,7 @@ const baseStyle = (props: any) => {
       bg: 'transparent',
       flex: 1,
       w: '100%',
+      h: '100%',
     },
     _light: {
       placeholderTextColor: 'text.400',

src/theme/components/textarea.ts

@@ -1,11 +1,8 @@
-import { Platform } from 'react-native';
-
 const baseStyle = {
   multiline: true,
   p: '2',
-  totalLines: 4,
-  h: Platform.select({ ios: 20 }),
   textAlignVertical: 'top',
+  h: '20',
 };
 
 export default {