Can I force an immedate update to animated styles?

[bglgwyng]

Please see the following example.

import React, { useLayoutEffect, useReducer } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';

const Example1 = () => {
  const [x, toggle] = useReducer((x) => !x, false);
  const t = useSharedValue(false);

  useLayoutEffect(() => {
    t.value = x;
  }, [t, x]);

  const style = useAnimatedStyle(() => ({
    width: t.value ? 100 : 0,
    height: t.value ? 100 : 0,
  }));


  return (
    <View style={[StyleSheet.absoluteFill, { alignItems: 'center', justifyContent: 'center' }]}>
      <View style={{ width: 200, height: 200, backgroundColor: x ? 'red' : 'blue' }}>
        <Animated.View style={[style, { backgroundColor: 'green' }]} />
      </View>
      <View style={{ marginTop: 10 }}>
        <Button
          title="Press me"
          onPress={toggle} />
      </View>
    </View>
  );
};

And this video is the capture of the Example1 component's behavior.

2023-01-10.3.08.31.mov

You can see that the green box doesn't appear at the exactly same time as the red box. There is a frame where the red box without containing the green box flashes. I think that this is happening only on android(tested in Galaxy S20 and Pixel 3 Emulation), and not on ios(iPhone 13).

I suppose that this is because the update of t.value in useLayoutEffect doesn't trigger the update in animated style style before the rerender due to the update in state x processed. Can I force an update to animated styles right after I assigned the new value to the shared values? Or is there any other solution to this problem?

I also wrote the same component with Animated instead of reanimated.

import React, { useLayoutEffect, useReducer, useRef } from 'react';
import { Animated, Button, StyleSheet, View } from 'react-native';

const Example2 = () => {
  const [x, toggle] = useReducer((x) => !x, false);

  const t = useRef(new Animated.Value(0)).current;

  useLayoutEffect(() => {
    t.setValue(x ? 100 : 0);
  }, [t, x]);

  return (
    <View style={[StyleSheet.absoluteFill, { alignItems: 'center', justifyContent: 'center' }]}>
      <View style={{ width: 200, height: 200, backgroundColor: x ? 'red' : 'blue' }}>
        <Animated.View style={[{ width: t, height: t }, { backgroundColor: 'green' }]} />
      </View>
      <View style={{ marginTop: 10 }}>
        <Button
          title="Press me"
          onPress={toggle} />
      </View>
    </View>
  );
};

export default Example2;

It worked as I desired. There was no flashing.

[sergeylaptev]

I encountered a similar issue (with the new architecture). I have a collapsible header (shared) and tabs underneath it. Each tab has its own scrollable content (similar to Instagram). On the initial render, I use useLayoutEffect to measure the sizes of the header and the tab bar in order to apply the necessary offsets to the tab bar and the scrollable content using transform: translateY. I store the height values in a regular state as numbers (I also tried using SharedValue, but that didn’t work either).

The styles of my tab bar are as follows:

const [headerHeight, setHeaderHeight] = useState(0)
const [tabBarHeight, setTabBarHeight] = useState(0)

useLayoutEffect(() => {
  headerRef.current?.measure((x, y, w, h) => setHeaderHeight(h))
  tabBarRef.current?.measure((x, y, w, h) => setTabBarHeight(h))
}, [])

const tabBarContainerAniStyle = useAnimatedStyle(() => ({
  transform: [
    {
      translateY: interpolate(
        currScrollY.value,
        [0, headerHeight],
        [headerHeight, 0],
        Extrapolation.CLAMP,
      ),
    },
  ],
}))

<Animated.View
  ref={headerRef}
  style={[styles.headerContainer, headerContainerAniStyle]}
/>

<Animated.View
  ref={tabBarRef}
  style={[styles.tabBarContainer, tabBarContainerAniStyle]}
/>

If I use useAnimatedStyle, then on the initial render I can see that the tab bar has a translateY value of 0 (the initial value), and after one frame it updates to the correct height. But if I pass the style directly, for example like this:

<Animated.View
  ref={tabBarRef}
  style={[
    styles.tabBarContainer,
    [{ transform: [{ translateY: headerHeight }] }],
  ]}
>

In that case, there is no intermediate frame with a value of 0 — the tab bar is positioned correctly right from the start. The problem is that in this case, I can't use the interpolate function, which I need to change the position of the tab bar depending on the scroll value. I tried library's versions 4.0.0-beta.5 and 3.18.0, but nothing worked.

[MatiPl01]

Unfortunately, this is not possible in Reanimated on the New Architecture. All updates from Reanimated are batched and sent in the next animation frame, which happens after React render completes. There is no valid solution and not even a single working workaround.

For now, you have to write animations in a way that doesn't require synchronization with React renders.

[sergeylaptev]

Given the fact that achieving the desired behavior on the Reanimated side isn't possible, I had to resort to a fallback solution. I simply add the required initial offset — based on the height of the header and the tab bar — as a static marginTop outside of useAnimatedStyle hook, and then compensate for this offset in the interpolate function. Everything works as expected without any flickering. The header can even have a dynamic height — compensation takes place synchronously thanks to useLayoutEffect.

[MatiPl01]

One suggestion here. You can use measure from Reanimated (it must be called inside a worklet function). In your case, you would have to create headerRef and tabBarRef with useAnimatedRef and then, you can get the measurements synchronously with the Reanimated animation without any delay, so in your particular case the useLayoutEffect might not be needed.

You can call measure from Reanimated many times, even on every animation frame - it is efficient and shouldn't affect performance. You will likely end up with something similar to this:

const headerRef = useAnimatedRef<View>();

const tabBarContainerAniStyle = useAnimatedStyle(() => {
  const headerMeasurements = measure(headerRef);

  if (!headerMeasurements) {
    return {};
  }

  return {
    transform: [
      {
        translateY: interpolate(
          currScrollY.value,
          [0, headerMeasurements.height],
          [headerMeasurements.height, 0],
          Extrapolation.CLAMP,
        ),
      },
    ]
  }
})

[sergeylaptev]

You are right. With a couple small tweaks this approach looks very promising. We can even add useLayoutEffect part here as well for synchronous layout updates and calculations.

const layoutTrigger = useSharedValue(0)

const headerHeight = useDerivedValue(() => {
  layoutTrigger.value
  return measure(header.ref)?.height ?? 0
})
const tabBarHeight = useDerivedValue(() => {
  layoutTrigger.value
  return measure(tabBar.ref)?.height ?? 0
})

const overlayAniStyle = useAnimatedStyle(() => ({
  transform: [
    {
      translateY: interpolate(
        currScrollY.value,
        [0, headerHeight.value],
        [headerHeight.value + tabBarHeight.value, tabBarHeight.value - hairlineWidth],
        Extrapolation.CLAMP,
      ),
    },
  ],
}))

const tabBarContainerAniStyle = useAnimatedStyle(() => ({
  transform: [
    {
      translateY: interpolate(
        currScrollY.value,
        [0, headerHeight.value],
        [headerHeight.value, 0],
        Extrapolation.CLAMP,
      ),
    },
  ],
}))

useLayoutEffect(() => {
  layoutTrigger.value += 1
})

Maybe you can suggest the best way to update scrollable's contentContainerStyle on the UI thread to move this logic away from regular React state variables flow and add paddingTop and minHeight based on these computable values?

[MatiPl01]

I can suggest something if you describe what you are trying to achieve. I still don't understand why you have to use useLayoutEffect here. If this is needed, because your header/tab-bar height can change when you aren't scrolling and you want to trigger the animated style update on this change, then you might just create 2 Shared Values to store the measured height, similar to what you did before with useState hooks and update them in the same way as in your previous example.

However, if you want to get these dimensions before the view appears on the screen and use them within the animated style, then it wouldn't work as expected, because the animated style will always read the first value from when the component mounts, which is not yet a valid height. Neither updating the Shared Value, nor updating the value in state would work synchronously with react render, as both of these changes will trigger the animated style updater run, which updates the style in the next animation frame.

[sergeylaptev]

My header has a dynamic height based on a number of criteria: data loaded from the backend, human-generated content of dynamic height shown, etc. I can use onLayout on the header, but then I will have a desynchronization between the header being updated and the indents of other elements being updated based on its height. And yes, I should be able to update the header height value and the offsets of other elements that depend on it without interacting with the scroll.