Search code examples
react-nativelayout-animation

What are the available options for LayoutAnimation.Types


I have a custom layout animation taken from here.

var CustomLayoutAnimation = {
    duration: 200,
    create: {
      type: LayoutAnimation.Types.linear,
      property: LayoutAnimation.Properties.opacity,
    },
    update: {
      type: LayoutAnimation.Types.curveEaseInEaseOut,
    },
  };

When running the code i get the following warning

Warning: Failed config type: The config config.update.type is marked as required in LayoutAnimation.configureNext, but its value is undefined.

The code has an entry for update.type, yet the warning says it's undefined. I'm guessing that the permitted values have been updated since the gist was written. I tried to find out the list of available permitted entries but they are not listed in the React Native LayoutAnimation documentation.

I'd like to know :

  • Is the syntax no longer correct?
  • Is there a webpage somewhere that details the list of availble Types?

Solution

  • Whenever I run into an issue like this, I go to the source code. Here's the file for LayoutAnimation.js from the react-native source code. Based on this, I see a TypesEnum const declaration at line 25 looking like this:

    const TypesEnum = {
      spring: true,
      linear: true,
      easeInEaseOut: true,
      easeIn: true,
      easeOut: true,
      keyboard: true,
    };
    

    I suspect that's why you are erring out - curveEaseInEaseOut is not a supported type. Choose one from the list above and I think you should be good to go. Hope this helps!