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

[prakashsaran]

trafficstars

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