Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
d6c8c31cb1b90073b4e69748e793e44fcad192fe
react-native/docs/0.48/upgrading.html
T
Website Deployment Script d6c8c31cb1 Deploy website 
Deploy website version based on aa6bca5d8b7a59a46c8e4e5a6803f43206c13b65
2020-09-16 06:40:19 +00:00

169 lines
41 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Upgrading to new React Native versions · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="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."/><meta name="docsearch:version" content="0.48"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Upgrading to new React Native versions · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://reactnative.dev/"/><meta property="og:description" content="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."/><meta property="og:image" content="https://reactnative.dev/img/logo-og.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://reactnative.dev/img/logo-og.png"/><link rel="shortcut icon" href="/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://reactnative.dev/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://reactnative.dev/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-2', 'auto');
ga('send', 'pageview');
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/focus-visible@5.0.2/dist/focus-visible.min.js"></script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="/js/codeblocks.js"></script><script type="text/javascript" src="/js/tabs.js"></script><script type="text/javascript" src="/js/docs-rating.js"></script><script src="https://unpkg.com/vanilla-back-to-top@7.1.14/dist/vanilla-back-to-top.min.js"></script><script>
document.addEventListener('DOMContentLoaded', function() {
addBackToTop(
{"zIndex":100}
)
});
</script><script src="/js/scrollSpy.js"></script><link rel="stylesheet" href="/css/prism.css"/><link rel="stylesheet" href="/css/main.css"/><script src="/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><img class="logo" src="/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/versions"><h3>0.48</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/docs/0.48/getting-started" target="_self">Docs</a></li><li class="siteNavGroupActive"><a href="/docs/0.48/components-and-apis" target="_self">Components</a></li><li class="siteNavGroupActive"><a href="/docs/0.48/accessibilityinfo" target="_self">API</a></li><li class=""><a href="/help" target="_self">Community</a></li><li class=""><a href="/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><div class="hamburger-menu"><div class="line1"></div><div class="line2"></div><div class="line3"></div></div></div><h2><i>›</i><span>Guides</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">The Basics<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.48/getting-started">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/tutorial">Learn the Basics</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/props">Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/state">State</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/style">Style</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/height-and-width">Height and Width</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/flexbox">Layout with Flexbox</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/handling-text-input">Handling Text Input</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/handling-touches">Handling Touches</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/using-a-scrollview">Using a ScrollView</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/using-a-listview">Using List Views</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/network">Networking</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/more-resources">More Resources</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Guides<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.48/components-and-apis">Components and APIs</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/platform-specific-code">Platform Specific Code</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/navigation">Navigating Between Screens</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/images">Images</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/animations">Animations</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/accessibility">Accessibility</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/improvingux">Improving User Experience</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/timers">Timers</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/debugging">Debugging</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/performance">Performance</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/gesture-responder-system">Gesture Responder System</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/javascript-environment">JavaScript Environment</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/direct-manipulation">Direct Manipulation</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/colors">Color Reference</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/running-on-device">Running On Device</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/docs/0.48/upgrading">Upgrading to new React Native versions</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/troubleshooting">Troubleshooting</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/native-modules-setup">Native Modules Setup</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Guides (iOS)<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.48/native-modules-ios">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/native-components-ios">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/linking-libraries-ios">Linking Libraries</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/running-on-simulator-ios">Running On Simulator</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/communication-ios">Communication between native and React Native</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/building-for-tv">Building For TV Devices</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/app-extensions">App Extensions</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Guides (Android)<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.48/native-modules-android">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/native-components-android">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/headless-js-android">Headless JS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/signed-apk-android">Publishing to Google Play Store</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/removing-default-permissions">Removing Default Permissions</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Components<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.48/activityindicator">ActivityIndicator</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/button">Button</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/datepickerios">DatePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/drawerlayoutandroid">DrawerLayoutAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/flatlist">FlatList</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/image">Image</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/imagebackground">ImageBackground</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/keyboardavoidingview">KeyboardAvoidingView</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/listview">ListView</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/maskedviewios">MaskedViewIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/modal">Modal</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/navigatorios">NavigatorIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/picker">Picker</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/pickerios">PickerIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/progressbarandroid">ProgressBarAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/progressviewios">ProgressViewIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/refreshcontrol">RefreshControl</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/scrollview">ScrollView</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/sectionlist">SectionList</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/segmentedcontrolios">SegmentedControlIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/slider">Slider</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/snapshotviewios">SnapshotViewIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/statusbar">StatusBar</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/switch">Switch</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/tabbarios">TabBarIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/tabbarios-item">TabBarIOS.Item</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/text">Text</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/textinput">TextInput</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/toolbarandroid">ToolbarAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/touchablehighlight">TouchableHighlight</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/touchablenativefeedback">TouchableNativeFeedback</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/touchableopacity">TouchableOpacity</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/touchablewithoutfeedback">TouchableWithoutFeedback</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/view">View</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/viewpagerandroid">ViewPagerAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/virtualizedlist">VirtualizedList</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/webview">WebView</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">APIs<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.48/accessibilityinfo">AccessibilityInfo</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/actionsheetios">ActionSheetIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/alert">Alert</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/alertios">AlertIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/animated">Animated</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/appregistry">AppRegistry</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/appstate">AppState</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/asyncstorage">AsyncStorage</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/backandroid">BackAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/backhandler">BackHandler</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/cameraroll">CameraRoll</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/clipboard">Clipboard</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/datepickerandroid">DatePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/dimensions">Dimensions</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/easing">Easing</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/geolocation">Geolocation</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/imageeditor">ImageEditor</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/imagepickerios">ImagePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/imagestore">ImageStore</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/image-style-props">Image Style Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/interactionmanager">InteractionManager</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/keyboard">Keyboard</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/layout-props">Layout Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/layoutanimation">LayoutAnimation</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/linking">Linking</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/listviewdatasource">ListViewDataSource</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/netinfo">NetInfo</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/panresponder">PanResponder</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/permissionsandroid">PermissionsAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/pixelratio">PixelRatio</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/pushnotificationios">PushNotificationIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/settings">Settings</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/shadow-props">Shadow Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/share">Share</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/statusbarios">StatusBarIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/stylesheet">StyleSheet</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/systrace">Systrace</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/text-style-props">Text Style Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/timepickerandroid">TimePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/toastandroid">ToastAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/transforms">Transforms</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/vibration">Vibration</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/vibrationios">VibrationIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.48/view-style-props">View Style Props</a></li></ul></div></div></section></div><script>
var coll = document.getElementsByClassName('collapsible');
var checkActiveCategory = true;
for (var i = 0; i < coll.length; i++) {
var links = coll[i].nextElementSibling.getElementsByTagName('*');
if (checkActiveCategory){
for (var j = 0; j < links.length; j++) {
if (links[j].classList.contains('navListItemActive')){
coll[i].nextElementSibling.classList.toggle('hide');
coll[i].childNodes[1].classList.toggle('rotate');
checkActiveCategory = false;
break;
}
}
}
coll[i].addEventListener('click', function() {
var arrow = this.childNodes[1];
arrow.classList.toggle('rotate');
var content = this.nextElementSibling;
content.classList.toggle('hide');
});
}
document.addEventListener('DOMContentLoaded', function() {
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
createToggler('#tocToggler', 'body', 'tocActive');
var headings = document.querySelector('.toc-headings');
headings && headings.addEventListener('click', function(event) {
var el = event.target;
while(el !== headings){
if (el.tagName === 'A') {
document.body.classList.remove('tocActive');
break;
} else{
el = el.parentNode;
}
}
}, false);
function createToggler(togglerSelector, targetSelector, className) {
var toggler = document.querySelector(togglerSelector);
var target = document.querySelector(targetSelector);
if (!toggler) {
return;
}
toggler.onclick = function(event) {
event.preventDefault();
target.classList.toggle(className);
};
}
});
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/upgrading.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">Upgrading to new React Native versions</h1></header><article><div><span><p>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.</p>
<h2><a class="anchor" aria-hidden="true" id="expo-projects"></a><a href="#expo-projects" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Expo projects</h2>
<p>Upgrading your Expo project to a new version of React Native requires updating the <code>react-native</code>, <code>react</code>, and <code>expo</code> package versions in your <code>package.json</code> file. Please refer to <a href="https://docs.expo.io/versions/latest/sdk/#sdk-version">this list</a> to find out what versions are supported. You will also need to set the correct <code>sdkVersion</code> in your <code>app.json</code> file.</p>
<p>See the <a href="https://docs.expo.io/versions/latest/workflow/upgrading-expo-sdk-walkthrough">Upgrading Expo SDK Walkthrough</a> for up-to-date information about upgrading your project.</p>
<h2><a class="anchor" aria-hidden="true" id="react-native-projects"></a><a href="#react-native-projects" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native projects</h2>
<p>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. There's currently two ways for upgrading your React Native project: by using <a href="https://github.com/react-native-community/cli">React Native CLI</a> or manually with <a href="https://github.com/react-native-community/upgrade-helper">Upgrade Helper</a>.</p>
<h3><a class="anchor" aria-hidden="true" id="react-native-cli"></a><a href="#react-native-cli" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native CLI</h3>
<p>The <a href="https://github.com/react-native-community/cli">React Native CLI</a> comes with <code>upgrade</code> command that provides a one-step operation to upgrade the source files with a minimum of conflicts, it internally uses <a href="https://github.com/react-native-community/rn-diff-purge">rn-diff-purge</a> project to find out which files need to be created, removed or modified.</p>
<h4><a class="anchor" aria-hidden="true" id="1-run-the-upgrade-command"></a><a href="#1-run-the-upgrade-command" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Run the <code>upgrade</code> command</h4>
<blockquote>
<p>The <code>upgrade</code> command works on top of Git by using <code>git apply</code> with 3-way merge, therefore it's required to use Git in order for this to work, if you don't use Git but still want to use this solution then you can check out how to do it in the <a href="#i-want-to-upgrade-with-react-native-cli-but-i-don-t-use-git">Troubleshooting</a> section.</p>
</blockquote>
<p>Run the following command to start the process of upgrading to the latest version:</p>
<pre><code class="hljs css language-sh">react-native upgrade
</code></pre>
<p>You may specify a React Native version by passing an argument, e.g. to upgrade to <code>0.61.0-rc.0</code> run:</p>
<pre><code class="hljs css language-sh">react-native upgrade <span class="token number">0.61</span>.0-rc.0
</code></pre>
<p>The project is upgraded using <code>git apply</code> with 3-way merge, it may happen that you'll need to resolve a few conflicts after it's finished.</p>
<h4><a class="anchor" aria-hidden="true" id="2-resolve-the-conflicts"></a><a href="#2-resolve-the-conflicts" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Resolve the conflicts</h4>
<p>Conflicted files include delimiters which make very clear where the changes come from. For example:</p>
<pre><code class="hljs"><span class="hljs-number">13</span>B07F951A680F5B00A75B9A <span class="hljs-comment">/* Release */</span> = {
<span class="hljs-attr">isa</span> = XCBuildConfiguration;
<span class="hljs-attr">buildSettings</span> = {
<span class="hljs-attr">ASSETCATALOG_COMPILER_APPICON_NAME</span> = AppIcon;
&lt;&lt;&lt;&lt;&lt;&lt;&lt; ours
<span class="hljs-attr">CODE_SIGN_IDENTITY</span> = <span class="hljs-string">"iPhone Developer"</span>;
<span class="hljs-attr">FRAMEWORK_SEARCH_PATHS</span> = (
<span class="hljs-string">"$(inherited)"</span>,
<span class="hljs-string">"$(PROJECT_DIR)/HockeySDK.embeddedframework"</span>,
<span class="hljs-string">"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework"</span>,
);
=======
<span class="hljs-attr">CURRENT_PROJECT_VERSION</span> = <span class="hljs-number">1</span>;
&gt;&gt;&gt;&gt;&gt;&gt;&gt; theirs
<span class="hljs-attr">HEADER_SEARCH_PATHS</span> = (
<span class="hljs-string">"$(inherited)"</span>,
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
<span class="hljs-string">"$(SRCROOT)/../node_modules/react-native/React/**"</span>,
<span class="hljs-string">"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**"</span>,
);
</code></pre>
<p>You can think of &quot;ours&quot; as &quot;your team&quot; and &quot;theirs&quot; as &quot;the React Native development team&quot;.</p>
<h3><a class="anchor" aria-hidden="true" id="upgrade-helper"></a><a href="#upgrade-helper" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrade Helper</h3>
<p>The <a href="https://react-native-community.github.io/upgrade-helper/">Upgrade Helper</a> 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.</p>
<h4><a class="anchor" aria-hidden="true" id="1-select-the-versions"></a><a href="#1-select-the-versions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Select the versions</h4>
<p>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 &quot;Show me how to upgrade&quot;.</p>
<p>💡 Major updates will show an &quot;useful content&quot; section on the top with links to help you out when upgrading.</p>
<h4><a class="anchor" aria-hidden="true" id="2-upgrade-dependencies"></a><a href="#2-upgrade-dependencies" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Upgrade dependencies</h4>
<p>The first file that is shown is the <code>package.json</code>, it's good to update the dependencies that are showing in there. For example, if <code>react-native</code> and <code>react</code> appears as changes then you can install it in your project by running <code>yarn add</code>:</p>
<pre><code class="hljs css language-sh"><span class="token comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
<span class="token function">yarn</span> <span class="token function">add</span> react-native@<span class="token punctuation">{</span><span class="token punctuation">{</span>VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token function">yarn</span> <span class="token function">add</span> react@<span class="token punctuation">{</span><span class="token punctuation">{</span>REACT_VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
</code></pre>
<h4><a class="anchor" aria-hidden="true" id="3-upgrade-your-project-files"></a><a href="#3-upgrade-your-project-files" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Upgrade your project files</h4>
<p>The new release may contain updates to other files that are generated when you run <code>react-native init</code>, those files are listed after the <code>package.json</code> in the Upgrade Helper page. If there aren't other changes then you can rebuild the project and continue developing.</p>
<p>In case there are changes then you can either update them manually by copying and pasting from the changes in the page or you can do it with the React Native CLI upgrade command by running:</p>
<pre><code class="hljs css language-sh">react-native upgrade
</code></pre>
<p>This will check your files against the latest template and perform the following:</p>
<ul>
<li>If there is a new file in the template, it is created.</li>
<li>If a file in the template is identical to your file, it is skipped.</li>
<li>If a file is different in your project than the template, you will be prompted; you have options to keep your file or overwrite it with the template version.</li>
</ul>
<blockquote>
<p>Some upgrades won't be done automatically with the React Native CLI and require manual work, e.g. <code>0.28</code> to <code>0.29</code>, or <code>0.56</code> to <code>0.57</code>. Make sure to check the <a href="https://github.com/facebook/react-native/releases">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
</blockquote>
<h3><a class="anchor" aria-hidden="true" id="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Troubleshooting</h3>
<h4><a class="anchor" aria-hidden="true" id="i-want-to-upgrade-with-react-native-cli-but-i-dont-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-dont-use-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I want to upgrade with React Native CLI but I don't use Git</h4>
<p>While your project does not have to be handled by the Git versioning system -- you can use Mercurial, SVN, or nothing -- you will still need to <a href="https://git-scm.com/downloads">install Git</a> on your system in order to use <code>react-native upgrade</code>. Git will also need to be available in the <code>PATH</code>. If your project doesn't use Git, initialize it and commit:</p>
<pre><code class="hljs css language-sh"><span class="token function">git</span> init <span class="token comment"># Initialize a Git repository</span>
<span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span> <span class="token comment"># Stage all the current files</span>
<span class="token function">git</span> commit -m <span class="token string">"Upgrade react-native"</span> <span class="token comment"># Save the current files in a commit</span>
</code></pre>
<p>After you finish upgrading you may remove the <code>.git</code> directory.</p>
<h4><a class="anchor" aria-hidden="true" id="i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version"></a><a href="#i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I have done all the changes but my app is still using an old version</h4>
<p>These sort of errors are usually related to caching, it's recommended to install <a href="https://github.com/pmadruga/react-native-clean-project">react-native-clean-project</a> to clear all your project's cache and then you can run it again.</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/0.48/running-on-device"><span class="arrow-prev">← </span><span>Running On Device</span></a><a class="docs-next button" href="/docs/0.48/troubleshooting"><span>Troubleshooting</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#expo-projects">Expo projects</a></li><li><a href="#react-native-projects">React Native projects</a><ul class="toc-headings"><li><a href="#react-native-cli">React Native CLI</a></li><li><a href="#upgrade-helper">Upgrade Helper</a></li><li><a href="#troubleshooting">Troubleshooting</a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who&#x27;s using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;
}
// keyCode for '/' (slash)
if (e.keyCode === 191) {
const search = document.getElementById('search_input_react');
search && search.focus();
}
});
</script><script>
var search = docsearch({
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#search_input_react',
algoliaOptions: {"facetFilters":["tags:0.48"],"hitsPerPage":5}
});
</script></body></html>
Reference in New Issue View Git Blame Copy Permalink