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

Viewed 34760

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"
12 Answers

Solution:

  1. Install patch-package into your project, as per the instructions.

  2. Install deprecated-react-native-prop-types by running npm install deprecated-react-native-prop-types or yarn add deprecated-react-native-prop-types.

  3. The invariant seems to be enforced in node_modules/react-native/index.js, starting at line 436:

image

here is my patch file 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
   },
 };

So, change these lines to return the corresponding Prop Types from deprecated-react-native-prop-types instead:

image

  1. Save and run npx patch-package react-native to save the patch.

  2. Rebuild and the app should launch.

Only thing to keep in mind is that this patch will need to be reapplied with every upgrade to react-native, or until the libraries in question are updated to import from deprecated-react-native-prop-types instead.

Temporary solution.

ignoreWarnings.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);
}

App.js

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

Here you go , i gave some extra in case you are using Expo 45 new gesture-handler 2.2 and NativeBase , the below removes the errors from ViewPropTypes and react-native-gesture-handler both from LogBox and console:

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!",
])

This is the patch issue and can be resolved by just replacing few lines of code:

  1. check if you have installed deprecated-react-native-prop-types package if not run the below command first.

    yarn add deprecated-react-native-prop-types

  2. inside node_modules/react-native/index.js

replace these functions with the below lines

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

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

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

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

You can wait for them to update the dependencies or update the imports manually or even better make a pull request to help the community.

Your issue might be in one of your packages, consider upgrading them to the latest version. I faced this issue after downgrading native-base to v2.15.2 from v3++. Moving back to version 3 did it for me

**1) First run the following command in our project directory

 $ npm install deprecated-react-native-prop-types
  1. Then open the node modules, open the folder that u have installed before the error occuired

    in that folder index.js and remove the viewproptype in the file then import the following

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

I solved it opening a node_modules with vscode and serching for all "ViewPropTypes" that is inside 'react-native' module and replace it for:

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

Before:

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

After:

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

You can copy this code to the highest level code before App.


const ignoreWarns = [
    "Setting a timer for a long period of time",
    "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation",
    "ViewPropTypes will be removed",
    "AsyncStorage has been extracted from react-native",
    "EventEmitter.removeListener",
];
const warn = console.warn;
console.warn = (...arg) => {
    for (let i = 0; i < ignoreWarns.length; i++) {
        if (arg[0].startsWith(ignoreWarns[i])) return;
    }
    warn(...arg);
};

LogBox.ignoreLogs(ignoreWarns);

Got the solution !!!

first of all install the package :

npm install deprecated-react-native-prop-types

So when you check the call stack of the warning:

ViewPropTypes error call stack

You can find where the ViewPropTypes error is from. In my case its in the MultiSelect. So you go in the file (you can click on it) otherwise it's in node_module/react-native-multi-select/lib/react-native-multi-select.js And you remove ViewPropTypes from the import of react-native and you add it from deprecated-react-native-prop-types So the code was :

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

and it has to be :

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

Save and restart all the app.

/!\ Watch out if the warn is still there, it can be from another file, check the call stack again, do the same process. I had to do it also for the react-native-camera (RNCamera.js)

The problem is the react-native-camera plugin. If you don`t want to migrate to the latest plugin suggested. Must do the next steps:

The course of my solution, I went to the node-modules folder -> the react-native-camera folder and found the main file RNCamera.js find ViewPropTypes import

import {
 findNodeHandle,
 Platform,
 NativeModules,
 requireNativeComponent,
 View,
 ViewPropTypes,
 ActivityIndicator,
 Text,
 StyleSheet,
 PermissionsAndroid,
} from 'react-native';

//delete import this file from 'react-native' and create new import
import {ViewPropTypes} from 'deprecated-react-native-prop-types';

and its work good.

Of course install the new plugin:

npm i deprecated-react-native-prop-types

And edit the index.js of the folder node_module/react-native. Replace these functions with the below lines

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

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

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

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

I found this error when I install npm react-native-switch-pro ,but after much research I decide to uninstall it and I found it is the problem ,please if you install it try to uninstall it maybe it's the problem

Related