React-native-collapsible: Collapsible Not Correct Height On Component View Update While Open

[jayellul]

Hi everybody,

I've been lurking all of the collapsible height issues that this repo has had, tried just about every single suggested solution but I'm truly stumped.

My issue is that whenever I am updating (adding another cell) into a component within a Collapsible, the newly added cell is squished and the height of the open Collapsible is not adjusted properly. Keep in mind I'm using the terminology "cell" here but I'm really talking about an array of objects that are mapped to each return a View rather than a List itself.

I can achieve my desired results by either:

1) Keeping my identical code and then closing and reopening the collapsible so it re-renders the correct height.

2) Changing the Collapsible collapsed boolean prop to false, rather than a conditional based on state. This of course renders all of the Collapsible's useless but the height is rendered properly when the component within it updates.

If you have any suggestions that would be much appreciated or would like to see specific code to help with assisting me, please let me know.

[joshwinter]

@JasonEllul Did you end up getting this solved? I'm having the same issue. Thanks in advance.

[kishanbharda]

@JasonEllul have you found any solution ? I'm having the same problem. Child View of Collapsible hide when something added to View instead of changing height.

[Rhut-virani]

I am also having the same issue, did anyone find the solution?

[v-vashchenko]

Check your content components, probably you have some useles flex: 1

[vlachmilan]

I've managed to fix this by doing something like:

const [expandHeight, setExpandHeight] = useState(0);
const recalculateExpandDimensions = (e) => {
        const layout = e.nativeEvent.layout
        const {height} = layout;
        setExpandHeight(height)
    }

return (
<Collapsible collapsed={!expanded} style={{height: expandHeight}}>
     <View onLayout={recalculateExpandDimensions}>
          {/* Some content... */}
     </View>
</Collapsible>
)