1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["14957"],{47373(e,a,t){t.r(a),t.d(a,{metadata:()=>n,default:()=>g,frontMatter:()=>u,contentTitle:()=>c,toc:()=>p,assets:()=>d});var n=JSON.parse('{"id":"upgrading","title":"Upgrading to new versions","description":"Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it straightforward for you.","source":"@site/versioned_docs/version-0.80/upgrading.md","sourceDirName":".","slug":"/upgrading","permalink":"/docs/0.80/upgrading","draft":false,"unlisted":false,"editUrl":"[{\\"label\\":\\"Edit page for next release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/docs/upgrading.md\\"},{\\"label\\":\\"Edit page for 0.80 release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.80/upgrading.md\\"}]","tags":[],"version":"0.80","lastUpdatedAt":1750181073000,"frontMatter":{"id":"upgrading","title":"Upgrading to new versions"},"sidebar":"docs","previous":{"title":"Strict TypeScript API (opt in)","permalink":"/docs/0.80/strict-typescript-api"},"next":{"title":"Style","permalink":"/docs/0.80/style"}}'),r=t(62540),i=t(43023),l=t(77779),o=t(98263),s=t(38469);let u={id:"upgrading",title:"Upgrading to new versions"},c,d={},p=[{value:"Expo projects",id:"expo-projects",level:2},{value:"React Native projects",id:"react-native-projects",level:2},{value:"1. Select the versions",id:"1-select-the-versions",level:3},{value:"2. Upgrade dependencies",id:"2-upgrade-dependencies",level:3},{value:"3. Upgrade your project files",id:"3-upgrade-your-project-files",level:3},{value:"Troubleshooting",id:"troubleshooting",level:3},{value:"I have done all the changes but my app is still using an old version",id:"i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version",level:4}];function h(e){let a={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(a.p,{children:"Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it straightforward for you."}),"\n",(0,r.jsx)(a.h2,{id:"expo-projects",children:"Expo projects"}),"\n",(0,r.jsxs)(a.p,{children:["Upgrading your Expo project to a new version of React Native requires updating the ",(0,r.jsx)(a.code,{children:"react-native"}),", ",(0,r.jsx)(a.code,{children:"react"}),", and ",(0,r.jsx)(a.code,{children:"expo"})," package versions in your ",(0,r.jsx)(a.code,{children:"package.json"})," file. Expo recommends upgrading SDK versions incrementally, one at a time. Doing so will help you pinpoint breakages and issues that arise during the upgrade process. See the ",(0,r.jsx)(a.a,{href:"https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/",children:"Upgrading Expo SDK Walkthrough"})," for up-to-date information about upgrading your project."]}),"\n",(0,r.jsx)(a.h2,{id:"react-native-projects",children:"React Native projects"}),"\n",(0,r.jsxs)(a.p,{children:["Because typical React Native projects are essentially made up of an Android project, an iOS project, and a JavaScript project, upgrading can be rather tricky. The ",(0,r.jsx)(a.a,{href:"https://react-native-community.github.io/upgrade-helper/",children:"Upgrade Helper"})," is a web tool to help you out when upgrading your apps by providing the full set of changes happening between any two versions. It also shows comments on specific files to help understanding why that change is needed."]}),"\n",(0,r.jsx)(a.h3,{id:"1-select-the-versions",children:"1. Select the versions"}),"\n",(0,r.jsx)(a.p,{children:'You first need to select from and to which version you wish to upgrade, by default the latest major versions are selected. After selecting you can click the button "Show me how to upgrade".'}),"\n",(0,r.jsx)(a.p,{children:'\u{1F4A1} Major updates will show a "useful content" section on the top with links to help you out when upgrading.'}
1),"\n",(0,r.jsx)(a.h3,{id:"2-upgrade-dependencies",children:"2. Upgrade dependencies"}),"\n",(0,r.jsxs)(a.p,{children:["The first file that is shown is the ",(0,r.jsx)(a.code,{children:"package.json"}),", it's good to update the dependencies that are showing in there. For example, if ",(0,r.jsx)(a.code,{children:"react-native"})," and ",(0,r.jsx)(a.code,{children:"react"})," appears as changes then you can install it in your project by running following commands:"]}),"\n",(0,r.jsxs)(l.A,{groupId:"package-manager",queryString:!0,defaultValue:s.A.defaultPackageManager,values:s.A.packageManagers,children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-shell",children:"# {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff\nnpm install react-native@{{VERSION}}\nnpm install react@{{REACT_VERSION}}\n"})})}),(0,r.jsx)(o.A,{value:"yarn",children:(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-shell",children:"# {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff\nyarn add react-native@{{VERSION}}\nyarn add react@{{REACT_VERSION}}\n"})})})]}),"\n",(0,r.jsx)(a.h3,{id:"3-upgrade-your-project-files",children:"3. Upgrade your project files"}),"\n",(0,r.jsxs)(a.p,{children:["The new release may contain updates to other files that are generated when you run ",(0,r.jsx)(a.code,{children:"npx react-native init"}),", those files are listed after the ",(0,r.jsx)(a.code,{children:"package.json"})," in the ",(0,r.jsx)(a.a,{href:"https://react-native-community.github.io/upgrade-helper/",children:"Upgrade Helper"})," page. If there aren't other changes then you only need to rebuild the project to continue developing. In case there are changes you need to manually apply them into your project."]}),"\n",(0,r.jsx)(a.h3,{id:"troubleshooting",children:"Troubleshooting"}),"\n",(0,r.jsx)(a.h4,{id:"i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version",children:"I have done all the changes but my app is still using an old version"}),"\n",(0,r.jsxs)(a.p,{children:["These sort of errors are usually related to caching, it's recommended to install ",(0,r.jsx)(a.a,{href:"https://github.com/pmadruga/react-native-clean-project",children:"react-native-clean-project"})," to clear all your project's cache and then you can run it again."]})]})}function g(e={}){let{wrapper:a}={...(0,i.R)(),...e.components};return a?(0,r.jsx)(a,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},98263(e,a,t){t.d(a,{A:()=>o});var n=t(62540);t(63696);var r=t(11750),i=t(23865);function l({children:e,className:a,hidden:t}){return(0,n.jsx)("div",{role:"tabpanel",className:(0,r.A)("tabItem_wHwb",a),hidden:t,children:e})}function o({children:e,className:a,value:t}){let{selectedValue:r,lazy:s}=(0,i.uc)(),u=t===r;return!u&&s?null:(0,n.jsx)(l,{className:a,hidden:!u,children:e})}},77779(e,a,t){t.d(a,{A:()=>p});var n=t(62540);t(63696);var r=t(11750),i=t(46065),l=t(23865),o=t(45194),s=t(83029);function u({className:e}){let{selectedValue:a,selectValue:t,tabValues:i,block:s}=(0,l.uc)(),c=[],{blockElementScrollPositionUntilNextRender:d}=(0,o.a_)(),p=e=>{let n=e.currentTarget,r=i[c.indexOf(n)].value;r!==a&&(d(n),t(r))},h=e=>{let a=null;switch(e.key){case"Enter":p(e);break;case"ArrowRight":{let t=c.indexOf(e.currentTarget)+1;a=c[t]??c[0];break}case"ArrowLeft":{let t=c.indexOf(e.currentTarget)-1;a=c[t]??c[c.length-1]}}a?.focus()};return(0,n.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},e),children:i.map(({value:e,label:t,attributes:i})=>(0,n.jsx)("li",{role:"tab",tabIndex:a===e?0:-1,"aria-selected":a===e,ref:e=>{c.push(e)},onKeyDown:h,onClick:p,...i,className:(0,r.A)("tabs__item","tabItem_l0OV",i?.className,{"tabs__item--active":a===e}),children:t??e},e))})}function c({children:e}){return(0,n.jsx)("div",{className:"margin-top--md",children:e})}function d({className:e,children:a}){return(0,n.jsxs)("div",{className:(0,r.A)(i.G.tabs.container,"tabs-container","tabList_J5MA"),children:[(0,n.jsx)(u,{className:e}),(0,n.jsx)(c,{children:a})]})}function p(e){let a=(0,s.A)(),t=(0,l.OC)(e);return(0,n.jsx)(l.O_,{value:t,children:(0,n.jsx)(d,{className:e.className,children:(0,l.vT)(e.children)})},String(a))}},23865(e,a,t){t.d(a,{OC:()=>p,O_:()=>v,uc:()=>g,vT:()=>c});var n=t(62540),r=t(63696),i=t(49519),l=t(6743),o=t(88511),s=t(15396),u=t(89030);function c(e){return r.Children.toArray(e).filter(e=>"\n"!==e)}function d({value:e,tabValues:a}){return a.some(a=>a.value===e)}function p(e){let a,{defaultValue:t,queryString:n=!1,groupId:c}=e,p=function(e){let{values:a,children:t}=e;return(0,r.useMemo)(()=>{let e=a??r.Children.toArray(t).flatMap(e=>{if(!e)return[];if((0,r.isValidElement)(e)&&function(e){let{props:a}=e;return!!a&&"object"==typeof a&&"value"in a}(e))return[e];
1let a="string"==typeof e.type?e.type:e.type.name;throw Error(`Docusaurus error: Bad <Tabs> child <${a}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop. 2If you do not want to pass on a "value" prop to the direct children of <Tabs>, you can also pass an explicit <Tabs values={...}> prop.`)}).map(({props:{value:e,label:a,attributes:t,default:n}})=>({value:e,label:a,attributes:t,default:n})),n=(0,s.XI)(e,(e,a)=>e.value===a.value);if(n.length>0)throw Error(`Docusaurus error: Duplicate values "${n.map(e=>`'${e.value}'`).join(", ")}" found in <Tabs>. Every value needs to be unique.`);return e},[a,t])}(e),[h,g]=(0,r.useState)(()=>(function({defaultValue:e,tabValues:a}){if(0===a.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!d({value:e,tabValues:a}))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${a.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}let t=a.find(e=>e.default)??a[0];if(!t)throw Error("Unexpected error: 0 tabValues");return t.value})({defaultValue:t,tabValues:p})),[v,f]=function({queryString:e=!1,groupId:a}){let t=(0,i.W6)(),n=function({queryString:e=!1,groupId:a}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!a)throw Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return a??null}({queryString:e,groupId:a});return[(0,o.aZ)(n),(0,r.useCallback)(e=>{if(!n)return;let a=new URLSearchParams(t.location.search);a.set(n,e),t.replace({...t.location,search:a.toString()})},[n,t])]}({queryString:n,groupId:c}),[b,m]=function({groupId:e}){let a=e?`docusaurus.tab.${e}`:null,[t,n]=(0,u.Dv)(a);return[t,(0,r.useCallback)(e=>{a&&n.set(e)},[a,n])]}({groupId:c}),j=d({value:a=v??b,tabValues:p})?a:null;return(0,l.A)(()=>{j&&g(j)},[j]),{selectedValue:h,selectValue:(0,r.useCallback)(e=>{if(!d({value:e,tabValues:p}))throw Error(`Can't select invalid tab value=${e}`);g(e),f(e),m(e)},[f,m,p]),tabValues:p,lazy:e.lazy??!1,block:e.block??!1}}let h=(0,r.createContext)(null);function g(){let e=r.useContext(h);if(!e)throw Error("useTabsContext() must be used within a Tabs component");return e}function v(e){return(0,n.jsx)(h.Provider,{value:e.value,children:e.children})}},38469(e,a,t){t.d(a,{A:()=>l});var n=t(93227);let r=!!n.A.canUseDOM&&navigator.platform.startsWith("Mac"),i=!!n.A.canUseDOM&&navigator.platform.startsWith("Win"),l={defaultGuide:"quickstart",defaultJsDebugger:"flipper",defaultOs:r?"macos":i?"windows":"linux",defaultPackageManager:"npm",defaultPlatform:r?"ios":"android",defaultSyntax:"functional",defaultAndroidLanguage:"java",defaultAppleLanguage:"objc",defaultJavaScriptSpecLanguages:"typescript",getDevNotesTabs:(e=["android","ios","web","windows"])=>[e.includes("android")?{label:"Android",value:"android"}:void 0,e.includes("ios")?{label:"iOS",value:"ios"}:void 0,e.includes("web")?{label:"Web",value:"web"}:void 0,e.includes("windows")?{label:"Windows",value:"windows"}:void 0].filter(Boolean),guides:[{label:"Expo Go Quickstart",value:"quickstart"},{label:"React Native CLI Quickstart",value:"native"}],oses:[{label:"macOS",value:"macos"},{label:"Windows",value:"windows"},{label:"Linux",value:"linux"}],packageManagers:[{label:"npm",value:"npm"},{label:"Yarn",value:"yarn"}],platforms:[{label:"Android",value:"android"},{label:"iOS",value:"ios"}],syntax:[{label:"Function Component",value:"functional"},{label:"Class Component",value:"classical"}],androidLanguages:[{label:"Java",value:"java"},{label:"Kotlin",value:"kotlin"}],appleLanguages:[{label:"ObjectiveC",value:"objc"},{label:"Swift",value:"swift"}],javaScriptSpecLanguages:[{label:"TypeScript",value:"typescript"},{label:"Flow",value:"flow"}],jsDebuggers:[{label:"Hermes Debugger / Expo",value:"hermes"},{label:"Flipper",value:"flipper"},{label:"New Debugger (Experimental)",value:"new-debugger"}],snackLanguages:[{label:"TypeScript",value:"typescript"},{label:"JavaScript",value:"javascript"}],defaultSnackLanguage:"typescript"}},43023(e,a,t){t.d(a,{R:()=>l,x:()=>o});var n=t(63696);let r={},i=n.createContext(r);function l(e){let a=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(a):{...a,...e}},[a,e])}function o(e){let a;return a=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),n.createElement(i.Provider,{value:a},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.