Animating max/min width/height properties does not work in custom animations

[sofiekhullar]

Description

Same issue as 7035 but for the dimension properties: minWidth, maxWidth, minHeight and maxHeight. Custom entering/exiting animations do not work, though these properties animate correctly when using useAnimatedStyle.

Expected

´minWidth´, maxWidth, minHeight, and maxHeight should animate during entering/exiting transitions, just as they do when used with useAnimatedStyle.

Actual

There is no animation applied to these properties during entering/exiting transitions.

Code example

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

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

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

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

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

  const animatedStyles = useAnimatedStyle(() => {
     return {
      minWidth: withTiming(moved ? 200 : 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}>Update minWidth</Text></Pressable>
    </View>
    </SafeAreaView>
  );
}

Steps to reproduce

1. Create an Animated.View with a custom entering animation that includes dimension max/min properties
2. Toggle the visibility of the component
3. Observe that the dimension 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/iYSoiwPJJmoUi3CaGpHEe

Reanimated version

3.16.7

React Native version

0.77

Platforms

Android, iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[AnnaRybkina]

There seems to be the same issue with margin and padding.