https://www.vdocipher.com/docs/assets/js/f7fff321.0258583b.js

1"use strict";(self.webpackChunkdocusaurus=self.webpackChunkdocusaurus||[]).push([[6659],{20531:(e,r,n)=>{n.r(r),n.d(r,{assets:()=>i,contentTitle:()=>d,default:()=>h,frontMatter:()=>t,metadata:()=>s,toc:()=>o});var a=n(74848),l=n(28453);const t={id:"migration",title:"Migration",sidebar_label:"Migration"},d=void 0,s={id:"mobile/react-native/migration",title:"Migration",description:"Breaking changes and upgrade steps for each release.",source:"@site/docs/mobile/react-native/migration.md",sourceDirName:"mobile/react-native",slug:"/mobile/react-native/migration",permalink:"/docs/mobile/react-native/migration",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{id:"migration",title:"Migration",sidebar_label:"Migration"},sidebar:"mobile",previous:{title:"Changelog",permalink:"/docs/mobile/react-native/changelog"},next:{title:"Playlists",permalink:"/docs/mobile/react-native/examples/playlist"}},i={},o=[{value:"2.0.0",id:"200",level:2},{value:"<code>playWhenReady</code> and <code>playbackSpeed</code> props -&gt; methods",id:"playwhenready-and-playbackspeed-props---methods",level:3},{value:"New <code>autoPlay</code> prop",id:"new-autoplay-prop",level:3},{value:"<code>getPlaybackProperties()</code> removed -&gt; <code>getPlaybackPropertiesV2()</code>",id:"getplaybackproperties-removed---getplaybackpropertiesv2",level:3},{value:"<code>enterFullscreen()</code> / <code>exitFullscreen()</code> removed -&gt; V2",id:"enterfullscreen--exitfullscreen-removed---v2",level:3},{value:"After upgrading, rebuild natively",id:"after-upgrading-rebuild-natively",level:3}];function c(e){const r={code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,l.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(r.p,{children:"Breaking changes and upgrade steps for each release."}),"\n",(0,a.jsx)(r.h2,{id:"200",children:"2.0.0"}),"\n",(0,a.jsxs)(r.p,{children:["Adds ",(0,a.jsx)(r.strong,{children:"React Native New Architecture (Fabric & TurboModules)"})," support while keeping the old architecture working. Check the details of the updated APIs below -"]}),"\n",(0,a.jsxs)(r.h3,{id:"playwhenready-and-playbackspeed-props---methods",children:[(0,a.jsx)(r.code,{children:"playWhenReady"})," and ",(0,a.jsx)(r.code,{children:"playbackSpeed"})," props -> methods"]}),"\n",(0,a.jsxs)(r.p,{children:[(0,a.jsx)(r.strong,{children:"What changed:"})," both props are gone. Call ",(0,a.jsx)(r.code,{children:"play()"}),", ",(0,a.jsx)(r.code,{children:"pause()"})," and ",(0,a.jsx)(r.code,{children:"setPlaybackSpeed()"})," on the component ",(0,a.jsx)(r.code,{children:"ref"}),"."]}),"\n",(0,a.jsxs)(r.p,{children:[(0,a.jsx)(r.strong,{children:"Why:"})," React Native's newer versions changed a few things internally and to cater to these changes, certain props are now exposed as methods."]}),"\n",(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-jsx",children:"// before\n<VdoPlayerView embedInfo={embedInfo} playWhenReady={isPlaying} playbackSpeed={1.5} />\n\n// after\n<VdoPlayerView ref={(r) => (this.player = r)} embedInfo={embedInfo} />\n\nthis.player.play();                 // was playWhenReady={true}\nthis.player.pause();                // was playWhenReady={false}\nthis.player.setPlaybackSpeed(1.5);  // was playbackSpeed={1.5}\n"})}),"\n",(0,a.jsxs)(r.h3,{id:"new-autoplay-prop",children:["New ",(0,a.jsx)(r.code,{children:"autoPlay"})," prop"]}),"\n",(0,a.jsxs)(r.p,{children:[(0,a.jsx)(r.strong,{children:"Why:"})," ",(0,a.jsx)(r.code,{children:"playWhenReady"})," also decided whether playback started automatically on first load. Since it's gone, that initial-load behaviour is now the ",(0,a.jsx)(r.code,{children:"autoPlay"})," prop (default ",(0,a.jsx)(r.code,{children:"true"}),")."]}),"\n",(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-jsx",children:"<VdoPlayerView embedInfo={embedInfo} autoPlay={false} /> // loads paused; call play() when ready\n"})}),"\n",(0,a.jsxs)(r.h3,{id:"getplaybackproperties-removed---getplaybackpropertiesv2",children:[(0,a.jsx)(r.code,{children:"getPlaybackProperties()"})," removed -> ",(0,a.jsx)(r.code,{children:"getPlaybackPropertiesV2()"})]}),"\n",(0,a.jsxs)(r.p,{children:[(0,a.jsx)(r.strong,{children:"What changed:"})," the deprecated ",(0,a.jsx)(r.code,{children:"getPlaybackProperties()"})," and its ",(0,a.jsx)(r.code,{children:"onPlaybackProperties"})," callback prop are removed."]}),"\n",(0,a.jsxs)(r.p,{children:[(0,a.jsx)(r.strong,{children:"Why:"})," it was already deprecated and event-based. ",(0,a.jsx)(r.code,{children:"getPlaybackPropertiesV2()"})," is the direct replacement and works the same on both platforms."]}),"\n",(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-js",children:"const {totalPlayed, totalCovered} = await this.player.getPlaybackPropertiesV2();\n"})}),"\n",(0,a.jsxs)(r.h3,{id:"enterfullscreen--exitfullscreen-removed---v2",children:[(0,a.jsx)(r.code,{children:"enterFullscreen()"})," / ",(0,a.jsx)(r.code,{children:"exitFullscreen()"})," removed -> V2"]}),"\n",(0,a.jsxs)(r.p,{children:[(0,a.jsx)(r.strong,{children:"What changed:"})," the deprecated ",(0,a.jsx)(r.code,{children:"enterFullscreen()"})," / ",(0,a.jsx)(r.code,{children:"exitFullscreen()"})," are removed. Use ",(0,a.jsx)(r.code,{children:"enterFullscreenV2()"})," / ",(0,a.jsx)(r.code,{children:"exitFullscreenV2()"}),"."]}),"\n",(0,a.jsxs)(r.p,{children:[(0,a.jsx)(r.strong,{children:"Why:"})," the V1 methods were long deprecated. The V2 methods are the supported ones for the player with native controls."]}),"\n",(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-js",children:"this.player.enterFullscreenV2();\nthis.player.exitFullscreenV2();\n"})}),"\n",(0,a.jsx)(r.h3,{id:"after-upgrading-rebuild-natively",children:"After upgrading, rebuild natively"}),"\n",(0,a.jsx)(r.p,{children:"This ensures the latest code changes are picked up and the codegen files are regenerated."}),"\n",(0,a.jsxs)(r.ul,{children:["\n",(0,a.jsxs)(r.li,{children:[(0,a.jsx)(r.strong,{children:"iOS:"})," ",(0,a.jsx)(r.code,{children:"cd ios && rm -rf Pods Podfile.lock build && pod install"}),", then clean build."]}),"\n",(0,a.jsxs)(r.li,{children:[(0,a.jsx)(r.strong,{children:"Android:"})," ",(0,a.jsx)(r.code,{children:"cd android && ./gradlew clean"}),", then rebuild."]}),"\n"]})]})}function h(e={}){const{wrapper:r}={...(0,l.R)(),...e.components};return r?(0,a.jsx)(r,{...e,children:(0,a.jsx)(c,{...e})}):c(e)}},28453:(e,r,n)=>{n.d(r,{R:()=>d,x:()=>s});var a=n(96540);const l={},t=a.createContext(l);function d(e){const r=a.useContext(t);return a.useMemo(function(){return"function"==typeof e?e(r):{...r,...e}},[r,e])}function s(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:d(e.components),a.createElement(t.Provider,{value:r},e.children)}}}]);