Merge pull request #4913 from GeekyAnts/release/3.4.0-rc.12

Release/3.4.0 rc.12

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

@@ -62,9 +62,9 @@ export const Example = () => {
           <Box
             borderBottomWidth="1"
             _dark={{
-              borderColor: 'gray.600',
+              borderColor: 'muted.50',
             }}
-            borderColor="coolGray.200"
+            borderColor="muted.800"
             pl="4"
             pr="5"
             py="2"

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

@@ -3,56 +3,54 @@ import { ScrollView, VStack, Center, useTheme, Heading } from 'native-base';
 export const Example = () => {
   const { colors } = useTheme();
   return (
-    <Center>
-      <ScrollView
-        maxW="300"
-        h="80"
-        _contentContainerStyle={{
-          px: '20px',
-          mb: '4',
-          minW: '72',
-        }}
-      >
-        <Center mt="3" mb="4">
-          <Heading fontSize="xl">Cyan</Heading>
-        </Center>
-        <VStack flex="1">
-          {Object.keys(colors.cyan).map((key, index) => {
-            if (index >= 1 && index <= 5)
-              return (
-                <Center py="4" bg={`cyan.${key}`}>
-                  {key}
-                </Center>
-              );
-          })}
-        </VStack>
-        <Center mt="8" mb="4">
-          <Heading fontSize="xl">Yellow</Heading>
-        </Center>
-        <VStack flex="1">
-          {Object.keys(colors.cyan).map((key, index) => {
-            if (index >= 1 && index <= 5)
-              return (
-                <Center py="4" bg={`yellow.${key}`}>
-                  {key}
-                </Center>
-              );
-          })}
-        </VStack>
-        <Center mt="8" mb="4">
-          <Heading fontSize="xl"> Violet</Heading>
-        </Center>
-        <VStack flex="1">
-          {Object.keys(colors.violet).map((key, index) => {
-            if (index >= 1 && index <= 5)
-              return (
-                <Center py="4" bg={`violet.${key}`}>
-                  {key}
-                </Center>
-              );
-          })}
-        </VStack>
-      </ScrollView>
-    </Center>
+    <ScrollView
+      maxW="300"
+      h="80"
+      _contentContainerStyle={{
+        px: '20px',
+        mb: '4',
+        minW: '72',
+      }}
+    >
+      <Center mt="3" mb="4">
+        <Heading fontSize="xl">Cyan</Heading>
+      </Center>
+      <VStack flex="1">
+        {Object.keys(colors.cyan).map((key, index) => {
+          if (index >= 1 && index <= 5)
+            return (
+              <Center py="4" bg={`cyan.${key}`}>
+                {key}
+              </Center>
+            );
+        })}
+      </VStack>
+      <Center mt="8" mb="4">
+        <Heading fontSize="xl">Yellow</Heading>
+      </Center>
+      <VStack flex="1">
+        {Object.keys(colors.cyan).map((key, index) => {
+          if (index >= 1 && index <= 5)
+            return (
+              <Center py="4" bg={`yellow.${key}`}>
+                {key}
+              </Center>
+            );
+        })}
+      </VStack>
+      <Center mt="8" mb="4">
+        <Heading fontSize="xl"> Violet</Heading>
+      </Center>
+      <VStack flex="1">
+        {Object.keys(colors.violet).map((key, index) => {
+          if (index >= 1 && index <= 5)
+            return (
+              <Center py="4" bg={`violet.${key}`}>
+                {key}
+              </Center>
+            );
+        })}
+      </VStack>
+    </ScrollView>
   );
 };

example/storybook/stories/components/composites/Alert/knobEnabled.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, Box, CloseIcon, IconButton } from 'native-base';
+import { Alert, Box, CloseIcon, IconButton, Text } from 'native-base';
 import { select } from '@storybook/addon-knobs';
 
 export const Example = () => {
@@ -21,8 +21,8 @@ export const Example = () => {
         actionProps={{ alignSelf: 'center' }}
       >
         <Alert.Icon />
-        <Alert.Title>Error Alert</Alert.Title>
-        <Alert.Description>Description </Alert.Description>
+        <Text>Error Alert</Text>
+        <Text>Description </Text>
       </Alert>
     </Box>
   );

example/storybook/stories/components/composites/Menu/Basic.tsx

@@ -3,7 +3,7 @@ import { Menu, HamburgerIcon, Box, Pressable } from 'native-base';
 
 export function Example() {
   return (
-    <Box h="80%" w="90%" alignItems="flex-start">
+    <Box w="90%" alignItems="center">
       <Menu
         w="190"
         trigger={(triggerProps) => {

example/storybook/stories/components/composites/Menu/Group.tsx

@@ -3,7 +3,7 @@ import { Menu, Divider, HamburgerIcon, Box, Pressable } from 'native-base';
 
 export function Example() {
   return (
-    <Box h="80%" w="90%" alignItems="flex-start">
+    <Box w="90%" alignItems="center">
       <Menu
         w="190"
         trigger={(triggerProps) => {

example/storybook/stories/components/composites/Menu/MenuOptionsGroup.tsx

@@ -3,7 +3,7 @@ import { Menu, Divider, HamburgerIcon, Box, Pressable } from 'native-base';
 
 export function Example() {
   return (
-    <Box h="80%" w="90%" alignItems="flex-start">
+    <Box w="90%" alignItems="center">
       <Menu
         closeOnSelect={false}
         w="190"

example/storybook/stories/components/composites/Popover/Basic.tsx

@@ -3,7 +3,7 @@ import { Popover, Button, Box } from 'native-base';
 
 export function Example() {
   return (
-    <Box h="60%" w="100%" alignItems="center">
+    <Box w="100%" alignItems="center">
       <Popover
         trigger={(triggerProps) => {
           return (

example/storybook/stories/components/composites/Popover/PopoverPositions.tsx

@@ -6,7 +6,7 @@ export function Example() {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <Box h="60%" w="100%" alignItems="center">
+    <Box w="100%" alignItems="center">
       <VStack space={6} alignSelf="flex-start" w="100%">
         <Popover
           // @ts-ignore

example/storybook/stories/components/composites/Popover/RefEg.tsx

@@ -4,7 +4,7 @@ import { Popover, Button, Input, FormControl, Box } from 'native-base';
 export function Example() {
   const initialFocusRef = React.useRef(null);
   return (
-    <Box h="60%" w="100%" alignItems="center">
+    <Box w="100%" alignItems="center">
       <Popover
         initialFocusRef={initialFocusRef}
         trigger={(triggerProps) => {

package.json

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

src/components/basic/FlatList/types.ts

@@ -1,6 +1,7 @@
 import type { StyledProps } from '../../../theme/types';
 import type { FlatListProps } from 'react-native';
 import type { CustomProps, PlatformProps } from '../../types';
+import type { MutableRefObject } from 'react';
 
 export interface InterfaceFlatListProps<ItemT>
   extends FlatListProps<ItemT>,
@@ -10,6 +11,8 @@ export interface InterfaceFlatListProps<ItemT>
    * pass props to contentContainerStyle, and this also resolved NB tokens.
    */
   _contentContainerStyle?: Partial<IFlatListProps<ItemT>>;
+
+  ref?: MutableRefObject<any>;
 }
 
 export type IFlatListProps<ItemT> = InterfaceFlatListProps<ItemT> &

src/components/basic/SectionList/types.ts

@@ -1,14 +1,17 @@
 import type { StyledProps } from '../../../theme/types';
 import type { SectionListProps } from 'react-native';
 import type { CustomProps, PlatformProps } from '../../types';
+import type { MutableRefObject } from 'react';
 type DefaultSectionT = {
   [key: string]: any;
 };
 // TODO: any need to fixed
 export interface InterfaceSectionListProps<ItemT, sectionT = DefaultSectionT>
   extends SectionListProps<ItemT, sectionT>,
     StyledProps,
-    PlatformProps<ISectionListProps<ItemT, sectionT>> {}
+    PlatformProps<ISectionListProps<ItemT, sectionT>> {
+  ref?: MutableRefObject<any>;
+}
 
 export type ISectionListProps<
   ItemT,

src/components/composites/AlertDialog/AlertDialog.tsx

@@ -70,6 +70,7 @@ const AlertDialog = (
       onRequestClose={handleClose}
       isKeyboardDismissable={isKeyboardDismissable}
       useRNModalOnAndroid
+      unmountOnExit
     >
       <AlertDialogContext.Provider
         value={{

src/components/composites/AlertDialog/types.ts

@@ -1,4 +1,4 @@
-import type { IBoxProps } from '../../primitives/Box';
+import type { IBoxProps, InterfaceBoxProps } from '../../primitives/Box';
 import type { IIconButtonProps } from '../IconButton';
 import type { MutableRefObject } from 'react';
 import type { IFadeProps, ISlideProps } from '../Transitions';
@@ -7,7 +7,8 @@ import type {
   ThemeComponentSizeType,
 } from '../../../components/types/utils';
 
-export interface InterfaceAlertDialogProps extends IBoxProps {
+export interface InterfaceAlertDialogProps
+  extends InterfaceBoxProps<IAlertDialogProps> {
   /**
    * If true, the AlertDialog will open. Useful for controllable state behaviour
    */

src/components/composites/IconButton/index.tsx

@@ -51,6 +51,7 @@ const IconButton = (
   if (icon) {
     clonedIcon = React.cloneElement(icon, {
       ..._icon,
+      ...icon?.props,
     });
   }
 

src/components/composites/IconButton/types.ts

@@ -1,11 +1,14 @@
 import type { InterfacePressableProps } from '../../primitives/Pressable/types';
 import type { IIconProps } from '../../primitives/Icon';
-import type { ColorSchemeType } from '../../../components/types';
+import type { ColorSchemeType, PlatformProps } from '../../../components/types';
 
 import type { CustomProps, VariantType } from '../../types';
 import type { ThemeComponentSizeType } from '../../../components/types/utils';
 export interface InterfaceIconButtonProps
-  extends Omit<InterfacePressableProps, 'children' | 'color'>,
+  extends Omit<
+      InterfacePressableProps,
+      'children' | 'color' | '_light' | '_dark' | '_web' | '_android' | '_ios'
+    >,
     Omit<
       IIconProps,
       | 'delayLongPress'
@@ -22,7 +25,8 @@ export interface InterfaceIconButtonProps
       | '_web'
       | '_android'
       | '_ios'
-    > {
+    >,
+    PlatformProps<IIconButtonProps> {
   /**
    * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
    * @default 'primary'

src/components/primitives/Checkbox/Checkbox.tsx

@@ -72,6 +72,7 @@ const Checkbox = (
   const inputProps = React.useMemo(() => groupItemInputProps, [
     groupItemInputProps.checked,
     groupItemInputProps.disabled,
+    groupItemInputProps,
   ]);
 
   const [contextCombinedProps] = React.useState({

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

@@ -76,6 +76,7 @@ const Checkbox = (
   const inputProps = React.useMemo(() => groupItemInputProps, [
     groupItemInputProps.checked,
     groupItemInputProps.disabled,
+    groupItemInputProps,
   ]);
 
   const [contextCombinedProps] = React.useState({

src/components/primitives/Icon/types.ts

@@ -9,7 +9,7 @@ import type { CustomProps, ThemeComponentSizeType } from '../../types/utils';
 export interface InterfaceIconProps
   extends Omit<
       SvgProps,
-      'opacity' | 'fill' | 'stroke' | 'height' | 'width' | 'transform' | 'color'
+      'opacity' | 'stroke' | 'height' | 'width' | 'transform' | 'color'
     >,
     StyledProps,
     PlatformProps<IIconProps> {

src/components/primitives/Input/types.ts

@@ -10,9 +10,10 @@ import type { ResponsiveValue, ColorType } from '../../../components/types';
 import type { ISizes } from '../../../theme/base/sizes';
 import type { CustomProps } from '../../types';
 import type { IStackProps } from '../Stack/Stack';
+import type { MutableRefObject } from 'react';
 
 export interface InterfaceInputProps
-  extends PlatformProps<any>,
+  extends PlatformProps<IInputProps>,
     Omit<TextInputProps, 'textAlign'>,
     StyledProps {
   /**
@@ -110,6 +111,7 @@ export interface InterfaceInputProps
   focusOutlineColor?: ColorType;
   /** This prop allow you to change outlineColor when input is in focused state*/
   inValidOutlineColor?: ColorType;
+  ref?: MutableRefObject<any>;
 }
 
 export interface IInputGroupProps extends InterfaceBoxProps<IInputGroupProps> {

src/components/primitives/Radio/types.tsx

@@ -106,6 +106,8 @@ export interface InterfaceRadioProps extends InterfaceBoxProps<IRadioProps> {
    * You can style interaction box around the checkbox using this.
    */
   _interactionBox?: Omit<Partial<IRadioProps>, '_interactionBox'>;
+
+  ref?: MutableRefObject<any>;
 }
 export interface IRadioGroupProps extends IStackProps {
   /**

src/components/primitives/TextArea/index.tsx

@@ -5,7 +5,13 @@ import { usePropsResolution } from '../../../hooks/useThemeProps';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
 import { useHover } from '@react-native-aria/interactions';
 import { mergeRefs } from '../../../utils';
-export interface ITextAreaProps extends InterfaceInputProps {
+import type { PlatformProps } from '../../../components/types';
+export interface ITextAreaProps
+  extends Omit<
+      InterfaceInputProps,
+      '_web' | '_android' | '_ios' | '_light' | '_dark'
+    >,
+    PlatformProps<ITextAreaProps> {
   /**
    * Maps to react-native TextInput's numberOfLines.
    */