Npx expo run:android failed after installing @config-plugins/ffmpeg-kit-react-native

[Himly1]

Summary

I installed the ffmpeg-kit-react-native and the @config-plugins/ffmpeg-kit-react-native with the following command

npm install  ffmpeg-kit-react-native @config-plugins/ffmpeg-kit-react-native 

And here is the content of the plugins property of my app.json file

"plugins": [
      [
        "expo-image-picker",
        {
          "photosPermission": "The app accesses your photos to let you share them with your friends."
        }
      ],
      [
        "expo-media-library",
        {
          "photosPermission": "Allow wys to access your photos",
          "savePhotosPermission": "Allow wys to save photos.",
          "isAccessMediaLocationEnabled": true
        }
      ],
      ["@config-plugins/ffmpeg-kit-react-native"]
    ]

I expected when I run the npx expo run:android will run the android but got the error as following

CommandError: Cannot find module 'expo-build-properties'
Require stack:
- /home/zxw/Desktop/wys/wys_mobile/node_modules/@config-plugins/ffmpeg-kit-react-native/build/withFFMPEG.js
- /home/zxw/Desktop/wys/wys_mobile/node_modules/@config-plugins/ffmpeg-kit-react-native/app.plugin.js
- /home/zxw/Desktop/wys/wys_mobile/node_modules/@expo/config-plugins/build/utils/plugin-resolver.js
- /home/zxw/Desktop/wys/wys_mobile/node_modules/@expo/config-plugins/build/plugins/withStaticPlugin.js
- /home/zxw/Desktop/wys/wys_mobile/node_modules/@expo/config-plugins/build/plugins/withPlugins.js
- /home/zxw/Desktop/wys/wys_mobile/node_modules/@expo/config-plugins/build/index.js
- /home/zxw/Desktop/wys/wys_mobile/node_modules/@expo/cli/build/src/utils/scheme.js
- /home/zxw/Desktop/wys/wys_mobile/node_modules/@expo/cli/build/src/run/android/runAndroidAsync.js
- /home/zxw/Desktop/wys/wys_mobile/node_modules/@expo/cli/build/src/run/android/index.js
- /home/zxw/Desktop/wys/wys_mobile/node_modules/@expo/cli/build/bin/cli

Config Plugin

@config-plugins/ffmpeg-kit-react-native

What platform(s) does this occur on?

Android

SDK Version

~47.0.6

Reproducible demo

package.json file

{
  "name": "wys_mobile",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@config-plugins/ffmpeg-kit-react-native": "^4.0.0",
    "@expo/vector-icons": "^13.0.0",
    "@tensorflow/tfjs": "^4.0.0",
    "expo": "~47.0.6",
    "expo-image-picker": "~14.0.1",
    "expo-media-library": "~15.0.0",
    "expo-status-bar": "~1.4.2",
    "expo-video-thumbnails": "~7.0.0",
    "ffmpeg-kit-react-native": "^5.1.0",
    "native-base": "^3.4.22",
    "react": "18.1.0",
    "react-devtools": "^4.26.1",
    "react-dom": "18.0.0",
    "react-native": "0.70.5",
    "react-native-safe-area-context": "4.4.1",
    "react-native-svg": "13.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

App.json file

{
  "expo": {
    "name": "wys_mobile",
    "slug": "wys_mobile",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/logo.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/logo.png",
      "resizeMode": "contain",
      "backgroundColor": "#5b86e5"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "./assets/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/logo.png",
        "backgroundColor": "#5b86e5"
      },
      "permissions": [
        "android.permission.RECORD_AUDIO",
        "android.permission.READ_EXTERNAL_STORAGE",
        "android.permission.WRITE_EXTERNAL_STORAGE"
      ],
      "package": "org.zhengMa"
    },
    "web": {
      "favicon": "./assets/logo.png"
    },
    "plugins": [
      [
        "expo-image-picker",
        {
          "photosPermission": "The app accesses your photos to let you share them with your friends."
        }
      ],
      [
        "expo-media-library",
        {
          "photosPermission": "Allow wys to access your photos",
          "savePhotosPermission": "Allow wys to save photos.",
          "isAccessMediaLocationEnabled": true
        }
      ],
      ["@config-plugins/ffmpeg-kit-react-native"]
    ],
    "extra": {
      "eas": {
        "projectId": "990bb34a-7357-42a1-a239-c0d313af8f9c"
      }
    }
  }
}

eas.json file

{
  "cli": {
    "version": ">= 2.7.1"
  },
  "build": {
    "development": {
      "developmentClient": true
    },
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "preview2": {
      "android": {
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "preview3": {
      "developmentClient": true
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

[Himly1]

I fixed it by myself, What I missing is the package expo-build-properties How to solve this ? First install the package above

npm install expo-build-properties

After the installation done add an item to the plugins property of the App.json file

"plugins": [
      [
        "expo-image-picker",
        {
          "photosPermission": "The app accesses your photos to let you share them with your friends."
        }
      ],
      [
        "expo-media-library",
        {
          "photosPermission": "Allow wys to access your photos",
          "savePhotosPermission": "Allow wys to save photos.",
          "isAccessMediaLocationEnabled": true
        }
      ],
      [
        "expo-build-properties",
        {
          "android": {
            "minSdkVersion": 24
          }
        }
      ],
      ["@config-plugins/ffmpeg-kit-react-native"]
    ]