React Native Android crash with LayoutAnimationController.shouldAnimateLayout

Question

My app crashes in the production mode on android devices. Basically it is happening on Android 10(Samsung, Xiaomi, Huawei, LGE).

Stacktrace

      Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'android.view.ViewParent android.view.View.getParent()' on a null object reference
       at com.facebook.react.uimanager.layoutanimation.LayoutAnimationController.shouldAnimateLayout (LayoutAnimationController.java:91)
       at com.facebook.react.uimanager.NativeViewHierarchyManager.manageChildren(NativeViewHierarchyManager.java:453)
atcom.facebook.react.uimanager.UIViewOperationQueue$ManageChildrenOperation.execute(UIViewOperationQueue.java:206)
       at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:792)
       at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:903)
       at com.facebook.react.uimanager.UIViewOperationQueue.access$2400(UIViewOperationQueue.java:43)
       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:963)
       at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
       at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:175)
       at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:85)
       at android.view.Choreographer$CallbackRecord.run(Choreographer.java:997)
       at android.view.Choreographer.doCallbacks(Choreographer.java:797)
       at android.view.Choreographer.doFrame(Choreographer.java:728)
       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:984)
       at android.os.Handler.handleCallback(Handler.java:883)
       at android.os.Handler.dispatchMessage(Handler.java:100)
       at android.os.Looper.loop(Looper.java:237)
       at android.app.ActivityThread.main(ActivityThread.java:8016)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1076)

React Native version:

System:
    OS: macOS 10.15.4
    CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
    Memory: 405.76 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.13.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.7, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.0, 29.0.2, 29.0.3
      System Images: android-22 | Google APIs Intel x86 Atom, android-24 | Google APIs Intel x86 Atom, android-24 | Google Play Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.7/11E801a - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_242-release - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.0 => 0.62.0 
  npmGlobalPackages:
    *react-native*: Not Found

I have the file with animation vars:

import { LayoutAnimation, LayoutAnimationConfig } from 'react-native';

export const AnimationVars = {
  layoutAnimation: {
    keyboard,
    expandCollapse: { ...LayoutAnimation.Presets.easeInEaseOut, duration: expandCollapseDuration } as LayoutAnimationConfig,
    inputField: { ...LayoutAnimation.Presets.easeInEaseOut, duration: inputFieldDuration } as LayoutAnimationConfig,
    dialogTransform: { ...LayoutAnimation.Presets.easeInEaseOut, duration: expandCollapseDuration } as LayoutAnimationConfig,
    navBarTransform: { ...LayoutAnimation.Presets.easeInEaseOut, duration: navBarDuration } as LayoutAnimationConfig,
  },
};

And after use the var in different places of my app, for example in TitleExpanding component in toggle method:

  private _onToggle(nextValue: boolean, animate: boolean = true) {
    const rotateValue = !nextValue ? 1 : 0;
    if (animate) {
      requestAnimationFrame(() => {
        timing(this._rotateValue, {
          toValue: rotateValue,
          duration: AnimationVars.expandCollapseDuration,
          easing: Easing.linear,
        }).start();
      });
      LayoutAnimation.configureNext(AnimationVars.layoutAnimation.expandCollapse);
    } else {
      this._rotateValue.setValue(rotateValue);
    }
    this._toggle.toggle();

    const preferencesKey = this.props.preferencesKey;
    if (preferencesKey) {
      this._preferences.set(preferencesKey, nextValue ? 'false' : 'true').then();
    }
  }

I think it is the similar issue https://github.com/facebook/react-native/issues/25832. Please let me know if somebody stuck with the same error.

Answer 1

I was running into a similar issue and it was revolving around me having a Modal with buttons that fired the LayoutAnimation. One solution I found was to wrap the LayoutAnimation.configureNext in a setImmediate such as

setImmediate(() => LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut));

This had the effect of allowing the Modal enough time to be removed before the action was performed.