Installation

Using npm:

1

npm install --save react-native-video

or using yarn:

1

yarn add react-native-video

Then follow the instructions for your platform to link react-native-video into your project:

iOS installation

1
2
3

  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
+  `pod 'react-native-video', :path => '../node_modules/react-native-video/react-native-video.podspec'`
end

1
2
3

  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
+  `pod 'react-native-video/VideoCaching', :path => '../node_modules/react-native-video/react-native-video.podspec'`
end

1

$RNVideoUseGoogleIMA=true

tvOS installation

tvOS details

react-native link react-native-video doesn’t work 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

Android installation

1
2

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

1
2
3
4
5
6
7

dependencies {
   ...
    compile project(':react-native-video')
+   implementation "androidx.appcompat:appcompat:1.0.0"
-   implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"

}

1
2

android.useAndroidX=true
android.enableJetifier=true

1

import com.brentvatne.react.ReactVideoPackage;

1
2
3
4
5
6
7

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
            new MainReactPackage(),
            new ReactVideoPackage()
    );
}

1
2
3
4
5
6
7

buildscript {
  ext {
    ...
    RNVUseExoplayerIMA = true
    ...
  }
}

Windows installation

Examples

Run yarn xbasic install in the root directory before running any of the examples.

iOS Example

1

yarn xbasic ios

Android Example

1

yarn xbasic android

Windows Example

1

yarn xbasic windows

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// Load the module

import Video from 'react-native-video';

// 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
       onBuffer={this.onBuffer}                // Callback when remote video is buffering
       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,
  },
});

Configurable props

Event props

Methods

Static methods

Configurable props

adTagUrl

Sets the VAST uri to play AVOD ads.

Example:

1

adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpremidpostoptimizedpodbumper&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&cmsid=496&vid=short_onecue&correlator="

Note: On android, you need enable IMA SDK in gradle file, see: enableclient side ads insertion

Platforms: Android, iOS

allowsExternalPlayback

Indicates whether the player allows switching to external playback mode such as AirPlay or HDMI.

• true (default) - allow switching to external playback mode
• false - Don’t allow switching to external playback mode

Platforms: iOS

audioOnly

Indicates whether the player should only play the audio track and instead of displaying the video track, show the poster instead.

• false (default) - Display the video as normal
• true - Show the poster and play the audio

For this to work, the poster prop must be set.

Platforms: all

automaticallyWaitsToMinimizeStalling

A Boolean value that indicates whether the player should automatically delay playback in order to minimize stalling. For clients linked against iOS 10.0 and later

• false - Immediately starts playback
• true (default) - Delays playback in order to minimize stalling

Platforms: iOS

backBufferDurationMs

The number of milliseconds of buffer to keep before the current position. This allows rewinding without rebuffering within that duration.

Platforms: Android

bufferConfig

Adjust the buffer settings. This prop takes an object with one or more of the properties listed below.

This prop should only be set when you are setting the source, changing it after the media is loaded will cause it to be reloaded.

Example with default values:

1
2
3
4
5
6

bufferConfig={{
  minBufferMs: 15000,
  maxBufferMs: 50000,
  bufferForPlaybackMs: 2500,
  bufferForPlaybackAfterRebufferMs: 5000
}}

Platforms: Android

currentPlaybackTime

When playing an HLS live stream with a EXT-X-PROGRAM-DATE-TIME tag configured, then this property will contain the epoch value in msec.

Platforms: Android, iOS

controls

Determines whether to show player controls.

• false (default) - Don’t show player controls
• true - Show player controls

Note on iOS, controls are always shown when in fullscreen mode.
Note on Android, native controls are available by default.
If needed, you can also add your controls or use a package like react-native-video-controls or react-native-media-console, see Usefull Side Project.

contentStartTime

The start time in ms for SSAI content. This determines at what time to load the video info like resolutions. Use this only when you have SSAI stream where ads resolution is not the same as content resolution.

Platforms: Android, iOS

disableFocus

Determines whether video audio should override background music/audio in Android devices.

• false (default) - Override background audio/music
• true - Let background audio/music from other apps play

Note: Allows multiple videos to play if set to true. If false, when one video is playing and another is started, the first video will be paused.

Platforms: Android

disableDisconnectError

Determines if the player needs to throw an error when connection is lost or not

• false (default) - Player will throw an error when connection is lost
• true - Player will keep trying to buffer when network connect is lost

Platforms: Android

DRM

To setup DRM please follow this guide

Platforms: Android, iOS

filter

Add video filter

• FilterType.NONE (default) - No Filter
• FilterType.INVERT - CIColorInvert
• FilterType.MONOCHROME - CIColorMonochrome
• FilterType.POSTERIZE - CIColorPosterize
• FilterType.FALSE - CIFalseColor
• FilterType.MAXIMUMCOMPONENT - CIMaximumComponent
• FilterType.MINIMUMCOMPONENT - CIMinimumComponent
• FilterType.CHROME - CIPhotoEffectChrome
• FilterType.FADE - CIPhotoEffectFade
• FilterType.INSTANT - CIPhotoEffectInstant
• FilterType.MONO - CIPhotoEffectMono
• FilterType.NOIR - CIPhotoEffectNoir
• FilterType.PROCESS - CIPhotoEffectProcess
• FilterType.TONAL - CIPhotoEffectTonal
• FilterType.TRANSFER - CIPhotoEffectTransfer
• FilterType.SEPIA - CISepiaTone

For more details on these filters refer to the iOS docs.

Notes:

1. Using a filter can impact CPU usage. A workaround is to save the video with the filter and then load the saved video.
2. Video filter is currently not supported on HLS playlists.
3. filterEnabled must be set to true

Platforms: iOS

filterEnabled

Enable video filter.

• false (default) - Don’t enable filter
• true - Enable filter

Platforms: iOS

Focusable

Whether this video view should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.

• false - Makes view unfocusable
• true (default) - Makes view focusable

Platforms: Android

fullscreen

Controls whether the player enters fullscreen on play.

• false (default) - Don’t display the video in fullscreen
• true - Display the video in fullscreen

Platforms: iOS

fullscreenAutorotate

If a preferred fullscreenOrientation is set, causes the video to rotate to that orientation but permits rotation of the screen to orientation held by user. Defaults to TRUE.

Platforms: iOS

fullscreenOrientation

• all (default) -
• landscape
• portrait

Platforms: iOS

headers

Pass headers to the HTTP client. Can be used for authorization. Headers must be a part of the source object.

Example:

1
2
3
4
5
6
7

source={{
  uri: "https://www.example.com/video.mp4",
  headers: {
    Authorization: 'bearer some-token-value',
    'X-Custom-Header': 'some value'
  }
}}

Platforms: Android

hideShutterView

Controls whether the ExoPlayer shutter view (black screen while loading) is enabled.

• false (default) - Show shutter view
• true - Hide shutter view

Platforms: Android

ignoreSilentSwitch

Controls the iOS silent switch behavior

• “inherit” (default) - Use the default AVPlayer behavior
• “ignore” - Play audio even if the silent switch is set
• “obey” - Don’t play audio if the silent switch is set

Platforms: iOS

maxBitRate

Sets the desired limit, in bits per second, of network bandwidth consumption when multiple video streams are available for a playlist.

Default: 0. Don’t limit the maxBitRate.

Example:

1

maxBitRate={2000000} // 2 megabits

Platforms: Android, iOS

minLoadRetryCount

Sets the minimum number of times to retry loading data before failing and reporting an error to the application. Useful to recover from transient internet failures.

Default: 3. Retry 3 times.

Example:

1

minLoadRetryCount={5} // retry 5 times

Platforms: Android

mixWithOthers

Controls how Audio mix with other apps.

• “inherit” (default) - Use the default AVPlayer behavior
• “mix” - Audio from this video mixes with audio from other apps.
• “duck” - Reduces the volume of other apps while audio from this video plays.

Platforms: iOS

muted

Controls whether the audio is muted

• false (default) - Don’t mute audio
• true - Mute audio

Platforms: all

paused

Controls whether the media is paused

• false (default) - Don’t pause the media
• true - Pause the media

Platforms: all

pictureInPicture

Determine whether the media should played as picture in picture.

• false (default) - Don’t not play as picture in picture
• true - Play the media as picture in picture

Platforms: iOS

playInBackground

Determine whether the media should continue playing while the app is in the background. This allows customers to continue listening to the audio.

• false (default) - Don’t continue playing the media
• true - Continue playing the media

To use this feature on iOS, you must:

• Enable Background Audio in your Xcode project
• Set the ignoreSilentSwitch prop to “ignore”

Platforms: Android, iOS

playWhenInactive

Determine whether the media should continue playing when notifications or the Control Center are in front of the video.

• false (default) - Don’t continue playing the media
• true - Continue playing the media

Platforms: iOS

poster

An image to display while the video is loading

Value: string with a URL for the poster, e.g. “https://baconmockup.com/300/200/“

Platforms: all

posterResizeMode

Determines how to resize the poster image when the frame doesn’t match the raw video dimensions.

• “contain” (default) - Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
• “center” - Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.
• “cover” - Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
• “none” - Don’t apply resize
• “repeat” - Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio. (iOS only)
• “stretch” - Scale width and height independently, This may change the aspect ratio of the src.

Platforms: all

preferredForwardBufferDuration

The duration the player should buffer media from the network ahead of the playhead to guard against playback disruption. Sets the preferredForwardBufferDuration instance property on AVPlayerItem.

Default: 0

Platforms: iOS

preventsDisplaySleepDuringVideoPlayback

Controls whether or not the display should be allowed to sleep while playing the video. Default is not to allow display to sleep.

Default: true

Platforms: iOS, Android

progressUpdateInterval

Delay in milliseconds between onProgress events in milliseconds.

Default: 250.0

Platforms: all

rate

Speed at which the media should play.

• 0.0 - Pauses the video
• 1.0 - Play at normal speed
• Other values - Slow down or speed up playback

Platforms: all

repeat

Determine whether to repeat the video when the end is reached

• false (default) - Don’t repeat the video
• true - Repeat the video

Platforms: all

onAudioTracks

Callback function that is called when audio tracks change

Payload:

Example:

1
2
3
4
5
6

{
  audioTracks: [
    { language: 'es', title: 'Spanish', type: 'audio/mpeg', index: 0, selected: true },
    { language: 'en', title: 'English', type: 'audio/mpeg', index: 1 }
  ],
}

Platforms: Android

reportBandwidth

Determine whether to generate onBandwidthUpdate events. This is needed due to the high frequency of these events on ExoPlayer.

• false (default) - Don’t generate onBandwidthUpdate events
• true - Generate onBandwidthUpdate events

Platforms: Android

resizeMode

Determines how to resize the video when the frame doesn’t match the raw video dimensions.

• “none” (default) - Don’t apply resize
• “contain” - Scale the video uniformly (maintain the video’s aspect ratio) so that both dimensions (width and height) of the video will be equal to or less than the corresponding dimension of the view (minus padding).
• “cover” - Scale the video uniformly (maintain the video’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
• “stretch” - Scale width and height independently, This may change the aspect ratio of the src.

Platforms: Android, iOS, Windows UWP

selectedAudioTrack

Configure which audio track, if any, is played.

1
2
3
4

selectedAudioTrack={{
  type: Type,
  value: Value
}}

Example:

1
2
3
4

selectedAudioTrack={{
  type: "title",
  value: "Dubbing"
}}

If a track matching the specified Type (and Value if appropriate) is unavailable, the first audio track will be played. If multiple tracks match the criteria, the first match will be used.

Platforms: Android, iOS

selectedTextTrack

Configure which text track (caption or subtitle), if any, is shown.

1
2
3
4

selectedTextTrack={{
  type: Type,
  value: Value
}}

Example:

1
2
3
4

selectedTextTrack={{
  type: "title",
  value: "English Subtitles"
}}

Both iOS & Android (only 4.4 and higher) offer Settings to enable Captions for hearing impaired people. If “system” is selected and the Captions Setting is enabled, iOS/Android will look for a caption that matches that customer’s language and display it.

If a track matching the specified Type (and Value if appropriate) is unavailable, no text track will be displayed. If multiple tracks match the criteria, the first match will be used.

Platforms: Android, iOS

selectedVideoTrack

Configure which video track should be played. By default, the player uses Adaptive Bitrate Streaming to automatically select the stream it thinks will perform best based on available bandwidth.

1
2
3
4

selectedVideoTrack={{
  type: Type,
  value: Value
}}

Example:

1
2
3
4

selectedVideoTrack={{
  type: "resolution",
  value: 480
}}

If a track matching the specified Type (and Value if appropriate) is unavailable, ABR will be used.

Platforms: Android

source

Sets the media source. You can pass an asset loaded via require or an object with a uri.

Setting the source will trigger the player to attempt to load the provided media with all other given props. Please be sure that all props are provided before/at the same time as setting the source.

Rendering the player component with a null source will init the player, and start playing once a source value is provided.

Providing a null source value after loading a previous source will stop playback, and clear out the previous source content.

The docs for this prop are incomplete and will be updated as each option is investigated and tested.

Asset loaded via require

Example:

1
2
3

const sintel = require('./sintel.mp4');

source={sintel}

URI string

A number of URI schemes are supported by passing an object with a uri attribute.

Web address (http://, https://)

Example:

1

source={{uri: 'https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_10mb.mp4' }}

Platforms: all

File path (file://)

Example:

1

source={{ uri: 'file:///sdcard/Movies/sintel.mp4' }}

Note: Your app will need to request permission to read external storage if you’re accessing a file outside your app.

Platforms: Android, possibly others

iPod Library (ipod-library://)

Path to a sound file in your iTunes library. Typically shared from iTunes to your app.

Example:

1

source={{ uri: 'ipod-library:///path/to/music.mp3' }}

Note: Using this feature adding an entry for NSAppleMusicUsageDescription to your Info.plist file as described here

Platforms: iOS

Explicit mimetype for the stream

Provide a member type with value (mpd/m3u8/ism) inside the source object.
Sometimes is needed when URL extension does not match with the mimetype that you are expecting, as seen on the next example. (Extension is .ism -smooth streaming- but file served is on format mpd -mpeg dash-)

Example:

1
2

source={{ uri: 'http://host-serving-a-type-different-than-the-extension.ism/manifest(format=mpd-time-csf)',
type: 'mpd' }}

Other protocols

The following other types are supported on some platforms, but aren’t fully documented yet:
content://, ms-appx://, ms-appdata://, assets-library://

Playing only a portion of the video (start & end time)

Provide an optional startTime and/or endTime for the video. Value is in milliseconds. Useful when you want to play only a portion of a large video.

Example

1
2
3
4
5

source={{ uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8', startTime: 36012, endTime: 48500 }}

source={{ uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8', startTime: 36012 }}

source={{ uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8', endTime: 48500 }}

Platforms: iOS, Android

subtitleStyle

Example:

1

subtitleStyle={{ paddingBottom: 50, fontSize: 20 }}

textTracks

Load one or more “sidecar” text tracks. This takes an array of objects representing each track. Each object should have the format:

On iOS, sidecar text tracks are only supported for individual files, not HLS playlists. For HLS, you should include the text tracks as part of the playlist.

Note: Due to iOS limitations, sidecar text tracks are not compatible with Airplay. If textTracks are specified, AirPlay support will be automatically disabled.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import { TextTrackType }, Video from 'react-native-video';

textTracks={[
  {
    title: "English CC",
    language: "en",
    type: TextTrackType.VTT, // "text/vtt"
    uri: "https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt"
  },
  {
    title: "Spanish Subtitles",
    language: "es",
    type: TextTrackType.SRT, // "application/x-subrip"
    uri: "https://durian.blender.org/wp-content/content/subtitles/sintel_es.srt"
  }
]}

Platforms: Android, iOS

trackId

Configure an identifier for the video stream to link the playback context to the events emitted.

Platforms: Android

useTextureView

Controls whether to output to a TextureView or SurfaceView.

SurfaceView is more efficient and provides better performance but has two limitations:

• It can’t be animated, transformed or scaled
• You can’t overlay multiple SurfaceViews

useTextureView can only be set at same time you’re setting the source.

• true (default) - Use a TextureView
• false - Use a SurfaceView

Platforms: Android

useSecureView

Force the output to a SurfaceView and enables the secure surface.

This will override useTextureView flag.

SurfaceView is is the only one that can be labeled as secure.

• true - Use security
• false (default) - Do not use security

Platforms: Android

volume

Adjust the volume.

• 1.0 (default) - Play at full volume
• 0.0 - Mute the audio
• Other values - Reduce volume

Platforms: all

localSourceEncryptionKeyScheme

Set the url scheme for stream encryption key for local assets

Type: String

Example:

1

localSourceEncryptionKeyScheme="my-offline-key"

Platforms: iOS

Event props

onAudioBecomingNoisy

Callback function that is called when the audio is about to become ‘noisy’ due to a change in audio outputs. Typically this is called when audio output is being switched from an external source like headphones back to the internal speaker. It’s a good idea to pause the media when this happens so the speaker doesn’t start blasting sound.

Payload: none

Platforms: Android, iOS

onBandwidthUpdate

Callback function that is called when the available bandwidth changes.

Payload:

Example:

1
2
3

{
  bitrate: 1000000
}

Note: On Android, you must set the reportBandwidth prop to enable this event. This is due to the high volume of events generated.

Platforms: Android

onBuffer

Callback function that is called when the player buffers.

Payload:

Example:

1
2
3

{
  isBuffering: true
}

Platforms: Android, iOS

onEnd

Callback function that is called when the player reaches the end of the media.

Payload: none

Platforms: all

onError

Callback function that is called when the player experiences a playback error.

Payload:

Platforms: all

onExternalPlaybackChange

Callback function that is called when external playback mode for current playing video has changed. Mostly useful when connecting/disconnecting to Apple TV – it’s called on connection/disconnection.

Payload:

Example:

1
2
3

{
  isExternalPlaybackActive: true
}

Platforms: iOS

onFullscreenPlayerWillPresent

Callback function that is called when the player is about to enter fullscreen mode.

Payload: none

Platforms: Android, iOS

onFullscreenPlayerDidPresent

Callback function that is called when the player has entered fullscreen mode.

Payload: none

Platforms: Android, iOS

onFullscreenPlayerWillDismiss

Callback function that is called when the player is about to exit fullscreen mode.

Payload: none

Platforms: Android, iOS

onFullscreenPlayerDidDismiss

Callback function that is called when the player has exited fullscreen mode.

Payload: none

Platforms: Android, iOS

onLoad

Callback function that is called when the media is loaded and ready to play.

Payload:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

{ 
  canPlaySlowForward: true,
  canPlayReverse: false,
  canPlaySlowReverse: false,
  canPlayFastForward: false,
  canStepForward: false,
  canStepBackward: false,
  currentTime: 0,
  duration: 5910.208984375,
  naturalSize: {
     height: 1080
     orientation: 'landscape'
     width: '1920'
  },
  audioTracks: [
    { language: 'es', title: 'Spanish', type: 'audio/mpeg', index: 0 },
    { language: 'en', title: 'English', type: 'audio/mpeg', index: 1 }
  ],
  textTracks: [
    { title: '#1 French', language: 'fr', index: 0, type: 'text/vtt' },
    { title: '#2 English CC', language: 'en', index: 1, type: 'text/vtt' },
    { title: '#3 English Director Commentary', language: 'en', index: 2, type: 'text/vtt' }
  ],
  videoTracks: [
    { bitrate: 3987904, codecs: "avc1.640028", height: 720, trackId: "f1-v1-x3", width: 1280 },
    { bitrate: 7981888, codecs: "avc1.640028", height: 1080, trackId: "f2-v1-x3", width: 1920 },
    { bitrate: 1994979, codecs: "avc1.4d401f", height: 480, trackId: "f3-v1-x3", width: 848 }
  ]
}

Platforms: all

onLoadStart

Callback function that is called when the media starts loading.

Payload:

Example:

1
2
3
4
5

{
  isNetwork: true,
  type: '',
  uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
}

Platforms: all

onPlaybackStateChanged

Callback function that is called when the playback state changes.

Payload:

Example:

1
2
3

{
  isPlaying: true,
}

Platforms: Android

onPictureInPictureStatusChanged

Callback function that is called when picture in picture becomes active or inactive.

Example:

1
2
3

{
isActive: true
}

Platforms: iOS

onPlaybackRateChange

Callback function that is called when the rate of playback changes - either paused or starts/resumes.

Example:

1
2
3

{
  playbackRate: 0, // indicates paused
}

Platforms: all

onProgress

Callback function that is called every progressUpdateInterval milliseconds with info about which position the media is currently playing.

Example:

1
2
3
4
5

{
  currentTime: 5.2,
  playableDuration: 34.6,
  seekableDuration: 888
}

Platforms: all

onReadyForDisplay

Callback function that is called when the first video frame is ready for display. This is when the poster is removed.

Payload: none

• iOS: readyForDisplay
• Android STATE_READY

Platforms: Android, iOS, Web

onReceiveAdEvent

Callback function that is called when an AdEvent is received from the IMA’s SDK.

Enum AdEvent possible values for Android and iOS:

Payload:

Example:

1
2
3

{
  "event": "LOADED"
}

Platforms: Android, iOS

onRestoreUserInterfaceForPictureInPictureStop

Callback function that corresponds to Apple’s restoreUserInterfaceForPictureInPictureStopWithCompletionHandler. Call restoreUserInterfaceForPictureInPictureStopCompleted inside of this function when done restoring the user interface.

Payload: none

Platforms: iOS

onSeek

Callback function that is called when a seek completes.

Payload:

Example:

1
2
3
4

{
  currentTime: 100.5
  seekTime: 100
}

Both the currentTime & seekTime are reported because the video player may not seek to the exact requested position in order to improve seek performance.

Platforms: Android, iOS, Windows UWP

onTimedMetadata

Callback function that is called when timed metadata becomes available

Payload:

Example:

1
2
3
4
5
6
7

{
  metadata: [
    { value: 'Streaming Encoder', identifier: 'TRSN' },
    { value: 'Internet Stream', identifier: 'TRSO' },
    { value: 'Any Time You Like', identifier: 'TIT2' }
  ]
}

Platforms: Android, iOS

onTextTracks

Callback function that is called when text tracks change

Payload:

Example:

1
2
3
4
5
6
7
8
9
10

{
  textTracks: [
    {
      index: 0,
      title: 'Any Time You Like',
      type: 'srt',
      selected: true
    }
  ]
}

Platforms: Android

onVideoTracks

Callback function that is called when video tracks change

Payload:

Example:

1
2
3
4
5
6
7
8
9
10
11
12

{
  videoTracks: [
    {
      trackId: 0,
      codecs: 'video/mp4',
      width: 1920,
      height: 1080,
      bitrate: 10000,
      selected: true
    }
  ]
}

Platforms: Android

Methods

Methods operate on a ref to the Video element. You can create a ref using code like:

1
2
3
4

return (
  <Video source={...}
    ref={ref => (this.player = ref)} />
);

dismissFullscreenPlayer

dismissFullscreenPlayer()

Take the player out of fullscreen mode.

Example:

1

this.player.dismissFullscreenPlayer();

Platforms: Android, iOS

presentFullscreenPlayer

presentFullscreenPlayer()

Put the player in fullscreen mode.

On iOS, this displays the video in a fullscreen view controller with controls.

On Android, this puts the navigation controls in fullscreen mode. It is not a complete fullscreen implementation, so you will still need to apply a style that makes the width and height match your screen dimensions to get a fullscreen video.

Example:

1

this.player.presentFullscreenPlayer();

Platforms: Android, iOS

save

save(): Promise

Save video to your Photos with current filter prop. Returns promise.

Example:

1
2

let response = await this.player.save();
let path = response.uri;

Notes:

• Currently only supports highest quality export
• Currently only supports MP4 export
• Currently only supports exporting to user’s cache directory with a generated UUID filename.
• User will need to remove the saved video through their Photos app
• Works with cached videos as well. (Checkout video-caching example)
• If the video is has not began buffering (e.g. there is no internet connection) then the save function will throw an error.
• If the video is buffering then the save function promise will return after the video has finished buffering and processing.

Future:

• Will support multiple qualities through options
• Will support more formats in the future through options
• Will support custom directory and file name through options

Platforms: iOS

restoreUserInterfaceForPictureInPictureStopCompleted

restoreUserInterfaceForPictureInPictureStopCompleted(restored)

This function corresponds to the completion handler in Apple’s restoreUserInterfaceForPictureInPictureStop. IMPORTANT: This function must be called after onRestoreUserInterfaceForPictureInPictureStop is called.

Example:

1

this.player.restoreUserInterfaceForPictureInPictureStopCompleted(true);

Platforms: iOS

seek()

seek(seconds)

Seek to the specified position represented by seconds. seconds is a float value.

seek() can only be called after the onLoad event has fired. Once completed, the onSeek event will be called.

Example:

1

this.player.seek(200); // Seek to 3 minutes, 20 seconds

Platforms: all

Exact seek

By default iOS seeks within 100 milliseconds of the target position. If you need more accuracy, you can use the seek with tolerance method:

seek(seconds, tolerance)

tolerance is the max distance in milliseconds from the seconds position that’s allowed. Using a more exact tolerance can cause seeks to take longer. If you want to seek exactly, set tolerance to 0.

Example:

1

this.player.seek(120, 50); // Seek to 2 minutes with +/- 50 milliseconds accuracy

Platforms: iOS

Static methods

Video Decoding capabilities

A module embed in ReactNativeVideo allow to query device supported feature.
To use it include the module as following:

1

import { VideoDecoderProperties } from '@ifs/react-native-video-enhanced'

Platforms: Android

getWidevineLevel

Indicates whether the widevine level supported by device.

Possible results:

• 0 - unable to determine widevine support (typically not supported)
• 1, 2, 3 - Widevine level supported

Platforms: Android

Example:

1
2
3

VideoDecoderProperties.getWidevineLevel().then((widevineLevel) => {
    ...
}

isCodecSupported

Indicates whether the provided codec is supported level supported by device.

parameters:

• mimetype: mime type of codec to query
• width, height: resolution to query

Possible results:

• true - codec supported
• false - codec is not supported

Example:

1
2
3

VideoDecoderProperties.isCodecSupported('video/avc', 1920, 1080).then(
    ...
}

Platforms: Android

isHEVCSupported

Helper which Indicates whether the provided HEVC/1920*1080 is supported level supported by device.
It uses isCodecSupported internally.

Example:

1
2
3

VideoDecoderProperties.isHEVCSupported().then((hevcSupported) => {
    ...
}

iOS App Transport Security

• By default, iOS will only load encrypted (https) urls. If you want to load content from an unencrypted (http) source, you will need to modify your Info.plist file and add the following entry:

For more detailed info check this article

Audio Mixing

At some point in the future, react-native-video will include an Audio Manager for configuring how videos mix with other apps playing sounds on the device.

On iOS, if you would like to allow other apps to play music over your video component, make the following change:

AppDelegate.m

1
2
3
4
5
6
7
8

#import <AVFoundation/AVFoundation.h>  // import

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

You can also use the ignoreSilentSwitch prop.

Android Expansion File Usage

Expansions files allow you to ship assets that exceed the 100MB apk size limit and don’t need to be updated each time you push an app update.

This only supports mp4 files and they must not be compressed. Example command line for preventing compression:

1

zip -r -n .mp4 *.mp4 player.video.example.com

1
2
3
4
5

// 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.
       resizeMode="cover"           // Fill the whole screen at aspect ratio.
       style={styles.backgroundVideo} />

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.

1
2
3

<Video
  source={require('../assets/video/turntable.mp4')}
/>

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][3] for additional details. (NOTE: there is now a ticket to expose this as a prop) )

Examples

• See an [Example integration][1] 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][2] yourself:

  1 2 3 4 5

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

  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.

Updating

Version 6.0.0

iOS

In your project Podfile add support for static dependency linking. This is required to support the new Promises subdependency in the iOS swift conversion.

Add use_frameworks! :linkage => :static just under platform :ios in your ios project Podfile.

See the example ios project for reference

Version 5.0.0

Probably you want to update your gradle version:

gradle-wrapper.properties

1
2

- distributionUrl=https\://services.gradle.org/distributions/gradle-3.3-all.zip
+ distributionUrl=https\://services.gradle.org/distributions/gradle-5.1.1-all.zip

android/app/build.gradle

From version >= 5.0.0, you have to apply this changes:

1
2
3
4
5
6
7

dependencies {
   ...
    compile project(':react-native-video')
+   implementation "androidx.appcompat:appcompat:1.0.0"
-   implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"

}

android/gradle.properties

Migrating to AndroidX (needs version >= 5.0.0):

1
2

android.useAndroidX=true
android.enableJetifier=true

Version 4.0.0

Gradle 3 and target SDK 26 requirement

In order to support ExoPlayer 2.9.0, you must use version 3 or higher of the Gradle plugin. This is included by default in React Native 0.57.

ExoPlayer 2.9.0 Java 1.8 requirement

ExoPlayer 2.9.0 uses some Java 1.8 features, so you may need to enable support for Java 1.8 in your app/build.gradle file. If you get an error, compiling with ExoPlayer like:
Default interface methods are only supported starting with Android N (--min-api 24)

Add the following to your app/build.gradle file:

1
2
3
4
5
6

android {
   ... // Various other settings go here
   compileOptions {
     targetCompatibility JavaVersion.VERSION_1_8
   }
}

ExoPlayer no longer detaches

When using a router like the react-navigation TabNavigator, switching between tab routes would previously cause ExoPlayer to detach causing the video player to pause. We now don’t detach the view, allowing the video to continue playing in a background tab. This matches the behavior for iOS.

useTextureView now defaults to true

The SurfaceView, which ExoPlayer has been using by default has a number of quirks that people are unaware of and often cause issues. This includes not supporting animations or scaling. It also causes strange behavior if you overlay two videos on top of each other, because the SurfaceView will punch a hole through other views. Since TextureView doesn’t have these issues and behaves in the way most developers expect, it makes sense to make it the default.

TextureView is not as fast as SurfaceView, so you may still want to enable SurfaceView support. To do this, you can set useTextureView={false}.

Version 3.0.0

All platforms now auto-play

Previously, on Android ExoPlayer if the paused prop was not set, the media would not automatically start playing. The only way it would work was if you set paused={false}. This has been changed to automatically play if paused is not set so that the behavior is consistent across platforms.

All platforms now keep their paused state when returning from the background

Previously, on Android MediaPlayer if you setup an AppState event when the app went into the background and set a paused prop so that when you returned to the app the video would be paused it would be ignored.

Note, Windows does not have a concept of an app going into the background, so this doesn’t apply there.

Use Android target SDK 27 by default

Version 3.0 updates the Android build tools and SDK to version 27. React Native is in the process of switchting over to SDK 27 in preparation for Google’s requirement that new Android apps use SDK 26 by August 2018.

You will either need to install the version 27 SDK and version 27.0.3 buildtools or modify your build.gradle file to configure react-native-video to use the same build settings as the rest of your app as described below.

Using app build settings

You will need to create a project.ext section in the top-level build.gradle file (not app/build.gradle). Fill in the values from the example below using the values found in your app/build.gradle file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ... // Various other settings go here
}

allprojects {
    ... // Various other settings go here

    project.ext {
        compileSdkVersion = 31
        buildToolsVersion = "30.0.2"

        minSdkVersion = 21
        targetSdkVersion = 22
    }
}

If you encounter an error Could not find com.android.support:support-annotations:27.0.0. reinstall your Android Support Repository.

最近在为公司的APP做一个热更新的功能，因为APP是RN（react native）写的，所以在网上找了一下rn的热更新方案。之前用uni-app的时候，它是自己内置支持热更新方案的，而且热更包用hbuilderx（uni-app的专用IDE）导出文件后，可以自行存储，只要最后应用启动的时候拿到热更包的地址就行，可以说是比较理想的方案。基于这种体验，我对RN的热更新方案有几个需求：

1. 不收费或收费较少
2. 基于安全和稳定性考虑，热更新包和相关更新逻辑要在自己的服务器上。
3. 实现简单，功能稳定。

方案选择

看了一下，比较流行的rn端热更新是以下几个方案：

1. codePush。微软提供的方案，需要将热更包推送到微软服务器，然后在RN侧安装对应的SDK实现热更新。虽然提供了自己部署热更服务的方案，但是要额外部署单独的后端服务。按照下载热更新包的次数收费，提供一定的免费额度。嗯，很微软。
2. Pushy。rn中文网推荐的方案，也是rn中文网团队自己做的。和codePush用法类似，热更新包上传到pushy的服务器，RN安装SDK。官方文档中提到支持自建热更服务但没有明确给出示例和做法。按照app数量和热更新包数量收费，有免费版但有限额。
3. 自己实现。这个方案其实涉及到对rn的运行机制的理解。简单来说，rn主要分为两部分，原生和js，前端代码打包成js（通常叫main.jsbundle），在原生中利用js引擎(jsCore或者Hermes)来解释js语法，然后生成对应的原生页面和原生组件。所以只要我们在原生中通过RN插件实现一套机制，用来管理旧的jsbundle文件和下载新的jsbundle文件，然后根据不同的情况去加载不同的文件即可。

1
2
3
4
5
6
7
8
9

// rn项目中的iOS，AppDelegate.mm文件中加载bundle的代码
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

方案一codePush自建服务需要用它提供的后端代码和数据结构，不太灵活。方案三自己实现的话，要考虑的细节很多，预计花费的时间不会太少（还容易出现bug）。

所以最终我选择了站在巨人的肩膀上，去调研Pushy的自建服务。

方案调研

这一小节是我做技术验证的过程，比较无聊。不感兴趣可以跳到下一节，干货讲解如何实现自建热更新服务。

Pushy官网并没有给出明确示例，但在常见问题中有这样一段话：

1
2
3
4
5

我是否可以搭建自己的热更新服务？

你可以单独使用本组件的原生部分(不包括 js 模块)和命令行工具中的bundle、diff、diffFromIpa、diffFromApk四个功能。
这些功能都不会使用我们的热更新服务，也无需注册或登录账号。但你可能要编写自己的 js 模块来与不同的热更新服务器通讯。
如果您有兴趣搭建私有云服务，可以邮件联系我们。

我们先跑一遍官网的服务，用免费版研究一下Pushy是怎么实现的。因为安卓打包比较方便，所以技术试验以安卓为例。

1. 注册，登录账号，新建一个rn的测试app，按照官网文档安装和接入。
2. 打包一个完整版本，安装到模拟器，上传到pushy官网。
3. 修改代码，生成热更新包pushy bundle，上传到pushy（注意绑定到原生包）。
4. 打开APP，点击立即更新，查看返回结果。

1
2
3
4
5
6
7
8
9
10

{
  "update": true,
  "hash": "Vvjz8e6w6TCFxVEWhngeD",
  "name": "v2-sadadasdasd",
  "description": "yesasdasd",
  "metaInfo": "test",
  "updateUrl": "https://dl.react-native.cn/Vvjz8e6w6TCFxVEWhngeD",
  "pdiffUrl": "https://dl.react-native.cn/71e8D5TulfiwG1OdnjZIJ-Vvjz8e6w6TCFxVEWhngeD.phdiff",
  "ok": 1
}

这里能看到有两个文件，分别下载下来，后缀改成zip然后解压。

updateUrl解压出来是一个index.bundlejs文件。

pdiffUrl解压出来是一个文件夹，里面有两个文件

总结：读到这里存个档，官网热更新返回的结构，记住这个结构，一会儿还要用。

updateUrl=> index.bundlejs

pdiffUrl=> __diff.json + index.bundlejs.patch

刚才用pushy bundle生成的ppk文件还在吧，同样的，后缀改成zip。打开有惊喜。

原来这里就是官网返回的 updateUrl。

再用 pushy diffFromApk命令，参数就是之前的apk和ppk文件，生成了一个后缀为.apk-patch的文件，也解压出来。

同样的，这个结构非常眼熟，再对比一下文件大小，发现不对。这两个文件大小不一致。

左边是官网的，文件尺寸较小，从下方的预览信息看，盲猜是用的hdiff算法生成的。右边是用cli生成的，文件尺寸稍大，盲猜是用的bsdiff算法生成的。这两个算法是官网文档中有介绍的。

总结，官网的：

updateUrl=> index.bundlejs => pushy bundle生成的ppk文件

pdiffUrl=> __diff.json + index.bundlejs.patch =>? pushy diffFromApk生成的patch文件。（此处存疑。文件大小不一致，可能是算法导致的，也有可能不是同一个东西）

1. 再次修改代码，打包生成新的更新包，上传到官网。
2. app内再次点击更新，查看返回值。

1
2
3
4
5
6
7
8
9
10
11

{
  "update": true,
  "hash": "YazqrTNm_1gL1ijbXtdj4",
  "name": "v3",
  "description": "descccccc",
  "metaInfo": "asf",
  "updateUrl": "https://dl.react-native.cn/YazqrTNm_1gL1ijbXtdj4",
  "pdiffUrl": "https://dl.react-native.cn/71e8D5TulfiwG1OdnjZIJ-YazqrTNm_1gL1ijbXtdj4.phdiff",
  "diffUrl": "https://dl.react-native.cn/Vvjz8e6w6TCFxVEWhngeD-YazqrTNm_1gL1ijbXtdj4.hdiff",
  "ok": 1
}

这里多了一个key，diffUrl是一个后缀为.hdiff的文件。下载下来解压。同时，cli还有一个用于对比ppk和ppk文件的命令，即pushy diff参数是两个ppk文件,生成了一个文叫diff。也解压。

这个结构也是类似的。同样的，文件大小不一样。

这次俩文件都没有预览信息了，左侧是官网的，文件较小，右侧是cli生成的，文件稍大。

其实从命名和官方的代码也能大概看出来一些信息。

第一次热更，生成的包是Vvjz8e6w6TCFxVEWhngeD这个是第一次热更的唯一标识，上面那个文件里面有两个hash值，明显

71e8D5TulfiwG1OdnjZIJ代表原始安装包中的bundle的hash，71e8D5TulfiwG1OdnjZIJ-Vvjz8e6w6TCFxVEWhngeD.phdiff代表从原始bundle到第一次热更的差异文件。

第二次热更，生成的是 YazqrTNm_1gL1ijbXtdj4标识的是第二次热更。

71e8D5TulfiwG1OdnjZIJ-YazqrTNm_1gL1ijbXtdj4.phdiff记录的是原始bundle到这次更新的差异，Vvjz8e6w6TCFxVEWhngeD-YazqrTNm_1gL1ijbXtdj4.hdiff记录的是第一次热更到这次热更的差异。

再观察一下pushy的代码：

这里有三次更新，从上到下依次是用的 diffUrl，pdiffUrl，updateUrl，从函数命名和代码注释上来看，先下载这次版本和最新版本的差异，如果没有或失败，再下载最新版本和原始bundle的差异，如果没有或失败，再下载完整的bundle。这样的话能保证用户用最小的体积，更快地完成这次更新。这个就是pushy的热更新下载模块的核心工作原理。

最后的总结：

diffUrl应该是和pushy diff生成的类似，用于记录某一次热更新到另外一次热更新的patch信息。这个的体积是最小的。

pdiffUrl对应的是 apk 和ppk文件的patch信息，这个体积第二

updateUrl对应的应该是完整的bundle信息，也就是直接pushy bundle生成的文件，这个体积是最大的。

搞懂了原理，接下来的思路就清晰了

1. 生成完整的包。
2. 修改代码后，用pushy bundle生成完整的ppk包，并用pushy diffFromApk生成 package diff 包。
3. 再次修改代码后， 重复步骤2，并用 pushy diff生成上一次更新和这一次更新的ppk diff 包。
4. 再次修改代码后，重复步骤3， 同时可能需要生成每一次更新和本次更新的diff包（非必要，没有的话就用package diff包也行）。
5. 每次更新时，先检查最小差异包，即两个ppk文件的差异包，然后再检查package（即apk/ipa文件）到ppk文件的差异包，如果还是没有，就直接安装ppk包。

有了思路，接下来就动手实验。把pushy里面的main.js（node_modules/react-native-update/lib/main.js）的内容拷贝出来，修改里面查询更新的接口地址。

实验结果喜忧参半。坏消息是，通过pushy diff和pushy diffFromApk(Ipa)生成的包，完全无法安装。我仔细确认了实验过程，应该不是生成的包的问题。这应该是pushy的商业化考虑，服务端应该用了特殊算法来生成较小体积的差异包。要解决这个问题，估计只有从pushy的iOS或者android端的源码入手去看了。

官方在Issues中提到不会开源服务端代码。

但好消息是，pushy bundle生成的ppk文件，还是可以直接安装的。虽然只能完整安装更新包，但我检查了一下我的线上应用，bundle打包出来不到2M，权衡之后，还是在我的可接受范围的。

因此，pushy热更新的技术方案验证通过。接下来就是设计热更新的具体实现代码，如何检查更新等。以及提交代码看是否能通过苹果和其他应用市场的审核了。

完整的热更新方案实现

包含数据库设计、前端代码、后端逻辑实现

对接原生SDK

按照官方文档，对接原生端即可。你应该跳过登录和创建应用这一步，因为我们准备自建热更新服务器。而且，暂时不要动前端代码，不要用它提供的js模块。因为官方提供的js模块是用来对接他自己的服务器的。

设计数据库和后端逻辑

设计数据库。我用了两个表，第一张表用来控制app的整体更新app_version。热更新是无法更新原生模块的，一旦我们需要更新原生模块，还是需要重新上架应用商店的，这个时候就需要引导用户去应用商店重新更新。

这里设计成窄表是方便我们扩展多个应用，表字段的app_type可以用来标识应用，每个应用只需要四条配置。假设同一个业务线有多个app，这一张表就可以支撑。解释下这四个key：

• minVersion: 如果客户端版本低于这个版本号，需强制要求用户更新。至于是更新到minVersion还是latestVersion，可以由后端自行决定。
• latestVersion: 如果客户端端版本低于这个版本号，可以建议用户更新至此版本。
• iosUrl: iOS端更新地址，通常是应用商店的app地址，前端通过这个地址跳转App Store。
• androidUrl: android更新地址，这个地址有两种玩法，如果地址是一个apk文件，前端可以直接下载安装。如果地址是一个网址，可以和iOS一样，跳转到这个网址（一般做成app发布页）。

第二张表是热更新的表app_version_hot_update，用于标识热更新。

• version_name: 用于标识版本名称，可以用于更新弹窗的title
• version_hash: 版本的唯一标识，用于pushy管理版本，不能重复。
• url: 热更新包的地址，前端生成后上传到自己的资源服务器，如何生成热更新包后面会讲。
• silence: 是否静默更新，标识为1的话，应用无需用户确认，不弹窗，在后台静默下载。下载安装完成后弹窗提示用户重启应用。
• bind_base_version: 这个热更新包适用于原生的哪个版本，防止热更包里有代码是原生没有实现的。也可以防止应用在提交审核的时候显示更新弹窗导致被拒。
• created_time: 不解释
• platform: 不解释
• app_type: 同第一张表的app_type字端
• 其实还可以加一个字段用于更新说明，比如此次更新了功能1.xxx，2.xxx之类的。

表结构出来了后端的逻辑就出来了，前端在查询更新信息的时候需要携带当前的版本号以及版本hash，然后根据数据库表设计，返回用户是否应该更新，应该更新至哪个版本，更新的方式等。

对应的数据接口如下，其中UpdateInfo是后端应当返回的数据结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// src/native-modules/Pushy/type.ts
export interface UpdateInfo {
  minVersion: string;
  latestVersion: string;
  updateUrl: string;
  versionHash: string;
  versionName: string;
  iosUrl: string; // 苹果商店下载地址
  androidUrl: string; // apk地址或者应用宝地址
}

export interface UpdateCheck extends UpdateInfo {
  needFullUpdate: boolean;
  canFullUpdate: boolean;
  needPatchUpdate: boolean;
}

export interface DownloadProgressData {
  received: number;
  total: number;
  hash: string;
}

export interface DownloadEventListener {
  onDownloadProgress: (data: DownloadProgressData) => void;
}

export interface LocalHashInfo {
  name: string;
  description: string;
  metaInfo: string;
}

前端模块实现

前端这边，新建一个模块。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262

// src/native-modules/Pushy/index.ts
import {NativeEventEmitter, NativeModules, PermissionsAndroid, Platform} from 'react-native';
import {getBaseURL} from '../../constants';
import logger from '../../helper/logger';
import {DownloadEventListener, DownloadProgressData, LocalHashInfo, UpdateCheck, UpdateInfo} from './type';

function getCheckUrl() {
  // 后端设置的接口地址
  return `${getBaseURL()}/app/version/info`;
}

async function request(url: string, config: RequestInit) {
  let resp = await fetch(url, config);
  const result = await resp.json();
  if (resp.status !== 200) {
    throw new Error(result.message);
  }
  return result;
}

let Pushy = NativeModules.Pushy;

if (!Pushy) {
  throw new Error('react-native-update模块无法加载，请对照安装文档检查配置。');
}

export const downloadRootDir = Pushy.downloadRootDir;
export const packageVersion = Pushy.packageVersion;
export const currentVersion = Pushy.currentVersion;
export const isFirstTime = Pushy.isFirstTime;
const rolledBackVersion = Pushy.rolledBackVersion;
export const isRolledBack = typeof rolledBackVersion === 'string';

if (Platform.OS === 'android' && !Pushy.isUsingBundleUrl) {
  throw new Error('react-native-update模块无法加载，请对照文档检查Bundle URL的配置');
}

function setLocalHashInfo(hash: string, info: LocalHashInfo) {
  Pushy.setLocalHashInfo(hash, JSON.stringify(info));
}

async function getLocalHashInfo(hash: string) {
  return JSON.parse(await Pushy.getLocalHashInfo(hash));
}

export async function getCurrentVersionInfo() {
  return currentVersion ? (await getLocalHashInfo(currentVersion)) || {} : {};
}

const eventEmitter = new NativeEventEmitter(Pushy);

function assertRelease() {
  if (__DEV__) {
    throw new Error('react-native-update 只能在 RELEASE 版本中运行.');
  }
}

let checkingThrottling = false;
export async function checkUpdateInfo(isRetry = false): Promise<UpdateInfo> {
  assertRelease();
  if (checkingThrottling) {
    return;
  }
  checkingThrottling = true;
  setTimeout(() => {
    checkingThrottling = false;
  }, 3000);

  let resp;
  const platform = Platform.OS || '';
  try {
    resp = await request(getCheckUrl(), {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        version: packageVersion,
        platform: platform.toLowerCase(),
      }),
    });
  } catch (e) {
    if (isRetry) {
      logger.log('Pushy/index.ts', {msg: '无法连接更新服务器，请检查网络连接后重试'});
      throw new Error('无法连接更新服务器，请检查网络连接后重试');
    }
    return checkUpdateInfo(true);
  }
  if (!resp?.data?.content) {
    logger.log('Pushy/index.ts', {msg: '无法获取更新信息，请稍后重试'});
    throw new Error('无法获取更新信息，请稍后重试');
  }
  return resp.data?.content;
}
export async function checkUpdate(): Promise<UpdateCheck> {
  const info = await checkUpdateInfo();
  if (!info) {
    return null;
  }
  return checkNeedUpdate(info);
}
// 这里对比本地版本和线上版本，决定是否更新，以及如何更新
export function checkNeedUpdate(info: UpdateInfo): UpdateCheck {
  const needFullUpdate = !isSameOrNewVersion(packageVersion, info.minVersion);
  const canFullUpdate = !isSameOrNewVersion(packageVersion, info.latestVersion);
  let needPatchUpdate = false;
  if (info.versionHash && info.updateUrl) {
    if (currentVersion) {
      needPatchUpdate = currentVersion !== info.versionHash;
    } else {
      needPatchUpdate = true;
    }
  } else {
    needPatchUpdate = false;
  }
  return {
    ...info,
    needFullUpdate,
    canFullUpdate,
    needPatchUpdate,
  };
}

export function isSameOrNewVersion(current: string, newVersion: string) {
  try {
    let currentCodes = current.split('.');
    let newCodes = newVersion.split('.');
    for (let i = 0; i < 3; i++) {
      const nowCode = Number(currentCodes[i]);
      const newCode = Number(newCodes[i]);
      if (nowCode < newCode) {
        return false;
      }
    }
  } catch (error) {
    // console.log('error', error);
    return true;
  }
  return true;
}

let downloadingThrottling = false;
let downloadedHash: string;
export async function downloadAndInstallPatch(options: UpdateCheck, listener?: DownloadEventListener) {
  assertRelease();
  if (rolledBackVersion === options.versionHash) {
    logger.log('Pushy/index.ts', {msg: '已回滚版本', rolledBackVersion, hash: options.versionHash});
    return;
  }
  if (downloadedHash === options.versionHash) {
    logger.log('Pushy/index.ts', {msg: '已下载版本', downloadedHash, hash: options.versionHash});
    return;
  }
  if (downloadingThrottling) {
    return;
  }
  downloadingThrottling = true;
  setTimeout(() => {
    downloadingThrottling = false;
  }, 3000);
  let progressHandler;
  if (listener) {
    if (listener.onDownloadProgress) {
      const downloadCallback = listener.onDownloadProgress;
      progressHandler = eventEmitter.addListener('RCTPushyDownloadProgress', progressData => {
        if (progressData.hash === options.versionHash) {
          downloadCallback(progressData);
        }
      });
    }
  }
  let succeeded = false;
  try {
    await Pushy.downloadFullUpdate({
      updateUrl: options.updateUrl,
      hash: options.versionHash,
    });
    succeeded = true;
  } catch (error: any) {
    // 下载失败
    logger.error('Pushy/index.ts', {msg: '下载更新包失败', error: error?.message, updateUrl: options.updateUrl, hash: options.versionHash});
  }
  progressHandler && progressHandler.remove();
  if (!succeeded) {
    throw new Error('下载更新包失败');
  }
  setLocalHashInfo(options.versionHash, {
    name: options.versionName,
    description: options.versionName,
    metaInfo: options.versionName,
  });
  // console.log('设置downloadedHash:', options.versionHash);
  downloadedHash = options.versionHash;
  return options.versionHash;
}

function assertHash(hash: string) {
  if (!downloadedHash) {
    // logger(`no downloaded hash`);
    return;
  }
  if (hash !== downloadedHash) {
    // logger(`use downloaded hash ${downloadedHash} first`);
    return;
  }
  return true;
}

export function switchVersion(hash: string) {
  // console.log('切换版本，hash', hash);
  assertRelease();
  if (assertHash(hash)) {
    Pushy.reloadUpdate({hash});
  }
}

export function switchVersionLater(hash: string) {
  assertRelease();
  if (assertHash(hash)) {
    Pushy.setNeedUpdate({hash});
  }
}

let marked = false;
export function markSuccess() {
  assertRelease();
  if (marked) {
    return;
  }
  marked = true;
  Pushy.markSuccess();
}

export async function downloadAndInstallApk(url: string, listener?: (data: DownloadProgressData) => void) {
  if (Platform.OS === 'android' && Platform.Version <= 23) {
    try {
      const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE);
      if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
        return;
      }
    } catch (err) {
      console.warn(err);
    }
  }
  let hash = Date.now().toString();
  let progressHandler;
  if (listener) {
    progressHandler = eventEmitter.addListener('RCTPushyDownloadProgress', progressData => {
      if (progressData.hash === hash) {
        listener(progressData);
      }
    });
  }
  await Pushy.downloadAndInstallApk({
    url,
    target: 'update.apk',
    hash,
  });
  progressHandler && progressHandler.remove();
}

简单说明下，这个模块主要就是从服务器请求最新的版本，然后前端拿到版本后和本地版本对比，判断是否需要更新，更新方式是跳转商店更新还是热更新等，然后根据Pushy提供的原生模块，来实现更新。这样我们就只需要决定更新的判断逻辑，具体的更新操作由Pushy的原生模块完成。这是Pushy的底层模块，它的商业化底层也是用的这一套，所以出问题的几率还是比较小的。

注意：其实这里的前后端交互的设计其实还可以更简洁，正常来说相关逻辑，如判断是否需要更新，如何更新等逻辑应该由后端提供。但这里因为后端我是接手的java，写着不太顺手，所以后端基本只查了关联的app和版本号后以及对应最新的版本号就原样返回了，把大部分逻辑放到了前端来处理。

前端界面实现

现在前端逻辑部分相关的已经准备好了，接下来处理前端界面部分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

import {checkUpdate, currentVersion, downloadAndInstallApk, downloadAndInstallPatch, isFirstTime, isRolledBack, markSuccess, switchVersion} from '../../native-modules/Pushy';
import {DownloadProgressData, UpdateCheck} from '../../native-modules/Pushy/type';
// 其他需要导入的...

const SaytoTopComponent: React.FC = () => {
  const [showUpdate, setShowUpdate] = useState(false); // 更新弹窗展示
  const [updateInfo, setUpdateInfo] = useState<UpdateCheck>(); // 获取到的更新信息
  const [downloadSuccess, setDownloadSuccess] = useState(false); // 下载热更包或者apk成功
  const [downloading, setDownloading] = useState(false);
  const [progressData, setProgressData] = useState<DownloadProgressData>();
  const showFullUpdate = useMemo(() => {
    return !!updateInfo?.needFullUpdate && !downloadSuccess && !downloading;
  }, [downloadSuccess, downloading, updateInfo?.needFullUpdate]);
  
  const doDownload = useCallback(async (updateInfo: UpdateCheck) => {
    if (!updateInfo) {
      return;
    }
    setDownloading(true);
    const hash = await downloadAndInstallPatch(updateInfo, {onDownloadProgress: setProgressData});
    setDownloading(false);
    if (hash) {
      setDownloadSuccess(true);
    }
  }, []);

  useEffect(() => {
    if (__DEV__) {
      return;
    }
    if (isFirstTime) {
      markSuccess();
    } else if (isRolledBack) {
      logger.error('Home.tsx/Effect', {currentVersion, isFirstTime, isRolledBack});
    }
  }, []);

  useEffect(() => {
    if (__DEV__) {
      return;
    }
    checkUpdate()
      .then(res => {
        if (res.needFullUpdate || res.needPatchUpdate) {
          setUpdateInfo(res);
          setTimeout(() => {
            setShowUpdate(true);
          }, 1000);
        }
      })
      .catch(err => {
        logger.error('Home.tsx/Effect/检查更新', {message: err?.message || err, currentVersion, isFirstTime, isRolledBack});
      });
  }, []);

  useEffect(() => {
    if (!updateInfo) {
      return;
    }
    // 自动下载热更包
    if (updateInfo.needPatchUpdate) {
      doDownload(updateInfo);
    }
  }, [doDownload, updateInfo]);
  
  function handleCloseUpdate() {
    setShowUpdate(false);
    return true;
  }
  return (
    	<Modal
        styles={{
          body: {paddingHorizontal: 0, paddingBottom: 0, zIndex: 40},
          innerContainer: {paddingTop: 0, borderRadius: globalStyleVariables.RADIUS_MODAL},
        }}
        style={{width: width - 40}}
        visible={showUpdate}
        onClose={handleCloseUpdate}
        animationType="fade"
        onRequestClose={handleCloseUpdate}
        transparent
        maskClosable={false}>
        <View style={{backgroundColor: '#fff'}}>
          <View style={[globalStyles.containerCenter, {height: 50}]}>
            <Text style={[globalStyles.fontPrimary, {fontSize: 18}]}>版本更新</Text>
          </View>
          <View style={[{paddingHorizontal: 15, paddingVertical: 20}]}>
            <Text style={[globalStyles.fontSecondary, {textAlign: 'center'}]}>
              {downloadSuccess ? '更新完成，点击重启应用' : `检测到新版本，${downloading ? '正在为您更新' : '点击立即更新下载安装新版本'}`}
            </Text>
          </View>

          <View style={[{padding: 15}]}>
            {showFullUpdate && <Button type="primary" onPress={handleFullUpdate} title="立即更新" />}
            {downloadSuccess && <Button type="primary" onPress={handleRestart} title="立即重启" />}
            {downloading && (
              <View style={{width: '100%'}}>
                <Text style={{textAlign: 'center'}}>{progressData ? `${progressData.received}/${progressData.total}` : ''}正在更新</Text>
              </View>
            )}
          </View>
        </View>
      </Modal>
		)
};

这部分代码有删减，忽略了不重要的其他代码，所以不能直接运行。主要是参考hooks部分，其他按照自己的项目配置即可。

最后我们更新的时候，只需要在项目的终端上打包，然后上传到自己的服务器，并调用后端接口去新增对应的热更新记录就行。

1

pushy bundle

感谢Pushy团队以及整个RN社区做出的开源贡献。站在巨人的肩膀上，总是比自己摸着石头过大江要容易且安全得多的，但偶尔也要想想，巨人是如何迈动步伐。

总结： RN的热更新可以利用Pushy提供的开源代码，自建服务器实现，且方案安全稳定。后端改造较小，两张表和几个简单接口，前端需略微修改原生代码，写个RN的js模块，最后提供更新页面组件。