ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types

Question

I am getting this warning in log :

ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types

even I haven't used ViewPropTypes anywhere in my code.

some of my packages are :

"@react-navigation/native": "^6.0.8",
"@react-navigation/native-stack": "^6.5.2",
"native-base": "^2.13.14",
"react": "17.0.2",
"react-native": "0.68.0",
"react-native-modal": "^13.0.0",
"react-native-responsive-screen": "^1.4.2",
"react-native-safe-area-context": "^4.2.4",
"react-native-screens": "^3.13.1",
"react-native-svg": "^12.3.0",
"react-redux": "^7.2.6",
"redux-thunk": "^2.4.1"

Answer 1

解决方案：

1. 按照说明将补丁包安装到您的项目中。

2. npm install deprecated-react-native-prop-types通过运行或安装 deprecated-react-native-prop-types yarn add deprecated-react-native-prop-types。

3. 不变量似乎在 中强制执行node_modules/react-native/index.js，从第 436 行开始：

这是我的补丁文件react-native+0.69.3.patch

diff --git a/node_modules/react-native/ReactCommon/React-bridging.podspec b/node_modules/react-native/ReactCommon/React-bridging.podspec
index 5255c13..52a8eb0 100644
--- a/node_modules/react-native/ReactCommon/React-bridging.podspec
+++ b/node_modules/react-native/ReactCommon/React-bridging.podspec
@@ -30,7 +30,7 @@ Pod::Spec.new do |s|
   s.source                 = source
   s.source_files           = "react/bridging/**/*.{cpp,h}"
   s.exclude_files          = "react/bridging/tests"
-  s.header_dir             = "react/bridging"
+  s.header_dir             = "."
   s.header_mappings_dir    = "."
   s.compiler_flags         = folly_compiler_flags
   s.pod_target_xcconfig    = { "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/RCT-Folly\"",
diff --git a/node_modules/react-native/index.js b/node_modules/react-native/index.js
index d59ba34..349b4dd 100644
--- a/node_modules/react-native/index.js
+++ b/node_modules/react-native/index.js
@@ -435,32 +435,16 @@ module.exports = {
   },
   // Deprecated Prop Types
   get ColorPropType(): $FlowFixMe {
-    invariant(
-      false,
-      'ColorPropType has been removed from React Native. Migrate to ' +
-        "ColorPropType exported from 'deprecated-react-native-prop-types'.",
-    );
+    return require('deprecated-react-native-prop-types').ColorPropType
   },
   get EdgeInsetsPropType(): $FlowFixMe {
-    invariant(
-      false,
-      'EdgeInsetsPropType has been removed from React Native. Migrate to ' +
-        "EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'.",
-    );
+    return require('deprecated-react-native-prop-types').EdgeInsetsPropType
   },
   get PointPropType(): $FlowFixMe {
-    invariant(
-      false,
-      'PointPropType has been removed from React Native. Migrate to ' +
-        "PointPropType exported from 'deprecated-react-native-prop-types'.",
-    );
+    return require('deprecated-react-native-prop-types').PointPropType
   },
   get ViewPropTypes(): $FlowFixMe {
-    invariant(
-      false,
-      'ViewPropTypes has been removed from React Native. Migrate to ' +
-        "ViewPropTypes exported from 'deprecated-react-native-prop-types'.",
-    );
+    return require('deprecated-react-native-prop-types').ViewPropTypes
   },
 };

因此，更改这些行以从 deprecated-react-native-prop-types 返回相应的 Prop Types：

4. 保存并运行npx patch-package react-native以保存补丁。

5. 重建并且应用程序应该启动。

唯一需要记住的是，每次升级到react-native 时都需要重新应用此补丁，或者直到相关库更新为从已弃用的react-native-prop-types 导入为止。

Answer 2

这是补丁问题，只需替换几行代码即可解决：

1. 检查您是否已安装deprecated-react-native-prop-types包（如果没有先运行以下命令）。

   纱线添加已弃用的反应本机道具类型

2. 在node_modules/react-native/index.js里面

将这些函数替换为以下行

// Deprecated Prop Types
get ColorPropType(): $FlowFixMe {
  return require('deprecated-react-native-prop-types').ColorPropType;
},

get EdgeInsetsPropType(): $FlowFixMe {
  return require('deprecated-react-native-prop-types').EdgeInsetsPropType;
},

get PointPropType(): $FlowFixMe {
  return require('deprecated-react-native-prop-types').PointPropType;
},

get ViewPropTypes(): $FlowFixMe {
  return require('deprecated-react-native-prop-types').ViewPropTypes;
},

Answer 3

临时解决方案。

忽略警告.js

import { LogBox } from "react-native";

if (__DEV__) {
  const ignoreWarns = [
    "EventEmitter.removeListener",
    "[fuego-swr-keys-from-collection-path]",
    "Setting a timer for a long period of time",
    "ViewPropTypes will be removed from React Native",
    "AsyncStorage has been extracted from react-native",
    "exported from 'deprecated-react-native-prop-types'.",
    "Non-serializable values were found in the navigation state.",
    "VirtualizedLists should never be nested inside plain ScrollViews",
  ];

  const warn = console.warn;
  console.warn = (...arg) => {
    for (const warning of ignoreWarns) {
      if (arg[0].startsWith(warning)) {
        return;
      }
    }
    warn(...arg);
  };

  LogBox.ignoreLogs(ignoreWarns);
}

应用程序.js

// import at the very top of everything.
import "../ignoreWarnings";

Answer 4

如果您使用的版本高于react-native 0.71.0

node_modules/react-native/index.js

步骤1

• 对应线标注流程

 get ViewPropTypes(): $FlowFixMe {
    // console.error(
    //   'ViewPropTypes will be removed from React Native, along with all ' +
    //     'other PropTypes. We recommend that you migrate away from PropTypes ' +
    //     'and switch to a type system like TypeScript. If you need to ' +
    //     'continue using ViewPropTypes, migrate to the ' +
    //     "'deprecated-react-native-prop-types' package.",
    // );
    return require('deprecated-react-native-prop-types').ViewPropTypes;
  },

第2步

• 运行react-native的patch-package

npx patch-package react-native

您必须运行以下命令以防止运行时出现控制台错误

Answer 5

就我而言，错误来自react-native-snap-carousel库，因此我只需 6 个步骤即可修复该错误：

第 1 步：npm install deprecated-react-native-prop-types或yarn add deprecated-react-native-prop-types.

步骤2：打开目录中存在的所有这4个文件

node_modules\react-native-snap-carousel\src\carousel\Carousel.js

和

node_modules\react-native-snap-carousel\src\pagination\Pagination.js

和

node_modules\react-native-snap-carousel\src\pagination\PaginationDot.js

和

node_modules\react-native-snap-carousel\src\parallaximage\ParallaxImage.js

步骤3：删除所有ViewPropTypes导入的内容react-native并导入我们在步骤1deprecated-react-native-prop-types中安装的模块，并将其放在单独的行中，如下所示

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

步骤 4：将此行添加到in部分"postinstall": "patch-package",中。例子：package.jsonscripts

"scripts": {
    "start": "expo start",
    "postinstall": "patch-package"
  },

步骤 5：运行此命令npx patch-package react-native-snap-carousel。

第 6 步：运行此命令npm run postinstall

Answer 6

找到解决方案了！！！

首先安装软件包：

npm install deprecated-react-native-prop-types

因此，当您检查警告的调用堆栈时：

你可以找到它的ViewPropTypes error来源。就我而言，它位于MultiSelect. 所以你进入文件（你可以点击它），否则它就在你从导入中node_module/react-native-multi-select/lib/react-native-multi-select.js 删除 并添加它 所以代码是：ViewPropTypesreact-nativedeprecated-react-native-prop-types

import React, { Component } from 'react';
import {
  Text,
  View,
  TextInput,
  TouchableWithoutFeedback,
  TouchableOpacity,
  FlatList,
  UIManager,
  ViewPropTypes
} from 'react-native';

它必须是：

import React, { Component } from 'react';
import {
  Text,
  View,
  TextInput,
  TouchableWithoutFeedback,
  TouchableOpacity,
  FlatList,
  UIManager
} from 'react-native';
import { ViewPropTypes } from 'deprecated-react-native-prop-types'

保存并重新启动所有应用程序。

/!\ 注意警告是否仍然存在，它可能来自另一个文件，再次检查调用堆栈，执行相同的过程。我也必须为react-native-camera (RNCamera.js) 这样做

Answer 7

在这里，我给出了一些额外的内容，以防您使用 Expo 45 newgesture-handler 2.2和，以下内容删除了和中的NativeBase错误：ViewPropTypesreact-native-gesture-handlerLogBoxconsole

import { LogBox } from 'react-native'
import ignoreWarnings from 'ignore-warnings';

ignoreWarnings('warn',['ViewPropTypes','[react-native-gesture-handler]'])

LogBox.ignoreLogs([
    'ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from \'deprecated-react-native-prop-types\'.',
    'NativeBase: The contrast ratio of',
    "[react-native-gesture-handler] Seems like you\'re using an old API with gesture components, check out new Gestures system!",
])

Answer 8

最近我在我的两个 React Native 项目中遇到了这个问题。这些步骤对我来说 100% 有效。在解决问题后，我没有收到任何已弃用的道具错误。

根据相关 React-Native 问题链接中的讨论，测试模块解析器的用法，以修复 React-Native 中已弃用的问题

步骤1

安装插件

npm install --save-dev babel-plugin-module-resolver deprecated-react-native-prop-types

或者

yarn add --dev babel-plugin-module-resolver deprecated-react-native-prop-types

第2步

resolver/react-native/使用以下代码在项目文件夹中创建index.js文件

import * as StandardModule from 'react-native';

const deprecatedProps = {
  ImagePropTypes: require('deprecated-react-native-prop-types/DeprecatedImagePropType'),
  TextPropTypes: require('deprecated-react-native-prop-types/DeprecatedTextPropTypes'),
  ViewPropTypes: require('deprecated-react-native-prop-types/DeprecatedViewPropTypes'),
  ColorPropType: require('deprecated-react-native-prop-types/DeprecatedColorPropType'),
  EdgeInsetsPropType: require('deprecated-react-native-prop-types/DeprecatedEdgeInsetsPropType'),
  PointPropType: require('deprecated-react-native-prop-types/DeprecatedPointPropType'),
};


// Had to use a proxy because ...StandardModule made think react-native that all modules were
// being used and was triggering some unnecessary validations / native dep checks.
// This prevents that from happening.
const objProx = new Proxy(StandardModule, {
  get(obj, prop) {
    if (prop in deprecatedProps) {
      return deprecatedProps[prop];
    }
    if (prop === 'Image') {

      return new Proxy(obj[prop], {
        get(obj, prop) {
          if (prop === 'propTypes') return deprecatedProps.ImagePropTypes;
          return Reflect.get(...arguments);
        },
      });;
    }
    if (prop === 'Text') {

      return new Proxy(obj[prop], {
        get(obj, prop) {
          if (prop === 'propTypes') return deprecatedProps.TextPropTypes;
          return Reflect.get(...arguments);
        },
      });
    }
    return Reflect.get(...arguments);
  },
});

module.exports = objProx;

步骤3

在里面配置模块解析器babel.config.js，根据您的项目要求将某些 npm 包列入黑名单/白名单，以防止文件冲突。

示例module-resolver配置：

var path = require('path');

    module.exports = {
      presets: ['module:metro-react-native-babel-preset'],
      plugins: [
        ["module-resolver", {
          "root": ["."],
          resolvePath(sourcePath, currentFile, opts) {
            if (
              sourcePath === 'react-native' &&
              !(
                (
                  currentFile.includes('node_modules/react-native/') || // macos/linux paths
                  currentFile.includes('node_modules\\react-native\\')
                ) // windows path
              ) &&
              !(
                currentFile.includes('resolver/react-native/') ||
                currentFile.includes('resolver\\react-native\\')
              )
            ) {
              return path.resolve(__dirname, 'resolver/react-native');
            }
            /**
             * The `opts` argument is the options object that is passed through the Babel config.
             * opts = {
             *   extensions: [".js"],
             *   resolvePath: ...,
             * }
             */
            return undefined;
          }
        }],
     
      ],
    };

步骤4

您正在使用 expo，应该运行此命令

expo r -c 

您正在使用 React Native，应该运行此命令

npm start -- --reset-cache

Answer 9

我遇到了同样的错误，很幸运在短时间内解决了它。\n就我而言，我按照以下步骤操作：

\n

\n

1. 访问该网站安装补丁包。

   \n

   https://www.npmjs.com/package/patch-package

   \n
\n

2. 安装 deprecated-react-native-prop-types \xe2\x80\x93

   \n

   npm install deprecated-react-native-prop-types\n

   \n

   或者

   \n

   yarn add deprecated-react-native-prop-types\n

   \n
\n

3. 转到 node_modules/react-native/index.js 并从以下位置开始更改：

   \n

    // Deprecated Prop Types\n get ColorPropType(): $FlowFixMe {\n   invariant(\n     false,\n     "ColorPropType has been removed from React Native. Migrate to " +\n       "ColorPropType exported from \'deprecated-react-native-prop-types\'.",\n  );\n },\n get EdgeInsetsPropType(): $FlowFixMe {\n   invariant(\n     false,\n     "EdgeInsetsPropType has been removed from React Native. Migrate to " +\n       "EdgeInsetsPropType exported from \'deprecated-react-native-prop-types\'.",\n   );\n },\n get PointPropType(): $FlowFixMe {\n   invariant(\n     false,\n     "PointPropType has been removed from React Native. Migrate to " +\n      "PointPropType exported from \'deprecated-react-native-prop-types\'.",\n  );\n },\n get ViewPropTypes(): $FlowFixMe {\n  invariant(\n    false,\n    "ViewPropTypes has been removed from React Native. Migrate to " +\n      "ViewPropTypes exported from \'deprecated-react-native-prop-types\'.",\n  );\n },\n

   \n
\n

\n

有了这个：

\n

  // Deprecated Prop Types\n  get ColorPropType(): $FlowFixMe {\n    return require("deprecated-react-native-prop-types").ColorPropType\n  },\n  get EdgeInsetsPropType(): $FlowFixMe {\n    return require("deprecated-react-native-prop-types").EdgeInsetsPropType\n  },\n  get PointPropType(): $FlowFixMe {\n    return require("deprecated-react-native-prop-types").PointPropType\n  },\n  get ViewPropTypes(): $FlowFixMe {\n    return require("deprecated-react-native-prop-types").ViewPropTypes\n  },\n

\n

\n

4. 通过运行此命令保存补丁

   \n

   npx patch-package react-native\n

   \n
\n

5. 重建应用程序

   \n

   注意：如果您升级react-native，则需要重新应用此补丁。

   \n
\n

\n

Answer 10

我解决了这个问题，用 vscode 打开一个node_modules并搜索“react-native”模块内的所有“ViewPropTypes”并将其替换为：

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

前：

import { Platform, ViewPropTypes } from 'react-native'

后：

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