Animated subviews in <Collapsible /> don't work

[paolospag]

Hi, I created a custom Checkbox component with animated check icon that should work like this:

but if I put the animated component inside <Collapsible /> component the animation stops working and the end result is the same as this:

Note: the speed of the gifs has been slowed down to allow for understanding the animation.

I looked at the code of <Collapsible /> component and I noticed something that could block all other animation: https://github.com/oblador/react-native-collapsible/blob/master/Collapsible.js#L145-L147 according to the documentation:

By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.

Any workaround?

[giantslogik]

I did run into an issues with animations, breaking if they were triggered during a collapsible (open) animation. The trick was to hook the collapsible animation end before firing animation events on my own components.

<Collapsible collapsed={!this.state.collapsible} onAnimationEnd={this.onCollapseAnimationEnd}>

Further i had issues if the collapsible contents view had dynamic height

<Collapsible collapsed={!this.state.collapsible}>
           <View ref={element => this.collapsibleRef = element} style={[{height:SOME_FIXED_HEIGHT}]}><MyComponent></MyComponent></View>
             </Collapsible>

[iRoachie]

Hey could you link to the source for that checkbox? Would love to do some testing.