Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

MotiView blinks on first state change

See original GitHub issue

Hi Fernando! First of all, great job on this library, I immediately fell in love with it.

I’m having an issue when using transforms on entry animations. When I mount my view it slides from the bottom with a “translateY” transform, and it works perfectly, however, the first time the local state changes, there is a small flicker or blink in the component.

I’ve attached a video showing the issue below.

https://user-images.githubusercontent.com/77419324/156472693-03ebb961-19d7-4202-af5a-8c3bc3a860d6.MP4

This is the code

import React, {useState} from 'react'
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {COLOR_BACKGROUND} from "../config/colors";
import {SPACING} from "../config/layout";
import {MotiView} from 'moti';
import {elevationShadowStyle} from "../helpers/elevationShadowStyle";

const DemoScreen = () =>{

    const [value, setValue] = useState(false);

    const handlePress = () => {
        setValue(true);
    };

    return <View style={styles.container}>
        <TouchableOpacity onPress={handlePress} style={styles.button}>
            <Text>Click</Text>
        </TouchableOpacity>
        <MotiView
            from={{
                transform: [
                    {
                        translateY: 100,
                    },
                ],
            }}
            animate={{
                transform: [{ translateY: 0 }],
            }}
        >
            <View style={styles.fixedBottomContainer}>
                <Text>I flicker on the first button click.</Text>
            </View>
        </MotiView>
    </View>
};

const styles = StyleSheet.create({
    container: {
        padding: 20,
        backgroundColor: COLOR_BACKGROUND
    },
    divider: {
        marginVertical: 10
    },
    button: {
        backgroundColor: 'red',
        padding: SPACING * 2,
        marginBottom: SPACING * 3
    },
    fixedBottomContainer: {
        padding: SPACING * 2,
        backgroundColor: 'white',
        ...elevationShadowStyle(20)
    }
});

export default DemoScreen;

When “handlePress” is called the first time and “value” gets updated, the flicker happens.

I hope it’s just a mistake in my code.

Greetings from México!