[Android] React ART can't drawing the line dynamic.

[guoliang1206]

I have used the panResponder to catch the points moved on the screen ,draw the path and display it. It is works well on iOS, but it doesn't works on Android.

Here is the code:
process the points

 let d = new Path();

        for(let i=0;i<this.arrUsedPoint.length;i++){

            let p = this.arrUsedPoint[i];
            if (p.type ==='start' ){
                d.moveTo(p.x, p.y);
            }else {
                d.lineTo(p.x, p.y);
            }
        }
        this.showPoints = d;

render method:

render() {
        return (
            <View style={styles.container} {...this._panResponder.panHandlers}>
                    <Surface ref={'lineView'} width={ScreenWidth} height={ScreenHeight}>
                        <Shape d={this.showPoints} stroke={'rgb(0,185,255)'} strokeWidth={this.nowR} />
                    </Surface>
            </View>
        );
    }

This is it works on iOS, when I touch and moved ,it will display the line . and the points object will be correctly display ,notice the text : initial -> [Object object]

And this is it works on Android, we can see that the text will be changed to [Obejct objetct] ,but it can't display the line.

If i change the path like this: <Shape d={"M160 160 A 45 45, 0, 0, 1, 115 205"} stroke={'rgb(0,185,255)'} strokeWidth={this.nowR} />;, then it will draw an arc when first render on android.

is it a bug? or something important but ignored by me?
and attach the env of my demo.

"dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "0.44.0",
    "react-native-camera": "^0.8.0",
    "react-native-datepicker": "^1.5.1",
    "react-native-doc-viewer": "^2.3.2",
    "react-native-fetch-blob": "^0.10.5",
    "react-native-fs": "^2.3.2",
    "react-native-image-picker": "^0.26.3",
    "react-native-localization": "^0.1.30",
    "react-native-maps": "^0.15.0",
    "react-native-root-modal": "^1.1.1",
    "react-native-video": "^1.0.0",
    "react-navigation": "1.0.0-beta.9",
    "react-redux": "^5.0.4",
    "realm": "^1.3.1",
    "redux": "^3.6.0",
    "redux-persist": "^4.6.0",
    "redux-storage": "^4.1.2",
    "redux-thunk": "^2.2.0"
  },

[whiffsalot]

I've had a similar problem on Android with the Surface and Shape. They have worked fine on IOS but behave differently on Android.

When I generate and draw a path, it works correctly on the first render. Unfortunately when pressing the sleep button to put the phone to sleep and then moving back to the app, the path has disappeared. I haven't been able to reproduce this in the Android Emulator, but it happens consistently when running on my device (a galaxy S8). I don't know what to do with this.

[yaswanthsvist]

I to had the same issue in Android device but not tested in iOS.
In first render i was able to draw the paths successfully, but when i get the data from webSocket its not updating.
My mistake in the code.It's rendering shape properly for every render call.

[jiarWang]

I have the similar problem

[guoliang1206]

@jiarWang It seems that 0.47.1 fix this bug, you can test it.

[jiarWang]

@guoliang1206 thank U, it did work

[alwaysonlinetxm]

@kyledmellander Have you solved your problem ？I met the same issue.

[whiffsalot]

@alwaysonlinetxm I ended up using a webview / canvas. It was pretty janky. I had luck with the react-native-svg library. I think a lot of it is that we're stuck in dependency hell with a react native 0.45.1

[alwaysonlinetxm]

@kyledmellander I found a tricky way to handle this issue. I observed the screen and remount the when the screen became active from background. It worked, but the problem is it will lead to a blink on the screen.

[s-low]

@kyledmellander I ran into the same issue where a element would disappear if the app was backgrounded on android, and not redraw when the app was woken again even if a forceUpdate was called.

Have been able to fix it by in a similar way to @alwaysonlinetxm by using AppState to watch for background/foreground changes. But, instead of re-mounting the component I set a key property on the Surface and updated that key to something random each time the app was foregrounded. This seems to have done the trick. I'm not completely sure why but it's possible the surface doesn't re-render unless it's own props/state have changed?