0

I'm trying draw a curved with style is dahsed like the picture below

enter image description here

I'm using component Line in react-native-svg but only get the result as shown below

enter image description here

How can draw curves? Many thanks !

1 Answers1

1

Using react-native-svg, you can define a Path component that represents your curve. For example:

const SvgComponent = (props) => (
  <Svg
    viewBox="0 0 429 135"
    fill="none"
    {...props}
  >
    <Path
      d="M9 7c157.135 213.709 340.14 89.046 412 0"
      stroke="#000"
      strokeWidth={20}
      strokeDasharray="12 6"
    />
  </Svg>
)

In this case, I created a curve using Figma. Then, I exported the SVG and subsequently imported it into the SVGR Playround to turn it into the above code (although I made a small modification and changed the width and height into a viewbox prop).

You can see it in action at this Snack

jnpdx
  • 45,847
  • 6
  • 64
  • 94
  • Hi bro, tell me more how can i rotate it in the specified direction – a programer Mar 04 '22 at 07:58
  • Did you create a file in Figma (which I linked to) and experiment with it? You may also want to look at the [Path documentation](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) – jnpdx Mar 04 '22 at 07:59