Animate an unknown component height

[mydesweb]

Using LayoutAnimation from React Native is simple to animated a component height no mater the height is. How to achieve same thing with reanimated API?

const config = LayoutAnimation.create(
200,
LayoutAnimation.Types.keyboard,
LayoutAnimation.Properties.opacity,
);
LayoutAnimation.configureNext(config);
setExpanded(expanded => !expanded)

[Oleksandr073]

Hello! I ran into the same problem and came up with this workaround:

1. Render the component, so that it is not visible (set absolute position and zero opacity). After it mounts, save its actual height.
2. Now that we know the component height, we can easily animate height from 0 to the value we just saved.

import React, { useState, useEffect } from 'react';
import { View } from 'react-native';
import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
} from 'react-native-reanimated';

import {
  ComponentWithUnknownHeight,
  Props,
} from './ComponentWithUnknownHeight';

export const SHOW_ITEM_DURATION = 300;

export const SomeComponent = (props: Props) => {
  const [componentHeight, setComponentHeight] = useState<null | number>(null);

  const height = useSharedValue(0);
  const opacity = useSharedValue(0);

  useEffect(() => {
    if (componentHeight !== null) {
      // when component height is known animate the component
      height.value = withTiming(componentHeight, {
        duration: SHOW_ITEM_DURATION,
      });
      opacity.value = withTiming(1, { duration: SHOW_ITEM_DURATION });
    }
  }, [componentHeight, height, opacity]);

  const animatedStyles = useAnimatedStyle(() => ({
    height: height.value,
    opacity: opacity.value,
  }));

  if (componentHeight === null) {
    // render the invisible component and calculate its height
    return (
      <View
        className="absolute opacity-0 pointer-events-none"
        onLayout={(event) => {
          setComponentHeight(event.nativeEvent.layout.height);
        }}
      >
        <ComponentWithUnknownHeight {...props} />
      </View>
    );
  }

  // when height is calculated show the animated component
  return (
    <Animated.View style={[animatedStyles]}>
      <ComponentWithUnknownHeight {...props} />
    </Animated.View>
  );
};

[MatiPl01]

You can achieve the same effect with layout animations by changing the height from 0 to auto and setting the layout property with e.g. LinearTransition on the animated component.

You have keep in mind that all other components, which layout will be affected by this layout animation, must also have the layout property specified. For example, in the code snipped below, I set the layout={LinearTransition} to the Animated.View, which height is modified, as well as to its sibling.

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

export default function EmptyExample() {
  const [show, setShow] = useState(false);

  return (
    <>
      <Animated.View
        layout={LinearTransition}
        style={{
          height: show ? 'auto' : 0,
          backgroundColor: 'red',
          overflow: 'hidden',
        }}>
        <View style={{ height: 100, width: 100, backgroundColor: 'blue' }} />
      </Animated.View>
      <Animated.View layout={LinearTransition}>
        <Button title="Toggle" onPress={() => setShow((prev) => !prev)} />
      </Animated.View>
    </>
  );
}

Example recording:

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-07-02.at.14.21.02.mp4

[MatiPl01]

Alternatively, if you can refer to reanimated docs where we have accordion example, which is similar to what @Oleksandr073 proposed.

[neiker]

The problem with @Oleksandr073 answer is it causes repaintings and bridge crossing, this one is perfect 🙌

[MatiPl01]

Thanks for letting me know that the proposed solution works for you. I will mark it as answer, since this is everything we can do for now to animate unknown component dimensions.