Grid component inside BarChart doesn't work on iOS

[valin0k]

Grid component inside BarChart doesn't work on iOS

When does it happen?

What platform?

• [ ] iOS 10.1

React Native version: ^3.1.0 react-native-svg-charts-version: ^5.3.0

Code to reproduce

  const svgProps = {
    x: 100,
    y: 500,
    fill: 'tomato'
  }

      <BarChart
        style={{ flex: 1 }}
        data={values}
        animate>
        <Grid direction={Grid.Direction.VERTICAL} svg={svgProps} />
         <XAxis
          style={{ width: '95%', alignSelf: 'center', marginTop: chartHeight - 10 }}
          contentInset={{ left: 10, right: 10 }}
          data={data}
          formatLabel={i => months[i]}
        />
      </BarChart>

[purplegamba]

I've had problems with this on both iOS and Android. I ended up creating a custom grid, which is working fine. The line chart that has the vertical and horizontal grid has an example of a custom grid which is helpful.

[Marcuspo]

{Grid.Direction.VERTICAL} has a bug!

But if you usage this, worked!

  const VerticalGrid = ({ x, bandwidth, data }) => {
    const xPositionModifier = bandwidth / 2 - bandwidth;
    return (
      <G>
        {data.map((_, index) => {   
          return (
            <Line
              key={index}
              strokeDasharray="3, 4"
              y1={'0.5%'}
              y2={'96%'}
              x1={x(index)r}
              x2={x(index)}
              stroke={rgba(0,0,0,0.2)}
            />
          );
        })}
      </G>
    );
  };