oblador
Accordion active section does not expand on initial render
@oblador I am using the latest version of the library 1.6.2 with React Native 0.75.3, When the Accordion is rendered for the first time it does not expand the activeSection, attaching link for reproducer app https://snack.expo.dev/@ravindragupta_intelex/react-native-collapsible-demo
I have the same issue after upgrading react-native to v74 and android sdk to 34
see #479
Actually, I changed it a long time ago. Although it works, the unfolding animation is still clearly problematic.
I am also facing the same, with RN 0.77 (new arch). Going back to 1.6.1 is not an ideal solution as 1.6.2 fixes some new arch bugs
I have the same issue with Collapsible and Accordion. @oblador are there plans to fix this? This issue is rendering this package useless due to the terrible user experience
@oblador this is really a major blocker with newer react native version, could you please respond with any timeline to release a fix. Thanks.
Root Cause & Solution
The issues with Collapsible/Accordion started when this code change was introduced in PR #475:
- const style = hasKnownHeight && { overflow: 'hidden', height: height }
+ const style = { overflow: 'hidden', height: hasKnownHeight ? height : 0 }
This change forces a height of 0 when the height is not yet known, which causes the initial render issues and broke initially open collapsibles (as noted by @VNDRN in PR #475). The solution is simple - use unset instead of 0:
- const style = { overflow: 'hidden', height: hasKnownHeight ? height : 0 }
+ const style = { overflow: 'hidden', height: hasKnownHeight ? height : 'unset' }
This allows the content to naturally flow and be visible on initial render, while still maintaining the animation capabilities for subsequent interactions.
I can submit a PR with this fix if needed @oblador. This should resolve the issues reported in #485 without requiring complex height calculations or state management.
@msultanic, I have made a patch using your suggested fix. This is a fantastic workaround until the author makes an official fix. Thank you!
@msultanic "unset" is not valid CSS in RN so probably better to use undefined which has worked from my testing
Works great with undefined.
const style = { overflow: 'hidden', height: hasKnownHeight ? height : undefined }
