Unable to render shadow graph in Android

[edo1493]

What is the problem?

Hello, I am trying to render a shadow for a line chart, which is basically another line chart as child of the parent line chart. It seems nothing gets rendered on Android, while iOS works like a charm.

When does it happen?

Android only.

What platform?

• [ ] iOS
• [x] Android

React Native version: 0.57

Code to reproduce

      <LineChart
          animate={true}
          animationDuration={200}
          style={{ flex: 1}}
          data={ lineGraph }
          yAccessor={this.props.yAccessor}
          xAccessor={this.props.xAccessor}
          xScale={scale.scaleTime}
          curve={ shape.curveNatural }
          numberOfTicks={ 6 }
          svg={{ stroke: 'rgb(255, 255, 255)', strokeWidth:3,}}
          contentInset={ contentInset }>
          <LineChart
            animate={true}
            animationDuration={200}
            style={{ flex: 1}}
            data={ lineGraph }
            xScale={scale.scaleTime}
            yAccessor={this.props.yAccessor}
            xAccessor={this.props.xAccessor}
            type="shadow"
            curve={ shape.curveNatural }
            svg={{ stroke: 'rgba(255, 255, 255, 0.2)', strokeWidth: 10 }}
            contentInset={ contentInset } />
          <Grid
            svg={{ stroke: 'rgb(255, 255, 255)', strokeWidth: 0.1 }}
            belowChart={true}/>
        </LineChart>

This is what I see on iOS.

This is Android.

[pistonsky]

It seems like you can't render anything inside a LineChart. But did you try to render them side-by-side?

[juanzone]

same issue. Can't render another graph as a decorator on Android.. Works well on IOS

[TriinK]

Is this problem somehow resolved? I have the same issue on Android (can't render anything as LineChart children).