React-native-reanimated: rerendering breaks withRepeat animation

[alexfov]

Description

I have withRepeat animation and some useState value.

const [state, setState] = useState(0);
const val = useSharedValue(1);
val.value = withRepeat(withTiming(1.5, { duration: 2000 }), -1, true);

Any state change will fix the val.value range between 1.5 and the value at rerendering moment

Video

https://user-images.githubusercontent.com/39302602/104065268-850b5980-5210-11eb-9214-107530d87b67.mp4

Steps To Reproduce

1. Create withRepeat animation
2. Add some state
3. Update state

Expected behavior

val.value will change in [1, 1.5] range

Actual behavior

val.value changes in [value at the rerendering moment, 1.5] range

Snack or minimal code example

function App() {
  const [state, setState] = useState(0);
  const val = useSharedValue(1);
  val.value = withRepeat(withTiming(1.5, { duration: 2000 }), -1, true);

  const debug = useDerivedValue(() => {
    console.log(val.value);
    return val.value;
  });

  const style = useAnimatedStyle(() => {
    return {
      transform: [{ scale: val.value }],
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.element, style]} />
      <Button title="useless button" onPress={() => setState(state + 1)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  element: {
    backgroundColor: "red",
    width: 100,
    height: 100,
    marginBottom: 50,
  },
});

Package versions

• React: 16.13.1
• React Native: 0.63.4
• React Native Reanimated: 2.0.0-alpha.9.2
• NodeJS: 14.15.1

[github-actions[bot]]

Issue validator - update # 1

Hello!
Congratulations! Your issue passed the validator! Thank you!

[chakrihacker]

can you try this?

useEffect(() => {
    val.value = withRepeat(withTiming(1.5, { duration: 2000 }), -1, true);
}, [])

[alexfov]

T

can you try this?

useEffect(() => {
    val.value = withRepeat(withTiming(1.5, { duration: 2000 }), -1, true);
}, [])

this works, thank you!