npmpackage.info

Gathering detailed insights and metrics for react-native-czb-video

react-native-czb-video - 1.0.0 | npmpackage.info

react-native-czb-video

A <Video /> component for react-native

1.0.0

7,451

MIT

Swift

454.97 kB

5.2

Installations

npm install react-native-czb-video

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

8.9.3

NPM Version

5.5.1 Pull Requests

Open

15

Total

1,318

Closed

346

Merged

957

Issues

Open

158

Total

3,196

Closed

3,038

Releases

v6.16.1

Updated on Jul 08, 2025

v7.0.0-alpha.1

Updated on Jul 07, 2025

v6.16.0

Updated on Jul 02, 2025

v7.0.0-alpha.0

Updated on Jun 30, 2025

v6.15.0

Updated on Jun 12, 2025

v6.14.0

Updated on May 10, 2025

View All 62 releases

Languages

Swift

Kotlin

Java

TypeScript

C++

Objective-C

Ruby

Shell

Nix

JavaScript

Swift (31.68%)

Kotlin (25.18%)

Java (20.44%)

TypeScript (15.85%)

C++ (3.56%)

Objective-C (2.48%)

Ruby (0.46%)

Shell (0.19%)

C (0.12%)

Nix (0.04%)

JavaScript (0.01%)

Developer

brentvatne

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

7,451 Stars

2,474 Commits

2,975 Forks

107 Watchers

24 Branches

328 Contributors

Updated on Jul 13, 2025

Maintainers

View All 328 Contributors

Package Meta Information

Latest Version

1.0.0

Package Id

react-native-czb-video@1.0.0

Unpacked Size

454.97 kB

Size

213.56 kB

File Count

NPM Version

5.5.1

Node Version

8.9.3

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

keymirror prop-types

Dev Dependencies

jest-cli eslint babel-eslint eslint-plugin-react eslint-config-airbnb

react-native-video

A <Video> component for react-native, as seen in react-native-login!

Requires react-native >= 0.40.0, for RN support of 0.19.0 - 0.39.0 please use a pre 1.0 version.

Add it to your project

Run npm i -S react-native-video

iOS

Run react-native link to link the react-native-video library.

If you would like to allow other apps to play music over your video component, add:

AppDelegate.m

1#import <AVFoundation/AVFoundation.h>  // import
2
3- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
4{
5  ...
6  [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbient error:nil];  // allow
7  ...
8}

Note: you can also use the ignoreSilentSwitch prop, shown below.

tvOS

Run react-native link to link the react-native-video library.

react-native link don’t works properly with the tvOS target so we need to add the library manually.

First select your project in Xcode.

After that, select the tvOS target of your application and select « General » tab

Scroll to « Linked Frameworks and Libraries » and tap on the + button

Select RCTVideo-tvOS

That’s all, you can use react-native-video for your tvOS application

Android

Run react-native link to link the react-native-video library.

Or if you have trouble, make the following additions to the given files manually:

android/settings.gradle

1include ':react-native-video'
2project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')

android/app/build.gradle

1dependencies {
2   ...
3   compile project(':react-native-video')
4}

MainApplication.java

On top, where imports are:

1import com.brentvatne.react.ReactVideoPackage;

Add the ReactVideoPackage class to your list of exported packages.

1@Override
2protected List<ReactPackage> getPackages() {
3    return Arrays.asList(
4            new MainReactPackage(),
5            new ReactVideoPackage()
6    );
7}

Windows

Make the following additions to the given files manually:

windows/myapp.sln

Add the ReactNativeVideo project to your solution.

Open the solution in Visual Studio 2015
Right-click Solution icon in Solution Explorer > Add > Existing Project...

UWP: Select node_modules\react-native-video\windows\ReactNativeVideo\ReactNativeVideo.csproj WPF: Select node_modules\react-native-video\windows\ReactNativeVideo.Net46\ReactNativeVideo.Net46.csproj

windows/myapp/myapp.csproj

Add a reference to ReactNativeVideo to your main application project. From Visual Studio 2015:

Right-click main application project > Add > Reference...

UWP: Check ReactNativeVideo from Solution Projects. WPF: Check ReactNativeVideo.Net46 from Solution Projects.

MainPage.cs

Add the ReactVideoPackage class to your list of exported packages.

1using ReactNative;
2using ReactNative.Modules.Core;
3using ReactNative.Shell;
4using ReactNativeVideo; // <-- Add this
5using System.Collections.Generic;
6...
7
8        public override List<IReactPackage> Packages
9        {
10            get
11            {
12                return new List<IReactPackage>
13                {
14                    new MainReactPackage(),
15                    new ReactVideoPackage(), // <-- Add this
16                };
17            }
18        }
19
20...

Usage

1// Within your render function, assuming you have a file called
2// "background.mp4" in your project. You can include multiple videos
3// on a single screen if you like.
4
5<Video source={{uri: "background"}}   // Can be a URL or a local file.
6       poster="https://baconmockup.com/300/200/" // uri to an image to display until the video plays
7       ref={(ref) => {
8         this.player = ref
9       }}                                      // Store reference
10       rate={1.0}                              // 0 is paused, 1 is normal.
11       volume={1.0}                            // 0 is muted, 1 is normal.
12       muted={false}                           // Mutes the audio entirely.
13       paused={false}                          // Pauses playback entirely.
14       resizeMode="cover"                      // Fill the whole screen at aspect ratio.*
15       repeat={true}                           // Repeat forever.
16       playInBackground={false}                // Audio continues to play when app entering background.
17       playWhenInactive={false}                // [iOS] Video continues to play when control or notification center are shown.
18       ignoreSilentSwitch={"ignore"}           // [iOS] ignore | obey - When 'ignore', audio will still play with the iOS hard silent switch set to silent. When 'obey', audio will toggle with the switch. When not specified, will inherit audio settings as usual.
19       progressUpdateInterval={250.0}          // [iOS] Interval to fire onProgress (default to ~250ms)
20       onLoadStart={this.loadStart}            // Callback when video starts to load
21       onLoad={this.setDuration}               // Callback when video loads
22       onProgress={this.setTime}               // Callback every ~250ms with currentTime
23       onEnd={this.onEnd}                      // Callback when playback finishes
24       onError={this.videoError}               // Callback when video cannot be loaded
25       onBuffer={this.onBuffer}                // Callback when remote video is buffering
26       onTimedMetadata={this.onTimedMetadata}  // Callback when the stream receive some metadata
27       style={styles.backgroundVideo} />
28
29// Later to trigger fullscreen
30this.player.presentFullscreenPlayer()
31
32// To set video position in seconds (seek)
33this.player.seek(0)
34
35// Later on in your styles..
36var styles = StyleSheet.create({
37  backgroundVideo: {
38    position: 'absolute',
39    top: 0,
40    left: 0,
41    bottom: 0,
42    right: 0,
43  },
44});

- For iOS you also need to specify muted for this to work

To see full list of available props, you can check the propTypes of the Video.js component.

Android Expansion File Usage

1// Within your render function, assuming you have a file called
2// "background.mp4" in your expansion file. Just add your main and (if applicable) patch version
3<Video source={{uri: "background", mainVer: 1, patchVer: 0}} // Looks for .mp4 file (background.mp4) in the given expansion version.
4       poster="https://baconmockup.com/300/200/" // uri to an image to display until the video plays
5       rate={1.0}                   // 0 is paused, 1 is normal.
6       volume={1.0}                 // 0 is muted, 1 is normal.
7       muted={false}                // Mutes the audio entirely.
8       paused={false}               // Pauses playback entirely.
9       resizeMode="cover"           // Fill the whole screen at aspect ratio.
10       repeat={true}                // Repeat forever.
11       onLoadStart={this.loadStart} // Callback when video starts to load
12       onLoad={this.setDuration}    // Callback when video loads
13       onProgress={this.setTime}    // Callback every ~250ms with currentTime
14       onEnd={this.onEnd}           // Callback when playback finishes
15       onError={this.videoError}    // Callback when video cannot be loaded
16       style={styles.backgroundVideo} />
17
18// Later on in your styles..
19var styles = Stylesheet.create({
20  backgroundVideo: {
21    position: 'absolute',
22    top: 0,
23    left: 0,
24    bottom: 0,
25    right: 0,
26  },
27});

Load files with the RN Asset System

The asset system introduced in RN 0.14 allows loading image resources shared across iOS and Android without touching native code. As of RN 0.31 the same is true of mp4 video assets for Android. As of RN 0.33 iOS is also supported. Requires react-native-video@0.9.0.

<Video
  repeat
  resizeMode='cover'
  source={require('../assets/video/turntable.mp4')}
  style={styles.backgroundVideo}
/>

Play in background on iOS

To enable audio to play in background on iOS the audio session needs to be set to AVAudioSessionCategoryPlayback. See Apple documentation for additional details. (NOTE: there is now a ticket to expose this as a prop )

Static Methods

seek(seconds)

Seeks the video to the specified time (in seconds). Access using a ref to the component

presentFullscreenPlayer()

Toggles a fullscreen player. Access using a ref to the component.

Examples

See an Example integration in react-native-login note that this example uses an older version of this library, before we used export default -- if you use require you will need to do require('react-native-video').default as per instructions above.

Try the included VideoPlayer example yourself:

1git clone git@github.com:react-native-community/react-native-video.git
2cd react-native-video/example
3npm install
4open ios/VideoPlayer.xcodeproj
5

Then Cmd+R to start the React Packager, build and run the project in the simulator.

Lumpen Radio contains another example integration using local files and full screen background video.

TODOS

Add support for captions
Add support for playing multiple videos in a sequence (will interfere with current repeat implementation)
Callback to get buffering progress for remote videos
Bring API closer to HTML5 <Video> reference

MIT Licensed

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

8

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

5

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

1

SAST

Determines if the project uses static code analysis.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-android.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/build-android.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-android.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/build-android.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-android.yml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/build-android.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-android.yml:64: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/build-android.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-android.yml:67: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/build-android.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-android.yml:87: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/build-android.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-ios.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/build-ios.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/build-ios.yml:45: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/build-ios.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/build-ios.yml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/build-ios.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-ios.yml:55: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/build-ios.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-ios.yml:92: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/build-ios.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/build-ios.yml:109: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/build-ios.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/build-ios.yml:113: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/build-ios.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-ios.yml:119: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/build-ios.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-ios.yml:156: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/build-ios.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/build-ios.yml:173: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/build-ios.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/build-ios.yml:177: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/build-ios.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-ios.yml:183: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/build-ios.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-android.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/check-android.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/check-android.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/check-android.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-android.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/check-android.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-clang.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/check-clang.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-ios.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/check-ios.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-ios.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/check-ios.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/check-ios.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/check-ios.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-js.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/check-js.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/check-js.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/check-js.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-js.yml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/check-js.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-docs.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/deploy-docs.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-docs.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/deploy-docs.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-docs.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/deploy-docs.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stale.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/stale.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-build-docs.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/test-build-docs.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-build-docs.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/test-build-docs.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/validate-issue.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/validate-issue.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/validate-issue.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/TheWidlarzGroup/react-native-video/validate-issue.yml/master?enable=pin
Info: 0 out of 26 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 10 third-party GitHubAction dependencies pinned

Score

5.2

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More