Accordion active section does not expand on initial render

[ravindraguptacapgemini]

@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

[czy0729]

After updating to Expo@52, I encountered the same issue.

[benjaminharringtonrose]

Yep, I'm experiencing this issue as well

[Ali-Oliaee]

I have the same issue after upgrading react-native to v74 and android sdk to 34

[CristianMihai26]

yup, same here after Expo@52

[adstr123]

Same.

"react-native-collapsible": "^1.6.2",
"react-native": "0.73.10",

[augusthjerrild]

Also happens with Collapsible without Accordion. Expo 52.

[donni106]

see #479, downgrading to 1.6.1 worked for me.

[czy0729]

see #479

Actually, I changed it a long time ago. Although it works, the unfolding animation is still clearly problematic.

[pranshuchittora]

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

[jadonhansen]

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

[jwitthaus]

same issue here. so annoying to use now

[ravindraguptacapgemini]

@oblador this is really a major blocker with newer react native version, could you please respond with any timeline to release a fix. Thanks.

[ravindraguptacapgemini]

@jadonhansen have you found any fix for the issue?

[msultanic]

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.

[TheRealMikeD]

@msultanic, I have made a patch using your suggested fix. This is a fantastic workaround until the author makes an official fix.
Thank you!