Crash with 2.3.0 animating svg's

Description

After installing the alpha.2 Version (coming from version 2.2.4) the app crashes in development without error message at the start. With crashlytics and in production mode, I can get the following error message.

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'boolean com.swmansion.reanimated.layoutReanimation.f.j()' on a null object reference
       at com.swmansion.reanimated.layoutReanimation.g.r(:11)
       at com.facebook.react.uimanager.z0$m.execute(:14)
       at com.facebook.react.uimanager.z0$a.run(:135)
       at com.facebook.react.uimanager.z0.U(:53)
       at com.facebook.react.uimanager.z0.s()
       at com.facebook.react.uimanager.z0$j.c(:31)
       at com.facebook.react.uimanager.f.a()
       at com.facebook.react.modules.core.g$d.a(:46)
       at com.facebook.react.modules.core.a$a$a.doFrame(:2)
       at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1061)
       at android.view.Choreographer.doCallbacks(Choreographer.java:845)
       at android.view.Choreographer.doFrame(Choreographer.java:775)
       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1048)
       at android.os.Handler.handleCallback(Handler.java:938)
       at android.os.Handler.dispatchMessage(Handler.java:99)
       at android.os.Looper.loopOnce(Looper.java:226)
       at android.os.Looper.loop(Looper.java:313)
       at android.app.ActivityThread.main(ActivityThread.java:8582)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:563)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1133)

Expected behavior

No crash

Actual behavior & steps to reproduce

import React, {useEffect} from 'react';
import {View, StyleSheet} from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedProps,
  withRepeat,
  withTiming,
} from 'react-native-reanimated';
import {Svg, Circle} from 'react-native-svg';

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

export default function App() {
  const Animation = useSharedValue(1);

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

  const animtedProps = useAnimatedProps(() => {
    const r = Animation.value * 50;
    return {cx: '50', cy: '50', r, fill: 'green'};
  });

  return (
    <View style={styles.container}>
      <Svg width={'100%'} height={'100%'}>
        <AnimatedCircle animatedProps={animtedProps} />
        <Circle cx={200} cy={200} r={50} fill="yellow" />
      </Svg>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 20,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

Snack or minimal code example

Package versions

• React Native: 0.66.3
• React Native Reanimated: 2.3.0
• NodeJS:
• Xcode:
• Java & Gradle: 6.7.1, openjdk version “11.0.8”

Affected platforms

• Android
• iOS
• Web

[jmysliv]

2.3.0-alpha.2 had some problem with rn 0.65, however, we have just released 2.3.0-alpha.3 with many fixes, and app crashes should be gone. @hmust92 @alexco2 can you test if the crashes still happening with 2.3.0-alpha.3?

[hmust92]

Hey @alexco2, can you provide some example code and steps on how can we reproduce this bug?

@jmysliv I have some example code:

https://github.com/hmust92/AwesomeProject

git clone https://github.com/hmust92/AwesomeProject

npm install

npm start

build with android studio (or run npm run android)

If I downgrade to react-native-reanimated@2.2.0 the app doesn’t crash, but with react-native-reanimated@2.3.0-alpha.2, it always crashes on android after building successfully.