2
import React from 'react';
import { Svg } from 'expo';

const { Line } = Svg;

export default class VerticalDashedLine extends React.Component {
  render() {
    return (
      <Svg height={this.props.height} width={1} >
        <Line strokeDashedArray='5, 5' x1="0" y1="0" x2="0" y2={this.props.height}/>
      </Svg>
    );
  }
}

I'm currently using react-native-svg.

This works perfectly fine with just stroke.

But strokeDashedArray doesn't work (on both iOS and Android). What am I doing wrong here??

Andre Song
  • 353
  • 1
  • 4
  • 14
  • 4
    Maybe it's just a typo. The attribute's name in SVG is: `stroke-dasharray`. You may try `strokeDasharray` instead of `strokeDashedArray` – enxaneta Mar 29 '19 at 20:12

1 Answers1

4

The SVG name is stroke-dasharray not stroke-dashed-array and In react-native there is no kebab-case thus you have to use the camelCase version of stroke-dasharray e.g. strokeDasharray.

A complete example would be:

                 <Line
                    strokeDasharray="5, 5"
                    x1={0}
                    x2={1}
                    y1={0}
                    y2={100}
                    strokeLinecap="round"      
                    style={{
                      stroke: 'white',
                      strokeWidth: 5,
                    }}
                  />
Simon
  • 6,025
  • 7
  • 46
  • 98