# react-native-video-fullscreen

> A element for react-native with fullscreen mode

Latest version **0.0.1** (published 2017-05-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-video-fullscreen
pnpm add react-native-video-fullscreen
yarn add react-native-video-fullscreen
bun add react-native-video-fullscreen
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2017-05-31 |
| First published | 2017-05-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Len Chen |
| Maintainers | lenchen |

## Links

- npm: https://www.npmjs.com/package/react-native-video-fullscreen
- Repository: https://github.com/12d/react-native-video-fullscreen
- Homepage: https://github.com/12d/react-native-video-fullscreen#readme
- Issues: https://github.com/12d/react-native-video-fullscreen/issues
- npm.io page: https://npm.io/package/react-native-video-fullscreen

## Dependencies (1)

- [keymirror](https://npm.io/package/keymirror.md) 0.1.1

## Recent versions

- 0.0.1 (latest) — 2017-05-31

## README

## react-native-video-fullscreen

A `<Video>` component for react-native, based on `react-native-video`

Requires react-native >= 0.41.0

### Add it to your project

Run `npm install react-native-video-fullscreen` or `yarn add react-native-video-fullscreen`

### Linking

#### Automatical
Run `react-native link`
    
#### Manual

##### 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**

```objective-c
#import <AVFoundation/AVFoundation.h>  // import

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbient error:nil];  // allow
  ...
}
```

##### 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**

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

**android/app/build.gradle**

```
dependencies {
   ...
   compile project(':react-native-video-fullscreen')
}
```

**MainApplication.java**

On top, where imports are:

```java
import com.brentvatne.react.ReactVideoPackage;
```

Under `.addPackage(new MainReactPackage())`:

```java
.addPackage(new ReactVideoPackage())
```

## Usage

```javascript
// Within your render function, assuming you have a file called
// "background.mp4" in your project. You can include multiple videos
// on a single screen if you like.

<Video source={{uri: "background"}}   // Can be a URL or a local file.
       ref={(ref) => {
         this.player = ref
       }}                             // Store reference
       rate={1.0}                     // 0 is paused, 1 is normal.
       volume={1.0}                   // 0 is muted, 1 is normal.
       muted={false}                  // Mutes the audio entirely.
       paused={false}                 // Pauses playback entirely.
       resizeMode="cover"             // Fill the whole screen at aspect ratio.
       repeat={true}                  // Repeat forever.
       playInBackground={false}       // Audio continues to play when app entering background.
       playWhenInactive={false}       // [iOS] Video continues to play when control or notification center are shown.
       progressUpdateInterval={250.0} // [iOS] Interval to fire onProgress (default to ~250ms)
       onLoadStart={this.loadStart}   // Callback when video starts to load
       onLoad={this.setDuration}      // Callback when video loads
       onProgress={this.setTime}      // Callback every ~250ms with currentTime
       onEnd={this.onEnd}             // Callback when playback finishes
       onError={this.videoError}      // Callback when video cannot be loaded
       onBuffer={this.onBuffer} // Callback when remote video is buffering
       style={styles.backgroundVideo} />

// Later to trigger fullscreen
this.player.presentFullscreenPlayer()

// To set video position in seconds (seek)
this.player.seek(0)

// Later on in your styles..
var styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});
```


## Android Expansion File Usage

```javascript
// Within your render function, assuming you have a file called
// "background.mp4" in your expansion file. Just add your main and (if applicable) patch version
<Video source={{uri: "background", mainVer: 1, patchVer: 0}} // Looks for .mp4 file (background.mp4) in the given expansion version.
       rate={1.0}                   // 0 is paused, 1 is normal.
       volume={1.0}                 // 0 is muted, 1 is normal.
       muted={false}                // Mutes the audio entirely.
       paused={false}               // Pauses playback entirely.
       resizeMode="cover"           // Fill the whole screen at aspect ratio.
       repeat={true}                // Repeat forever.
       onLoadStart={this.loadStart} // Callback when video starts to load
       onLoad={this.setDuration}    // Callback when video loads
       onProgress={this.setTime}    // Callback every ~250ms with currentTime
       onEnd={this.onEnd}           // Callback when playback finishes
       onError={this.videoError}    // Callback when video cannot be loaded
       style={styles.backgroundVideo} />

// Later on in your styles..
var styles = Stylesheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});
```

**MIT Licensed**

---
_Source: https://npm.io/package/react-native-video-fullscreen · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._