oblador / react-native-collapsible

Animated collapsible component for React Native, good for accordions, toggles etc
MIT License
2.43k stars 453 forks source link

Issue with nested Collapsible #351

Closed outaTiME closed 4 years ago

outaTiME commented 4 years ago

Hi guys, im getting some wired issue using nested Collapsible elements.

im using in the following way (reduced version):

<Collapsible
  duration={Settings.ANIMATION_DURATION}
  collapsed={parent.enabled !== true}
>
  <View style={{ flex: 1, borderColor: 'red', borderWidth: 1 }}>
    <Collapsible
      duration={Settings.ANIMATION_DURATION}
      collapsed={child_1.enabled !== true}
    />
    <Collapsible
      duration={Settings.ANIMATION_DURATION}
      collapsed={child_2.enabled !== true}
    />
    <Collapsible
      duration={Settings.ANIMATION_DURATION}
      collapsed={child_3.enabled !== true}
    />
  </View>
</Collapsible>

childs works as expected until collapse and expand the parent, then any action on children hides the parent content,

here the video:

CleanShot 2020-05-27 at 12 32 32

any advice? something related with: https://github.com/oblador/react-native-collapsible/issues/229, https://github.com/oblador/react-native-collapsible/issues/269 ?

outaTiME commented 4 years ago

btw if i force height like this:

<Collapsible
  duration={Settings.ANIMATION_DURATION}
  collapsed={parent.enabled !== true}
>
  <View style={{ height: 1000, borderColor: 'red', borderWidth: 1 }}>
    <Collapsible
      duration={Settings.ANIMATION_DURATION}
      collapsed={child_1.enabled !== true}
    />
    <Collapsible
      duration={Settings.ANIMATION_DURATION}
      collapsed={child_2.enabled !== true}
    />
    <Collapsible
      duration={Settings.ANIMATION_DURATION}
      collapsed={child_3.enabled !== true}
    />
  </View>
</Collapsible>

work as expected

outaTiME commented 4 years ago

the only workaround I found at the moment was removing the collapsible from parent, very frustrating 😢

{parent.enabled === true && (
  <View style={{ flex: 1, borderColor: 'red', borderWidth: 1 }}>
    <Collapsible
      duration={Settings.ANIMATION_DURATION}
      collapsed={child_1.enabled !== true}
    />
    <Collapsible
      duration={Settings.ANIMATION_DURATION}
      collapsed={child_2.enabled !== true}
    />
    <Collapsible
      duration={Settings.ANIMATION_DURATION}
      collapsed={child_3.enabled !== true}
    />
  </View>
)}
Roshdy commented 3 years ago

Is this scheduled to be fixed anytime soon? or should i bounce away ?