Open AlanLeeMoven opened 5 years ago
@AlanLeeMoven
setting a default height to the container solves the problem. But there should be an efficient way of handling things.
@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.
This is a serious problem when we cannot determine the initial height. Need to fix it asap
Hello. Any news on this issue?
Still a problem. I cannot determine the initial height so I'm tweaking a measured: false
in a postinstall script 😢
Same issue for me. Please fix!
@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?
@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.
If you also remove the height: 10%
and the flex: 1
from your categoryItem
style, it also works as expected.
@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?
@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.
@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.
Any news ?
Was this ever resolved? I'd like to jump off my fork and back upstream.
I was facing the same issue where the FlatList content height became zero on layout change.
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%',
},
});
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:
state.useBreakableVersion
tofalse
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 setsmeasured: false
on line92, but I'm assuming that this is not a sustainable change for the package.