React-native-collapsible: Collapsible Content rendered wrong after state change (style update)

Created on 23 May 2018  路  4Comments  路  Source: oblador/react-native-collapsible

If the collapsible content is designed to change style for any state update, the content is not rendered properly inside the collapsible.
For instance having a drop-down style collapsible with languages, and the selected language is highlighted; once you press another language it is expected for that row to be highlighted, but instead it is removed.

I've prepared an expo snack with the problem here: https://snack.expo.io/S1wdnzfk7
Please try to change the language on the dropdown, and you will see the problem.

Project version information:
"react": "16.0.0",
"react-native": "0.51.0",
"react-native-collapsible": "^0.11.3",

Problem appears in both iOS and Android

Thank you, and let me know if you need any further information.

P.S. I've been having this problem since react-native versions 0.3, and I can't find any work around anymore.

help wanted

Most helpful comment

The issue seems to be with the flex:1 that you applied on the <Text />. Here's a working example https://snack.expo.io/HkSZMHGVm.

Unrelated, I recommend you clean up your styles and make the dropdown Item a separate component.

All 4 comments

I have the same problem...

The issue seems to be with the flex:1 that you applied on the <Text />. Here's a working example https://snack.expo.io/HkSZMHGVm.

Unrelated, I recommend you clean up your styles and make the dropdown Item a separate component.

What @iRoachie proposed worked for my case where a child inside the collapsible component after an update was vanishing.

Thank you @iRoachie , it looks ok, and thank you for your recommendation. Most probably all the problems I had previously are due to the style and not a problem of the Collapsible.

Thank you for your help and I'm closing the issue.

Was this page helpful?
0 / 5 - 0 ratings