react-native-material-textfield module with issue undefined is not an object Animated.Text.propTypes.style

[prakashsaran]

E | ReactNativeJS ▶︎ TypeError: undefined is not an object (evaluating '_reactNative.Animated.Text.propTypes.style')

[DatNguyenCore]

i have same issues, i'm using react native 0.62.0. #238

[olivierlesnicki]

Same issue here with react native 0.62.0

[mike-niemand]

It doesn't work with 0.62.

See this commit: https://github.com/facebook/react-native/commit/86d90c03ebe39ebc4b2c6dcc0747b4f3a34f5f2f

Changelog: [General] [Removed] - Removed propTypes from Animated components.

[lucassms9]

Same issue here with react native 0.62.0, Any suggestion ?

[mike-niemand]

Pull the project and change Animated.Text.propTypes to Text.propType and removed Animated from the imports.

style: Animated.Text.propTypes.style

[aphzol]

I also have the issue. It doesn't for for react-native from version 0.62.0 and above as propTypes for Animated components have been removed. On changing react-native version in package.json to lower versions the app compiled with several warnings but the app didn't run eventually probably due to incompatible libraries used in other packages/modules in the framework.

[theinfoz]

use react-native version0.61.5

[theinfoz]

in @0.62.1 not working

[Fabrice-Beya]

As @mike-niemand mentioned as a workaround i replaced:

style: Animated.Text.propTypes.style

with:

style: Text.propType

in the following 3 files in the directory: .../node_modules/react-native-material-textfield/src/components/

Affix/index.js Helper/index.js label/index.js

And also import {Text} from react-native in all three files, so youll have {Animated, Text} from 'react-native'

Seems to be working fine on react-native 0.62.1.

[sajaddp]

https://github.com/n4kz/react-native-material-textfield/issues/238#issuecomment-596026010

[ffchn]

@Fabrice-Beya worked like a charm (0.62.2)! Thanks!

[cryser29]

For those who don't want to edit node_modules each time, here is a patch file according to @Fabrice-Beya advice using patch-package.

Instruction:

1. Create patches directory in your project's root
2. Copy patch to patches/react-native-material-textfield+0.16.1.patch
3. yarn add patch-package postinstall-postinstall or npm i patch-package
4. yarn patch-package or npx patch-package
5. Fix is already applied. Add the following to package.json to not repeat the same next time:

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

[javarahulsharma]

I have forked this and modify. Now try npm install https://github.com/javarahulsharma/react-native-material-textfield.git will solve this issue.

[lukarmar]

@javarahulsharma, Very good. Here it worked perfectly

[mlsrinivas]

@Fabrice-Beya Awesome, Thanks U :)

[GDnsk]

It is happening with me too on 0.62.2

@javarahulsharma using your fork by now, thank you

[drummerpva]

To resolve all errors and yellow boxes just remove all propTypes and set them on all Animeted components useNativeDriver={true}

[poonamdhomane]

i have created fork https://github.com/iOSUser110/react-native-material-textfield/blob/master/src/components/helper/index.js , and using this as i was facing the same issue

[saadi-ninjasCode]

I have forked this and modify. Now try npm install https://github.com/javarahulsharma/react-native-material-textfield.git will solve this issue.

It gives many warning such as 'style' is invalid

[mohity777]

I have forked this and modify. Now try npm install https://github.com/javarahulsharma/react-native-material-textfield.git will solve this issue.

It gives many warning such as 'style' is invalid

yes it is giving warnings. Any Idea how to resolve?

[mwegener-com]

I created a new patch file for #283 and #285 for react-native 0.62

this should solve your problem @mohity777 and @saadi-ninjasCode

[jasonjin220]

I've solved it by these steps..

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 used 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'

[KingBlacc]

As @mike-niemand mentioned as a workaround i replaced:

style: Animated.Text.propTypes.style

with:

style: Text.propType

in the following 3 files in the directory: .../node_modules/react-native-material-textfield/src/components/

Affix/index.js Helper/index.js label/index.js

And also import {Text} from react-native in all three files, so youll have {Animated, Text} from 'react-native'

Seems to be working fine on react-native 0.62.1.

I do not have style: Animated.Text.propTypes.style inside of the three index.js files, instead I have style: Text.propTypes.style

[mwegener-com]

@KingBlacc you should replace Text.propType in this case

or type npm install react-native-material-textfield again. After that you can run this patch file

[LuizDoPc]

I build a workaround until update. To use do the following:

• download this repo inside a folder called patches in your project root.

• add this script @ your package.json's script section: "postinstall": "./patches/script-patch.sh"

• run yarn to install the patch

this fix will allow you to run these patches automatically every time you install your project's dependencies. Remove it when we have a proper fix from the lib's author.

[KingBlacc]

• postinstall

When following this approach, I get an error because the Text variable is not imported

[KingBlacc]

@KingBlacc you should replace Text.propType in this case

or type npm install react-native-material-textfield again. After that you can run this patch file

Following the above steps worked, but I also had to update the material dropdown to v2

[newfylox]

Applying the new fix I have this issue https://github.com/facebook/react-native/issues/22927

Default props: https://github.com/n4kz/react-native-material-textfield/blob/master/src/components/field/index.js#L58

Where it's calculated: https://github.com/n4kz/react-native-material-textfield/blob/master/src/components/line/index.js#L89

Some said we have to add a margin: sameBorderWithValue to make it works, but it becomes ugly if the width is bigger.

Any idea?

[SamiChab]

@mwegener-com thank you so mutch for your patch! Works perfect! @n4kz is it possible to apply this patch to the future update?

Note that if you have already applied another patch before, you have to first reinstall the module before applying it

[plgrazon]

I have forked this and modify. Now try npm install https://github.com/javarahulsharma/react-native-material-textfield.git will solve this issue.

Thank you sir! I understand how propTypes work but I can't seem to find a resource/documentation about ".propType". Is this like undocumented props react-native components?

I logged the Text component and the property that it has is .propTypes and not .propType

[plgrazon]

Text.propType is undefined that's why the error goes away. It should be Text.propTypes.style instead.

Update: I tried it on my fork and it works.

[ubaidjs]

Everyone who are struggling with this issue. I have modified and published this package to npm. try npm install @ubaids/react-native-material-textfield

[ElliDy]

@cryser29 Your patch is not working for me.

**ERROR** Failed to apply patch for package react-native-material-textfield

  This happened because the patch file patches/react-native-material-textfield+0.16.1.patch could not be parsed.

  If you just upgraded patch-package, you can try running:

    patch -p1 -i patches/react-native-material-textfield+0.16.1.patch
    npx patch-package react-native-material-textfield

  Otherwise, try manually creating the patch file again.

  If the problem persists, please submit a bug report:

    https://github.com/ds300/patch-package/issues/new?title=Patch+file+parse+error&body=%3CPlease+attach+the+patch+file+in+question%3E

@bit-ninjas Is your merge in master already released?

[younes0]

@ElliDy use https://github.com/ds300/patch-package and this patch (remove .txt extension): react-native-material-textfield+0.16.1.patch.txt

[CVRamana]

As @mike-niemand mentioned as a workaround i replaced:

style: Animated.Text.propTypes.style

with:

style: Text.propType

in the following 3 files in the directory: .../node_modules/react-native-material-textfield/src/components/

Affix/index.js Helper/index.js label/index.js

And also import {Text} from react-native in all three files, so youll have {Animated, Text} from 'react-native'

Seems to be working fine on react-native 0.62.1.

tried your solution but getting this error again in0. 63.3

[vorousjames]

ive removed this package, still got the error, deleted my main.jsbundle (only instance of h.Animated.Text.propTypes.style) and re-installed, and tried this again and it didnt work. RN 0.63.3 react-native-material-textfield v^0.16.1 Xcode 12.0.1 iOS 14.0.1

any help?

[gabrieldonadel]

For the ones that still have this issue I've forked, fixed, and republished this library under the name rn-material-ui-textfield. You can install it by running the following command

yarn add rn-material-ui-textfield
// or
npm install rn-material-ui-textfield

[SarvaDev-123]

@gabrieldonadel It's not fixed bro It's throw error React-Native version mismatch Javascript version 0.62.2 and Native version 0.61.5

[gabrieldonadel]

@gabrieldonadel It's not fixed bro It's throw error React-Native version mismatch Javascript version 0.62.2 and Native version 0.61.5

@SarvaDev-123 rn-material-ui-textfield is not this lib. check out this link

[MrDrk94]

Still got same problem. No updates yet?

[glennperez]

A clean solution is to replace the deprecated package: react-native-material-textfield by the fork: rn-material-ui-textfield which is compatible with the most recent versions of React Native and the only change in your code is: import { TextField } from 'rn-material-ui-textfield'.

[lfaz]

@glennperez this works pretty nice for me! Thnks!