17/03/2025, 02:29 Upgrade React Native applications
React Native Upgrade Helper
Star ⚠️ ⚙️ ☀️
What's your app name?
AwesomeProject
What's your app package?
AwesomeProject
What's your current react-native version?
0.77.0
To which version would you like to upgrade?
0.78.0-rc.4
Show me how to upgrade!
📣 Useful content for upgrading
You can use the following command to kick off the upgrade: npx @rnx-kit/align-
deps --requirements react-native@[major.minor] .
align-deps is an OSS tool from Microsoft that automates dependency
management. It knows which packages* versions are compatible with your
specific version of RN, and it uses that knowledge to align dependencies, keeping
your app healthy and up-to-date**. Find out more here.
* Not all packages are supported out-of-the-box.
** You still need to do the other changes below and verify the changelogs of the
libraries that got upgraded.
Check out Upgrade Support if you are experiencing issues related to React Native
during the upgrading process.
https://react-native-community.github.io/upgrade-helper/?from=0.77.0&to=0.78.0-rc.4&package=AwesomeProject&name=AwesomeProject 1/5
17/03/2025, 02:29 Upgrade React Native applications
Split Unified
1 /7
package.json MODIFIED Raw
@@ -10,8 +10,8 @@
10 "test": "jest" 10 "test": "jest"
11 }, 11 },
12 "dependencies": { 12 "dependencies": {
13 "react": "18.3.1",
14 "react-native": "0.77.0" 13 "react": "19.0.0",
14 "react-native": "0.78.0-rc.4"
15 }, 15 },
16 "devDependencies": { 16 "devDependencies": {
17 "@babel/core": "^7.25.2", 17 "@babel/core": "^7.25.2",
@@ -20,17 +20,17 @@
20 "@react-native-community/cli": "15. 20 "@react-native-community/cli": "15.
0.1", 0.1",
21 "@react-native-community/cli-platfo 21 "@react-native-community/cli-platfo
rm-android": "15.0.1", rm-android": "15.0.1",
22 "@react-native-community/cli-platfo 22 "@react-native-community/cli-platfo
rm-ios": "15.0.1", rm-ios": "15.0.1",
23 "@react-native/babel-preset": "0.7
7.0",
24 "@react-native/eslint-config": "0.7
7.0",
25 "@react-native/metro-config": "0.7
7.0",
26 "@react-native/typescript-config": 23 "@react-native/babel-preset": "0.7
"0.77.0", 8.0-rc.4",
24 "@react-native/eslint-config": "0.7
8.0-rc.4",
25 "@react-native/metro-config": "0.7
8.0-rc.4",
26 "@react-native/typescript-config":
"0.78.0-rc.4",
27 "@types/jest": "^29.5.13", 27 "@types/jest": "^29.5.13",
28 "@types/react": "^18.2.6",
29 "@types/react-test-renderer": "^18. 28 "@types/react": "^19.0.0",
0.0",
29 "@types/react-test-renderer": "^19.
0.0",
30 "eslint": "^8.19.0", 30 "eslint": "^8.19.0",
31 "jest": "^29.6.3", 31 "jest": "^29.6.3",
32 "prettier": "2.8.8", 32 "prettier": "2.8.8",
33 "react-test-renderer": "18.3.1", 33 "react-test-renderer": "19.0.0",
34 "typescript": "5.0.4" 34 "typescript": "5.0.4"
35 }, 35 },
36 "engines": { 36 "engines": {
.gitignore MODIFIED Raw
@@ -33,6 +33,7 @@ local.properties
33 .cxx/ 33 .cxx/
34 *.keystore 34 *.keystore
https://react-native-community.github.io/upgrade-helper/?from=0.77.0&to=0.78.0-rc.4&package=AwesomeProject&name=AwesomeProject 2/5
17/03/2025, 02:29 Upgrade React Native applications
35 !debug.keystore 35 !debug.keystore
36
36
37
.kotlin/ 1 /7
37 # node.js 38 # node.js
38 # 39 #
App.tsx MODIFIED Raw
@@ -8,7 +8,6 @@
8 import React from 'react'; 8 import React from 'react';
9 import type {PropsWithChildren} from 'r 9 import type {PropsWithChildren} from 'r
eact'; eact';
10 import { 10 import {
11 SafeAreaView,
12 ScrollView, 11 ScrollView,
13 StatusBar, 12 StatusBar,
14 StyleSheet, 13 StyleSheet,
@@ -62,19 +61,33 @@ function App(): React.JSX.Element {
62 backgroundColor: isDarkMode ? Color 61 backgroundColor: isDarkMode ? Color
s.darker : Colors.lighter, s.darker : Colors.lighter,
63 }; 62 };
64 63
64 /*
65 * To keep the template simple and sm
all we're adding padding to prevent vie
w
66 * from rendering under the System U
I.
67 * For bigger apps the reccomendation
is to use `react-native-safe-area-conte
xt`:
68 * https://github.com/AppAndFlow/reac
t-native-safe-area-context
69 *
70 * You can read more about it here:
71 * https://github.com/react-native-co
mmunity/discussions-and-proposals/discu
ssions/827
72 */
73 const safePadding = '5%';
74
65 return ( 75 return (
66 <SafeAreaView style={backgroundStyl 76 <View style={backgroundStyle}>
e}>
67 <StatusBar 77 <StatusBar
68 barStyle={isDarkMode ? 'light-c 78 barStyle={isDarkMode ? 'light-c
ontent' : 'dark-content'} ontent' : 'dark-content'}
69 backgroundColor={backgroundStyl 79 backgroundColor={backgroundStyl
e.backgroundColor} e.backgroundColor}
70 /> 80 />
71 <ScrollView 81 <ScrollView
72 contentInsetAdjustmentBehavior
="automatic"
73 style={backgroundStyle}> 82 style={backgroundStyle}>
83 <View style={{paddingRight: saf
ePadding}}>
https://react-native-community.github.io/upgrade-helper/?from=0.77.0&to=0.78.0-rc.4&package=AwesomeProject&name=AwesomeProject 3/5
17/03/2025, 02:29 Upgrade React Native applications
74 <Header/> 84 <Header/>
75 <View
85
86
</View>
<View
1 /7
76 style={{ 87 style={{
77 backgroundColor: isDarkMode 88 backgroundColor: isDarkMode
? Colors.black : Colors.white, ? Colors.black : Colors.white,
89 paddingHorizontal: safePadd
ing,
90 paddingBottom: safePadding,
78 }}> 91 }}>
79 <Section title="Step One"> 92 <Section title="Step One">
80 Edit <Text style={styles.hi 93 Edit <Text style={styles.hi
ghlight}>App.tsx</Text> to change this ghlight}>App.tsx</Text> to change this
@@ -92,7 +105,7 @@ function App(): React.JSX.Element {
92 <LearnMoreLinks /> 105 <LearnMoreLinks />
93 </View> 106 </View>
94 </ScrollView> 107 </ScrollView>
95 </SafeAreaView> 108 </View>
96 ); 109 );
97 } 110 }
98 111
android/app/build.gradle MODIFIED Raw
@@ -63,14 +63,14 @@ def enableProguardInReleaseBuilds = false
63 * The preferred build flavor of JavaSc 63 * The preferred build flavor of JavaSc
riptCore (JSC) riptCore (JSC)
64 * 64 *
65 * For example, to use the internationa 65 * For example, to use the internationa
l variant, you can use: l variant, you can use:
66 * `def jscFlavor = 'org.webkit:android 66 * `def jscFlavor = io.github.react-nat
-jsc-intl:+'` ive-community:jsc-android-intl:2026004.
+`
67 * 67 *
68 * The international variant includes I 68 * The international variant includes I
CU i18n library and necessary data CU i18n library and necessary data
69 * allowing to use e.g. `Date.toLocaleS 69 * allowing to use e.g. `Date.toLocaleS
tring` and `String.localeCompare` that tring` and `String.localeCompare` that
70 * give correct results when using with 70 * give correct results when using with
locales other than en-US. Note that locales other than en-US. Note that
71 * this variant is about 6MiB larger pe 71 * this variant is about 6MiB larger pe
r architecture than default. r architecture than default.
72 */ 72 */
73 def jscFlavor = 'org.webkit:android-js 73 def jscFlavor = 'io.github.react-native
c:+' -community:jsc-android:2026004.+'
74 74
75 android { 75 android {
76 ndkVersion rootProject.ext.ndkVersi 76 ndkVersion rootProject.ext.ndkVersi
on on
android/build.gradle MODIFIED Raw
@@ -3,7 +3,7 @@ buildscript {
https://react-native-community.github.io/upgrade-helper/?from=0.77.0&to=0.78.0-rc.4&package=AwesomeProject&name=AwesomeProject 4/5
17/03/2025, 02:29 Upgrade React Native applications
3 buildToolsVersion = "35.0.0" 3 buildToolsVersion = "35.0.0"
4
5
minSdkVersion = 24
compileSdkVersion = 35
4
5
minSdkVersion = 24
compileSdkVersion = 35
1 /7
6 targetSdkVersion = 34 6 targetSdkVersion = 35
7 ndkVersion = "27.1.12297006" 7 ndkVersion = "27.1.12297006"
8 kotlinVersion = "2.0.21" 8 kotlinVersion = "2.0.21"
9 } 9 }
android/gradle/wrapper/gradle-wrapper.properties MODIFIED Raw
@@ -1,6 +1,6 @@
1 distributionBase=GRADLE_USER_HOME 1 distributionBase=GRADLE_USER_HOME
2 distributionPath=wrapper/dists 2 distributionPath=wrapper/dists
3 distributionUrl=https\://services.gradl 3 distributionUrl=https\://services.gradl
e.org/distributions/gradle-8.10.2-all.z e.org/distributions/gradle-8.12-all.zip
ip
4 networkTimeout=10000 4 networkTimeout=10000
5 validateDistributionUrl=true 5 validateDistributionUrl=true
6 zipStoreBase=GRADLE_USER_HOME 6 zipStoreBase=GRADLE_USER_HOME
android/gradlew MODIFIED Raw
@@ -86,8 +86,7 @@ done
86 # shellcheck disable=SC2034 86 # shellcheck disable=SC2034
87 APP_BASE_NAME=${0##*/} 87 APP_BASE_NAME=${0##*/}
88 # Discard cd standard output in case $C 88 # Discard cd standard output in case $C
DPATH is set (https://github.com/gradl DPATH is set (https://github.com/gradl
e/gradle/issues/25036) e/gradle/issues/25036)
89 APP_HOME=$( cd -P "${APP_HOME:-./}" > /
dev/null && printf '%s
90 ' "$PWD" ) || exit 89 APP_HOME=$( cd -P "${APP_HOME:-./}" > /
dev/null && printf '%s\n' "$PWD" ) || e
xit
91 90
92 # Use the maximum available, or set MAX 91 # Use the maximum available, or set MAX
_FD != -1 to use that value. _FD != -1 to use that value.
93 MAX_FD=maximum 92 MAX_FD=maximum
https://react-native-community.github.io/upgrade-helper/?from=0.77.0&to=0.78.0-rc.4&package=AwesomeProject&name=AwesomeProject 5/5
