45

After upgrading React Native to 0.62.2, and installing react-native-material-dropdown` library, project is giving this error:

enter image description here

Iffat
  • 1,606
  • 4
  • 19
  • 33

10 Answers10

56

I solved this by,

  • Commenting itemTextStyle: Text.propTypes.style in
    ..\node_modules\react-native-material-dropdown\src\components\dropdown file.

  • And remove Animated in Animated.Text.propTypes.style in

    affix/index

    helper/index

    label/index

    of react-native-material-textfield.

  • And added import { Animated, Text} from 'react-native'; in each of above three files.

Iffat
  • 1,606
  • 4
  • 19
  • 33
  • 4
    Great answer but editing files under `node_modules` is not recommended. You can't add these files to source control since files under `node_modules` should be ignored. So there is no way for other developers on the same project to get the changes. And what happens if you want to upgrade to a newer version of that package? Your changes will be overwritten. A better approach would be to fork the `react-native-material-dropdown` package and publish a new package or get the changes integrated. – Philip Beber Apr 19 '21 at 17:54
  • 2
    I ended up creating a new package with the fix in it, and some other improvements (like typescript definitions): `react-native-material-dropdown-no-proptypes`. – Philip Beber Apr 20 '21 at 07:55
  • after editing the node_modules remember to use patch-package to patch it permanently, else the solution will be temporary – Okpo Aug 23 '22 at 05:48
  • It works, thanks ! But I personnaly need to replace `Animated.Text.propTypes.style ` by `Text.propTypes` – Pentagura Oct 25 '22 at 14:01
  • not works for me – Avishkar Patil Dec 07 '22 at 13:37
47

Here is another solution I've found.

  1. Remove installed package react-native-material-dropdown

    yarn remove react-native-material-dropdown

  2. Install new packages react-native-material-dropdown-v2 and react-native-paper

    yarn add react-native-material-dropdown-v2 react-native-paper

  3. Swap react-native-material-dropdown to react-native-material-dropdown-v2 in your code

    e.g. import { Dropdown } from 'react-native-material-dropdown' to import { Dropdown } from 'react-native-material-dropdown-v2'

Jason Jin
  • 1,739
  • 14
  • 21
32

I found the same problem while using @react-navigation/drawer

I've solved it by these steps.

  1. Open node_modules and then search for react-native-material-textfield open the file and go to src folder
  2. Under src you will see affix, helper, label folder - under each folder, there is an index.js
  3. open the index.js of the mentioned folders one by one (all 3 folders) and search for the text style: Animated.Text.propTypes.style, and replace it by style: Text.propTypes
  4. And import text form react-native like this import { Animated , Text} from 'react-native';
  5. And now reload the terminal, and you are good to go
Ramesh R
  • 7,009
  • 4
  • 25
  • 38
TripleM
  • 1,096
  • 7
  • 20
  • After doing those changes, I am getting another issue: TypeError: Object is not a constructor (evaluting new TextInput({})). Any idea how to fix it? – Umid Boltabaev Jul 13 '20 at 06:06
  • I have solved the problem by that way which I have mentioned. And then app is working fine on my android (thought every time I have to do this after pulling from git). I would like to suggest you to uninstall the app then consider reinstalling it. – TripleM Jul 13 '20 at 10:16
  • Am I really seeing this??? if you edit any file in node_modules, when you run nmp i, won't your changes be returned back to what it was??? – Wale Jul 15 '20 at 16:57
  • It's a temporary solution [@Whales_Corps](https://stackoverflow.com/users/5365227/whales-corps) , if you installed node_modules again then you have to make the same changes . I'm trying for a permanent solution of this. I will update it when I will find the way to do such. – TripleM Jul 15 '20 at 17:02
  • And If you change once then if you do not reinstall with command _npm install_ or _sudo npm install_ then you can freely use this one . **npm start** have no link with the changes so app will run without any issue. – TripleM Jul 15 '20 at 17:08
12

There is an issue open on github about this problem. As mentioned in the comment, it is possible to use this option to edit node modules, or create a patch so that it is not necessary to edit the files every time you add a new library or run an npm install.

Instruction:

  • Create patches directory in your project's root
  • Copy patch to patches/react-native-material-textfield+0.16.1.patch
  • yarn add patch-package postinstall-postinstall or npm i patch-package
  • yarn patch-package or npx patch-package

Fix is already applied. Add the following to package.json to not repeat the same next time:

 "scripts": {
+  "postinstall": "patch-package"
 }

https://github.com/n4kz/react-native-material-textfield/issues/249#issuecomment-625791243

alycecristines
  • 400
  • 2
  • 9
3

I faced the same issue while using react-native-material-dropdown.

Fix:

  • navigate to node_modules/react-native-material-textfield/src/components
  • Open files affix/index.js, helper/index.js and label/index.js
  • Replace style: Animated.Text.propTypes.style with style: Text.propType
  • import {Text} in each of these 3 files import { Animated ,Text} from 'react-native'

This should fix the issue

react-native version: 0.64.0

Debarghya Maity
  • 51
  • 4
2

For me it was the package "react-native-easy-toast" at version 2.0.0. The weird thing was, that I couldn't find "propTypes" or "Animated" anywhere in my Code or in my libs (node-modules). I'd expect to find it somewhere in the react-native-easy-toast folder in node_modules...

Anyway, after commenting all my toasts the app started again.

I now also found a patch for this: "https://github.com/crazycodeboy/react-native-easy-toast/issues/118" and with this and from other here mentioned patch-package it worked with the toasts and the patch gets automatically applied after npm install:)

Boommeister
  • 1,591
  • 2
  • 15
  • 54
1

Just update the library they updated their library with fixes here is the link https://www.npmjs.com/package/react-native-material-dropdown-v2-fixed

AliRehman7141
  • 873
  • 3
  • 12
  • 33
1

I am using react-native-material-textfield package, and I also faced this error so I added this piece of code in my JS file right before importing:

import { Animated, Text } from 'react-native';
Animated.Text.propTypes = Animated.Text.propTypes || Text.propTypes;
import { TextField } from 'react-native-material-textfield';
Community
  • 1
  • 1
Vladimir Hog
  • 11
  • 2
  • 1
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-ask). – Community Sep 14 '21 at 06:40
  • answer is clear – damdafayton Jul 15 '23 at 20:43
0

enter image description here

enter image description here

I have faced the same issue while using react-native-material-dropdown.

Fixed using this:

navigate to node_modules/react-native-material-textfield/src/components
Open files affix/index.js, helper/index.js and label/index.js
Sourabh Gera
  • 862
  • 7
  • 7
0

I have resolved my issue by using this lib

react-native-material-dropdown-no-proptypes

Ali Raza Khan
  • 181
  • 1
  • 4