react-native-video/_next/static/chunks/pages/installation-55b53d42a527e4d4.js

(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[315],{2569:function(e,n,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/installation",function(){return i(1974)}])},1974:function(e,n,i){"use strict";i.r(n),i.d(n,{__toc:function(){return h},default:function(){return x}});var a=i(5893),t=i(2673),s=i(3393),l=i(2702);i(9128);var o=i(2643),r={src:"/react-native-video//_next/static/media/tvOS-step-1.1c558fb2.jpg",height:230,width:592,blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAMACAMBIgACEQEDEQH/xAAoAAEBAAAAAAAAAAAAAAAAAAAABwEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAKaK/8QAGRAAAgMBAAAAAAAAAAAAAAAAAgMAASFB/9oACAEBAAE/AFNYV6XZ/8QAFREBAQAAAAAAAAAAAAAAAAAAAAH/2gAIAQIBAT8Aj//EABURAQEAAAAAAAAAAAAAAAAAAAAB/9oACAEDAQE/AK//2Q==",blurWidth:8,blurHeight:3},A={src:"/react-native-video//_next/static/media/tvOS-step-2.d441f238.jpg",height:416,width:682,blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAUACAMBIgACEQEDEQH/xAAoAAEBAAAAAAAAAAAAAAAAAAAABwEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAK8I/8QAGBABAQADAAAAAAAAAAAAAAAAAQIAAxH/2gAIAQEAAT8A1qrNcTP/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oACAECAQE/AH//xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oACAEDAQE/AH//2Q==",blurWidth:8,blurHeight:5},d={src:"/react-native-video//_next/static/media/tvOS-step-3.88a4391f.jpg",height:682,width:768,blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAcACAMBIgACEQEDEQH/xAAnAAEBAAAAAAAAAAAAAAAAAAAABwEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAAsIP/xAAYEAACAwAAAAAAAAAAAAAAAAAAAhEigf/aAAgBAQABPwB6skaf/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAgBAgEBPwB//8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAgBAwEBPwB//9k=",blurWidth:8,blurHeight:7},c={src:"/react-native-video//_next/static/media/tvOS-step-4.243b3426.jpg",height:426,width:774,blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAQACAMBIgACEQEDEQH/xAAnAAEBAAAAAAAAAAAAAAAAAAAABwEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAAqoP/xAAXEAADAQAAAAAAAAAAAAAAAAAAAQKR/9oACAEBAAE/AFErT//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIBAT8Af//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQMBAT8Af//Z",blurWidth:8,blurHeight:4};let h=[{depth:2,value:"iOS",id:"ios"},{depth:3,value:"Standard Method",id:"standard-method"},{depth:3,value:"Enable custom feature in podfile file",id:"enable-custom-feature-in-podfile-file"},{depth:4,value:"Video caching",id:"video-caching"},{depth:4,value:"Google IMA",id:"google-ima"},{depth:2,value:"Android",id:"android"},{depth:3,value:"Enable custom feature in gradle file",id:"enable-custom-feature-in-gradle-file"},{depth:4,value:"Enable client side ads insertion",id:"enable-client-side-ads-insertion"},{depth:2,value:"Windows",id:"windows"},{depth:3,value:"Autolinking",id:"autolinking"},{depth:3,value:"Manual Linking",id:"manual-linking"},{depth:2,value:"tvOS",id:"tvos"},{depth:2,value:"visionOS",id:"visionos"},{depth:2,value:"Examples",id:"examples"},{depth:3,value:"iOS Example",id:"ios-example"},{depth:3,value:"Android Example",id:"android-example"},{depth:3,value:"Windows Example",id:"windows-example"}];function _createMdxContent(e){let n=Object.assign({h1:"h1",p:"p",pre:"pre",code:"code",span:"span",details:"details",summary:"summary",h2:"h2",h3:"h3",a:"a",h4:"h4",strong:"strong",em:"em",ol:"ol",li:"li",img:"img",blockquote:"blockquote"},(0,o.a)(),e.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.h1,{children:"Installation"}),"\n",(0,a.jsx)(n.p,{children:"Using npm:"}),"\n",(0,a.jsx)(n.pre,{"data-language":"shell","data-theme":"default",children:(0,a.jsx)(n.code,{"data-language":"shell","data-theme":"default",children:(0,a.jsxs)(n.span,{className:"line",children:[(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"npm"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"install"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"--save"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"react-native-video"})]})})}),"\n",(0,a.jsx)(n.p,{children:"or using yarn:"}),"\n",(0,a.jsx)(n.pre,{"data-language":"shell","data-theme":"default",children:(0,a.jsx)(n.code,{"data-language":"shell","data-theme":"default",children:(0,a.jsxs)(n.span,{className:"line",children:[(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"yarn"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"add"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"react-native-video"})]})})}),"\n",(0,a.jsx)(n.p,{children:"Then follow the instructions for your platform to link react-native-video into your project"}),"\n",(0,a.jsx)(n.h1,{children:"Specific platform installation"}),"\n",(0,a.jsxs)(n.details,{children:["\n",(0,a.jsx)(n.summary,{children:"iOS"}),"\n",(0,a.jsx)(n.h2,{id:"ios",children:"iOS"}),"\n",(0,a.jsx)(n.h3,{id:"standard-method",children:"Standard Method"}),"\n",(0,a.jsx)(n.h3,{id:"enable-custom-feature-in-podfile-file",children:"Enable custom feature in podfile file"}),"\n",(0,a.jsxs)(n.p,{children:["Samples available in sample app see ",(0,a.jsx)(n.a,{href:"https://github.com/react-native-video/react-native-video/blob/9c669a2d8a53df36773fd82ff0917280d0659bc7/examples/basic/ios/Podfile#L34",children:"sample pod file"})]}),"\n",(0,a.jsx)(n.h4,{id:"video-caching",children:"Video caching"}),"\n",(0,a.jsxs)(n.p,{children:["To enable Video caching usage, add following line in your podfile:\n(",(0,a.jsx)(n.a,{href:"other/caching",children:"more info here"}),")"]}),"\n",(0,a.jsx)(n.pre,{"data-language":"podfile","data-theme":"default",children:(0,a.jsxs)(n.code,{"data-language":"podfile","data-theme":"default",children:[(0,a.jsx)(n.span,{className:"line",children:(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"# enable Video caching"})}),"\n",(0,a.jsx)(n.span,{className:"line",children:(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"+ $RNVideoUseVideoCaching=true"})})]})}),"\n",(0,a.jsx)(n.h4,{id:"google-ima",children:"Google IMA"}),"\n",(0,a.jsxs)(n.p,{children:["Google IMA is the google SDK to support Client Side Ads Integration (CSAI), see ",(0,a.jsx)(n.a,{href:"https://developers.google.com/interactive-media-ads/docs/sdks/ios/client-side",children:"google documentation"})," for more information."]}),"\n",(0,a.jsx)(n.p,{children:"To enable google IMA usage define add following line in your podfile:"}),"\n",(0,a.jsx)(n.pre,{"data-language":"podfile","data-theme":"default",children:(0,a.jsx)(n.code,{"data-language":"podfile","data-theme":"default",children:(0,a.jsx)(n.span,{className:"line",children:(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"$RNVideoUseGoogleIMA=true"})})})}),"\n"]}),"\n",(0,a.jsxs)(n.details,{children:["\n",(0,a.jsx)(n.summary,{children:"Android"}),"\n",(0,a.jsx)(n.h2,{id:"android",children:"Android"}),"\n",(0,a.jsx)(n.p,{children:"From version >= 6.0.0, your application needs to have kotlin version >= 1.7.0"}),"\n",(0,a.jsx)(n.pre,{"data-language":":","data-theme":"default",children:(0,a.jsxs)(n.code,{"data-language":":","data-theme":"default",children:[(0,a.jsx)(n.span,{className:"line",children:(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"buildscript {"})}),"\n",(0,a.jsx)(n.span,{className:"line",children:(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"    ..."})}),"\n",(0,a.jsx)(n.span,{className:"line",children:(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"    ext.kotlinVersion = '1.7.0'"})}),"\n",(0,a.jsx)(n.span,{className:"line",children:(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"    ..."})}),"\n",(0,a.jsx)(n.span,{className:"line",children:(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,a.jsx)(n.h3,{id:"enable-custom-feature-in-gradle-file",children:"Enable custom feature in gradle file"}),"\n",(0,a.jsx)(n.h4,{id:"enable-client-side-ads-insertion",children:"Enable client side ads insertion"}),"\n",(0,a.jsx)(n.p,{children:"To enable client side ads insertion CSAI with google IMA SDK, you need to enable it in your gradle file."}),"\n",(0,a.jsx)(n.pre,{"data-language":"gradle","data-theme":"default",children:(0,a.jsxs)(n.code,{"data-language":"gradle","data-theme":"default",children:[(0,a.jsx)(n.span,{className:"line",children:(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"buildscript {"})}),"\n",(0,a.jsx)(n.span,{className:"line",children:(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"  ext {"})}),"\n",(0,a.jsx)(n.span,{className:"line",children:(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"    ..."})}),"\n",(0,a.jsx)(n.span,{className:"line",children:(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"    RNVUseExoplayerIMA = true"})}),"\n",(0,a.jsx)(n.span,{className:"line",children:(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"    ..."})}),"\n",(0,a.jsx)(n.span,{className:"line",children:(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"  }"})}),"\n",(0,a.jsx)(n.span,{className:"line",children:(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,a.jsxs)(n.p,{children:["See ",(0,a.jsx)(n.a,{href:"https://github.com/react-native-video/react-native-video/blob/9c669a2d8a53df36773fd82ff0917280d0659bc7/examples/basic/android/build.gradle#L14C5-L14C5",children:"sample app"})]}),"\n"]}),"\n",(0,a.jsxs)(n.details,{children:["\n",(0,a.jsx)(n.summary,{children:"Windows"}),"\n",(0,a.jsx)(n.h2,{id:"windows",children:"Windows"}),"\n",(0,a.jsx)(n.h3,{id:"autolinking",children:"Autolinking"}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"React Native Windows 0.63 and above"})}),"\n",(0,a.jsx)(n.p,{children:"Autolinking should automatically add react-native-video to your app."}),"\n",(0,a.jsx)(n.h3,{id:"manual-linking",children:"Manual Linking"}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"React Native Windows 0.62"})}),"\n",(0,a.jsx)(n.p,{children:"Make the following additions to the given files manually:"}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.code,{children:"windows\\myapp.sln"})}),"\n",(0,a.jsxs)(n.p,{children:["Add the ",(0,a.jsx)(n.em,{children:"ReactNativeVideoCPP"})," project to your solution (eg. ",(0,a.jsx)(n.code,{children:"windows\\myapp.sln"}),"):"]}),"\n",(0,a.jsxs)(n.ol,{children:["\n",(0,a.jsx)(n.li,{children:"Open your solution in Visual Studio 2019"}),"\n",(0,a.jsx)(n.li,{children:"Right-click Solution icon in Solution Explorer > Add > Existing Project..."}),"\n",(0,a.jsxs)(n.li,{children:["Select ",(0,a.jsx)(n.code,{children:"node_modules\\react-native-video\\windows\\ReactNativeVideoCPP\\ReactNativeVideoCPP.vcxproj"})]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.code,{children:"windows\\myapp\\myapp.vcxproj"})}),"\n",(0,a.jsxs)(n.p,{children:["Add a reference to ",(0,a.jsx)(n.em,{children:"ReactNativeVideoCPP"})," to your main application project (eg. ",(0,a.jsx)(n.code,{children:"windows\\myapp\\myapp.vcxproj"}),"):"]}),"\n",(0,a.jsxs)(n.ol,{children:["\n",(0,a.jsx)(n.li,{children:"Open your solution in Visual Studio 2019"}),"\n",(0,a.jsx)(n.li,{children:"Right-click main application project > Add > Reference..."}),"\n",(0,a.jsxs)(n.li,{children:["Check ",(0,a.jsx)(n.em,{children:"ReactNativeVideoCPP"})," from Solution Projects"]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.code,{children:"pch.h"})}),"\n",(0,a.jsxs)(n.p,{children:["Add ",(0,a.jsx)(n.code,{children:'#include "winrt/ReactNativeVideoCPP.h"'}),"."]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.code,{children:"app.cpp"})}),"\n",(0,a.jsxs)(n.p,{children:["Add ",(0,a.jsx)(n.code,{children:"PackageProviders().Append(winrt::ReactNativeVideoCPP::ReactPackageProvider());"})," before ",(0,a.jsx)(n.code,{children:"InitializeComponent();"}),"."]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"React Native Windows 0.61 and below"})}),"\n",(0,a.jsxs)(n.p,{children:["Follow the manual linking instructions for React Native Windows 0.62 above, but substitute ",(0,a.jsx)(n.em,{children:"ReactNativeVideoCPP61"})," for ",(0,a.jsx)(n.em,{children:"ReactNativeVideoCPP"}),"."]}),"\n"]}),"\n",(0,a.jsxs)(n.details,{children:["\n",(0,a.jsx)(n.summary,{children:"tvOS"}),"\n",(0,a.jsx)(n.h2,{id:"tvos",children:"tvOS"}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"react-native link react-native-video"})," doesn’t work properly with the tvOS target so we need to add the library manually."]}),"\n",(0,a.jsx)(n.p,{children:"First select your project in Xcode."}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"tvOS step 1",placeholder:"blur",src:r})}),"\n",(0,a.jsx)(n.p,{children:"After that, select the tvOS target of your application and select \xab General \xbb tab"}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"tvOS step 2",placeholder:"blur",src:A})}),"\n",(0,a.jsx)(n.p,{children:"Scroll to \xab Linked Frameworks and Libraries \xbb and tap on the + button"}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"tvOS step 3",placeholder:"blur",src:d})}),"\n",(0,a.jsx)(n.p,{children:"Select RCTVideo-tvOS"}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"tvOS step 4",placeholder:"blur",src:c})}),"\n"]}),"\n\n",(0,a.jsxs)(n.details,{children:["\n",(0,a.jsx)(n.summary,{children:"visionOS"}),"\n",(0,a.jsx)(n.h2,{id:"visionos",children:"visionOS"}),"\n",(0,a.jsxs)(n.p,{children:["Add patch for ",(0,a.jsx)(n.code,{children:"promises"})," pods to your pod files to make it work with ",(0,a.jsx)(n.code,{children:"visionOS"})," target."]}),"\n",(0,a.jsxs)(n.blockquote,{children:["\n",(0,a.jsxs)(n.p,{children:["This patch is required only for ",(0,a.jsx)(n.code,{children:"visionOS"})," target and will be removed in future."]}),"\n"]}),"\n",(0,a.jsx)(n.pre,{"data-language":"diff","data-theme":"default",children:(0,a.jsxs)(n.code,{"data-language":"diff","data-theme":"default",children:[(0,a.jsx)(n.span,{className:"line",children:(0,a.jsx)(n.span,{style:{color:"#4BB74A"},children:"+ pod 'PromisesSwift', :podspec => '../node_modules/react-native-video/ios/patches/PromisesSwift.podspec'"})}),"\n",(0,a.jsx)(n.span,{className:"line",children:(0,a.jsx)(n.span,{style:{color:"#4BB74A"},children:"+ pod 'PromisesObjC', :podspec => '../node_modules/react-native-video/ios/patches/PromisesObjC.podspec'"})})]})}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.strong,{children:"Remember"})," to run ",(0,a.jsx)(n.code,{children:"pod install"})," after adding this patch."]}),"\n",(0,a.jsxs)(n.p,{children:["After this you can follow the same steps as for ",(0,a.jsx)(n.code,{children:"iOS"})," target."]}),"\n"]}),"\n",(0,a.jsx)(n.h2,{id:"examples",children:"Examples"}),"\n",(0,a.jsxs)(n.p,{children:["Run ",(0,a.jsx)(n.code,{children:"yarn xbasic install"})," in the root directory before running any of the examples."]}),"\n",(0,a.jsx)(n.h3,{id:"ios-example",children:"iOS Example"}),"\n",(0,a.jsx)(n.pre,{"data-language":"bash","data-theme":"default",children:(0,a.jsx)(n.code,{"data-language":"bash","data-theme":"default",children:(0,a.jsxs)(n.span,{className:"line",children:[(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"yarn"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"xbasic"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"ios"})]})})}),"\n",(0,a.jsx)(n.h3,{id:"android-example",children:"Android Example"}),"\n",(0,a.jsx)(n.pre,{"data-language":"bash","data-theme":"default",children:(0,a.jsx)(n.code,{"data-language":"bash","data-theme":"default",children:(0,a.jsxs)(n.span,{className:"line",children:[(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"yarn"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"xbasic"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"android"})]})})}),"\n",(0,a.jsx)(n.h3,{id:"windows-example",children:"Windows Example"}),"\n",(0,a.jsx)(n.pre,{"data-language":"bash","data-theme":"default",children:(0,a.jsx)(n.code,{"data-language":"bash","data-theme":"default",children:(0,a.jsxs)(n.span,{className:"line",children:[(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"yarn"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"xbasic"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"windows"})]})})})]})}let p={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,o.a)(),e.components);return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(_createMdxContent,{...e})}):_createMdxContent(e)},pageOpts:{filePath:"pages/installation.md",route:"/installation",timestamp:1711112935e3,pageMap:[{kind:"Meta",data:{index:"Introduction",installation:"Installation",component:"API",other:"Other",separator_versions:{type:"separator",title:""},updating:"Updating",changelog:{title:"Changelog",newWindow:!0,href:"https://github.com/react-native-video/react-native-video/blob/master/CHANGELOG.md"},separator_community:{type:"separator",title:""},projects:"Useful projects"}},{kind:"Folder",name:"component",route:"/component",children:[{kind:"Meta",data:{props:"Properties",drm:"DRM",ads:"Ads",events:"Events",methods:"Methods"}},{kind:"MdxPage",name:"ads",route:"/component/ads"},{kind:"MdxPage",name:"drm",route:"/component/drm"},{kind:"MdxPage",name:"events",route:"/component/events"},{kind:"MdxPage",name:"methods",route:"/component/methods"},{kind:"MdxPage",name:"props",route:"/component/props"}]},{kind:"MdxPage",name:"index",route:"/"},{kind:"MdxPage",name:"installation",route:"/installation"},{kind:"Folder",name:"other",route:"/other",children:[{kind:"Meta",data:{caching:"Caching",misc:"Misc",debug:"Debugging","new-arch":"New Architecture"}},{kind:"MdxPage",name:"caching",route:"/other/caching"},{kind:"MdxPage",name:"debug",route:"/other/debug"},{kind:"MdxPage",name:"misc",route:"/other/misc"},{kind:"MdxPage",name:"new-arch",route:"/other/new-arch"}]},{kind:"MdxPage",name:"projects",route:"/projects"},{kind:"MdxPage",name:"updating",route:"/updating"}],flexsearch:{codeblocks:!0},title:"Installation",headings:h},pageNextRoute:"/installation",nextraLayout:s.ZP,themeConfig:l.Z};var x=(0,t.j)(p)},2702:function(e,n,i){"use strict";var a=i(5893);i(7294),n.Z={head:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("meta",{name:"language",content:"en"}),(0,a.jsx)("meta",{name:"viewport",content:"width=device-width,initial-scale=1"}),(0,a.jsx)("meta",{name:"description",content:"Video component for React Native"}),(0,a.jsx)("meta",{name:"og:title",content:"React Native Video"}),(0,a.jsx)("meta",{name:"og:description",content:"A Video component for React Native"}),(0,a.jsx)("meta",{name:"og:image",content:"https://react-native-video.github.io/react-native-video/thumbnail.jpg"}),(0,a.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,a.jsx)("meta",{name:"twitter:title",content:"React Native Video"}),(0,a.jsx)("meta",{name:"twitter:description",content:"A Video component for React Native"}),(0,a.jsx)("meta",{name:"twitter:image",content:"https://react-native-video.github.io/react-native-video/thumbnail.jpg"}),(0,a.jsx)("meta",{name:"twitter:image:alt",content:"React Native Video"}),(0,a.jsx)("link",{rel:"preconnect",href:"https://fonts.googleapis.com"}),(0,a.jsx)("link",{rel:"preconnect",href:"https://fonts.gstatic.com",crossOrigin:!0}),(0,a.jsx)("link",{href:"https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap",rel:"stylesheet"})]}),logo:(0,a.jsxs)("span",{children:["\uD83C\uDFAC ",(0,a.jsx)("strong",{children:"Video component"})," for React Native"]}),faviconGlyph:"\uD83C\uDFAC",project:{link:"https://github.com/react-native-video/react-native-video"},docsRepositoryBase:"https://github.com/react-native-video/react-native-video/tree/master/docs/",footer:{text:(0,a.jsxs)("span",{children:["Built with love ❤️ by ",(0,a.jsx)("strong",{children:"React Native Community"})]})},useNextSeoProps:()=>({titleTemplate:"%s – Video"})}},5789:function(){}},function(e){e.O(0,[774,890,888,179],function(){return e(e.s=2569)}),_N_E=e.O()}]);