Item content height gets set to zero on layout change

[AlanLeeMoven]

Snack Demo of the Issue

This appears to be a continuation of the issues #210 and #105.

Context: I am working in a FlatList which has a header and some other items. The header onPress toggles the collapse of the other items. The items have an onPress which 'selects' the item, adding a background color and appending an asterisk to the text display.

Issue: After an item has been collapsed and uncollapsed, pressing an item causes it's contentHeight to recalculate to zero.

Relevant configuration: I can currently only reproduce this bug under the following conditions:

• there must be a change in content (the addition of the asterisk to the list item text on select). Only changing backgroundColor does not trigger the issue
• the item to be rendered is a custom component imported from another file. Writing out the entire contents of the component directly in the FlatList item render prop did not trigger the issue. You can set the state.useBreakableVersion to false to reproduce this in the snack.

Dirty Fix I can currently use the package for my use case by amending the Collapsible.js _measureContent function so that it sets measured: false on line92, but I'm assuming that this is not a sustainable change for the package.

[fahidmohammad]

@AlanLeeMoven
setting a default height to the container solves the problem. But there should be an efficient way of handling things.

[AlanLeeMoven]

@fahidmohammad Thanks! That fixed the issue for my use case. I'll leave it to the owners whether this issue is resolved or needs to be addressed in a broader way.

[zacbdev]

This is a serious problem when we cannot determine the initial height. Need to fix it asap

[ezhkov]

Hello. Any news on this issue?

[mislavlukach]

Still a problem. I cannot determine the initial height so I'm tweaking a measured: false in a postinstall script 😢

[shynst]

Same issue for me. Please fix!

[zaptrem]

@iRoachie This library is almost completely unusable if the accordion closes every time the component inside changes, do you have a fix in the works?

[iRoachie]

@AlanLeeMoven After running your snack you problem lies from the flex: 1 on your Style.categoryItem as the View has no reference to calculate the corresponding height from it's nearest flex parent.

Here's the same example you posted but with an added flex: 1 on the TouchableOpacity and the Collapsible. https://snack.expo.io/@roach_iam/gracious-pineapples

After added those styles, the component works as expected.

[iRoachie]

If you also remove the height: 10% and the flex: 1 from your categoryItem style, it also works as expected.

[zaptrem]

@iRoachie I was able to resolve my problem (with the disappearing component in this file: https://github.com/zaptrem/ReLearnApp/blob/master/components/recording-list.js) by forking the repo and making some changes here: https://github.com/zaptrem/react-native-collapsible/commit/caab0c3c791111ae5dde777c853c0feee33e4e40

Is there some better way to accomplish the same thing without forking?

[iRoachie]

@zaptrem I wouldn't be able to say if you experiencing the same exact issue as the OP. It would be better to create an issue outside of this one, explaining intended behaviour and what code/styles you used when you encountered a bug. I cannot debug "same for me" or "me too" example.

[zaptrem]

@iRoachie All of my code along with the fix to the code in this repo was linked in my comment above. GitHub issues generally discourage opening duplicate threads for the same issue.

[franciscailleAstus]

Any news ?

[zaptrem]

Was this ever resolved? I'd like to jump off my fork and back upstream.

[youknownix]

I was facing the same issue where the FlatList content height became zero on layout change.

Solution:

remove flex: 1 from the FlatList style.

<Animated.FlatList
          data={masterDataContent}
          keyExtractor={(item, index) =>
            item.refId ?? item.id ?? item.LABEL ?? index.toString()
          }
          renderItem={renderItem}
          onLayout={onLayout}
          onContentSizeChange={onContentSizeChange}
          onScroll={onScroll}
          getItemLayout={(data, index) => ({
            length: ITEM_WIDTH,
            offset: ITEM_WIDTH * index,
            index,
          })}
          horizontal
          snapToAlignment="center"
          decelerationRate={0}
          pagingEnabled={true}
          // removeClippedSubviews
          showsHorizontalScrollIndicator={false}
          showsVerticalScrollIndicator={false}
          alwaysBounceVertical={false}
          alwaysBounceHorizontal={false}
          snapToEnd
          snapToStart
          // snapToInterval={BANNER_WIDTH + AbsSize(10)}
          snapToOffsets={snapOffsets}
          style={styles.wrapper}
          contentContainerStyle={styles.contentContainer}
        />
......
       const styles = StyleSheet.create({
          wrapper: {
-                flex: 1
           },
           contentContainer: {
                 paddingHorizontal: AbsSize(16),
                 gap: 9,
                 minWidth: '100%',
             },
        });