chore: fix typescript issues

Author: lukewalczak

example/src/Examples/DialogExample.tsx

@@ -3,6 +3,7 @@ import { Platform, StyleSheet } from 'react-native';
 
 import { Button } from 'react-native-paper';
 
+import { useExampleTheme } from '..';
 import {
   DialogWithCustomColors,
   DialogWithDismissableBackButton,
@@ -12,7 +13,6 @@ import {
   DialogWithRadioBtns,
   UndismissableDialog,
 } from './Dialogs';
-import { useExampleTheme } from '..';
 import ScreenWrapper from '../ScreenWrapper';
 
 type ButtonVisibility = {

src/components/Appbar/Appbar.tsx

@@ -19,6 +19,7 @@ import {
   modeAppbarHeight,
   renderAppbarContent,
   filterAppbarActions,
+  AppbarChildProps,
 } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { MD3Elevation, ThemeProp } from '../../types';
@@ -210,7 +211,7 @@ const Appbar = ({
     let rightItemsCount = 0;
 
     React.Children.forEach(children, (child) => {
-      if (React.isValidElement(child)) {
+      if (React.isValidElement<AppbarChildProps>(child)) {
         const isLeading = child.props.isLeading === true;
 
         if (child.type === AppbarContent) {

src/components/Appbar/utils.ts

@@ -8,6 +8,12 @@ import type { InternalTheme, ThemeProp } from '../../types';
 
 export type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned';
 
+export type AppbarChildProps = {
+  isLeading?: boolean;
+  color: string;
+  style?: StyleProp<ViewStyle>;
+};
+
 const borderStyleProperties = [
   'borderRadius',
   'borderTopLeftRadius',
@@ -124,7 +130,7 @@ export const filterAppbarActions = (
   isLeading = false
 ) => {
   return React.Children.toArray(children).filter((child) => {
-    if (!React.isValidElement(child)) return false;
+    if (!React.isValidElement<AppbarChildProps>(child)) return false;
     return isLeading ? child.props.isLeading : !child.props.isLeading;
   });
 };
@@ -151,7 +157,7 @@ export const renderAppbarContent = ({
     )
     .map((child, i) => {
       if (
-        !React.isValidElement(child) ||
+        !React.isValidElement<AppbarChildProps>(child) ||
         ![
           'Appbar.Content',
           'Appbar.Action',

src/components/BottomNavigation/BottomNavigation.tsx

@@ -441,7 +441,9 @@ const BottomNavigation = <Route extends BaseRoute>({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const prevNavigationState = React.useRef<NavigationState<Route>>();
+  const prevNavigationState = React.useRef<NavigationState<Route> | undefined>(
+    undefined
+  );
 
   React.useEffect(() => {
     // Reset offsets of previous and current tabs before animation

src/components/Card/CardActions.tsx

@@ -3,6 +3,7 @@ import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import type { ThemeProp } from 'src/types';
 
+import { CardActionChildProps } from './utils';
 import { useInternalTheme } from '../../core/theming';
 
 export type Props = React.ComponentPropsWithRef<typeof View> & {
@@ -45,7 +46,7 @@ const CardActions = ({ theme, style, children, ...rest }: Props) => {
   return (
     <View {...rest} style={containerStyle}>
       {React.Children.map(children, (child, index) => {
-        if (!React.isValidElement(child)) {
+        if (!React.isValidElement<CardActionChildProps>(child)) {
           return child;
         }
 

src/components/Card/utils.tsx

@@ -1,4 +1,4 @@
-import type { ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 import color from 'color';
 
@@ -12,6 +12,12 @@ type BorderRadiusStyles = Pick<
   Extract<keyof ViewStyle, `border${string}Radius`>
 >;
 
+export type CardActionChildProps = {
+  compact?: boolean;
+  mode?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
 export const getCardCoverStyle = ({
   theme,
   index,

src/components/Chip/Chip.tsx

@@ -16,7 +16,7 @@ import {
 
 import useLatestCallback from 'use-latest-callback';
 
-import { getChipColors } from './helpers';
+import { ChipAvatarProps, getChipColors } from './helpers';
 import { useInternalTheme } from '../../core/theming';
 import { white } from '../../styles/themes/v2/colors';
 import type { $Omit, EllipsizeProp, ThemeProp } from '../../types';
@@ -339,8 +339,8 @@ const Chip = ({
                 disabled && { opacity },
               ]}
             >
-              {React.isValidElement(avatar)
-                ? React.cloneElement(avatar as React.ReactElement<any>, {
+              {React.isValidElement<ChipAvatarProps>(avatar)
+                ? React.cloneElement(avatar, {
                     style: [styles.avatar, avatar.props.style],
                   })
                 : avatar}

src/components/Chip/helpers.tsx

@@ -1,10 +1,14 @@
-import type { ColorValue } from 'react-native';
+import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
 
 import color from 'color';
 
 import { black, white } from '../../styles/themes/v2/colors';
 import type { InternalTheme } from '../../types';
 
+export type ChipAvatarProps = {
+  style?: StyleProp<ViewStyle>;
+};
+
 type BaseProps = {
   theme: InternalTheme;
   isOutlined: boolean;

src/components/Dialog/Dialog.tsx

@@ -18,6 +18,7 @@ import { useInternalTheme } from '../../core/theming';
 import overlay from '../../styles/overlay';
 import type { ThemeProp } from '../../types';
 import Modal from '../Modal';
+import { DialogChildProps } from './utils';
 
 export type Props = {
   /**
@@ -138,20 +139,20 @@ const Dialog = ({
         .filter((child) => child != null && typeof child !== 'boolean')
         .map((child, i) => {
           if (isV3) {
-            if (i === 0 && React.isValidElement(child)) {
-              return React.cloneElement(child as React.ReactElement<any>, {
+            if (i === 0 && React.isValidElement<DialogChildProps>(child)) {
+              return React.cloneElement(child, {
                 style: [{ marginTop: 24 }, child.props.style],
               });
             }
           }
 
           if (
             i === 0 &&
-            React.isValidElement(child) &&
+            React.isValidElement<DialogChildProps>(child) &&
             child.type === DialogContent
           ) {
             // Dialog content is the first item, so we add a top padding
-            return React.cloneElement(child as React.ReactElement<any>, {
+            return React.cloneElement(child, {
               style: [{ paddingTop: 24 }, child.props.style],
             });
           }

src/components/Dialog/DialogActions.tsx

@@ -3,6 +3,7 @@ import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import type { ThemeProp } from 'src/types';
 
+import { DialogActionChildProps } from './utils';
 import { useInternalTheme } from '../../core/theming';
 
 export type Props = React.ComponentPropsWithRef<typeof View> & {
@@ -55,8 +56,8 @@ const DialogActions = (props: Props) => {
       style={[isV3 ? styles.v3Container : styles.container, props.style]}
     >
       {React.Children.map(props.children, (child, i) =>
-        React.isValidElement(child)
-          ? React.cloneElement(child as React.ReactElement<any>, {
+        React.isValidElement<DialogActionChildProps>(child)
+          ? React.cloneElement(child, {
               compact: true,
               uppercase: !isV3,
               style: [