Animating position properties (top, bottom, left, right) not working in custom animations

[LJNGDAHL]

Description

Animating position properties (top, bottom, left, right) does not work when using custom entering/exiting animations (via the entering / exiting prop). While these properties animate correctly with useAnimatedStyle, they fail to animate when specified in the entering/exiting animation configuration object.

Expected Behavior

Position properties should animate smoothly when using custom entering/exiting animations, just as they do when using useAnimatedStyle.

Actual Behavior

Position properties remain static and do not animate when used in custom entering/exiting animations. The component immediately jumps to the final position value without any transition.

Code Example

export default function App() {
  const [visible, setVisible] = useState(false)
  const [moved, setMoved] = useState(false)

  const entering = () => {
    "worklet";

    return {
      initialValues: { top: 0, opacity: 0 },
      animations: {
        opacity: withTiming(1, { duration: 1000 }),
        top: withTiming(100, { duration: 1000 })
      },
    };
  };

  const exiting = () => {
    "worklet";

    return {
      initialValues: { top: 0, opacity: 1 },
      animations: {
        opacity: withTiming(0, { duration: 1000 }),
        top: withTiming(-100, { duration: 1000 })
      },
    };
  };

  const animatedStyles = useAnimatedStyle(() => {
     return {
      bottom: withTiming(moved ? 100 : 0, { duration: 1000 }),
    };
  })

  return (
    <SafeAreaView style={styles.container}>
    {!visible && <Animated.View entering={entering} exiting={exiting} style={styles.box} />}
    <Animated.View style={[styles.box, styles.box2, animatedStyles]}  />
    <View style={styles.pressableContainer}>
    <Pressable style={styles.pressable} onPress={() => setVisible(!visible)}><Text style={styles.text}>Toggle</Text></Pressable>
    <Pressable style={styles.pressable} onPress={() => setMoved(!moved)}><Text style={styles.text}>Move Mounted</Text></Pressable>
    </View>
    </SafeAreaView>
  );
}

Steps to reproduce

1. Create an Animated.View with a custom entering animation that includes position properties
2. Toggle the visibility of the component
3. Observe that the position properties do not animate during entry
4. Compare with the same animation using useAnimatedStyle – which works correctly.

Snack or a link to a repository

https://snack.expo.dev/@katarina.ljungdahl/biased-green-celery

Reanimated version

~3.16.1

React Native version

0.76

Platforms

iOS / Android

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

iOS simulator / Android emulator

Device model

No response

Acknowledgements

Yes