React-native-collapsible: Accordion auto-collapses when pressing on a child element

[manosim]

Hi there and thank you for the amazing work with collapsible and vector-icons! I've been using react-native-collapsible for some time and today I upgraded RN to 0.41.1 and react-native-collapsible to 0.8.0.

It looks like when I press on an element inside the accordion's collapsible content, it tries to collapse that section while it should not. I am attaching a gif that demonstrates the issue. Hope it makes sense - let me know if you would like any further details!

Update

• It looks like neither of the if statements in the componentWillReceiveProps are valid so neither of these are making it collapse.

• Had a look on what changed in 0.0.8 and it looks like the issue has to do with the _handleLayoutChange method. When I click on a child of the collapsible this method is getting called but it does not enter the long if statement which will prevent it from collapsing.

[oblador]

Oh, that doesn't look right. Do you have any example code I can try out?

[manosim]

Sure! Here's a quick example repo I created for this case: https://github.com/manosim/AccordionExample

[cvongrim]

I am having the same issue on RN 0.41.2 and 0.8.0. @manosim Did you find any temporary solution?

[Braidio]

Had this same issue so I'm super interested in what other people have to say. Basically any interactive child component ( in my case, a textarea input ) causes the Accordion to close.

But, I discovered a super hacky way to get this to work...

Just wrap a <ScrollView> around your content. It won't work as a ScrollView because when it opens up, the scrollView will have unbounded height. So it works as just a View. But a View wouldn't get the same results. In any case, I'm super embaressed to use this as a fix. Really looking forward to some reasonable solutions.

[huyhai]

thank @Braidio

[Ralica]

Not Sure if it would help anyone for the Accordion but I had the same problem with the Collapsible.
In my case I made myself a custom component which contained the Collapsible and its collapsed prop was managed by a property 'isCollapsed' declared in the custom component.
Any time an interactive child component was touched the Collapsible would collapse.
Solution:
I realized that the collapsed value of my collapsible which was provided only by the custom component's state values was being lost when a layout change occurs. To ensure that there is a value no matter what I set my 'isCollapsed' state by providing an initial parameter to the custom component or back-fall it to false.
_Some code:_`
constructor(props, context){
super(props, context)

this.state = {
  isCollapsed: props.isCollapsed || false
}

}`

[iRoachie]

Closing this as inactive as there's been no activity for over 30 days. If the problem re-occurs on the latest version of react-native-collapsible then ping me to reopen or create a new issue.

[nichesoftgh04]

Inactivity doesn't mean it got solved :)

[acb]

@nichesoftgh04 This appears to be fixed in version 0.10.0. So in this case it does mean it got solved!

[khanhtdbse]

@Braidio Thank for the hack 👍

[AleksandrLeontev]

Hi all
I use version 1.2.1 of this component and React Native version 16.3.1
So, I have absolutely the same problem like on the GIF above.
Does anybody know what I can do to solve it. OR WHEN authors can solve it?

[iRoachie]

@AleksandrLeontev Can you create an example on https://snack.expo.io that reproduces this?

[AleksandrLeontev]

@iRoachie It doesn't render anything on "device", but maybe you could provide some advices based just on code. Thanks.
https://snack.expo.io/rkEZPp2jm

[AleksandrLeontev]

@iRoachie Looks like the problem solves when I remove View with flex property.

removing this View (components/presentationals/FilterGroup prevents "the ocassional" collapse.
Why would that happen?

[tanmaybhatt]

I am also having this issue. In my case, I am using Tabs inside collapsible. Any interaction with the Tabs causes the unexpected collapse.
It works fine initially when the collapsed prop is false. But once you the change its value, it starts behaving awkwardly. This is happening on Android as far as i know.

[FelipeGCastro]

For me, problem was solved when i set "flex: 0 " for the contents.

[Kasun-thilina]

If anyone is still having this issue. remove all the tags from the Collapsable. I had used a Flatlist inside the Collapsable
like below

<View>
<Flatlist/>
</View>