Maintaining Layout of Percentage-Based Children in React Native Reanimated Wrapper

Question

I'm working on a wrapper component that should animate child components using React Native Reanimated.

My current approach is to clone each child and wrap it into a Animated.View.

export function AnimationWrapper(props){
    const alphas = [];
    
    function createAnimatedStyle(sharedValue) {
        return useAnimatedStyle(() => {
            return {
                transform: [{translateY: -sharedValue.value * 255}],
                opacity: 1 - Math.abs(sharedValue.value),
            };
        })
    }
    
    function renderChildren(){
        return props.children
            .map((child, index) => {
                if(!child) return null;
                alphas.push(useSharedValue(-1));
                return(
                    <Animated.View key={index} style={[createAnimatedStyle(alphas[alphas.length-1])]}>
                        {React.cloneElement(child)}
                    </Animated.View>
                );
            });
    }

//Later we can animate the alphas array...

    return({renderChildren()});
}

This works well if the children have absolute sizes. My challenge is maintaining the layout of child components that have percentage-based width and height. The <Animated.View> component adjusts its size to the child. So if we try to make the width/height of the child relative by using percentage, the width/height will result in 0.

From a layout point of view I want the Child to ignore the Animated.View wrapper and adjust its layout to the grandparent. So even if my Functional Component wraps each child, the layout should stay the same.

So how can I maintain the layout of child components with percentage-based dimensions inside an Animated.View in React Native Reanimated? Or are there other ways to animate my children?