Wrong contentHeight results in content being hidden in 13.0.0

[SudoPlz]

This is what I know so far:

Until this commit https://github.com/oblador/react-native-collapsible/commit/b882388c90227b5dc13f7fa301ec9d5c9ad9a4ef we've been using componentWillReceiveProps but now we use: componentDidUpdate

Here's the series of events that took place when collapsible is set to true:

Before the commit (componentWillReceiveProps):

• First _handleLayoutChange runs

• Second measureContent runs

• Third _handleLayoutChange runs again

After the commit (componentDidUpdate):

• First _handleLayoutChange runs

• Second measureContent runs

What's the problem?

The first 2 events calculate the wrong height, and before the commit, the third one (_handleLayoutChange) was the one that set the correct height, and fixed it all. But after the commit from above that no longer happens, so we're left with a wrong height.

Where I tested:

Happens in react-native-collapsible: 13.0.0 Does NOT happen in react-native-collapsible: 12.0.1

[iRoachie]

Could you create the example where this would happen? I'd love to fix it if it's a bug, but i need some sort of benchmark to test against

[SudoPlz]

Sure I'll try to create one today.

[SudoPlz]

I spent a lot of time trying to re-create the issue on a fresh rn project, but couldn't :/ This turned out to be harder than what I thought it would be, therefore we're just going to use 12.0.1 for now and hope for a fix in the future.

That being said, any idea what might cause getNode().measure to return a smaller value than the actual height?

[iRoachie]

You can check out this issue, we had similar miscalculation here https://github.com/oblador/react-native-collapsible/issues/215

[matbrady]

I experienced a similar issue. Here's a basic example: https://snack.expo.io/@matbrady/collapsable-switch Downgrading to 0.12.0 fixes the issue for me on my local project but not when I adjust the version in Expo. (Not sure if Expo actually downloads the different version)

[satoshidave]

I have a similar problem.

Example:

• I add an item to the list
• I set collapse = false
• I add a new item
• collapse = true
• and I add a new item

The collapse component doesn't refresh his content height, then I have to set collapse = false again and set collapse = true again, to the component refresh his height...

Downgrading to 0.12.0 solved the issue...

[to-dy]

Had a similar issue with the current version 1.4.0, using the default prop for align fixed the issue

[SudoPlz]

This is still an issue with getNode().measure in 2019. Still don't know why.

[gilshaan]

Using accordion with react-native-collapsible will not dynamically change its content height. I used a flatlist inside accordion and faced similar problem.. I solved it by setting a flag and re-rendering the view of accordion.

This is my flatlist. <FlatList data={section.content} renderItem={this.renderItem} extraData={this.state.refresh} ListEmptyComponent={this.ListEmptyView} />

I re-rendered my accordion view like this when i add new content to flatlist. {this.state.refresh ? ( <View style={styles.flatlistMainContainer}> <Accordion sections={this.state.accordionArray} activeSections={this.state.activeSections} renderHeader={this.renderAccordionHeader} renderContent={this.renderAccordionItem} onChange={this._updateSections} touchableComponent={TouchableOpacity} /> </View> ) : null}

When i make any change in its content dynamically i will set the flag as : this.setState({ refresh: false }, () => { this.setState({ refresh: true }); });

By doing like this component refresh its content height.

[joebochill]

I'm seeing a similar issue. I have a tree structure using nested Collapsible components built recursively. When the component renders, it's supposed to expand all of the collapsible panels down to the currently selected item.

The internal state of all of the collapsible components is correct, but the top level item seems to be incorrectly calculating the height of the content, so many of the nested children are getting cut off.

Downgrading to 1.5.2 fixes the issue for me, so I suspect the issue is related to this change to the content measurement logic: https://github.com/oblador/react-native-collapsible/compare/v1.5.2...v1.5.3

I take that back. It seems to be some kind of race condition. Sometimes it correctly calculates the height, other times it does not.

[joebochill]

It seems my issue is related to the fact that _measureContent only gets called when the collapsible is expanded. If the content changes dynamically, the height does not get recalculated.

[SudoPlz]

Yep, I confirm that's still an issue in 2021

[JoeKyx]

Did anyone find a solution for this? I am facing the same issue