iPhone ProMotion 120hz is not smooth

[greenimpala]

We have noticed that on iPhone 120hz models, animations driven by useLoop() or canvas continuous mode are janky.

Below is the same code running on a real iPhone 14 Pro (left) and an iPhone XS Max (right).

I wouldn't nescessarily expect 120fps but I would expect a smooth 60fps. Could there be a bug in these bindings? Android >60hz phones run smooth and do not exhibit this issue.

jank.mov

[wcandillon]

This looks quite interesting. Could you share a code small code snippet for us to test?

…

On Thu, Jan 12, 2023 at 2:26 PM Stephen Bradshaw ***@***.***> wrote: We have noticed that on iPhone 120hz models, animations driven by useLoop() or canvas continuous mode are janky. Below is the *same code* running on a real *iPhone 14 Pro* (left) and an *iPhone XS Max* (right). I wouldn't nescessarily expect 120fps but I would expect a smooth 60fps. Could there be a bug in these bindings? Android >60hz phones run smooth and do not exhibit this issue. https://user-images.githubusercontent.com/1367878/212078516-f62c665b-d15d-4680-8035-a30c566183dc.mov — Reply to this email directly, view it on GitHub <#1275>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVW7QPJPALVYIWFXBDLWSABAFANCNFSM6AAAAAATZICXQI> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[greenimpala]

Absolutely, here is a minimal reproduction example:

import {
  Canvas,
  interpolate,
  Points,
  useComputedValue,
  useLoop,
  vec,
} from '@shopify/react-native-skia';
import React, {useEffect, useRef} from 'react';
import {Dimensions} from 'react-native';

const HEIGHT = 60;
const WIDTH = Dimensions.get('screen').width;

interface Value extends Number {
  tick: number;
}

const valueToLineVectors = ({value, xInterpolator}) => {
  const barHeight = HEIGHT * value;
  const padding = (HEIGHT - barHeight) / 2;

  const y0 = padding;
  const y1 = barHeight + padding;
  const x = xInterpolator(value.tick);

  return [vec(x, y0), vec(x, y1)];
};

export const Waveform = () => {
  const fastValueCache = useRef<(Value | undefined)[]>(Array(100));

  useEffect(function spoolData() {
    const id = setInterval(() => {
      fastValueCache.current.shift();
      const val = new Number(+Math.random().toFixed(2)) as Value;
      val.tick = Date.now();
      fastValueCache.current.push(val);
    }, 60);
    return () => clearInterval(id);
  }, []);

  const clock = useLoop();
  const points = useComputedValue(() => {
    const now = Date.now();
    const xInterpolator = v => interpolate(v, [now - 5000, now], [0, WIDTH]);

    return fastValueCache.current.flatMap(value =>
      valueToLineVectors({
        xInterpolator,
        value,
      }),
    );
  }, [clock]);

  return (
    <Canvas style={{height: HEIGHT, width: '100%'}} debug>
      <Points
        points={points}
        mode="lines"
        color="red"
        style="stroke"
        strokeWidth={2}
      />
    </Canvas>
  );
};

[chrfalch]

Thanks for the detailed reproduction!

I tried running this with the following key (to enable 120Mhz) in my Info.plist file:

<key>CADisableMinimumFrameDurationOnPhone</key><true/>

I also tried to force the redraw link in RN Skia to render with full throttle by changing the setup code for the CADisplayLink on iOS in the file DisplayLink.mm#13:

      CAFrameRateRange rate;
      rate.minimum = 120;
      rate.maximum = 120;
      rate.preferred = 120;
      _displayLink.preferredFrameRateRange = rate;

I could not see any misbehaving or janky animations in the example below when run on my iPhone 14 Pro Max.

[greenimpala]

After resetting the iPhones, and re-building we don't see this issue anymore, so we suspect it was a freak incident with our test devices.