search

oblador / react-native-collapsible

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

Animation Glitch when used with CollapsedHeight #374

Open LucasKuhn opened 3 years ago

LucasKuhn commented 3 years ago

It's quite hard to explain, but when there is a CollapsedHeight set, the expand animation sometimes glitches before continuing with the animation: Screen Recording 2020-11-15 at 5 23 58 PM (1)

It happens with both iOS and Android, tested on emulator and tested on my device.

Example Snack: https://snack.expo.io/8pLrDy!KA

To reproduce: Set CollapsedHeigth={{100}} and open it a few times, it happens every once in a while

LucasKuhn commented 3 years ago

Also, tried using other Easing options, different durations and alignments. The glitch still happens in each one of those settings

6justhero6 commented 3 years ago

I have the same problem. Noticed that without hasKnownHeight checking in render method in Collapsible works fine with Collapsible. Didn't test with Accordion.

react native: 0.63.4 react native collapsible: 1.5.3

render() {
    ...
    const style = hasKnownHeight && {
        overflow: 'hidden',
        height: height,
    };
    ...
}
TheGreatFellow commented 3 years ago

I'm having the same problem. I'm having a similar problem when using react-navigation-shared-element as well, the animation staggers and resizes. I think something else is the problem here. It would be great if someone knows what's happening here

Mogul123 commented 2 years ago

Have you been able to solve this problem? I am facing the same issue...

davidchalifoux commented 2 years ago

To me it looks like the height starts back at 0 for a frame before continuing from the set collapsedHeight. Edit: Looks like the same from https://github.com/oblador/react-native-collapsible/issues/218