Warning: Overriding previous layout animation with new one before the first began

[wachunei]

One of my components changes state in order to render an InputText, the state change handler has set LayoutAnimation.configureNext to animate this state transition. It seems like this is being fired at the same time KeyboardSpacer animates itself, throwing the next warning:

Warning: Overriding previous layout animation with new one before the first began

Both animations (spacer and my component's state change) render without issues.

Is there a way to avoid this?

[perrosnk]

I am getting the same error, after opening, then closing a selector/picker and then auto-focusing on textinput.

Warning: Overriding previous layout animation with new one before the first began:
{
    create =     {
        property = opacity;
        type = keyboard;
    };
    delete =     {
        property = opacity;
        type = keyboard;
    };
    duration = "349.9999940395355";
    update =     {
        type = keyboard;
    };
} -> {
    create =     {
        property = opacity;
        type = keyboard;
    };
    delete =     {
        property = opacity;
        type = keyboard;
    };
    duration = 250;
    update =     {
        type = keyboard;
    };
}.

could it be related to:https://github.com/facebook/react-native/issues/10606 ?

[ravirajn22]

Guys any updates on this warning... seems still its not fixed

[edencakir]

+1

[MacKentoch]

Any enlightenment would be warmfully welcomed.

[brenordr]

May help, I was running in a similar issue in other project https://github.com/facebook/react-native/issues/12663

[MutatedBread]

Hi guys, I had this error as well, but only on iOS.

I only modify the duration of layout animation to something like 1 or 0. Then the error does not show up.

Default animation duration of 200 on android works fine for me.

[joshuat]

This pull request seems to have fixed it for me:

Andr3wHur5t/react-native-keyboard-spacer#66

[msqar]

Any idea on how should I fix this? it will happen on production app too, right? it's annoying! to me, it happens when i got the keyboard opened and i show an alert. But this can totally happen with other stuff that i show after the keyboard is up... please help :(

[akhan118]

Turning off Debug worked for me.

[toadums]

I've noticed this when input focus changes quickly (in debug mode at least). For me setting blurOnSubmit={false} on my TextInputs made the issue go away. In my case that's the behaviour I wanted anyways

[rahulje9]

any update on this? I'm still getting this issue.

[porquelaquiero]

still have this issue. please share your solutions.

[Bardiamist]

I'll try this temp solution, seems works

let isLayoutAnimationConfigured = false;

const configureKeyboardLayoutAnimation = ({
  duration,
  easing,
}: KeyboardEvent) => {
  if (!isLayoutAnimationConfigured) {
    isLayoutAnimationConfigured = true;

    LayoutAnimation.configureNext(LayoutAnimation.create(
      duration,
      (LayoutAnimation.Types[easing] as any),
      (LayoutAnimation.Properties.opacity as any),
    ), () => {
      isLayoutAnimationConfigured = false;
    }, () => {
      isLayoutAnimationConfigured = false;
    });
  }
};

[KrisLau]

This pull request seems to have fixed it for me:

#66

This worked, thank you! I ran yarn remove react-native-keyboard-spacer to remove the original package from my project then pulled the PR with yarn add Andr3wHur5t/react-native-keyboard-spacer#66/head and the error disappeared.

EDIT: It seems to have introduced a new error

RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks

[fukemy]

I'll try this temp solution, seems works

let isLayoutAnimationConfigured = false;

const configureKeyboardLayoutAnimation = ({
  duration,
  easing,
}: KeyboardEvent) => {
  if (!isLayoutAnimationConfigured) {
    isLayoutAnimationConfigured = true;

    LayoutAnimation.configureNext(LayoutAnimation.create(
      duration,
      (LayoutAnimation.Types[easing] as any),
      (LayoutAnimation.Properties.opacity as any),
    ), () => {
      isLayoutAnimationConfigured = false;
    }, () => {
      isLayoutAnimationConfigured = false;
    });
  }
};

nice solution, thanks so much