The ART '<Surface>' becomes invisible in Android

[alwaysonlinetxm]

Is this a bug report?

Yes.

Have you read the Contributing Guidelines?

Yes.

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 8.4.0
Yarn: 1.3.2
Watchman: 4.9.0

Packages: (wanted => installed)
react-native: 0.50.1 => 0.50.1
react: 16.0.0 => 16.0.0

Target Platform: Android 7.1.1

Steps to Reproduce

1. generate a pathh and draw if with ART, it works correctly on the first render;
2. put the phone to sleep;
3. awake the phone;
4. the <Surface> area becomes invisable;

Expected Behavior

it should just look like same with the first render.

Actual Behavior

the <Surface> area becomes invisable;

Reproducible Demo

the main just like below:

<Surface width={ 300 } height={ 200 }>
 <Shape d={ new Path()
 .moveTo(0, 0)
 .lineTo(0, 200)
 .lineTo(300, 200)
 .lineTo(300, 0)
 .close() } fill={ '#f00' } />
</Surface>

[cyuanyang]

me too. if you refresh ui ,it good work. how did you solve it?

[ardmn]

Same issues . I think the maintainers are have only iOS devices and don't want support android. I think they do work on react-native only because they likes write code on js for iOS.

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[nolan-m]

I updated to React Native 0.53.3 and still have this issue.
I tried to call this.forceUpdate as a work around and still did not work.

[woowalker]

em, what i face is ,when i use animated on Surface, like
const AniSurface = Animated.createAnimatedComponent(Surface)
<AniSurface style={{transform: [{translateX: this.state.aniTransX}]}}/>
when the animation start the Surface panel invisible, all dark like
but, when i open the dev menu, and click Toggle Inspector, the Surface visible again
=====UPDATE 2018.03.05=====
set style backgroundColor on the top View(not always top View, but must parent View), the Surface always visible

[ghostrick]

me too.
I call this.forceUpdate, But the situation is not improved.

[spaceye]

Same here. We ended up changing component's key value to force remount on active app state change and device rotation (AppState and Dimensions event listeners).

[anthony-skr]

I'm facing the same problem. I will probably use the same fix (like there bartgryszko/react-native-circular-progress@f198080).

I don't get why this issue has been closed... it makes ReactNative ART on Android unreliable.