0

Hers what I have tried. AnimatedSvg and animatedCircle are created by Animated form react native reanimated. Although the same logic worked for me for dashOffset. It is showing the error: java.lang.Double can not be cast to com.facebook.react.bridge.ReadableArray

const dashArray=useSharedValue(values.dash); //values.dash is a state variable

const rDash=useAnimatedStyle(()=>{
  return{
    
    strokeDasharray: dashArray.value
  }
})

useAnimatedReaction(
  ()=>values,
  ()=>{
      
      dashArray.value=withSpring(values.dash)
  },
  [values]
)


  return (
    <AnimatedSvg
      width={74}
      height={74}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      style={[rRotate]}
    >
      <AnimatedCircle
        cx={37}
        cy={37}
        r={36}
        stroke="url(#prefix__paint0_radial)"
        strokeWidth={2}

        style={[rDash]}
      />
      <Defs>
        <RadialGradient
          id="prefix__paint0_radial"
          cx={0}
          cy={0}
          r={1}
          gradientUnits="userSpaceOnUse"
          gradientTransform="matrix(0 74 -74 0 37 0)"
        >
          <Stop stopColor="#F55" />
          <Stop offset={0.5} stopColor="#4BFF47" />
          <Stop offset={1} stopColor="#1D5CFF" />
        </RadialGradient>
      </Defs>
    </AnimatedSvg>

)

Laxman Deadpool
  • 1
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Sep 14 '21 at 05:47
  • I want to animate SVG's stroke dasharray property with the help of react-native reanimated. – Laxman Deadpool Sep 16 '21 at 06:52

0 Answers0