Merge pull request #4911 from GeekyAnts/fix/ref-typing

Fix/ref typing

Author: surajahmed

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