info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag. Jetifier found 1231 file(s) to forward-jetify. Using 10 workers... info JS server already running. info Installing the app... WARNING:: The specified Android SDK Build Tools version (29.0.2) is ignored, as it is below the minimum supported version (30.0.2) for Android Gradle Plugin 4.2.2. Android SDK Build Tools 30.0.2 will be used. To suppress this warning, remove "buildToolsVersion '29.0.2'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools. Show
Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0. You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins. See https://docs.gradle.org/7.2/userguide/command_line_interface.html#sec:command_line_warnings 11 actionable tasks: 2 executed, 9 up-to-date FAILURE: Build failed with an exception.
BUILD FAILED in 9s error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build failed with an exception.
BUILD FAILED in 9s at makeError (/Users/imsamaah/Apps/raajjemv/node_modules/@react-native-community/cli-platform-android/node_modules/execa/index.js:174:9) at /Users/imsamaah/Apps/raajjemv/node_modules/@react-native-community/cli-platform-android/node_modules/execa/index.js:278:16 at processTicksAndRejections (node:internal/process/task_queues:96:5) at async runOnAllDevices (/Users/imsamaah/Apps/raajjemv/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:109:5) at async Command.handleAction (/Users/imsamaah/Apps/raajjemv/node_modules/@react-native-community/cli/build/index.js:192:9)info Run CLI with --verbose flag for more details. PlatformIt happens only in android. in IOS it works fine Which player are you experiencing the problem on: Environment infoSystem: OS: macOS 12.1 CPU: (10) arm64 Apple M1 Pro Memory: 264.20 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 17.5.0 - /opt/homebrew/bin/node Yarn: Not Found npm: 8.4.1 - /opt/homebrew/bin/npm Watchman: 2022.02.14.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.2 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3 Android SDK: API Levels: 23, 25, 28, 29, 30 Build Tools: 29.0.2, 30.0.2 System Images: android-29 | ARM 64 v8a, android-29 | Google APIs ARM 64 v8a, android-32 | Google APIs ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: 2020.3 AI-203.7717.56.2031.7935034 Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild Languages: Java: 11.0.11 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.67.2 => 0.67.2 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found React native info output: Library version: x.x.x Steps To Reproduce1.npm install --save react-native-video 2.npx react-native run-android ... Web Illustrations by Storyset For the last few months, I have been working on a React Native multimedia app. We already supported reading articles and listening to podcasts, but the problem started when we began to implement the video player. The app crashed, video player didn’t render as expected, and we couldn’t integrate it with the rest of the application! In this article, I’ll describe how we overcame these difficulties and embedded videos inside a React Native mobile app using react-native-video. react-native-video is the most popular video library for React Native. The other libraries like expo-video-player or expo-av require Expo modules to run, and since we weren’t using Expo in our project, we didn’t want to spend time setting up our environment. Little did we know that using react-native-video wouldn’t be a walk in the park... To replicate our app, let’s create a new react native app (npx react-native init MultimediaApp), install the react-native-video (yarn add react-native-video) and update App.tsx to add a simple video component: import Video from 'react-native-video'; const videoStyle = { position: 'absolute', top: 0, left: 0, bottom: 0, right: 0, height: 250, }; const viewStyle = {height: 250}; ... <Section title="Step One">The example video:</Section> <View style={viewStyle}> <Video source={{ uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', }} style={videoStyle} controls={true} resizeMode="cover" hideShutterView={true} paused={true} /> </View> Now, let’s try to run the app! IOS:It should all work fine! In our case, the app ran successfully with no errors. The video player looked like this:  AndroidThe app doesn’t runUnfortunately, things weren’t that smooth with Android. The app didn't even run, and I got the following error: FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:checkDebugAarMetadata'. > Could not resolve all files for configuration ':app:debugRuntimeClasspath'. > Could not find com.yqritc:android-scalablevideoview:1.0.4. Searched in the following locations: - https://repo.maven.apache.org/maven2/com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4.pom ... Required by: project :app > project :react-native-video Luckily, it turned out it’s quite a common issue with an easy fix. It happens because jcenter() was removed from React Native v0.65+, but react-native-video still uses it. To fix it, we need to declare the jcenter() to our build, inside android/build.gradle: allprojects { repositories { (...) jcenter() } } Video player doesn’t render as expected, and the app may crashI was relieved to find that the app was no longer crashing. However, I noticed that the video player still didn’t render as expected! It stopped playing whilst off-screen, and when I scrolled, the video control panel moved while the video stayed in place. Sometimes when I scrolled too fast the app crashed. The app didn't return any errors, so it was really hard to debug. The issues on the react-native-video GitHub page helped me to find an answer. This buggy rendering happens because the react-native-video doesn’t use the ExoPlayer by default. To switch the app to use ExoPlayer, we need to create a react-native.config file on the project root level and add the following: module.exports = { dependencies: { "react-native-video": { platforms: { android: { sourceDir: "../node_modules/react-native-video/android-exoplayer", }, }, }, }, }; For React Native 0.60 and above, the package is linked to the project automatically, but, as official library documentation suggests, if you have trouble, try linking the react-native-videomanually by following the library documentation. Phew! That was quite a journey! Our app should now support videos for both IOS and Android! Let’s talk about one more case - what if the app supports both video and audio? The app doesn’t work with react-native-track-playerThis was the hardest part to debug. Again, no useful errors were printed, the app compiled, but it crashed immediately after opening. Initially, I didn’t know it was an issue with react-native-track-player, so I wasn’t sure what to look for when finding solutions. To find the root cause, I created a simple app and followed all the steps above to install react-native-video to ensure that it is not just a react-native-video problem anymore. When I started reading more about the packages we’re using, it turned out react-native-video and react-native-track-player are using the same package dependency: android-exoplayer. This package is being installed in both places and because react-native-video and react-native-track-player use different, incompatible versions of android-exoplayer, the app crashes immediately after opening. To fix it, we need to unify the version of android-exoplayer manually. The easiest solution is to use patch-package, following the steps described here. ConclusionsUsing react-native-video can be tricky, especially for Android, but I hope this article will make your development process much easier! If you’d like to see a detailed review of react-native-video, I’m currently writing an article that compares it with expo-av and expo-video-player, so stay tuned! 😊 |
Could not find com.yqritc:android-scalablevideoview:1.0.4. required by: project :react-native-video
Pos Terkait
Copyright © 2024 kemunculan Inc.
