I would like to put the DangerPath at the beginning

[luizjr]

as the picture below:

I managed to do it with this code, but now I don't know how to put the DangerPath in the beginning:

<Speedometer
  value={54}
  max={186}
  angle={186}
  fontFamily="Nunito_400Regular"
>
  {/* <Background angle={180} /> */}
  <Arc color="#47d645" opacity={1} arcWidth={20} />
  <Needle
    color="#47d645"
    baseOffset={0}
    circleRadius={20}
  />
  <DangerPath
    color="#FF3333"
    angle={80}
    arcWidth={20}
    offset={-10}
  />
  {/* <Progress /> */}
</Speedometer>

[lucassaid]

Hello, currently there isn't a built-in feature that would allow you such thing. I think your best option is to create your own component that contains those paths. Something like this should work, this is actually based on the DangerPath component

import React, { useContext, useMemo } from 'react'
import { Path, PathProps } from 'react-native-svg'
import { SpeedometerContext } from 'react-native-cool-speedometer'
import { getCirclePath } from 'react-native-cool-speedometer/utils'

const offset = 0 // increase this to separate the paths from the border

export default function MyCustomPaths () {

  const { radius, angle, lineCap } = useContext(SpeedometerContext)

  const dangerPath = useMemo(() => getCirclePath(
    radius,
    radius,
    radius - arcWidth - offset,
    0, // danger path starts at 0 deg.
    30, // danger path ends at 30 deg.
  ), [radius, arcWidth])

  const normalPath = useMemo(() => getCirclePath(
    radius,
    radius,
    radius - arcWidth - offset,
    30, // normal path starts at 30, where the danger path ends.
    angle, // normal path ends at the limit.
  ), [radius, arcWidth, angle])

  return (
    <>
      <Path
        d={dangerPath}
        stroke="red"
        strokeWidth={4}
        strokeLinecap={lineCap}
        fill="transparent"
        // any other path prop
      />
      <Path
        d={normalPath}
        stroke="blue"
        strokeWidth={4}
        strokeLinecap={lineCap}
        fill="transparent"
        // any other path prop
      />
    </>
  )
}

Then you would include this to your Speedometer

<Speedometer>
  <MyCustomPaths />
</Speedometer>

[lucassaid]

Also you can customize even more your needle using render props: https://github.com/lucassaid/react-native-cool-speedometer#custom-needle

[acoulon99]

Thank you for this advice @lucassaid . I was able to create some pretty cool water quality gauges by following it.