We have a searchEvent object that expands when clicked, revealing the event description. I would like the expansion to be animated and for the final size of the animated box to depend on the length of its content (the event description).

      {expandComponent === id && (
      <View style={styles.expandedContent}>
              <Autolink text={description} onLayout={handleLayout} useRef={textRef} 
                        style={{ paddingHorizontal: 20, paddingBottom: 10, fontSize: 20, color: Colors.text, fontFamily: 'DefaultFont' }}
                         linkStyle={{ color: Colors.link }} />
       </View>
       )}

useEffect(() =>{
        if(expandComponent === -1 || expandComponent !== id){
            //zmniejsz
            Animated.timing(animatedHeight, {
                toValue: 150,
                duration: 140, // Czas trwania animacji
                useNativeDriver: false,
            }).start();
        } else if(lastComponent){
            Animated.timing(animatedHeight, {
                toValue: maxHeight+ 150 ,
                duration: 220, // Czas trwania animacji
                useNativeDriver: false,
            }).start();
        }
        setLastComponent(expandComponent)
    }, [expandComponent])

    const handlePress = () => {
        if (expandComponent === id) {
            setExpandComponent(-1);
        } else {
            setExpandComponent(id);
        }
    };

We’ve attempted using the onLayout function and useLayoutEffect, but it doesn’t return the text size before it’s rendered. We’ve also tried using the react-native-text-size library. However, this library is outdated and we encountered errors when attempting to use it.