Hiding a view is a lot laggy

Question

I have a view in a react-native app like in the image. I have added the css for the corresponding view. To make visualization clear, green view is not on the top of red view instead red view is after green view.

Use case - I want to hide green view such that red view occupies entire space with a smooth transition.

I have been trying to hide green view on an event call using the Animated provided by react-native. I tried to apply animation on translationY but as expected view moved out of visible area but the actual occupied area is not reduced. I tried to apply it on height then I got an error that useNativeDriver: true doesn't work on height. So I removed it and the behaviour suddenly went from smooth to extreme laggy with a long pause in transition.

Animated.timing(this.state.animation, {
            toValue: 94,
            duration: 100,
            easing: Easing.in,
            useNativeDriver: true
        })

It looks like impossible task now to add an animations on height change with a smooth transition.

How can I achieve my desired behaviour?

react: 16.8.3
react-native: 0.59.8

Answer 1

In your case, it creates a performance problem because the views affect each other. As its size changes, it should not affect the other. This causes everything to be rendered again and rendering is the most costly process.

also have you tried it with react-native-reanimated ?