React-spring: React-native animation stops working after Fast Refresh

[ddennis]

I have created a simple Expo app using the example with tabs.

I am testing the animation, but they only works on initial load.
As soon i make a code change "refreshing" the animation does not work anymore.
Any help would be much appreciated- thanks

Expo version - 3.11.3
"react-spring": "9.0.0-beta.34"
windows 8.1
tested on genymotion and Google Pixel 3

This is the code.

import React, {useEffect, useState, useRef} from "react";
import { View, Text, StyleSheet, Button, PanResponder } from "react-native";
import {animated, useSpring} from "react-spring/native";



const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent:"center",
        height:"100%",
        width:"100%",
        backgroundColor: '#CCFF00',

    },
    item:{
        height:200,
        width:150,
        backgroundColor:"#FFFFFF",
        marginRight:10
    }});

// it does not help moving the AnimatedView outside of the component
// const AnimatedView = animated(View)

const AppView = (props) => {

    const [{x, y, opacity}, setAni] = useSpring( () => ({x: 100, y: 0, opacity:1, config: {friction: 40, tension: 1200}}) );
    const sayWat = () => {
        const m = x.getValue() === 50 ? 0: 50
        const op = opacity.getValue() === 1 ? .5 : 1;
        setAni( {x:m , y: 0, opacity:op} )

    }

    const AnimatedView = animated(View)

    return (
            <View style={styles.container}>
                <AnimatedView style={{backgroundColor:"#EEFF00",height:"50%",width:"100%",  flexDirection:"row",position:"absolute",  transform: [{ translateX:x }], opacity}}>
                    <View style={styles.item}>
                        <Text>asdasd</Text>
                    </View>
                    <View style={styles.item}>
                        <Button onPress={sayWat} title={"click"}></Button>
                    </View>
                </AnimatedView>
            </View>
    )

}
export default AppView

[aleclarson]

Does your code work with v8?

[ddennis]

@aleclarson Everything works fine in version 8 and on the web,

I found that the problem is caused by "Fast refresh" which does not remount the component.

This solution is to add // @refresh reset somewhere in the file.
Its described here: https://docs.expo.io/versions/latest/react-native/fast-refresh/
Making a change in the App.js file (parent file) also keeps the animation working.

I still don't understand why the animation stops working. Its this a bug?

[aleclarson]

@ddennis Do you have a git repository with a minimal reproduction?

[aleclarson]

This will be fixed in 9.0.0-rc.4, thanks to 4b8cd966d593c20f9e4dff2bac5d24d7a8c92413. 👍

[ddennis]

Great and thanks alot for all the work on version 9.