Entering/Exiting animations for animatedProps

[vovacodes]

Is it possible to somehow create a custom entering/exiting animation that would modify animatedProps rather than just styles. E.g.

const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);

const BlurIn = (targetValues: any) => {
  "worklet";
  const animations = {
    animatedProps: {
      intensity: withTiming(60, {
        duration: 1000,
      }),
    },
  };
  const initialValues = {
    animatedProps: {
      intensity: 0,
    },
  };
  return {
    initialValues,
    animations,
  };
};

...

<AnimatedBlurView
        entering={BlurIn}
        tint="light"
        style={StyleSheet.absoluteFill}
/>

[MatiPl01]

Hey!
Unfortunately, layout animations work only with style properties. To animate animatedProps when component mounts, you would have to use useAnimatedProps.

The easiest way to achieve layout animation like behavior is to use withSequence with withTiming(0, {duration: 0}), which sets the initial value of the intensity and withTiming(60, {duration: 1000}), which animates to the desired value.

const animatedProps = useAnimatedProps(() => ({
  intensity: withSequence(
    withTiming(0, {duration: 0}),
    withTiming(60, {duration: 1000}),
  ),
}));
...

<AnimatedBlurView
  animatedProps={animatedProps}
  tint="light"
  style={StyleSheet.absoluteFill}
/>

[vovacodes]

I guess, what's more interesting to me is the exiting animation though. Specifically the behaviour of keeping an element rendered until the exit animation plays out. Can that behaviour be achieved without exiting?

[MatiPl01]

Exiting animation will be much harder to fake. Even if layout animations supported animatedProps animation, you would not be able to achieve the desired result because the BlurView component blurs everything rendered below this view but layout animations work only for the current view on which they are applied, thus other views are unaffected.

If you want to animate blur before the component unmounts, you would have to delay the removal of the component until the animation is finished. You may implement this in the following way:

const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);

type BlurProps = {
  exit?: boolean;
  onExited?: () => void;
};

function Blur({exit, onExited}: BlurProps) {
  const animatedProps = useAnimatedProps(
    () => ({
      intensity: exit
        ? withTiming(0, {duration: 1000}, finished => {
            if (finished && onExited) {
              runOnJS(onExited)();
            }
          })
        : 100,
    }),
    [exit],
  );

  return (
    <AnimatedBlurView
      animatedProps={animatedProps}
      tint="light"
      style={StyleSheet.absoluteFill}
    />
  );
}

And then, first set exit prop to true and then, when the onExited callback is called, remove the blur component.

const [exit, setExit] = useState(false);
const [blurRendered, setBlurRendered] = useState(true);

<Blur exit={exit} onExited={() => setBlurRendered(false)} />

Complete code

import React, {useState} from 'react';
import {BlurView} from 'expo-blur';
import {
  Dimensions,
  Image,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import Animated, {
  runOnJS,
  useAnimatedProps,
  withTiming,
} from 'react-native-reanimated';

const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);

type BlurProps = {
  exit?: boolean;
  onExited?: () => void;
};

function Blur({exit, onExited}: BlurProps) {
  const animatedProps = useAnimatedProps(
    () => ({
      intensity: exit
        ? withTiming(0, {duration: 1000}, finished => {
            if (finished && onExited) {
              runOnJS(onExited)();
            }
          })
        : 100,
    }),
    [exit],
  );

  return (
    <AnimatedBlurView
      animatedProps={animatedProps}
      tint="light"
      style={StyleSheet.absoluteFill}
    />
  );
}

export default function App() {
  const {width, height} = Dimensions.get('window');
  const [exit, setExit] = useState(false);
  const [blurRendered, setBlurRendered] = useState(true);

  return (
    <>
      <Image
        source={{uri: `https://picsum.photos/${width}/${height}`}}
        style={StyleSheet.absoluteFill}
      />
      {blurRendered && (
        <>
          <Blur exit={exit} onExited={() => setBlurRendered(false)} />

          <View style={styles.buttonWrapper}>
            <TouchableOpacity
              style={styles.button}
              onPress={() => setExit(prev => !prev)}>
              <Text style={styles.buttonText}>Remove blur</Text>
            </TouchableOpacity>
          </View>
        </>
      )}
    </>
  );
}

const styles = StyleSheet.create({
  buttonWrapper: {
    position: 'absolute',
    bottom: 50,
    width: '100%',
    alignItems: 'center',
  },
  button: {
    backgroundColor: 'rgba(0, 0, 0, 0.25)',
    padding: 10,
    borderRadius: 5,
  },
  buttonText: {
    fontSize: 20,
    color: 'white',
    fontWeight: 'bold',
  },
});

Result

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-08-21.at.23.44.34.mp4