Error while updating property 'height' in shadow node of type: RCTView when I test on real device, but nothing wrong on emulator

[CreativeArtDev]

I am using latest React Native release. and I got through the existing issues here.
But I could not be clear their issues are similar to mine.
So maybe it is simple or tricky.

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.4
CPU: x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
Memory: 20.04 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.3 - /usr/local/bin/node
npm: 5.6.0 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
IDEs:
Android Studio: 3.1 AI-173.4819257
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

I am building a simple app and it works fine in the emulator(Genymotioin), but when I run it on real device it shows me an error.

Error while updating property 'height' in shadow node of type: RCTView

null

Unknown value: 200

....
....
....
....

What is odd for me is just it is running simply on emulator but not working on a real device.
And also I searched all the style with height. And there is no syntax error
i.e height: '22'
All the style with height is the integer not string. and there are no prop-types for that.
I cannot find where this error comes from.
So please suggest any idea to fix it. I will be happy if anyone helps me out to solve this problem.

P.S.
When I clean the gradle and generate apk, everything is okay but if I install that apk file on my phone, it is killed automatically.

[Mangio621]

yeah sometimes i get these random occurences with the stylesheet. Here are some things i could think of though. the height property in the stylesheet may not have to require a string i don't think. Have you tried inputting an integer value instead? I.E height: 22 instead of height: '22'. If that didn't work, are you using any of react native's Animated Components? Also if you need your input to be a string. Try parsing the string to an integer if necessary.

[CreativeArtDev]

@Mangio621 Thanks for commenting.
I got through all the Stylesheet which may include like-> height:'22'.
But it was not working at all.
And my app is a just simple app which does not contain that kinda Animated Components.
If I explain my situation in more detail, it is working well in emulator but not for real device.
And if I generate it to signed APK, it is killed when it opens after installing.
I checked similar issues and I found that they knew where was the source of error.
But I cannot even know where I can find the bug.
Best.

[CreativeArtDev]

I could solve this issue by downgrading the version of react native to 0.55.4 and everything else.

[rosskhanas]

I have a similar issue after upgrading from 0.55.4 to 0.57.x. The worst thing is, it happens a randomly in different places in the app, so I cannot really reproduce the error. 😢

[mvanroon]

I don't think downgrading is the real solution here. This seems to be a duplicate of #21755

[CreativeArtDev]

Yes. also, I cannot surely say downgrading is the best way.
But that error occurred when I used google map.
So I tried to fix it by matching the version of Google map and my app.

[CreativeArtDev]

And I know it is not the correct solution to this issue.
Maybe @rtkhanas, if you avoided and cannot regenerate that error, it means it is coming from immature of React native.
And I think in the latest version, they could solve them.

[rosskhanas]

Pretty sure it is just React Native. We use maps as well, but I've seen myself Android app crashes on pretty simple pages with no maps and other complicated thigs at all.

[takunee]

Happen in release mode everytime

[quantumpotato]

Any update?

[ShreyAhluwalia-HAI]

I am on the same version of RN 0.55.4
Still same error

[brionace]

Try removing the 'quotes' so it's just the number; e.g height: 22. This resolved the error for me.

[ShreyAhluwalia-HAI]

My error was because of "%%" some other person added to the code for height.
It was written like height: "100%%"
For some reason, it worked perfectly on iOS but showed an error on Android.
I would suggest doing a global search for "height" and thoroughly checking for typos in the code.

[jorisw]

I got this on Android when I tried to set position: fixed on a View. iOS didn't seem to mind.

[kevinavery]

I noticed this when I had borderBottomWidth: <condition> && <value> on a View. Works on iOS but for Android I needed to provide a non-boolean value (so I used a ternary).

[dulmandakh]

@kevinavery borderBottomWidth: <condition> ? <value> : <default value>

[chrisvasey]

I found an example of this where :

{console.log(value)}

Had been added on a view, removing it solved the issue.
Strange this didn't trigger any issues on iOS builds.

[mehmetnyarar]

I was having 'flex' issue and it was because of using 'flex: 0 0 Xpx;' on a styled component in my case. I removed all the 'string' values for 'flex' and it's solved.

[vahidrn98]

my case was that i forgot to change View to Animated.View

[clems36]

This is happening to me on random devices on Android as well. Also, the app is not crashing systematically, only like 20% of the time and only in production. @dulmandakh could you re-open this ? Even after following the above tips, this is still an issue.

[ndotie]

Check on your conditional styles where width is determined thru logic, either true or false is feeding BOOLEAN to your width, which is unexpected

[clems36]

I did that. Turned out it was the dark mode an Android that made the app crash for me. Turn dark mode off and it does not crash anymore.

[luatnd]

I did that. Turned out it was the dark mode an Android that made the app crash for me. Turn dark mode off and it does not crash anymore.

Hmm really?

I think the issue comes from some of my node_modules/react-native-***, not from the RN core, but RN core should provide more trackable stack trace to this problem !!

If the problem always appears: 100 3rd-libs take just 7 builds to locate which err come from
But this err is randomly appear :(

[Stuart-Wilcox]

I might be jumping in late but I’m using styled-components and for me I had to change this

const Item = styled(View)<{ position: 'left' | 'right' }>`
  ${props => props.position === 'left' ? 'margin-right: 5px;' : 'margin-left: 5px;'}
`;

...
<>
  <Item position={'left'} />
  <Item position={'right'} />
</>

to this:

const Item = styled(View)<{ location: 'left' | 'right' }>`
  ${props => props.location=== 'left' ? 'margin-right: 5px;' : 'margin-left: 5px;'}
`;

...
<>
  <Item location={'left'} />
  <Item location={'right'} />
</>

For some reason the prop name was colliding with the component underneath and giving it a garbage value of 'left' or 'right' instead of '1px' or something

[luatnd]

${props => props.location=== 'left' ? 'margin-right: 5px;' : 'margin-left: 5px;'}

@Stuart-Wilcox you can really use px in react-native?

[Stuart-Wilcox]

@luatnd yeah check out this library styled-components

If you come from a web dev background it’s like writing normal css and gets converted into RN Stylesheet

[jordangrant]

For me it was calling the RNRestart library to reload the app soon after app launch (for some arabic users) avishayil/react-native-restart#144

[slorber]

Same as @clems36 , turning the dark mode off seems to solve the issue on my Expo SDK 36 RN app

[rajojon23]

I had a similar issue, turns out there was a stray invalid property value of margin: '0 auto' in my code that I had to remove to resolve the problem.

[JJMoon]

In my case, I used padding for the parameter name in styled-component. They were absolutely OK in iOS.
I changed it to isPad, all errors went away.

export const PadCenContainer = styled(ContainerStretch)<{
  isPad?: boolean;  << == was padding
  isRow?: boolean;
}>

[jocoders]

Good day! I have the same issue in the production mode on Android 9, Android 11. I checked all versions from this post, but nothing works for me. Any ideas how to solve it?

Fatal Exception: com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'height' in shadow node of type: RCTView
       at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateShadowNodeProp(ViewManagersPropertyCache.java:125)
       at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackShadowNodeSetter.setProperty(ViewManagerPropertyUpdater.java:161)
       at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:65)
       at com.facebook.react.uimanager.ReactShadowNodeImpl.updateProperties(ReactShadowNodeImpl.java:320)
       at com.facebook.react.uimanager.UIImplementation.createView(UIImplementation.java:251)
       at com.facebook.react.uimanager.UIManagerModule.createView(UIManagerModule.java:469)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
       at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:151)
       at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
       at android.os.Handler.handleCallback(Handler.java:938)
       at android.os.Handler.dispatchMessage(Handler.java:99)
       at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
       at android.os.Looper.loop(Looper.java:246)
       at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
       at java.lang.Thread.run(Thread.java:923)

[jovylle]

Fixed by using number not string.
like height: 100 and not height:"100px"

[kvntzn]

On my end it is caused by react-native-elements Divider's width="100%".

[like001]

I have same issue in [email protected]. please reopen and fix it，ths.

property different each time，such as：
1 com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'color' in shadow node of type: RCTText
2 com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'flex' in shadow node of type: RCTView
3 com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'position' in shadow node of type: RCTView
4 com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'text' in shadow node of type: RCTRawText
5 com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'alignSelf' in shadow node of type: RCTView
6 com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'height' in shadow node of type: MHCameraOpenGLView
7 com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'width' in shadow node of type: RCTView
8 com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'collapsable' in shadow node of type: RCTView

[arthwood]

For me it crashed with this error (the property name was left) when I passed left prop to component which was boolean (it wasn't by mistake but genuine value).
It was easier to track because error included also something like:
RCTView boolean cannot be cast to double

[adammo14]

I fixed my error by going through styles and checking for invalid values on height property. I found an instance where I accidentally put: height: '%', instead of a number value.

[manhtienptit]

For me it crashed with this error (the property name was left) when I passed left prop to component which was boolean (it wasn't by mistake but genuine value). It was easier to track because error included also something like: RCTView boolean cannot be cast to double

hic. i encountered a similar issue, Had you solved it??

[arthwood]

@manhtienptit Yes, I just changed the prop name from left to something like isLeft. It seems that Android doesn't handle well name conflicts. As aforementioned - I wanted to use boolean type for that prop, but left is probably being mapped to style property under the hood and it's expecting a number.

[manhtienptit]

Yeah.. Thanks for your reply. I found my issue. Many many thanks for help.

[efstathiosntonas]

@arthwood thanks, was banging my head on wtf was going on.

[OkoroKelvin]

Error while updating property 'height' in shadow node of type: RCTView

null

Unknown value: 1

Please help , i am having this error, and it keeps crashing my app

[nixoschu]

Just trying to share my experience on this issue.

In my App I have a wrapped React-Native Text Component.

I had properties like "right, center, left" defined as booleans to change the alignment of the actual text inside the App.
Of course I returned the given props, spread to the actual React Native Text Component

  return (
    <RNText style={textStyle} {...props}>
      {children}
    </RNText>
  );

Which in my case lead to the error because "right" was a boolean and not a number because I had a property like this and it was passed to the text component by me, which probably conflicted with the actual right property for positioning used by the react native text component.

It worked like this for a very long time, produces this nasty error after I upgraded all my dependencies but was solvable like this for me. So beware to pass props to or other components that have fixed definitions for their properties. (strings, numbers, ...)

[clijiac]

Just trying to share my experience on this issue.

In my App I have a wrapped React-Native Text Component.

I had properties like "right, center, left" defined as booleans to change the alignment of the actual text inside the App. Of course I returned the given props, spread to the actual React Native Text Component

  return (
    <RNText style={textStyle} {...props}>
      {children}
    </RNText>
  );

Which in my case lead to the error because "right" was a boolean and not a number because I had a property like this and it was passed to the text component by me, which probably conflicted with the actual right property for positioning used by the react native text component.

It worked like this for a very long time, produces this nasty error after I upgraded all my dependencies but was solvable like this for me. So beware to pass props to or other components that have fixed definitions for their properties. (strings, numbers, ...)

after upgrade 0.71 I have same problems

[DoDo-xx]

Error while updating property 'flex' in shadow
node of type: RCTView 我是这样的问题，都差不多的，把flex:'1',flex:false,或者height:'1',borderWith:'1',的引号去掉，改为整数就好了，要不然在reactnative中android运行时会导致闪退

[Presslive]

Her for me it occur when i put
width: "100% " with a space in the end
solution width: "100%" no espace after the %

[electroNBS]

For me, it happened because a style property was:
borderWidth: "3px"
Once I changed it to:
borderWidth:3
It worked.

[infosecjunky]

you can use percentage instead of defining 200

width: '50%',
height: 70,

This works for me.

[t1minator]

You may want to consider setting the AutoScaling default for the text property. Check out this post

I think what you want is:
Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.allowFontScaling = true;