fix: bloated lib/**/*.d.ts files

Author: DimitarNestorov

src/components/Appbar/AppbarAction.tsx

@@ -6,6 +6,7 @@ import type { ThemeProp } from 'src/types';
 
 import { useInternalTheme } from '../../core/theming';
 import { black } from '../../styles/themes/v2/colors';
+import { forwardRef } from '../../utils/forwardRef';
 import type { IconSource } from '../Icon';
 import IconButton from '../IconButton/IconButton';
 
@@ -73,7 +74,7 @@ export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
  * export default MyComponent;
  * ```
  */
-const AppbarAction = React.forwardRef<View, Props>(
+const AppbarAction = forwardRef<View, Props>(
   (
     {
       size = 24,

src/components/Appbar/AppbarBackAction.tsx

@@ -6,6 +6,7 @@ import type {
   View,
 } from 'react-native';
 
+import { forwardRef } from '../../utils/forwardRef';
 import type { $Omit } from './../../types';
 import AppbarAction from './AppbarAction';
 import AppbarBackIcon from './AppbarBackIcon';
@@ -60,7 +61,7 @@ export type Props = $Omit<
  * export default MyComponent;
  * ```
  */
-const AppbarBackAction = React.forwardRef<View, Props>(
+const AppbarBackAction = forwardRef<View, Props>(
   ({ accessibilityLabel = 'Back', ...rest }: Props, ref) => (
     <AppbarAction
       accessibilityLabel={accessibilityLabel}

src/components/FAB/FAB.tsx

@@ -11,6 +11,7 @@ import {
 
 import { useInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, ThemeProp } from '../../types';
+import { forwardRef } from '../../utils/forwardRef';
 import ActivityIndicator from '../ActivityIndicator';
 import CrossFadeIcon from '../CrossFadeIcon';
 import Icon, { IconSource } from '../Icon';
@@ -154,7 +155,7 @@ export type Props = $RemoveChildren<typeof Surface> & {
  * export default MyComponent;
  * ```
  */
-const FAB = React.forwardRef<View, Props>(
+const FAB = forwardRef<View, Props>(
   (
     {
       icon,

src/components/IconButton/IconButton.tsx

@@ -9,6 +9,7 @@ import {
 
 import { useInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, ThemeProp } from '../../types';
+import { forwardRef } from '../../utils/forwardRef';
 import CrossFadeIcon from '../CrossFadeIcon';
 import Icon, { IconSource } from '../Icon';
 import Surface from '../Surface';
@@ -112,7 +113,7 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
  *
  * @extends TouchableRipple props https://callstack.github.io/react-native-paper/touchable-ripple.html
  */
-const IconButton = React.forwardRef<View, Props>(
+const IconButton = forwardRef<View, Props>(
   (
     {
       icon,

src/components/Searchbar.tsx

@@ -17,6 +17,7 @@ import color from 'color';
 
 import { useInternalTheme } from '../core/theming';
 import type { ThemeProp } from '../types';
+import { forwardRef } from '../utils/forwardRef';
 import ActivityIndicator from './ActivityIndicator';
 import type { IconSource } from './Icon';
 import IconButton from './IconButton/IconButton';
@@ -119,7 +120,7 @@ type TextInputHandles = Pick<
 
  * ```
  */
-const Searchbar = React.forwardRef<TextInputHandles, Props>(
+const Searchbar = forwardRef<TextInputHandles, Props>(
   (
     {
       clearAccessibilityLabel = 'clear',

src/components/TextInput/TextInput.tsx

@@ -10,6 +10,7 @@ import {
 
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../types';
+import { forwardRef } from '../../utils/forwardRef';
 import TextInputAffix, {
   Props as TextInputAffixProps,
 } from './Adornment/TextInputAffix';
@@ -220,7 +221,7 @@ type TextInputHandles = Pick<
  * @extends TextInput props https://reactnative.dev/docs/textinput#props
  */
 
-const TextInput = React.forwardRef<TextInputHandles, Props>(
+const TextInput = forwardRef<TextInputHandles, Props>(
   (
     {
       mode = 'flat',

src/utils/forwardRef.tsx

@@ -0,0 +1,23 @@
+import {
+  forwardRef as reactForwardRef,
+  ForwardRefRenderFunction,
+  PropsWithoutRef,
+  RefAttributes,
+  ForwardRefExoticComponent,
+} from 'react';
+
+export type ForwarRefComponent<T, P = {}> = ForwardRefExoticComponent<
+  PropsWithoutRef<P> & RefAttributes<T>
+>;
+
+/**
+ * TypeScript generated a large union of props from `ViewProps` in
+ * `d.ts` files when using `React.forwardRef`. To prevent this
+ * `ForwarRefComponent` was created and exported. Use this
+ * `forwardRef` instead of `React.forwardRef` so you don't have to
+ * import `ForwarRefComponent`.
+ * More info: https://github.com/callstack/react-native-paper/pull/3603
+ */
+export const forwardRef: <T, P = {}>(
+  render: ForwardRefRenderFunction<T, P>
+) => ForwarRefComponent<T, P> = reactForwardRef;