React-native: 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

[NitinTayal007]

My error was because i mistakenly used '100%%' in my code, it was working fine on simulator but on android crashing with same error.

[skoch-tf]

It's happens when you try use a invalid property value on react native invalid style, such as a string instead of number for height/width or per example when you use '_left/rigth_' on alignItems instead of '_flex-start/flex-end_'

[luatnd]

I have same issue in [email protected].
And it appears widely on some random devices. I cannot reproduce this problem.
Scratched my head !!!

[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) https://github.com/avishayil/react-native-restart/issues/144