Unexpected flickering when using react-native-redash

Question

I'm new using react-native-redash to perform some animations based on react-native-reanimated library (which is awesome in terms of performance).

My code is the following:

const Alert = (props) => {
    const [visible, setVisible] = React.useState(false);
    const [message, setMessage] = React.useState(null);
    const animation = new Value(0);
    const clock = new Clock();

    React.useEffect(() => {
        setMessage(props.message);
        setVisible(props.visible);
    }, [props]);

    useCode(() =>
        block([
            set(
                animation,
                timing({
                    clock,
                    from: visible ? 0 : 1,
                    to: visible ? 1 : 0,
                    duration: 500,
                    easing: Easing.inOut(Easing.ease)
                })
            ),
            debug('Algo visible', animation)
        ], [animation])
    );

    const scale = mix(animation, 0, 1)
    const opacity = mix(animation, 0, 1)

    const from = 'transparent';
    // const to = 'rgba(0,0,0,.75)';
    const to = 'rgba(0,0,0,.75)'
    const backgroundColor = interpolateColor(animation, {
        inputRange: [0, 1],
        outputRange: [from, to]
    });

    /* if(!props.visible){
        console.log("OK");
        return null;
    } */

    return (
        <Animated.View
            style={[styles.container, { backgroundColor, transform: [{ scale: scale }] }]}>
            <Animated.View
                style={[
                    styles.inner,
                    {
                        transform: [{ scale }],
                        opacity
                    }
                ]}>
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={() => {
                        setVisible(false)
                        setTimeout(() => {
                            props.onClosed();
                        }, 150);
                    }}
                    style={styles.close}>
                    <Image
                        source={require('app/src/assets/images/common/close_x2.png')}
                        style={{ width: 16, height: 16, resizeMode: 'contain' }}
                    />
                </TouchableOpacity>
                <Text style={styles.message}>{ message }</Text>
            </Animated.View>
        </Animated.View>
    )
}

This opens a modal using a simple animation (like opacity, or scale) and closes when a close button is pressed.

When modal opens everything works as expected. The problem is when the modal is closed. Attached a gif for a descriptive problem.

Do you have any ideas how to solve this flickering animation when modal closes?

Thanks!

Answer 1

Try to put your Animated values to the memo so it will not reset value on component rerender

  const {animation, clock} = useMemo(() => ({
    animation: new Value(0),
    clock: new Clock(),
  }), []);