Installation
React Native Video is a library that allows you to play various kind of videos in a React Native application. It is built on top of the react-native-nitro-modules
type-safe and extremely fast native modules framework. React Native Video supports both New Architecture and Old Architecture.
Requirements
System Requirements
- iOS
15.0
or higher - Android
6.0
or higher
Minimal Package Requirements
react-native
0.75.0
or higherreact-native-nitro-modules
0.27.2
or higher
Installation
- Install dependencies:
npm install react-native-video@next react-native-nitro-modules
- Configure Library: You can configure the library in two ways:
- Run the project: If you are using Expo, you will need to generate native files:
npx expo prebuild
And then run the project:
npx expo run:ios # run on iOS
npx expo run:android # run on Android
If you are using React Native CLI, you will need to install Pods for iOS:
cd ios && pod install && cd ..
And then run the project:
npx react-native run-ios # run on iOS
npx react-native run-android # run on Android
Patch for react-native < 0.80
react-native
< 0.80 have bug that prevents to properly handle errors by nitro modules on Android.
We highly recommend to apply bellow patch for react-native-nitro-modules
to fix this issue.
You can apply it using patch-package
.
warning
Without this patch you won't be able "recognize" errors, all will be thrown as unknown errors.
For react-native-nitro-modules
0.27.X or higher
diff --git a/node_modules/react-native-nitro-modules/cpp/core/HybridFunction.hpp b/node_modules/react-native-nitro-modules/cpp/core/HybridFunction.hpp
index efcea05..ffad3f2 100644
--- a/node_modules/react-native-nitro-modules/cpp/core/HybridFunction.hpp
+++ b/node_modules/react-native-nitro-modules/cpp/core/HybridFunction.hpp
@@ -23,6 +23,10 @@ struct JSIConverter;
#include <string>
#include <type_traits>
+#ifdef ANDROID
+#include <fbjni/fbjni.h>
+#endif
+
namespace margelo::nitro {
using namespace facebook;
@@ -109,6 +113,15 @@ public:
std::string funcName = getHybridFuncFullName<THybrid>(kind, name, hybridInstance.get());
std::string message = exception.what();
throw jsi::JSError(runtime, funcName + ": " + message);
+#ifdef ANDROID
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wexceptions"
+ } catch (const jni::JniException& exception) {
+ std::string funcName = getHybridFuncFullName<THybrid>(kind, name, hybridInstance.get());
+ std::string message = exception.what();
+ throw jsi::JSError(runtime, funcName + ": " + message);
+#pragma clang diagnostic pop
+#endif
} catch (...) {
// Some unknown exception was thrown - add method name information and re-throw as `JSError`.
std::string funcName = getHybridFuncFullName<THybrid>(kind, name, hybridInstance.get());
see raw
Usage
App.tsx
import { VideoView, useVideoPlayer } from 'react-native-video';
export default function App() {
const player = useVideoPlayer({
source: {
uri: 'https://www.w3schools.com/html/mov_bbb.mp4',
},
});
return <VideoView player={player} />;
}
We are TheWidlarzGroupPremium support →