Deprecated React Native PropTypes

Common errors

• TypeError: Cannot read properties of undefined (reading 'propTypes')

  cause Attempting to access `Image.propTypes` or `Text.propTypes` directly on React Native components in versions where they have been removed.
  fix Import `ImagePropTypes` or `TextPropTypes` from `deprecated-react-native-prop-types` instead: `import { ImagePropTypes } from 'deprecated-react-native-prop-types';`

• ReferenceError: ViewPropTypes is not defined

  cause Trying to use `ViewPropTypes` after upgrading React Native without installing and importing it from the `deprecated-react-native-prop-types` package.
  fix Install the package (`npm install deprecated-react-native-prop-types`) and import it: `import { ViewPropTypes } from 'deprecated-react-native-prop-types';`

Warnings

• breaking Direct exposure of `propTypes` on React Native components (e.g., `Image.propTypes`) and global `PropType` definitions (e.g., `ViewPropTypes`) was removed from the `react-native` package itself.
  Fix: For React Native versions 0.44 and higher, you must explicitly install and import from `deprecated-react-native-prop-types` for these specific `propTypes`. The recommended long-term solution is to migrate to TypeScript or use the standalone `prop-types` library with custom type definitions.
• deprecated This package exists to bridge legacy code and its usage signifies reliance on deprecated patterns within the React Native ecosystem. It is not intended for new development.
  Fix: Plan a migration path for your codebase to use modern type-checking solutions like TypeScript for type safety or the standard `prop-types` library with explicit shape definitions where necessary. This package should be considered a temporary stop-gap.
• gotcha This package is not a general replacement for the `prop-types` library. It specifically provides the *definitions* that were removed from React Native, such as `ViewPropTypes` or `ImagePropTypes`, not the `PropTypes` object itself (e.g., `PropTypes.string`).
  Fix: Always install and use the standard `prop-types` package (`import PropTypes from 'prop-types';`) in conjunction with this library if you need general prop type validators (like `string`, `number`, `array`, `shape`). This package only provides the specific `PropType` objects that were extracted from React Native.

Install

• npm install deprecated-react-native-prop-types npm
• yarn add deprecated-react-native-prop-types yarn
• pnpm add deprecated-react-native-prop-types pnpm

Imports

• ImagePropTypes
  wrong:

  const { ImagePropTypes } = require('deprecated-react-native-prop-types');

  correct:

  import { ImagePropTypes } from 'deprecated-react-native-prop-types';

  Modern React Native projects primarily use ES Modules. CommonJS `require` syntax might lead to issues in some environments or bundlers if not configured correctly. This specific prop type was previously available directly on the `Image` component in React Native.
• ViewPropTypes
  wrong:

  import { ViewPropTypes } from 'react-native'; // Incorrect since RN 0.44

  correct:

  import { ViewPropTypes } from 'deprecated-react-native-prop-types';

  `ViewPropTypes` was moved out of `react-native` into this package starting with React Native 0.44. Attempting to import it directly from `react-native` in newer versions will fail. Ensure you are using a bundler that supports ESM for proper resolution.
• ColorPropType
  wrong:

  import { ColorPropType } from 'react-native'; // Incorrect since RN 0.49

  correct:

  import { ColorPropType } from 'deprecated-react-native-prop-types';

  `ColorPropType` was deprecated and moved to this package from `react-native` starting with React Native 0.49. Ensure your bundler is configured for tree-shaking if you are only importing specific `propTypes`.

Quickstart

Demonstrates how to import and assign deprecated React Native `propTypes` (like `ImagePropTypes`, `ViewPropTypes.style`, and `ColorPropType`) to a component's `propTypes` object for backward compatibility in a TypeScript environment.

import { ImagePropTypes, ViewPropTypes, ColorPropType } from 'deprecated-react-native-prop-types';
import PropTypes from 'prop-types'; // The standard prop-types library

// Define a React Native component or a higher-order component that still relies on these deprecated propTypes.
// In a real application, this would typically be within a class component's `static propTypes` definition.
const MyLegacyComponent = ({ imageSource, containerStyle, highlightColor }) => {
  // React automatically validates props against `propTypes` when the component renders.
  // For demonstration, we'll just log the types.
  console.log('Accessing ImagePropTypes structure:', ImagePropTypes);
  console.log('Accessing ViewPropTypes style definition:', ViewPropTypes.style);
  console.log('Accessing ColorPropType definition:', ColorPropType);

  // You can combine these with standard prop-types
  const combinedPropTypes = {
    imageSource: ImagePropTypes, // This provides the full Image.propTypes structure
    containerStyle: ViewPropTypes.style, // Specific style prop type
    highlightColor: ColorPropType,
    message: PropTypes.string.isRequired,
  };

  console.log('Combined propTypes object:', combinedPropTypes);

  return null; // A minimal component for illustration
};

// Assign the propTypes to your component for React's validation system
MyLegacyComponent.propTypes = {
  imageSource: ImagePropTypes, // For props that expect the shape of Image.propTypes
  containerStyle: ViewPropTypes.style, // For props that expect React Native style objects
  highlightColor: ColorPropType, // For props that expect a color string or number
  message: PropTypes.string.isRequired,
};

console.log('MyLegacyComponent.propTypes successfully assigned.');