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

kodeandoec · 2022-04-03T02:26:11Z

Description

Recentrly update React ANtive Version to
"react-native": "0.68.0",
and have this issue

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

Version

0.68.0

Output of `npx react-native info`

System:
OS: macOS 12.3.1
CPU: (8) x64 Apple M1
Memory: 30.51 MB / 8.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 17.8.0 - /usr/local/bin/node
Yarn: 1.22.18 - /usr/local/bin/yarn
npm: 8.5.5 - /usr/local/bin/npm
Watchman: 2022.03.14.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
Android SDK:
API Levels: 30, 32
Build Tools: 30.0.2, 32.0.0, 32.1.0
System Images: android-30 | Intel x86 Atom_64, android-32 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2021.1 AI-211.7628.21.2111.8193401
Xcode: 13.3/13E113 - /usr/bin/xcodebuild
Languages:
Java: 11.0.11 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.68.0 => 0.68.0
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

npx react-native start

Snack, code example, screenshot, or link to a repository

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

The text was updated successfully, but these errors were encountered:

Adnan-Bacic · 2022-04-05T13:03:45Z

i got the same warning with ColorPropType:

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

for my project i dont use this directly, but when i search in node_modules/ it appears in some of the libraries i use.

so the only solution i see is for those libraries to be updated.

for example, i had this error from react-native-maps. and i found that someone had already made a pr earlier:
react-native-maps/react-native-maps#4096

seems like a simple fix. but the work seems to fall on the libraries changing the import, instead of the react-native library.

wimil · 2022-04-06T19:16:53Z

same

nibblesnbits · 2022-04-07T02:36:03Z

Same, but I don't actually know what it's referring to. I don't use anything by that name directly in my code.

Poplizal · 2022-04-07T07:02:59Z

i also get this errro. brush!

petrishevalexander · 2022-04-07T09:57:23Z

saaaaaame! :(

viniibp · 2022-04-07T20:07:33Z

same..

nibblesnbits · 2022-04-08T16:05:10Z

So now we just ignore deprecation messages now instead of learning what we actually need to fix? Sounds like a great practice...

Gnative · 2022-04-08T16:38:41Z

So now we just ignore deprecation messages now instead of learning what we actually need to fix? Sounds like a great practice...

@nibblesnbits Obviously if you see this warning you should update your application or handle that how you like. As mentioned above, an issue was about sub packages not having changed to 'deprecated-react-native-prop-types and those throwing the error.

Thanks for your comment to make a clarification.

nibblesnbits · 2022-04-08T16:41:35Z

@Gnative, obviously if there is no documentation on what ViewPropTypes actually is within https://reactnative.dev/, no one will know what to update.

Gnative · 2022-04-08T16:42:13Z

@nibblesnbits - did you read the warning

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

nibblesnbits · 2022-04-08T19:44:19Z

Okay so this is referring specifically to prop-types like in normal react. That's what I needed clarification on. Thanks.

…

________________________________ From: Gnative ***@***.***> Sent: Friday, April 8, 2022 12:50:42 PM To: facebook/react-native ***@***.***> Cc: Stephen Collins ***@***.***>; Mention ***@***.***> Subject: Re: [facebook/react-native] ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. (Issue #33557) @nibblesnbits<https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnibblesnbits&data=04%7C01%7C%7C52a3b81329f54c5618ed08da197febee%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637850334464326312%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=weSGgF0ApS2iNr%2FU66pnqy02XpqQNd3%2FBSxh%2BmAJPHw%3D&reserved=0> Sorry some clarification: PropTypes was a type checker used by React Native before Flow or TypeScript. Some older packages might be still using this. Even some newer ones as its a simple type checker. if you are seeing these warning and don't specifically use PropTypes in your application then you can, if you wish, add the ignoreLogs above to quieten the warnings until sub packages are updated. — Reply to this email directly, view it on GitHub<https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Ffacebook%2Freact-native%2Fissues%2F33557%23issuecomment-1093083115&data=04%7C01%7C%7C52a3b81329f54c5618ed08da197febee%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637850334464326312%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=7aaq%2B3SxNnH06nWJXHqt%2B4SyntZFskqdGtZ1gurdB74%3D&reserved=0>, or unsubscribe<https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FABODKJJULRA62M3SS4DXBB3VEBPWFANCNFSM5SMQA42Q&data=04%7C01%7C%7C52a3b81329f54c5618ed08da197febee%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637850334464326312%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=YW6lVKWd6lEXce4NUrMopwNo468KKQjTk2ZgqDeKLtU%3D&reserved=0>. You are receiving this because you were mentioned.Message ID: ***@***.***>

PAAPII10 · 2022-04-15T16:15:04Z

Same Problem here.. Anyone got solution?

GitForAndrey · 2022-04-17T17:26:31Z

how i solved the same problem.
WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
i got this error after install react-native-camera
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

as I understand it, this is a mistake of the old npm packages, and if the project is alive, then the developers fix it in new versions. And maybe this error will go away when you update the package to a newer one.

The 'ViewPropTypes' is not being used directly in this application, it's coming from some lib. So, it could be safely ignored ref: facebook/react-native#33557

hssrrw · 2022-04-22T10:13:26Z

Does anybody know why those types became deprecated? Yes, we can import them from 'deprecated-react-native-prop-types' but what are non-deprecated alternatives now?

kockok · 2022-04-26T08:53:03Z

Up until now, is that the best solution is to just IGNORE the warning? I think they should deprecate it in the underlaying codebase! Or at least provide us a config option to dismiss the warning!!

Gnative · 2022-04-26T09:01:02Z

If you have fixed the depreciation in your own codebase and the warning is coming from installed packages then I guess yes ignoring the warning is an option.

You could make a pull request for those packages that are causing the warnings.

jrhager84 · 2022-05-02T05:02:52Z

Something tells me this warning is going to LINGER for quite some time with some of the older packages.

yonitou · 2022-05-06T13:00:22Z

I tried your solutions to ignore the warnings but this is really weird, it doesn't work. I already used LogBox plenty of times to ignore some warnings and it worked perfectly well but I just kept trying for 2 hours to ignore these ones and it's not working doesn't matter what

I tried :

LogBox.ignoreLogs([ "ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'." ]);
LogBox.ignoreLogs([ "ColorPropType will be removed from React Native" ]);
LogBox.ignoreLogs([ "exported from 'deprecated-react-native-prop-types'." ]);

Could you help ? Thx !

Adnan-Bacic · 2022-05-06T13:10:37Z

I tried your solutions to ignore the warnings but this is really weird, it doesn't work. I already used LogBox plenty of times to ignore some warnings and it worked perfectly well but I just kept trying for 2 hours to ignore these ones and it's not working doesn't matter what

I tried :

LogBox.ignoreLogs([ "ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'." ]);

LogBox.ignoreLogs([ "ColorPropType will be removed from React Native" ]);
LogBox.ignoreLogs([ "exported from 'deprecated-react-native-prop-types'." ]);

Could you help ? Thx !

It looks like you have spaces at the end of the sentences.
Also i think you can write each string in the same array, you dont have to LogBox.ignoreLogs() multiple times

goxr3plus · 2022-05-06T16:07:01Z

Okay for the time talking because this warning is a ball breaker until all the libraries using it update i am dong the following.

If you like to see the errors just don't use this solution but for me i need to see important stuff on the console not warnings spam. Gave you two extra warnings types in case you are using NativeBase and React-Native-Gesture-Handler version 2.2.0 ++ that comes with expo 45

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

yonitou · 2022-05-09T09:08:18Z

Thanks for the help @Adnan-Bacic but unfortunately, I don't have any spaces at the end of my sentences. I copied and pasted almost all of the variants that had been posted on this thread and the warning is always here. I don't get how this is possible since I succeeded to make it work with other warning messages.

itorres-1 · 2022-05-11T04:27:32Z

Can someone explain this in a react native noob friendly way? Where am I supposed to put the LogBox.ignoreLogs(...) statements? No matter where I've put it, these warnings pop up (app.config.js, my first screen that shows up, wherever). Is there a central place to put it? I don't like the idea of polluting my code with these statements due to dependencies. Could someone please explain in simple terms how to fix this? Or do I just deal with it until dependencies fix this?

codeplaygoa · 2022-05-11T06:44:52Z

facing same issue. ignore logs has no effect on warnings

FatmaMahmoud698 · 2022-05-11T08:07:00Z

I face the same error

omaryoussef · 2022-12-07T23:41:54Z

Yea this seems like a weird solution, there's tons of libraries out there that use this option and the expectation to patch every single one of them manually is bad, is there a more automated solution/configuration we can use?

qdanik · 2022-12-09T03:02:03Z

Yea this seems like a weird solution, there's tons of libraries out there that use this option and the expectation to patch every single one of them manually is bad, is there a more automated solution/configuration we can use?

You should patch just react-native package like to back some things to the lowest version. You shouldn't patch every library just react-native package.

iPachDev · 2023-01-03T16:14:03Z

Other Solution

the package "react-native-slider" is based from "@react-native-community/slider".

step 1: Remove react-native-slider

npm uninstall --save react-native-slider

step 2: Install slider community.

npm install --save @react-native-community/slider

step 3: Edit files:

.../node_modules/react-native-media-controls/dist/react-native-media-controls.cjs.development.js
var RNSlider = _interopDefault(require('react-native-slider'));
to var RNSlider = _interopDefault(require('@react-native-community/slider'));
.../node_modules/react-native-media-controls/dist/react-native-media-controls.cjs.production.min.js
Here find text react-native-slider and change with @react-native-community/slider

With simples steps you can should run the proyect

tiagomsmagalhaes · 2023-01-03T18:28:29Z

STEP 3:

Edit babel.config.js file:
add in presets array this string: "module:metro-react-native-babel-preset".
add in plugins array this array:

[

       "module-resolver",
       {
         root: ["."],
         resolvePath(sourcePath, currentFile) {
           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");
           }
           return undefined;
         },
       },
     ]

STEP 4: run expo r -c

🎉 CONGRATULATIONS, YOU ARE WELCOME 😉🇧🇷

@vinaciotm where does path come from?

laitlhadj · 2023-01-05T08:55:07Z

@tiagomsmagalhaes
var path = require('path');

niloriver · 2023-01-12T05:49:08Z

Thanks. After hours trying to solve with patch this solution seems to be the best.

After I applied "resolvePath()" my "alias" stopped working so I had to adapt.

resolvePath(sourcePath, currentFile, opt) { if ( sourcePath.includes("@utils") || sourcePath.includes("@components") || sourcePath.includes("@scenes") || sourcePath.includes("@theme") || sourcePath.includes("@modules") ) { const fullPath = path.resolve( __dirname, "src", sourcePath.replace("@", "") ); return fullPath; } return undefined; }

tult-rk · 2023-01-13T10:17:16Z

@niloriver my "alias" stopped working too. How do you resolve that?

with this code? I have edited my babel.config.js like this but still not working.

resolvePath(sourcePath, currentFile, opt) { if ( sourcePath.includes("@utils") || sourcePath.includes("@components") || sourcePath.includes("@scenes") || sourcePath.includes("@theme") || sourcePath.includes("@modules") ) { const fullPath = path.resolve( __dirname, "src", sourcePath.replace("@", "") ); return fullPath; } return undefined; }

@vinaciotm I using yarn not expo, so how can I use it with yarn?

STEP 4:
run expo r -c

karimessouabni · 2023-01-16T12:46:06Z

If you are facing this problem because you installed this package recently, I recommend installing https://www.npmjs.com/package/react-native-floating-action instead

SiddigHope · 2023-01-29T15:31:55Z

👍🏻 white_check_mark Hi, devs

So, edit the node_modules is bad way to solve the problem

I am using React Native with Expo CLI (RN 0.70.5, EXPO 47.0.8)

👉🏻 Follow step by step and be happy!

rocket LETS GO!!

STEP 1:

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

STEP 2:

* in your root project create folder `resolver`, inside this create another folder `react-native`, inside this create `index.js` file.
  _looks like: `./resolver/react-native/index.js`_

* open the file and paste this:

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"),
};

const imgProx = new Proxy(StandardModule.Image, {
  get(_, prop) {
    if (prop === "propTypes") return deprecatedProps.ImagePropTypes;
    return Reflect.get(...arguments);
  },
});

const txtProx = new Proxy(StandardModule.Text, {
  get(_, prop) {
    if (prop === "propTypes") return deprecatedProps.TextPropTypes;
    return Reflect.get(...arguments);
  },
});

const objProx = new Proxy(StandardModule, {
  get(_, prop) {
    if (prop in deprecatedProps) {
      return deprecatedProps[prop];
    }
    if (prop === "Image") {
      return imgProx;
    }
    if (prop === "Text") {
      return txtProx;
    }
    return Reflect.get(...arguments);
  },
});

module.exports = objProx;

STEP 3:

* Edit `babel.config.js` file:

* add in `presets` array this string: `"module:metro-react-native-babel-preset"`.

* add in `plugins` array this array:

[

       "module-resolver",
       {
         root: ["."],
         resolvePath(sourcePath, currentFile) {
           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");
           }
           return undefined;
         },
       },
     ]

STEP 4: run expo r -c

tada CONGRATULATIONS, YOU ARE WELCOME winkbrazil

it gives and error saying "app-root/App.js: path is not defined"
how can I fix this?

tult-rk · 2023-02-02T07:08:35Z

@SiddigHope

it gives and error saying "app-root/App.js: path is not defined"
how can I fix this?

path is missing. add

var path = require('path')

@niloriver after adding the resolvePath my alias is stopped working too, so i update the resovelvePath with:

    resolvePath(sourcePath, currentFile, opt) {
        var path = require('path')
        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')
        }
        var resolve = require('babel-plugin-module-resolver').resolvePath(sourcePath, currentFile, opt)
        return resolve
      },

jongha · 2023-02-05T08:47:19Z

I had this problem with lottie-react-native. Resolved after library upgrade. I recommend checking the other libraries you depend on.

Eshtreeli · 2023-03-02T15:02:29Z

i face the same issue i tried every solution even i tried developers on freelancer no one could know what is wrong idont use PropTypes any where after i have done the react native index file solution another problem showed TypeError: undefined is not an object (evaluating '_reactNative.Text.propTypes.style') i am really frustrated please any help!

grkemtneri · 2023-04-13T14:27:42Z

@SiddigHope

it gives and error saying "app-root/App.js: path is not defined"
how can I fix this?

path is missing. add

var path = require('path')

@niloriver after adding the resolvePath my alias is stopped working too, so i update the resovelvePath with:

    resolvePath(sourcePath, currentFile, opt) {
        var path = require('path')
        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')
        }
        var resolve = require('babel-plugin-module-resolver').resolvePath(sourcePath, currentFile, opt)
        return resolve
      },

TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[4], "C:\Users\gorke\Desktop\projects\mobile\resolver\react-native").UIManager.getViewManagerConfig')

I started getting such an error, how can I solve it?

version 0.71.6

ArcherLucky · 2023-05-22T08:26:29Z

Just look at the log and stacktraces

Summary: ## Overview When I implemented `ignoreLogs` it was originally just to move `console.ignoreYellowBox` over to LogBox. When I did that, I also added filtering for console messages too. My thought process was: Developers probably don't want to configure hiding logs twice, so the LogBox method can handle both. This was a mistake. We should never hide console errors and warnings, because it completely silences important feedback to the users such as deprecation warnings. These issues should be fixed, not silenced, and since adding the silencing behavior it's clear that this feature is being abused to ignore legitimate warnings that need address. Issue facebook#33557 is a great reason why - the correct fix for this is not to ignore the errors, it's to address the deprecation / removal of the API. Allowing an easy `ignoreLog` method to hide the problem made this migration much more painful. Thus, we're reverting back to the pre-logbox behavior of always showing console logs, even if they're ignored by LogBox in the app UI. Hopefully, this results in more of these issue being addressed instead of ignored. Changelog: [General] [Changed] - Do not filter errors/warnings from console Reviewed By: yungsters Differential Revision: D40724661 fbshipit-source-id: de3d2db1b0c32dee96acf92c9b1ca07ba0f4e218

* ViewPropTypes were removed from react-native when from 0.68.0 * reference link: facebook/react-native#33557

shamp-dev · 2024-03-08T06:53:05Z

how i solved the same problem. WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. i got this error after install react-native-camera 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

as I understand it, this is a mistake of the old npm packages, and if the project is alive, then the developers fix it in new versions. And maybe this error will go away when you update the package to a newer one.

I updated all library files having ViewPropTypes and PropTypes from "prop-types"
I changed my terminal directory to library folder (react-native-snap-carousel)
Problem I faced while updating was this package took so long to install. Might be my internet issue.

But it actually worked for me!

Thanks!!!

rickhanlonii · 2024-09-25T21:27:23Z

Update

PropTypes were originally deprecated in React in 2017. React Native deprecated PropTypes in 2021.

In React 19, we’re removing the propType checks from the React package, and using them will be silently ignored.

While this may cause frustration in the short-term, forcing a migration now (after 7 years of deprecations) will increase app perf (by not running the checks) and prevent greater frustration in the future (since type systems are more robust)

This means, even if you migrate to deprecated-react-native-prop-types or apply the patches suggested in this thread, those props will not be validated in React 19, and you're opening yourself up to bugs. For this reason, I've went ahead an hidden the comments suggesting patching.

I know this is frustrating, but please migrate to a type system, or file an issue or fork in package dependencies that still use PropTypes. Locking the thread because I can't keep up with the comments recommending patching react native.

kodeandoec added the Needs: Triage 🔍 label Apr 3, 2022

This comment was marked as outdated.

Sign in to view

sarahsporck mentioned this issue Jan 17, 2023

IGAPP-1061: Upgrade react and react native digitalfabrik/integreat-app#843

Merged

This comment was marked as outdated.

Sign in to view

This was referenced Feb 21, 2023

chore/nowarnings Solve some of the warnings we have on LLM LedgerHQ/ledger-live#2732

Closed

support/nowarnings Address some of the warnings on LLM dev builds LedgerHQ/ledger-live#2733

Merged

madhus1025 mentioned this issue May 16, 2023

Migrated ViewPropTypes to deprecated-react-native-prop-types BigThinkcode/AdaptiveCards#119

Closed

pragadeeshk mentioned this issue May 24, 2023

Reactnative/release 2.2.34 BigThinkcode/AdaptiveCards#121

Merged

This comment was marked as outdated.

Sign in to view

wjmoh-alticast added a commit to altimobility/react-native-check-box that referenced this issue Jul 17, 2023

Remove the dependency of "ViewPropTypes"

e011e64

* ViewPropTypes were removed from react-native when from 0.68.0 * reference link: facebook/react-native#33557

cortinico mentioned this issue Oct 3, 2023

ERROR Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'., js engine: hermes #39772

Closed

CarlaHuichaman mentioned this issue Oct 17, 2023

UI DetalleArticulo italosky/TeloCambio#52

Merged

facebook locked as too heated and limited conversation to collaborators Sep 25, 2024

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

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

Comments

kodeandoec commented Apr 3, 2022

Description

Version

Output of npx react-native info

Steps to reproduce

Snack, code example, screenshot, or link to a repository

Adnan-Bacic commented Apr 5, 2022 • edited Loading

wimil commented Apr 6, 2022

nibblesnbits commented Apr 7, 2022

Poplizal commented Apr 7, 2022

petrishevalexander commented Apr 7, 2022

viniibp commented Apr 7, 2022

This comment was marked as outdated.

nibblesnbits commented Apr 8, 2022

Gnative commented Apr 8, 2022 • edited Loading

nibblesnbits commented Apr 8, 2022

Gnative commented Apr 8, 2022

This comment was marked as outdated.

nibblesnbits commented Apr 8, 2022 via email

PAAPII10 commented Apr 15, 2022

GitForAndrey commented Apr 17, 2022 • edited Loading

hssrrw commented Apr 22, 2022

kockok commented Apr 26, 2022

Gnative commented Apr 26, 2022

jrhager84 commented May 2, 2022

yonitou commented May 6, 2022

Adnan-Bacic commented May 6, 2022

goxr3plus commented May 6, 2022 • edited Loading

yonitou commented May 9, 2022

itorres-1 commented May 11, 2022 • edited Loading

codeplaygoa commented May 11, 2022

FatmaMahmoud698 commented May 11, 2022

omaryoussef commented Dec 7, 2022

qdanik commented Dec 9, 2022

This comment was marked as outdated.

This comment was marked as outdated.

iPachDev commented Jan 3, 2023

tiagomsmagalhaes commented Jan 3, 2023

laitlhadj commented Jan 5, 2023

niloriver commented Jan 12, 2023

tult-rk commented Jan 13, 2023 • edited Loading

karimessouabni commented Jan 16, 2023

SiddigHope commented Jan 29, 2023

This comment was marked as outdated.

tult-rk commented Feb 2, 2023

jongha commented Feb 5, 2023 • edited Loading

Eshtreeli commented Mar 2, 2023

grkemtneri commented Apr 13, 2023 • edited Loading

ArcherLucky commented May 22, 2023

This comment was marked as outdated.

shamp-dev commented Mar 8, 2024

rickhanlonii commented Sep 25, 2024

Update

Output of `npx react-native info`

Adnan-Bacic commented Apr 5, 2022 •

edited

Loading

Gnative commented Apr 8, 2022 •

edited

Loading

GitForAndrey commented Apr 17, 2022 •

edited

Loading

goxr3plus commented May 6, 2022 •

edited

Loading

itorres-1 commented May 11, 2022 •

edited

Loading

tult-rk commented Jan 13, 2023 •

edited

Loading

jongha commented Feb 5, 2023 •

edited

Loading

grkemtneri commented Apr 13, 2023 •

edited

Loading