Parent Collapsible does not dynamically calculate height for any nested Collapsible(s)

[havi-b]

I currently have a collapsible view with style { flex: 1} and another collapsible within it. When the inner collapsible is expanded the height of the outer collapsible view does not increase/adjust.

[mwegener-com]

same problem, do you have any solution?

[oussamanm]

💯 i solved that by Calculate the Height the Child view of Collapsible, and create a new state that will hold that height to use it in attribute height of Collapsible Component.

const [calculatedHieght, setCalculatedHieght] = useState();

declare an event that will Calculate the hieght :

 const onLayout=(event)=> {
        const {x, y, height, width} = event.nativeEvent.layout;
        console.log("~~~~~~ height = ", height);
        setCalculatedHieght(height + 20)
 }

use our state that hold the calculated hieght :

<Collapsible collapsed={!variantes[0].collapsed} style={{width: '100%', height: calculatedHieght}} >

and also set onLayout event in the child view of Collapsible component :

<View style={{width: '100%', padding: 7,}} onLayout={onLayout}>