Shared style

[piaskowyk]

Description

I added the possibility to use one instance of useAnimationStyle() for many components. AnimationStyle is connected with view by ViewDescriptor object. I changed this to a set of ViewDescriptors and now AnimationStyle can be shared between many components.

Fixes #1263

Example of code

code

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

export default function SharedAnimatedStyleUpdateExample(props) {
  const randomWidth = useSharedValue(10);

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

  const style = useAnimatedStyle(() => {
    return {
      width: withTiming(randomWidth.value, config),
    };
  });

  const renderList = () => {
    const items = [];
    for (let i = 0; i < 100; i++) {
      items.push(
        <Animated.View
          key={i}
          style={[
            { width: 100, height: 5, backgroundColor: 'black', margin: 1 },
            style,
          ]}
        />
      );
    }
    return items;
  };

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

code2

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

export default function AnimatedStyleUpdateExample(props) {
  const randomWidth = useSharedValue(10);

  const [counter, setCounter] = useState(0);
  const [counter2, setCounter2] = useState(0);
  const [itemList, setItemList] = useState([]);
  const [toggleState, setToggleState] = useState(false);

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

  const style = useAnimatedStyle(() => {
    return {
      width: withTiming(randomWidth.value, config),
    };
  });

  const staticObject = <Animated.View
    style={[
      { width: 100, height: 8, backgroundColor: 'black', margin: 1 },
      style,
    ]}
  />

  const renderItems = () => {
    let output = []
    for(let i = 0; i < counter; i++) {
      output.push(
        <Animated.View
        key={i + 'a'}
          style={[
            { width: 100, height: 8, backgroundColor: 'blue', margin: 1 },
            style,
          ]}
        />
      )
    }
    return output
  }

  return (
    <View
      style={{
        flex: 1,
        flexDirection: 'column',
      }}>
      <Button
        title="animate"
        onPress={() => {
          randomWidth.value = Math.random() * 350;
        }}
      />
      <Button
        title="increment counter"
        onPress={() => {
          setCounter(counter + 1)
        }}
      />
      <Button
        title="add item to static lists"
        onPress={() => {
          setCounter2(counter2 + 1)
          setItemList([...itemList, <Animated.View
            key={counter2 + 'b'}
            style={[
              { width: 100, height: 8, backgroundColor: 'green', margin: 1 },
              style,
            ]}
          />])
        }}
      />
      <Button
        title="toggle state"
        onPress={() => {
          setToggleState(!toggleState)
        }}
      />
      <Animated.View
        style={[
          { width: 100, height: 8, backgroundColor: 'orange', margin: 1 },
          style,
        ]}
      />
      {toggleState && <Animated.View
        style={[
          { width: 100, height: 8, backgroundColor: 'black', margin: 1 },
          style,
        ]}
      />}
      {toggleState && staticObject}
      {renderItems()}
      {itemList}
    </View>
  );
}

Change

before changes:

final result:

[mrousavy]

Awesome! I've been having huge performance problems with reanimated v2 since I am animating multiple views with a sort of parallax effect, I'm sure this is a big step towards solving those performance issues. 👍

[terrysahaidak]

hey @mrousavy can you share us these performance problems in an issue? perhaps it's the same problem I had recently

[mrousavy]

@terrysahaidak Yeah, here's a video demo (imgur.com). The structure of this view is the following:
I have a view that horizontally displays all my individual "story" screens, and you can "scroll" between them using a horizontal scroll gesture, kinda like an image carousel. I have implemented this using a PanGestureHandler instead of a ScrollView, since that gives me more control.

So the whole horizontal view which contains each individual story screen is translated along the X axis depending on the swipe gesture. Then, I've tried to implement some sort of cool parallax effect with the headers, by making them go into the next screen by a tiny bit, to reveal to the user what the next page has to offer. The problem here is, that I can only achieve that by translating each header individually, depending on the carousel's translateX. And that's causing huge performance problems, since I now have about 30 useAnimatedStyle hooks for 30 stories, just for the headers! In REA v1 this was no problem, since I just passed the nodes in there.

I tried to play around with virtualization and eventually came up with a way to unmount every header that's not in viewport (and used removeSubclippedViews for the other views to gain additional performance), but it was still terrible, even with just 5 headers rendered at once. (Even on my iPhone 11 it has terrible FPS, on an iPhone 8 it takes about 10 seconds to even open that screen)

[jakub-gonet]

Can you resolve the hooks file conflict?

[kmagiera]

Do we really need native set support for this one? Why can't we make an array of descriptors and just assign it in one go instead of making changes with every object being added.

I haven't checked the full source but it seem problematic that we use set.add and never use set.remove in this PR.

[piaskowyk]

Finally, works and ready for review, I would be grateful for any suggestions.

[charles-goode]

When this is ready, will it also work for useAnimatedProps? I didn't see issues reporting that the same need for sharing is present with animated props, so I wasn't sure if that had also been considered.

[mrousavy]

Hate to "bump" this, but do you guys think this will make it into 2.3.0? @piaskowyk @jakub-gonet let me know if you need any help testing this change 🙏

[piaskowyk]

The good news, this PR will be release in 2.3 🎉

[piaskowyk]

When this is ready, will it also work for useAnimatedProps? I didn't see issues reporting that the same need for sharing is present with animated props, so I wasn't sure if that had also been considered.

Yes, in Reanimated 2 useAnimatedStyle and useAnimatedProps has the same implementation:

react-native-reanimated/src/reanimated2/Hooks.ts

Line 608 in 3c2bf7c

export const useAnimatedProps = useAnimatedStyle;

[bobsmits]

@piaskowyk Any sight on a alpha.2 release for 2.3? I would love to get started with this.

[yanush]

This is not working for me in 2.3.0-beta.3
Any suggestions?