Draw a cured with style dashed in React Native

Question

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

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

How can draw curves? Many thanks !

Answer 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