Performance optimization

[piaskowyk]

Benchmarks

bezier - before 11 FPS, after 52 FPS

import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  Easing
} from 'react-native-reanimated';
import { View, Button } from 'react-native';
import React from 'react';

function AnimatedStyleUpdateExample(): React.ReactElement {
  const randomWidth = useSharedValue(10);

  const config = {
    duration: 500,
    easing: Easing.bezier(0.5, 0.01, 0, 1),
  };

  const itemCount = 100;

  const components = [];
  for(let i = 0; i < itemCount; i++) {
    components.push(
      <Animated.View key={i}
        style={[
          { width: 100, height: 5, backgroundColor: 'black', margin: 1 },
          useAnimatedStyle(() => {
            return {
              width: withTiming(randomWidth.value, config),
            };
          }),
        ]}
      />
    )
  }

  return (
    <View
      style={{
        flex: 1,
        flexDirection: 'column',
      }}>
      <Button
        title="toggle"
        onPress={() => { randomWidth.value = Math.random() * 350; }}
      />
      { components }
    </View>
  );
}
export default AnimatedStyleUpdateExample;

withTiming rotate - before 35 FPS, after 60 FPS

import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  withRepeat,
} from 'react-native-reanimated';
import { View, Button } from 'react-native';
import React from 'react';

const dummy = new Array(100).fill(1);
function AnimatedStyleUpdateExample() {
  return (
    <View style={{ flex: 1, flexDirection: "row", flexWrap: "wrap" }}>
      {dummy.map((_, i) => {

        const val = useSharedValue(0);
        const DEG = Math.PI * 2 * 10;
        val.value = withRepeat(
          withTiming(DEG, { duration: 5000 }),
          -1, true
        );

        const style = useAnimatedStyle(() => {
          'worklet'
          return {
            transform: [
               { rotate: val.value + 'deg' },
            ],
          };
        });

        return (
          <Animated.View
            key={i}
            style={[
              { width: 50, height: 50, borderWidth: 1 },
              style,
            ]}
          />
        );
      })}
    </View>
  );
}

export default AnimatedStyleUpdateExample;

colors interpolation - before 11 FPS, after 16 FPS

import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  withRepeat,
  interpolateColor,
} from 'react-native-reanimated';
import { View } from 'react-native';
import React from 'react';

const dummy = new Array(100).fill(1);
function AnimatedStyleUpdateExample() {
  return (
    <View style={{ flex: 1, flexDirection: "row", flexWrap: "wrap" }}>
      {dummy.map((_, i) => {

        const color = useSharedValue(0);
        color.value = withRepeat(
          withTiming(1, { duration: 5000 }),
          -1, true
        );

        const style = useAnimatedStyle(() => {
          'worklet'
          return {
            backgroundColor: interpolateColor(color.value, [0, 1], ['#ffffff', '#000000'])
          };
        });

        return (
          <Animated.View
            key={i}
            style={[
              { width: 50, height: 50, borderWidth: 1 },
              style,
            ]}
          />
        );
      })}
    </View>
  );
}

export default AnimatedStyleUpdateExample;

I tested it on a regular iOS simulator so the optimization results are just indicative.

Checklist

• Included code example that can be used to test this change
• Updated TS types
• Added TS types tests
• Ensured that CI passes

[mrousavy]

@piaskowyk everytime we run RuntimeDecorator::isXRuntime() we do a property getter, do you think we can optimize that in some way? It would be awesome if we could store a C++ property (enum?) in the jsi::Runtime instance that represents it's type. (Worklet & UI, just Worklet, React-JS)

[mrousavy]

What's styleUpdater()? Is that the valueSetter in the RuntimeManager? Couldn't that be written in C++ instead of JS?

[mrousavy]

Also, #1863 seems to be somewhat related

[piaskowyk]

@piaskowyk everytime we run RuntimeDecorator::isXRuntime() we do a property getter, do you think we can optimize that in some way? It would be awesome if we could store a C++ property (enum?) in the jsi::Runtime instance that represents it's type. (Worklet & UI, just Worklet, React-JS)

Good point 👍, I did it here: 48e1a2a

What's styleUpdater()? Is that the valueSetter in the RuntimeManager? Couldn't that be written in C++ instead of JS?

The styleUpdater() is JS function calling by mapper: https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Hooks.ts#L225
But I speed up this method. 🚀

[Szymon20000]

Could you please use LRU Cache here? https://stackoverflow.com/a/46432113

[NikitaDudin]

App crashes on using style transform prop.

Sample code:

import React, { useEffect } from 'react';
import { StyleSheet, View } from 'react-native';
import Animated, {
  Easing,
  interpolate,
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
} from 'react-native-reanimated';

const styles = StyleSheet.create({
  main: {
    flex: 1,
    backgroundColor: '#accc00',
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: '#a00',
  },
});

function Comp(): JSX.Element {
  const progress = useSharedValue(0);

  const style = useAnimatedStyle(() => ({
    width: interpolate(progress.value, [0, 0.5, 1], [100, 200, 100]),
    transform: [{ rotate: `${interpolate(progress.value, [0, 1], [0, Math.PI * 2])}rad` }],
  }), [progress]);

  useEffect(() => {
    progress.value = withRepeat(withTiming(1, { duration: 2000, easing: Easing.linear }), -1, false);
  }, [progress]);

  return (
    <View style={styles.main}>
      <Animated.View style={[styles.box, style]} />
    </View>
  );
}

export default Comp;

Error message:

node_modules/react-native-reanimated/src/reanimated2/Hooks.ts (162:0)

Possible solutions are:
a) If you want to synchronously execute this method, mark it as a Worklet
b) If you want to execute this method on the JS thread, wrap it using runOnJS

If comment out the code in isAnimated, then error disappears.

function isAnimated(prop) {
  'worklet';
  if (Array.isArray(prop)) {
    // comment problem section - START
    // for (const item of prop) {
    //   for (const key in item) {
    //     if (item[key].onFrame !== undefined) {
    //       return true;
    //     }
    //   }
    // }
    // comment problem section - END
    return false;
  }
  return prop.onFrame !== undefined;
}

Package versions

React Native: 0.64.1
NodeJS: 14.17.0
Hermes engine: enabled

Upd: after replacing all for..of on forEach problem disappears. What another way to fix it?