Delay in animation

[olivermihaly]

Description

I have an animated circular progress component () inside a rendering multiple users’ progress circles. When the progress prop changes rapidly (e.g., pressing a button quickly), the animation does not update immediately — it ignores some updates, causing a significant delay before the chart visually updates. This behavior was smooth and immediate on Skia 1.5 but appears delayed/skipped on Skia 2.1.1.

The console logs value changed immediately on progress updates.

The component's visual animation updates only after a noticeable delay, ignoring rapid value changes.

Fast repeated presses cause the animation to lag behind the actual progress value.

Behavior was not present in Skia 1.5 (animations updated immediately, albeit less smoothly).

Expected behavior:

The chart animation should immediately start transitioning to the new value without skipping or delay.

Rapid value changes should update the animation smoothly and responsively, with no perceptible lag.

Additional context:

Animations work smoothly but only start after a delay, especially when values change rapidly.

When I remove the Chart ( just a test component that listens to the progress ) it logged the values immediately.

Expo sdk 53

React Native Skia Version

2.1.1

React Native Version

0.79.5

Using New Architecture

• Enabled

Steps to Reproduce

Create a React Native app using React Native Skia 2.1.1 and Reanimated 3.x.

Render a component containing multiple animated Skia components (e.g., circular progress indicators).

Add a button that rapidly updates the animation values when pressed repeatedly.

Observe that rapid press-and-release actions cause the Skia components to ignore some updates, resulting in delayed or skipped animations.

Snack, Code Example, Screenshot, or Link to Repository

<Canvas style={{ width: size, height: size, position: 'absolute', top: 0, left: 0, transform: [{ rotate: '90deg' }] }}>
  {usersData.map((user, index) => {
    if (user.username === localUser.username) {
      console.log('value changed', progress);
      return (
        <Chart
          key={index}
          index={index}
          count={usersData.length}
          value={progress / 100}
          onAnimationComplete={onAnimationComplete}
          size={size}
          color={Colors.pinkPrimary}
        />
      );
    }
    return (
      <Chart
        key={index}
        index={index}
        count={usersData.length}
        value={user.submitPercentage / 100}
        size={size}
      />
    );
  })}
</Canvas>

[wcandillon]

Can you provide a self-contained/standalone example? If yes we will look at it promptly.

[olivermihaly]

Forgot to mention, its iOS related

import { Canvas } from '@shopify/react-native-skia'
import { useState } from 'react'
import { TouchableOpacity } from 'react-native'

export default function TestButton() {
  const [progress, setProgress] = useState<number>(0)

  function pressIn() {
    setProgress(100)
  }

  function pressOut() {
    setProgress(0)
  }

  console.log('value in TestButton', progress)

  return (
    <TouchableOpacity
      style={{ position: 'absolute', top: '50%', left: '50%', width: 100, height: 100, backgroundColor: 'red' }}
      onPressOut={pressOut}
      onPressIn={pressIn}
    >
      <SkiaCanvas progress={progress} />
    </TouchableOpacity>
  )
}

function SkiaCanvas({ progress }: { progress: number }) {
  console.log('value in SkiaCanvas', progress)
  return (
    <Canvas
      style={{
        width: '100%',
        height: '100%',
      }}
    >
      <Chart value={progress} />
    </Canvas>
  )
}

const Chart = ({ value }: { value: number }) => {
  console.log('value in Chart', value)
  return <></>
}

This is a very basic example, if I press it rapidly, I can see the progress logs 100 in the TestButton, and also in the SkiaCanvas, but the Chart logs 0, if I press it for a long time its fine, but rapid presses acts weird

the Chart basically skips the 100 value

[olivermihaly]

Also if I use a react native View instead of the Skia Canvas, no matter how fast I press, it still logs it

function SkiaCanvas({ progress }: { progress: number }) {
  console.log('value in SkiaCanvas', progress)
  return (
    <View
      style={{
        width: '100%',
        height: '100%',
      }}
    >
      <Chart value={progress} />
    </View>
  )
}

[wcandillon]

Thank you for the standalone example, I'm checking it now, can you confirm that this also happens on iOS physical device? (could be a duplicate of #3112)

[wcandillon]

I am experiencing the same behaviour in your example whether Skia is involved or not, can you confirm that as well?

[olivermihaly]

If I swapped the skia Canvas to a simple view, I wasnt able to reproduce

[olivermihaly]

It was working well in skia 1.5, after Expo sdk upgrade to 53 from 52, and updating the Skia to 2.1.1 introduced this issue

[wcandillon]

Can you explain the issue in a bit more detail please? I tried many interactions with your example and I was getting the same behavior with or without the Skia canvas but maybe I was looking at the wrong thing. Is it also happening on a physical device? You mentioned that this is iOS only right?

…

On Thu, Jul 24, 2025 at 1:35 PM olivermihaly ***@***.***> wrote: It was working well in skia 1.5, after Expo sdk upgrade to 53 from 52, and updating the Skia to 2.1.1 introduced this issue — Reply to this email directly, view it on GitHub or unsubscribe. You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS or Android.

[olivermihaly]

Actually I had a look, it does the same on android aswell, it has a delay, We have a button, that you have to press and hold, till it finishes the animation. If the animation is finished, it should trigger a callback, but since we have this delay now, you might want to release before it finishes the animation so it goes down again, but you might accidentally finish the animation since it has the delay . Here in the video, you can see that when I press the button, it starts expanding immediately, but the red line does not, only after I hold it for a while, it supposed to be like this : you press the button, it sets the progress to 1 or 100 (100%), the line should go around and once it finishes it should call onAnimationComplete, if you release before it reaches the end, it should animate down, if I use a skia Canvas, and a Path in it, I see that the [image: 206ff52c-a89f-4b9b-98b7-4da29fea74e7.jpg][image: image.png] Message ID: ***@***.***>

…

[wcandillon]

The example you sent had no Skia animations. I just looked at the pressIn/pressOut logs to see if anything unusual was happening there. If you can provide an example with Skia drawing that might be buggy or slow, I'll take a look. Sometimes it's difficult to context switch between issues, so any extra effort you put into your bug report would be greatly appreciated.

…

On Thu, Jul 24, 2025 at 2:20 PM olivermihaly ***@***.***> wrote: https://github.com/user-attachments/assets/15b86ea3-da32-469a-b55d-1174bb054d16 Screenshot.2025-07-24.141719.png (view on web) 206ff52c-a89f-4b9b-98b7-4da29fea74e7.jpg (view on web) — Reply to this email directly, view it on GitHub or unsubscribe. You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS or Android.

[olivermihaly]

const Chart = React.memo(
  ({
    index,
    count,
    value,
    onAnimationComplete,
    size,
    color = '#d3d3d3',
  }: {
    index: number
    count: number
    value: number
    size: number
    onAnimationComplete?: (value: number) => void
    color?: string
  }) => {
    const modifier = count < 2 ? 0 : 0.02
    const [start, setStart] = useState<number>((1 / count) * index + modifier)
    const [end, setEnd] = useState<number>((1 / count) * (index + 1) - modifier)
    const prevValue = useRef<number>(1)

    const path = Skia.Path.Make()
    path.addCircle(size / 2, size / 2, size / 2 - 5)
    let animationState = useSharedValue(start)

    const animateChart = (toValue: number, duration: number) => {
      if (toValue === start) {
        onAnimCancel()
      }
      animationState.value = withTiming(
        toValue,
        {
          duration: duration,
          easing: Easing.linear,
        },
        () => {
          if (animationState.value === end) {
            runOnJS(onAnimComplete)()
          }
        }
      )
    }

    function onAnimComplete() {
      onAnimationComplete && onAnimationComplete(100)
    }

    function onAnimCancel() {
      onAnimationComplete && onAnimationComplete(0)
    }

    useEffect(() => {
      if (value > prevValue.current) {
        animateChart(end, 1500)
      } else {
        animateChart(start, 500)
      }
      prevValue.current = value
    }, [value, start, end])

    useEffect(() => {
      const modifier = count < 2 ? 0 : 0.02
      const from: number = (1 / count) * index + modifier
      const to: number = (1 / count) * (index + 1) - modifier
      animationState.value = from
      setStart(from)
      setEnd(to)
    }, [count])

    return (
      <>
        <Path
          path={path}
          color={Colors.gray}
          style="stroke"
          strokeJoin="round"
          strokeWidth={6}
          strokeCap="round"
          start={start}
          end={end}
        />
        <Path
          path={path}
          color={color}
          style="stroke"
          strokeJoin="round"
          strokeWidth={6}
          strokeCap="round"
          start={start}
          end={animationState}
        />
      </>
    )
  }
)

This is the Chart I am trying to animate, inside the Skia Canvas

<Canvas
           style={{
             width: size,
             height: size,
             position: 'absolute',
             top: 0,
             left: 0,
             transform: [{ rotate: '90deg' }],
           }}
         >
           {usersData.map((user, index) => {
             if (user.username === localUser.username) {
               //THIS LOGS 100 IMMEDIATELY
               return (
                 <Chart
                   //THIS COMPONENT IGNORES IT, ONLY START AFTER A FEW RENDER CYCLES 
                   key={index}
                   index={index}
                   count={usersData.length}
                   value={progress / 100}
                   onAnimationComplete={onAnimationComplete}
                   size={size}
                   color={Colors.pinkPrimary}
                 />
               )
             } else {
               return (
                 <Chart
                   key={index}
                   index={index}
                   count={usersData.length}
                   value={user.submitPercentage / 100}
                   size={size}
                 />
               )
             }
           })}
         </Canvas>

The issue is not the animation itself, it seems like the Skia Canvas not triggering the rerender to its children, (just with a delay), if I remove any Skia related stuff from the Chart, and move the Chart out from the Skia Canvas, it logs the progress value properly, it only happens if the component is nested in the Canvas

[olivermihaly]

I'll try to make a full standalone example

[olivermihaly]

I found the issue, it was a wrong state update, which was hard to catch as the logs were correct, I still dont know how does upgrading sdk + skia introduced this issue, as nothing changed related to this! Thank you for your help!