react-native-reanimated: 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

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 22 (5 by maintainers)

Most upvoted comments

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?

jmysliv on Sep 3, 2021

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.

hmust92 on Aug 9, 2021

I finally found the error. After @furkanb mention I investigated further. It has nothing to do with the colors, at least in my case. The problem was that I passed not animating values within useAnimatedProps to an animated SVG, as you can see in the example code (cy, cx, fill):

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

When passing them seperatly like <AnimatedCircle animatedProps={animtedProps} fill="green" cx={50} cy={50}/>, the crash is fixed. I´m curious why this behaviour changed from 2.2.0 to 2.3.0. Perhaps a disclaimer would be helpful in the docs @jmysliv if this is intentional (if I haven´t missed something). Anyway, issue is solved as far as I am concerned.

alexco2 on Dec 10, 2021

I updated to beta.1 and now get the following error. I´m on rn 0.65.1.

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'java.lang.Object java.util.HashMap.get(java.lang.Object)' on a null object reference
       at com.swmansion.reanimated.layoutReanimation.g.r(:219)
       at com.facebook.react.uimanager.y0$m.execute(:14)
       at com.facebook.react.uimanager.y0$a.run(:135)
       at com.facebook.react.uimanager.y0.U(:53)
       at com.facebook.react.uimanager.y0.s()
       at com.facebook.react.uimanager.y0$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:1008)
       at android.view.Choreographer.doCallbacks(Choreographer.java:809)
       at android.view.Choreographer.doFrame(Choreographer.java:740)
       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:995)
       at android.os.Handler.handleCallback(Handler.java:938)
       at android.os.Handler.dispatchMessage(Handler.java:99)
       at android.os.Looper.loop(Looper.java:246)
       at android.app.ActivityThread.main(ActivityThread.java:8595)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:602)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1130)

Exactly the same error for me. I’m on RN 0.66.0-rc.4

ruairioliverwv on Oct 4, 2021

I updated to beta.1 and now get the following error. I´m on rn 0.65.1.

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'java.lang.Object java.util.HashMap.get(java.lang.Object)' on a null object reference
       at com.swmansion.reanimated.layoutReanimation.g.r(:219)
       at com.facebook.react.uimanager.y0$m.execute(:14)
       at com.facebook.react.uimanager.y0$a.run(:135)
       at com.facebook.react.uimanager.y0.U(:53)
       at com.facebook.react.uimanager.y0.s()
       at com.facebook.react.uimanager.y0$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:1008)
       at android.view.Choreographer.doCallbacks(Choreographer.java:809)
       at android.view.Choreographer.doFrame(Choreographer.java:740)
       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:995)
       at android.os.Handler.handleCallback(Handler.java:938)
       at android.os.Handler.dispatchMessage(Handler.java:99)
       at android.os.Looper.loop(Looper.java:246)
       at android.app.ActivityThread.main(ActivityThread.java:8595)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:602)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1130)

alexco2 on Sep 24, 2021

@jmysliv I was able to get it to run on RN 0.65.1 👍

hmust92 on Aug 20, 2021

@hmust92 Thanks for the clarification. I tested both platforms, on android I used the emulator.

Thanks! I will try testing again today.

hmust92 on Aug 16, 2021

@jmysliv Since I don’t know how this bug happens, I didn’t provide any steps on how to reproduce it. I hoped the logs would be enough. I’ll investigate further and will try to give you an example.

alexco2 on Aug 2, 2021