Merge pull request #4956 from GeekyAnts/release/3.4.2-rc.0

Release/3.4.2 rc.0

Author: surajahmed

example/storybook/stories/components/basic/View/Basic.tsx

@@ -7,7 +7,7 @@ export const Example = () => {
         A component library for the{' '}
         <Heading color="emerald.400">React Ecosystem</Heading>
       </Heading>
-      <Text pt="3" fontWeight="md">
+      <Text pt="3">
         NativeBase is a simple, modular and accessible component library that
         gives you building blocks to build you React applications.
       </Text>

example/storybook/stories/components/primitives/Image/BorderRadius.tsx

@@ -5,7 +5,6 @@ export function Example() {
     <Center>
       <Image
         size={150}
-        resizeMode={'contain'}
         borderRadius={100}
         source={{
           uri: 'https://wallpaperaccess.com/full/317501.jpg',

example/storybook/stories/components/primitives/Image/WithRef.tsx

@@ -6,8 +6,14 @@ export function Example() {
   const myRef = React.useRef(null);
 
   React.useEffect(() => {
-    if (myRef.current && myRef.current.setNativeProps)
-      myRef.current?.setNativeProps({ borderWidth: 10, opacity: 0.5 });
+    const styleObj = {
+      borderWidth: 4,
+      borderRadius: 4,
+      borderColor: '#22D3EE',
+    };
+    myRef?.current?.setNativeProps({
+      style: styleObj,
+    });
   }, [myRef]);
 
   return (

example/storybook/stories/components/primitives/Input/Size.tsx

@@ -3,7 +3,7 @@ import { Input, Stack } from 'native-base';
 
 export const Example = () => {
   return (
-    <Stack space={4} w="75%" maxW="300px">
+    <Stack space={4} w="75%" maxW="300px" mx="auto">
       <Input size="xs" placeholder="xs Input" />
       <Input size="sm" placeholder="sm Input" />
       <Input size="md" placeholder="md Input" />

example/storybook/stories/components/primitives/Input/Variant.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Input, Stack } from 'native-base';
 export const Example = () => {
   return (
-    <Stack space={4} w="75%" maxW="300px">
+    <Stack space={4} w="75%" maxW="300px" mx="auto">
       <Input variant="outline" placeholder="Outline" />
       <Input variant="filled" placeholder="Filled" />
       <Input variant="underlined" placeholder="Underlined" />

example/storybook/stories/components/primitives/Select/Basic.tsx

@@ -6,7 +6,7 @@ export const Example = () => {
 
   return (
     <Center>
-      <Box w="3/4" maxW="300">
+      <Box maxW="300">
         <Select
           selectedValue={service}
           minWidth="200"

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"
       />

package.json

@@ -36,7 +36,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.4.1",
+  "version": "3.4.2-rc.0",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",

src/components/composites/Modal/Modal.tsx

@@ -55,6 +55,7 @@ const Modal = (
       bottom={avoidKeyboard ? bottomInset + 'px' : undefined}
       {...resolvedProps}
       ref={ref}
+      pointerEvents="box-none"
     >
       {children}
     </Box>

src/components/primitives/Checkbox/Checkbox.web.tsx

@@ -147,11 +147,7 @@ const CheckboxComponent = React.memo(
         <Stack {..._stack} {...layoutProps}>
           <Center>
             {/* Interaction Box */}
-            <Box
-              {..._interactionBox}
-              h={isFocusVisible || isFocusVisibleProp ? '130%' : '0%'}
-              w={isFocusVisible || isFocusVisibleProp ? '130%' : '0%'}
-            />
+            <Box {..._interactionBox} />
             {/* Checkbox */}
             <Center {...nonLayoutProps}>
               {/* {iconResolver()} */}
@@ -170,10 +166,8 @@ const CheckboxComponent = React.memo(
       _interactionBox,
       icon,
       isChecked,
-      isFocusVisible,
       nonLayoutProps,
       layoutProps,
-      isFocusVisibleProp,
       resolvedProps?.children,
     ]);