Merge branch 'fix/platform-typing-3.4' of github.com:GeekyAnts/NativeBase into fix/ref-typing

Author: Viraj-10

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>
   );

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

@@ -13,7 +13,7 @@ import type { IStackProps } from '../Stack/Stack';
 import type { MutableRefObject } from 'react';
 
 export interface InterfaceInputProps
-  extends PlatformProps<any>,
+  extends PlatformProps<IInputProps>,
     Omit<TextInputProps, 'textAlign'>,
     StyledProps {
   /**

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.
    */