Expect withTiming animations to be executed at render time, but frozen in the result of execution

[sukjae]

Expect withTiming animations to be executed at render time, but frozen in the result of execution.

For example, in the example below, we expected to see an animation with a width of 100 to 200 and a duration of 1000ms at render time.

  const style = useAnimatedStyle(() => {
    return {
        width: withTiming(200,{duration:1000})
    };
  });

  return (
    <Animated.View style={[styles.test, style]}>
      <Text
     
      >
        hello Reanimated
      </Text>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
    test: {
      width: 100
    },
  });

But it is fixed at 200 at render time.

Is it right way to use something like this for this?

ex1)

  const style = useAnimatedStyle(() => {
    return {
        width: withSequence(withTiming(100,{duration:0}), withTiming(200,{duration:1000}))
    };
  });
//...same as above

ex1)

  const show = useState(false)
  const style = useAnimatedStyle(() => {
    return {
        width:  withTiming(show?200:100,{duration:1000})
    };
  },[show]);
//...same as above

Also, 200 is passed as the value of the second argument of onStart of the internal logic of withTiming. I wonder what the meaning of the second argument of onStart is. https://github.com/software-mansion/react-native-reanimated/blob/main/src/reanimated2/animation/timing.ts#L69

[marcocaldera]

I'm facing the same issue. In older version of reanimated (in production I'm using 2.8) it was working. I suggest we should maybe open an issue

[piaskowyk]

Yes, you can't trigger layout animation manually, but if you want to animate fade-out maybe you can use Exiting Layout Animation? The exiting animation will trigger on loader unmount.

[marcocaldera]

What do you mean by "The exiting animation will trigger on loader unmount."? How can I trigger the fade-out on demand? I'm not seeing it in the docs. Thanks!

[piaskowyk]

Screen.Recording.2023-03-13.at.10.33.21.mov

import React, { useState } from 'react';
import Animated, {
  FadeIn,
  FadeOut,
} from 'react-native-reanimated';
import { Button, View } from 'react-native';

export function BasicLayoutAnimation() {
  const [visible, setVisible] = useState(true);

  return (
    <View style={{
      flex: 1,
      alignItems: 'center',
      marginTop: 50,
    }}>
      <Button onPress={() => setVisible(!visible)} title="Create/Remove" />
      {visible && (
        <Animated.View
          entering={FadeIn}
          exiting={FadeOut}
          style={{
            width: 100,
            height: 100,
            backgroundColor: 'blue',
          }}
        />
      )}
    </View>
  );
}

[piaskowyk]

Is it something what you want to achieve?

[marcocaldera]

I text you on Discord (React Native Contributors) to easily share a couple of private videos. I'll then post here the final answer 👍

[piaskowyk]

Hey 👋

const style = useAnimatedStyle(() => {
  return {
    width: withTiming(200)
  };
});

return (
  <Animated.View style={[{ width: 100 }, style]}>
    <Text>hello Reanimated</Text>
  </Animated.View>
);

Unfortunately, this code couldn't work because the animation doesn't know the initial value. Reanimated doesn't know from which value should start the animation. But you can achieve your effect using the shared value, like this:

const width = useSharedValue(100)
const style = useAnimatedStyle(() => {
  return {
    width: withTiming(width.value)
  };
});

useEffect(() => {
  width.value = 200
})

return (
  <Animated.View style={[{ width: 100 }, style]}>
    <Text>hello Reanimated</Text>
  </Animated.View>
);