How to animate lot of components without performence issue.

[OverGlass]

Hello I'm building an editor and I want to change text line color with a Slider but UI FPS drop heavely on IOS.

Dependencies :

  "dependencies": {
    "expo": "~49.0.15",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-reanimated": "~3.3.0"
  },

It work better with RN2 and SDK 48

There is a minimal reproduction of FPS dropping.

import React from "react";
import { Button, SafeAreaView, StyleSheet, TextInput, TextStyle, ScrollView, Text, View } from "react-native";
import Animated, { useSharedValue, useAnimatedStyle } from "react-native-reanimated";

const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
const numberOfInputs = 25;

function App(): JSX.Element {
  const rTextColor = useSharedValue<string>("red");
  const rInputStyles = useAnimatedStyle<TextStyle>(() => {
    return {
      color: rTextColor.value,
    };
  });

  const handleChangeColor = () => {
    let hue = 0;
    const interval = setInterval(() => {
      if (hue > 360) clearInterval(interval);
      rTextColor.value = `hsl(${hue}, 100%, 50%)`;
      hue += 1;
    }, 10);
  };

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollViewContent}>
        <Text style={styles.title}>Animated TextInput: {numberOfInputs}</Text>
        <Button title="Start Animation" onPress={handleChangeColor} />
        <View style={styles.form}>
          {Array.from(Array(numberOfInputs).keys()).map(index => (
            <AnimatedTextInput style={rInputStyles} key={index} multiline={true} defaultValue={`Input ${numberOfInputs - index}`} scrollEnabled={false} />
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
    flex: 1,
  },
  scrollView: {
    flex: 1,
  },
  scrollViewContent: {
    justifyContent: "center",
    alignItems: "center",
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
    textAlign: "center",
  },
  form: {
    flex: 1,
    width: "100%",
    paddingHorizontal: 20,
  },
});

There is maybe an other way to deal with that ?

[OverGlass]

I fixed it by using a Flatlist and use onViewableItemsChanged to only animate Viewable items.

import React from "react";
import { Button, SafeAreaView, StyleSheet, TextInput, TextStyle, ScrollView, Text, View, FlatList, ViewToken } from "react-native";
import Animated, { useSharedValue, useAnimatedStyle, useDerivedValue } from "react-native-reanimated";

const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
const numberOfInputs = 100;
const inputsArray = Array.from(Array(numberOfInputs).keys());

function App(): JSX.Element {
  const sharedTextColor = useSharedValue<string>("red");
  const sharedViewableItems = useSharedValue<ViewToken[]>([]);

  const handleChangeColor = () => {
    let hue = 0;
    const interval = setInterval(() => {
      if (hue > 300) clearInterval(interval);
      sharedTextColor.value = `hsl(${hue}, 100%, 50%)`;
      hue += 1;
    }, 10);
  };

  const Header = () => {
    return (
      <>
        <Text style={styles.title}>Animated TextInput: {numberOfInputs}</Text>
        <Button title="Start Animation" onPress={handleChangeColor} />
      </>
    );
  };

  const handleViewableItemsChanged = (props: { viewableItems: ViewToken[] }) => {
    sharedViewableItems.value = props.viewableItems;
  };

  return (
    <SafeAreaView style={styles.container}>
      <Header />
      <FlatList
        style={styles.scrollView}
        contentContainerStyle={styles.scrollViewContent}
        data={inputsArray}
        renderItem={({ item }) => <RenderItem item={item} sharedValues={{ sharedTextColor, sharedViewableItems }} />}
        onViewableItemsChanged={handleViewableItemsChanged}
      />
    </SafeAreaView>
  );
}

const RenderItem = ({
  item: index,
  sharedValues,
}: {
  item: number;
  sharedValues: {
    sharedTextColor: Animated.SharedValue<string>;
    sharedViewableItems: Animated.SharedValue<ViewToken[]>;
  };
}) => {
  const rViewableItems = useDerivedValue(() => {
    return sharedValues.sharedViewableItems.value.filter(x => x.isViewable).find(item => {
      return item.index === index;
    });
  });
  const lastColor = useSharedValue<string>(sharedValues.sharedTextColor.value);

  const colorToAnimate = useDerivedValue(() => {
    return rViewableItems.value ? sharedValues.sharedTextColor.value : lastColor.value;
  });

  const rInputStyles = useAnimatedStyle<TextStyle>(() => {
    return {
      color: colorToAnimate.value,
    };
  });
  return <AnimatedTextInput style={[rInputStyles, styles.input]} key={index} multiline={true} defaultValue={`Input ${numberOfInputs - index}`} scrollEnabled={false} />;
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
    flex: 1,
  },
  scrollView: {
    flex: 1,
  },
  scrollViewContent: {
    // flex: 1,
    width: "100%",
    paddingHorizontal: 20,
  },
  input: {
    paddingVertical: 10,
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
    textAlign: "center",
  },
});