reaniamted Layout animations InnerNativeModule.enableLayoutAnimations is not a function.

[stevemoretz]

Please provide the following:

1. SDK Version: 44
2. Platforms(Android/iOS/web/all): iOS
3. Add the appropriate “Tag” based on what Expo library you have a question on.

Hello, I’m using reanimated 2, it works very well, but when trying to use Layout Animations it gives me this error:

[Unhandled promise rejection: TypeError: InnerNativeModule.enableLayoutAnimations is not a function. (In 'InnerNativeModule.enableLayoutAnimations(flag)', 'InnerNativeModule.enableLayoutAnimations' is undefined)]
at node_modules/react-native-reanimated/src/reanimated2/NativeReanimated/NativeReanimated.ts:69:25 in enableLayoutAnimations
at http://127.0.0.1:8081/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:171636:54 in enableLayoutAnimations
at node_modules/react-native-reanimated/src/createAnimatedComponent.tsx:539:15 in setAndForwardRef$argument_0.setLocalRef
at node_modules/react-native-reanimated/src/setAndForwardRef.ts:48:10 in forwardRef

I followed the docs so I have this in my metro config.

module.exports = function (api) {
    api.cache(true);
    return {
        presets: ["babel-preset-expo"],
        plugins: [
            "react-native-reanimated/plugin",
        ],
    };
};

my app.json:

{
  "expo": {
    "name": "store",
    "slug": "store",
    "version": "1.0.0",
    "orientation": "default",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "cover",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "requireFullScreen": true,
      "bundleIdentifier": "com.*.store"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "package": "com.*.store",
      "googleServicesFile": "./google-services.json"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "plugins": [
      "@react-native-firebase/app"
    ]
  }
}

Using Dev-Client eas.

     eas-cli/0.45.1 darwin-x64 node-v14.17.2 
     "react-native-reanimated": "~2.3.1",
    "react": "17.0.1",
    "react-native": "0.64.3",

Example:

import React from "react";
import {View} from "react-native";
import Animated, {Layout, FadeIn} from "react-native-reanimated";

const App = () => {
    return (
        <Animated.View entering={FadeIn}>
            <View
                style={{
                    width: 50,
                    height: 50,
                    backgroundColor: "red",
                }}
            />
        </Animated.View>
    );
}

[adamjnav]

Hey @stevemoretz, could you create a public repro of this and open an issue here?

[stevemoretz]

Thank you for the response, sure, I’ll do it today.

[stevemoretz]

I did create that repro, turned out it worked actually there, trying to figure out what’s going on for the last two days, not a clue.

Tried to rebuild with EAS and problem went away totally weird, I’m just glad it’s gone.

Thank you for making me make that repro.