fix: TypeScript bloat (callstack#3603)

.circleci/config.yml

@@ -95,6 +95,7 @@ jobs:
  name: Build package
  command: |
  yarn prepare
+ node ./scripts/typescript-output-lint
 
  build-docs:
  executor: default

scripts/typescript-output-lint.js

@@ -0,0 +1,113 @@
+const { promises: fs } = require('fs');
+const path = require('path');
+
+const root = path.resolve(__dirname, '..');
+const output = path.join(root, 'lib', 'typescript');
+
+/**
+ * List of React Native props not used by React Native Paper.
+ * Feel free to delete props from this list when
+ * React Native Paper has defined/uses one with the same name.
+ * This script was originally created to detect if TypeScript
+ * has exported a large union of props from ViewProps.
+ * More info: https://github.com/callstack/react-native-paper/pull/3603
+ */
+const unusedViewProps = [
+ 'nativeID',
+ 'accessibilityActions',
+ 'accessibilityRole',
+ 'accessibilityValue',
+ 'onAccessibilityAction',
+ 'accessibilityLabelledBy',
+ 'accessibilityLiveRegion',
+ 'accessibilityLanguage',
+ 'accessibilityViewIsModal',
+ 'onAccessibilityEscape',
+ 'onAccessibilityTap',
+ 'onMagicTap',
+ 'accessibilityIgnoresInvertColors',
+ 'hitSlop',
+ 'removeClippedSubviews',
+ 'collapsable',
+ 'needsOffscreenAlphaCompositing',
+ 'renderToHardwareTextureAndroid',
+ 'shouldRasterizeIOS',
+ 'isTVSelectable',
+ 'hasTVPreferredFocus',
+ 'tvParallaxProperties',
+ 'tvParallaxShiftDistanceX',
+ 'tvParallaxShiftDistanceY',
+ 'tvParallaxTiltAngle',
+ 'tvParallaxMagnification',
+ 'onStartShouldSetResponder',
+ 'onMoveShouldSetResponder',
+ 'onResponderEnd',
+ 'onResponderGrant',
+ 'onResponderReject',
+ 'onResponderMove',
+ 'onResponderRelease',
+ 'onResponderStart',
+ 'onResponderTerminationRequest',
+ 'onResponderTerminate',
+ 'onStartShouldSetResponderCapture',
+ 'onMoveShouldSetResponderCapture',
+ 'onTouchStart',
+ 'onTouchMove',
+ 'onTouchEnd',
+ 'onTouchCancel',
+ 'onTouchEndCapture',
+ 'onPointerEnter',
+ 'onPointerEnterCapture',
+ 'onPointerLeave',
+ 'onPointerLeaveCapture',
+ 'onPointerMove',
+ 'onPointerMoveCapture',
+ 'onPointerCancel',
+ 'onPointerCancelCapture',
+ 'onPointerDown',
+ 'onPointerDownCapture',
+ 'onPointerUp',
+ 'onPointerUpCapture',
+ 'onHoverIn',
+ 'onHoverOut',
+ 'cancelable',
+ 'delayHoverIn',
+ 'delayHoverOut',
+ 'pressRetentionOffset',
+ 'android_disableSound',
+ 'android_ripple',
+ 'testOnly_pressed',
+ 'unstable_pressDelay',
+];
+
+async function* getFiles(directory) {
+ const entries = await fs.readdir(directory, { withFileTypes: true });
+ for (const entry of entries) {
+ const res = path.resolve(directory, entry.name);
+ if (entry.isDirectory()) {
+ yield* getFiles(res);
+ } else {
+ yield res;
+ }
+ }
+}
+
+async function main() {
+ for await (const file of getFiles(output)) {
+ const content = await fs.readFile(file);
+ for (const prop of unusedViewProps) {
+ if (content.includes(prop)) {
+ throw new Error(
+ `Found text '${prop}' in '${file}'. Please use the wrapped 'forwardRef' in 'src/utils/forwardRef.ts', export some return types, or modify 'scripts/typescript-output-lint.js'`
+ );
+ }
+ }
+ }
+
+ console.log('✅ No React Native props mentioned in TypeScript files');
+}
+
+main().catch((reason) => {
+ console.error(reason);
+ process.exit(1);
+});

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';
@@ -166,7 +167,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;