[bug]: useSpring does not animate in React Native

[codynova]

Which react-spring target are you using?

• @react-spring/web
• @react-spring/three
• @react-spring/native
• @react-spring/konva
• @react-spring/zdog

What version of react-spring are you using?

9.7.5

What's Wrong?

The useSpring and useSprings hooks do not start animating in React Native. Tested in React Native 0.74.5.

This is a fundamental difference in the useSpring and useSprings behavior between web and native in react-spring v9.7.5. I did not test react-spring v10.

To Reproduce

useSpring reproduction

This code for web animates:

import { animated, useSpring } from '@react-spring/web';

export const Reproduction = () => {
  const heightSpring = useSpring({
    from: { height: 0 },
    to: { height: 100 },
  });

  return (
    <animated.div style={{ width: 20, height: heightSpring.height, backgroundColor: 'red' }} />
  );
};

The same code does not animate in React Native:

import { Text, View } from 'react-native';
import { animated, useSpring } from '@react-spring/web';

const Reproduction = () => {
  const heightSpring = useSpring({
    from: { height: 0 },
    to: { height: 100 },
  });

  return (
    <animated.View style={{ width: 20, height: heightSpring.height, backgroundColor: 'red' }} />
  );
};

useSprings reproduction

This code for web animates:

import { animated, useSprings } from '@react-spring/web';

const data = [1, 2, 3, 4, 5];

export const Reproduction = () => {
  const [heightSprings, heightSpringsApi] = useSprings(data.length, (index) => ({
    from: { height: 0 },
    to: { height: 100 },
  }));

  return (
    <div>
      {heightSprings.map((spring, index) => {
        return (
          <animated.div
            key={index}
            style={{ width: 20, height: spring.height, backgroundColor: 'red' }}
          />
        );
      })}
    </div>
  );
};

The same code does not animate in React Native:

import { Text, View } from 'react-native';
import { animated, useSprings } from '@react-spring/web';

const data = [1, 2, 3, 4, 5];

const Reproduction = () => {
  const [heightSprings, heightSpringsApi] = useSprings(data.length, (index) => ({
    from: { height: 0 },
    to: { height: 100 },
  }));

  return (
    <View>
      {heightSprings.map((spring, index) => {
        return (
          <animated.View
            key={index}
            style={{ width: 20, height: spring.height, backgroundColor: 'red' }}
          />
        );
      })}
    </View>
  );
};

Expected Behaviour

useSpring and useSprings should animate in React Native

Link to repo

Will update