Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »


1.0.6 • Public • Published


Note! This is fixed for React-Native 0.6+

A <VLCPlayer> component for react-native This project refers to react-native-video. react-native-vlcplayer, react-native-vlc-player, react-native-yz-vlcplayer react-native-vlcplayer-wrap

VLCPlayer supports various formats (mp4, m3u8, flv, mov, rtsp, rtmp, etc.), see vlc wiki

Example project

Xcode10+ Some problems

(1) libstdc++.6.0.9.tbd could not be found       In Xcode10, libstdc++.6.0.9.tbd has been removed, and we have removed it and it is OK.

(2) The situation of compiling the card (currently only wait for the official to fix this problem)

(1) Remove DSYM

Project Build Settings --> Build Options --> Debug Information Format is set to DWARF.

(2) Compile to the following version of Xcode10


 `npm install react-native-vlcplayer-wrap2 --save`

android setup

android vlc-sdk from:

step 1:

Run react-native link react-native-vlcplayer-wrap2

ios setup

combined from react-native-vlcplayer


step 1:

Run react-native link react-native-vlcplayer-wrap2

cd ios

Run pod install

step 2:

download MobileVLCKit.framework from

step 3:

create a folder named vlcKit, and copy MobileVLCKit.framework in this folder.

step 4:

In XCode, in the project navigator, right click Frameworks -> Add Files to [your project's name], go to /vlckit and add MobileVLCKit.framework

step 5:

add framework search path in main project: $(PROJECT_DIR)/../vlcKit

add framework search path in Pods project, target RNVlcPlayerWrap: $(PODS_ROOT)/../../vlcKit

step 6:

Select your project. Add the following libraries to your project's Build Phases -> Link Binary With Libraries:

  • AudioToolbox.framework
  • VideoToolbox.framework
  • CoreMedia.framework
  • CoreVideo.framework
  • CoreAudio.framework
  • AVFoundation.framework
  • MediaPlayer.framework
  • libstdc++.6.0.9.tbd
  • libiconv.2.tbd
  • libc++.1.tbd
  • libz.1.tbd
  • libbz2.1.0.tbd

step 7:

set Enable Bitcode to no

Build Settings ---> search Bitcode

step 8:

set project deployment target 9.3

other react-native plugins

  1. npm install react-native-orientation --save

    react-native link react-native-orientation

  2. npm install react-native-slider --save

  3. npm install react-native-vector-icons --save

    react-native link react-native-vector-icons

Static Methods


android:; //  unit(单位)  ms
ios:; //  0 --- 1 视频位置进度

this.vlcPlayer.resume(autoplay) //重新加载视频进行播放,autopaly: true 表示播放 false表示暂停       // true: play the video   false: paused the video

this.vlcPlayer.snapshot(path)  // path: string  存储的文件的路径。

VLCPlayer props

import { VLCPlayer } from 'react-native-vlcplayer-wrap2';
props type value describe
paused bool
muted bool
volume bool 0---200
hwDecoderEnabled number 0 or 1 (Only android) need use with hwDecoderForced
hwDecoderForced number 0 or 1 (Only android) need use with hwDecoderEnabled
initType number
initOptions array
mediaOptions object
source object { uri: 'http:...' }
autoplay bool 是否自动播放(默认false)
onLoadStart func vlc视频容器初始化完毕
onOpen func 视频被打开
onBuffering func 正在缓冲中
onProgress func { currentTime:1000,duration:1000 } unit:ms 视频进度发生改变
onEnd func 视频播放结束
onPlaying func 视频正在播放
onPaused func 视频暂停
onError func 播放视频出错
onStopped func 视频停止播放(直播视频请根据这个判断)
onIsPlaying func {isPlaying:true} 视频是否正在播放
   initType:   1,2     default value: 1
                1: [[VLCMediaPlayer alloc] init]
                2: [[VLCMediaPlayer alloc] initWithOptions:options];



     android: {
                 isPlaying: true,
                 bufferRate: 70,
                 duration: 0,

         ios: {
                duration: 0,
                isPlaying: true,


                 currentTime: 1000        ms
                 duration: 5000           ms


                 isPlaying: true

Callback function simple description (currently encountered)

                                                       Support platform
          onEnd            end                         ios     android
          onBuffering      Buffering                   ios     ndroid
          onError          error
          onPlaying        playback                    ios     android
          onPaused         pause                       ios     android
          onOpen           open                                android
          onLoadStart      Vlc video initialized       ios     android
          onProgress       progress changes            ios     android          swf格式不支持

          Callback function order :  onLoadStart  ---> onOpen

use plugin

   Import { VLCPlayer, VlCPlayerView } from 'react-native-vlcplayer-wrap2';
   Import Orientation from 'react-native-orientation';

 ; // The unit is ms
 ; // 0 --- 1 video location progress
           Ref={ref => (this.vlcPlayer = ref)}
            * Increase the video aspect ratio, the video will stretch according to this ratio
            * Do not set according to the default ratio
            * Whether to pause playback
            * Resource path
            * Local resources are not supported at this time
           Source={{ uri: this.props.uri}}
            * Progress
            * Returns {currentTime:1000, duration:1000}
            * Unit is ms
            * currentTime: current time
            * duration: total time
            * End of video playback
            * Being cached
            * Error playing video
            * Video stops
            * Video playback
            * Video pause
            * Video is opened
            * vlc video container is initialized
            * Set the progress of playback here, whether to start playing
                   If(Platform.OS === 'ios'){
             ; //Set the playback progress
             ; //Set the time of playback
                     Paused: true,
                       Paused: false,

Available Sources

Hong Kong Finance, rtmp://

Hunan Satellite TV, rtmp://


Version Simple Description

         (1) increase autoAspectRatio bool (only on Android)
             Full Android full screen

Simple Example

      1. npm install react-native-orientation --save

         react-native link react-native-orientation

      2. npm install react-native-slider --save

      3. npm install react-native-vector-icons --save

         react-native link react-native-vector-icons


       import { VLCPlayer, VlcSimplePlayer } from 'react-native-vlcplayer-wrap2';
       import Orientation from 'react-native-orientation';

           ref={ ref => this.vlCPlayerView = ref}

        The "1" plugin uses the aspect ratio (1.1.1-beta1 and below) as shown below by default.
            fullVideoAspectRatio: deviceHeight + ':' + deviceWidth,
            videoAspectRatio: deviceWidth + ':' + 211.5,
            (1) In the case of vertical screen, there will be problems with the aspect ratio. Please set the aspect ratio or remove the built-in aspect ratio.
            (2) If the default height is modified in a non-full screen, please set the aspect ratio or remove the built-in aspect ratio.
                Remove the built-in aspect ratio:
        "2" is not automatically played by default, you need to automatically play, please add the following parameters

        "3" You can customize the text with the following parameters:
                endingViewText: {
                    endingText: 'End of video playback',
                    reloadBtnText: 'Replay',
                    nextBtnText: 'next'
                errorViewText: {
                    errorText: 'Video playback error',
                    reloadBtnText: 'Replay',
                vipEndViewText: {
                    vipEndText: 'Try to end',
                    boughtBtnText: 'Please buy and buy now,'

      Here are some of the parameters available:

       Static propTypes = {

            * vlc play type related
               // Ad initialization type
               initAdType: PropTypes.oneOf([1,2]),
               // Advertising initialization parameters
               initAdOptions: PropTypes.array,

               // Video initialization type
               initType: PropTypes.oneOf([1,2]),
               // Video initialization parameters
               initOptions: PropTypes.array,

            * Live broadcast related
                //Do you live?
                isLive: PropTypes.bool,
                // Whether it automatically reload live
                autoReloadLive: PropTypes.bool,

            * Advertising related
               // Whether to display ads
               showAd: PropTypes.bool,
               //Ad url
               adUrl: PropTypes.oneOfType([PropTypes.string,PropTypes.number]).isRequired,
               //Reload including ads
               reloadWithAd: PropTypes.bool,
               //End of the ad title
               onAdEnd: PropTypes.func,
               //Is the ad playing?
               onIsAdPlaying: PropTypes.func,

            * Screen related
           // initialized in full screen
           initWithFull: PropTypes.bool,
           // Turn on the full screen callback function
           onStartFullScreen: PropTypes.func,
           // Turn off the full screen callback function
           onCloseFullScreen: PropTypes.func,

            * Video related
               // Video path:
               // string: local or network resource path
               // number: require('./resource/1.mp4')
               Url: PropTypes.oneOfType([PropTypes.string,PropTypes.number]).isRequired,
               // Video playback ends
               onEnd: PropTypes.func,
               // Is it playing?
               onIsPlaying: PropTypes.func,
               // Already watched the time
               lookTime: PropTypes.number,
               // total time
               totalTime: PropTypes.number,
               // Is there a next video source?
               hadNext: PropTypes.bool,
               // Automatically play the next video
               autoPlayNext: PropTypes.bool,
               // Automatic repeat play
               autoRePlay: PropTypes.bool,

            * Style related
               // Video style
               Style: PropTypes.object,
               // full screen video style
               fullStyle: PropTypes.object,
               // Do you need to consider statusBar only for ios
               considerStatusBar: PropTypes.bool,
               //Do you show the top?
               showTop: PropTypes.bool,
               Title: PropTypes.string,
               // Whether to display the title
               showTitle: PropTypes.bool,
               // Whether to display the return button
               showBack: PropTypes.bool,
               // Back button click event
               onLeftPress: PropTypes.func,

            * vip related
               // Whether to use vip
               useVip: PropTypes.bool,
               // Non-vip viewing length
               vipPlayLength: PropTypes.number,

     * Sample React Native App
     * @format
     * @flow

    import React, {Component} from 'react';
    import {StyleSheet, View} from 'react-native';
    import {VlcSimplePlayer, VLCPlayer}  from 'react-native-vlcplayer-wrap2';

    export default class App extends Component<Props> {
        render() {
            return (
                <View style={styles.container}>
                        "--network-caching=" + 150,
                        "--rtsp-caching=" + 150,
                        "--tcp-caching=" + 150,
                        "--realrtsp-caching=" + 150,
                        "--network-caching=" + 150,
                        "--rtsp-caching=" + 150,
                        "--tcp-caching=" + 150,
                        "--realrtsp-caching=" + 150,

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',

MIT Licensed


npm i react-native-vlcplayer-wrap2

DownloadsWeekly Downloads






Unpacked Size

1.09 MB

Total Files


Last publish


  • avatar