Victory-native: [Android]: SurfaceView should have explicit width and height set

[kkemple]

When trying to use victory-native with Android I receive the error found in screenshot below. Not sure if this helps but the only component I use from victory-native is Area.

Some info about the project:

react-native: 0.42.0-rc.3 // needed to work with native-navigation lib
react-native-svg: 5.1.5
victory-natve: 0.7.0
android device version: 7.1.1

I would love to help out in any way I can, let me know if you need more information and I will provide whatever is needed. Also, if you can point me in the right direction I will gladly try to investigate myself!

Screenshot:

[boygirl]

@kkemple sorry for the delay. How are you using the <Area/> component?

[kkemple]

No worries!

 <View style={styles.graphContainer}>
   <View style={styles.yAxisContainer}>
     <Text style={styles.chartLabel}>
       {Math.max(...chartData.map(d => d.temp))}˚
     </Text>
     <Text style={styles.chartLabel}>0˚</Text>
  </View>
  <View
    style={styles.xAxisContainer}
    onLayout={event => {
      const { nativeEvent: { layout: { width, height } } } = event;
      this.setState({
        chartHeight: height,
        chartWidth: width,
      });
    }}
  >
    <VictoryArea
      padding={0}
      domainPadding={5}
      width={chartWidth}
      height={chartHeight}
      y="temp"
      interpolation="cardinal"
      style={{ data: { fill: '#ffffff', opacity: 0.7 } }}
      data={chartData}
    />
  </View>
</View>

[davebro]

+1 Same

react-native: 0.40.0
react-native-svg: 4.5.0
victory-natve: 0.6.0
android device version: 7.1.0 API 25 (Genymotion emulator)

[Lepozepo]

I'm seeing the same issue after passing width to VictoryChart

[nlwiskus]

I was having this issues as well. @boygirl How I solved it was that I found was that there were conditions in my code (I was using onLayout with inital state of 0) where there was a container & the charts width/height were <= 0. Not allowing the charts to render under those conditions allowed the page to render.

[kkemple]

I discovered the same and check for a truth-y value on width and height props/state before trying to render svgs.

  render = () => {
    const { style } = this.props;
    const { containerWidth, containerHeight } = this.state;

    return (
      <View
        style={[{ paddingTop: 48, backgroundColor: '#ffffff' }, style]}
        onLayout={this.handleLayout}
      >
        {!!containerWidth &&
          !!containerHeight && (
            <Svg
              viewBox="0 0 100 100"
              width={containerWidth}
              height={containerHeight}
            >
              <ShotDefs />
              <Field />
              <G>{this.props.shots.map(shot => this.renderShot(shot))}</G>
            </Svg>
          )}
      </View>
    );
  };