Skip to content

Commit e7d0687

Browse files
e-younane-younan
authored
feat: add new arch/Expo 54 support (#48)
* chore: added test screen to test issue #44 Highlights: - Added new test screen with the example code from issue #44 (#44) - Could not reproduce the issue with the TouchableOpacity not being pressable * feat: add new arch/expo 54 support Highlights: - Added new arch support - Fixed example project to work with Expo 54 * chore: add new arch support to docs Highlights: - Added version matrix to docs - Added note about new arch support
1 parent 3cb3be7 commit e7d0687

File tree

121 files changed

+4388
-4912
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

121 files changed

+4388
-4912
lines changed

‎.nvmrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
20.11.1
1+
22.12.0

‎babel.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
module.exports = {
2-
presets: ['module:metro-react-native-babel-preset'],
2+
presets: ['module:@react-native/babel-preset'],
33
};

‎docs/docs/01-getting-started.mdx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,23 @@ import TabItem from '@theme/TabItem';
1010

1111
What follows within the Fundamentals section of this documentation is a tour of the most important aspects of React Native Header. It should cover enough for you to know how to begin building.
1212

13+
## New Architecture
14+
15+
React Native Header supports the [New Architecture](https://reactnative.dev/architecture/landing-page) beginning from version `1.0.0`. The legacy architecture will not be supported in the future as it has been deprecated by React Native.
16+
1317
## Compatibility
1418

1519
Before using this package, please make sure that you install the correct version of this library for your project. Here is the dependency matrix:
1620

1721
<br />
1822

19-
| react-native-header | react-native | react-native-reanimated | react-native-safe-area-context | @shopify/flash-list |
20-
| ------------------- | ------------ | ----------------------- | ------------------------------ | ------------------- |
21-
| 0.6.x | >= 0.65 | >= 2.11.0 | >= 4.1.0 | N/A |
22-
| 0.7.x | >= 0.65 | >= 2.0.0 | >= 4.1.0 | N/A |
23-
| 0.8.x | >= 0.65 | >= 2.0.0 | >= 4.1.0 | N/A |
24-
| >= 0.9.x | >= 0.65 | >= 2.0.0 | >= 4.1.0 | >= 3.2.0 |
23+
| react-native-header | react-native | react-native-reanimated | react-native-safe-area-context | @shopify/flash-list | react-native-worklets |
24+
| ------------------- | ------------ | ----------------------- | ------------------------------ | ------------------- | --------------------- |
25+
| 0.6.x | >= 0.65 | >= 2.11.0 | >= 4.1.0 | N/A | N/A |
26+
| 0.7.x | >= 0.65 | >= 2.0.0 | >= 4.1.0 | N/A | N/A |
27+
| 0.8.x | >= 0.65 | >= 2.0.0 | >= 4.1.0 | N/A | N/A |
28+
| >= 0.9.x | >= 0.65 | >= 2.0.0 | >= 4.1.0 | >= 3.2.0 | N/A |
29+
| >= 1.0.0 | >= 0.81 | >= 4.0.0 | >= 4.1.0 | >= 3.2.0 | ^0.5.1 |
2530

2631
## Pre-requisites
2732

‎example/android/app/build.gradle‎

Lines changed: 136 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -9,63 +9,64 @@ def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
99
* By default you don't need to apply any configuration, just uncomment the lines you need.
1010
*/
1111
react {
12-
entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
13-
reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
14-
hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
15-
codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
16-
17-
// Use Expo CLI to bundle the app, this ensures the Metro config
18-
// works correctly with Expo projects.
19-
cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
20-
bundleCommand = "export:embed"
21-
22-
/* Folders */
23-
// The root of your project, i.e. where "package.json" lives. Default is '../..'
24-
// root = file("../../")
25-
// The folder where the react-native NPM package is. Default is ../../node_modules/react-native
26-
// reactNativeDir = file("../../node_modules/react-native")
27-
// The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
28-
// codegenDir = file("../../node_modules/@react-native/codegen")
29-
30-
/* Variants */
31-
// The list of variants to that are debuggable. For those we're going to
32-
// skip the bundling of the JS bundle and the assets. By default is just 'debug'.
33-
// If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
34-
// debuggableVariants = ["liteDebug", "prodDebug"]
35-
36-
/* Bundling */
37-
// A list containing the node command and its flags. Default is just 'node'.
38-
// nodeExecutableAndArgs = ["node"]
39-
40-
//
41-
// The path to the CLI configuration file. Default is empty.
42-
// bundleConfig = file(../rn-cli.config.js)
43-
//
44-
// The name of the generated asset file containing your JS bundle
45-
// bundleAssetName = "MyApplication.android.bundle"
46-
//
47-
// The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
48-
// entryFile = file("../js/MyApplication.android.js")
49-
//
50-
// A list of extra flags to pass to the 'bundle' commands.
51-
// See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
52-
// extraPackagerArgs = []
53-
54-
/* Hermes Commands */
55-
// The hermes compiler command to run. By default it is 'hermesc'
56-
// hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
57-
//
58-
// The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
59-
// hermesFlags = ["-O", "-output-source-map"]
60-
61-
/* Autolinking */
62-
autolinkLibrariesWithApp()
12+
entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
13+
reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
14+
hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
15+
codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
16+
17+
enableBundleCompression = (findProperty('android.enableBundleCompression') ?: false).toBoolean()
18+
// Use Expo CLI to bundle the app, this ensures the Metro config
19+
// works correctly with Expo projects.
20+
cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
21+
bundleCommand = "export:embed"
22+
23+
/* Folders */
24+
// The root of your project, i.e. where "package.json" lives. Default is '../..'
25+
// root = file("../../")
26+
// The folder where the react-native NPM package is. Default is ../../node_modules/react-native
27+
// reactNativeDir = file("../../node_modules/react-native")
28+
// The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
29+
// codegenDir = file("../../node_modules/@react-native/codegen")
30+
31+
/* Variants */
32+
// The list of variants to that are debuggable. For those we're going to
33+
// skip the bundling of the JS bundle and the assets. By default is just 'debug'.
34+
// If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
35+
// debuggableVariants = ["liteDebug", "prodDebug"]
36+
37+
/* Bundling */
38+
// A list containing the node command and its flags. Default is just 'node'.
39+
// nodeExecutableAndArgs = ["node"]
40+
41+
//
42+
// The path to the CLI configuration file. Default is empty.
43+
// bundleConfig = file(../rn-cli.config.js)
44+
//
45+
// The name of the generated asset file containing your JS bundle
46+
// bundleAssetName = "MyApplication.android.bundle"
47+
//
48+
// The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
49+
// entryFile = file("../js/MyApplication.android.js")
50+
//
51+
// A list of extra flags to pass to the 'bundle' commands.
52+
// See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
53+
// extraPackagerArgs = []
54+
55+
/* Hermes Commands */
56+
// The hermes compiler command to run. By default it is 'hermesc'
57+
// hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
58+
//
59+
// The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
60+
// hermesFlags = ["-O", "-output-source-map"]
61+
62+
/* Autolinking */
63+
autolinkLibrariesWithApp()
6364
}
6465

6566
/**
66-
* Set this to true to Run Proguard on Release builds to minify the Java bytecode.
67+
* Set this to true in release builds to optimize the app using [R8](https://developer.android.com/topic/performance/app-optimization/enable-app-optimization).
6768
*/
68-
def enableProguardInReleaseBuilds = (findProperty('android.enableProguardInReleaseBuilds') ?: false).toBoolean()
69+
def enableMinifyInReleaseBuilds = (findProperty('android.enableMinifyInReleaseBuilds') ?: false).toBoolean()
6970

7071
/**
7172
* The preferred build flavor of JavaScriptCore (JSC)
@@ -78,99 +79,104 @@ def enableProguardInReleaseBuilds = (findProperty('android.enableProguardInRelea
7879
* give correct results when using with locales other than en-US. Note that
7980
* this variant is about 6MiB larger per architecture than default.
8081
*/
81-
def jscFlavor = 'org.webkit:android-jsc:+'
82+
def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
8283

8384
android {
84-
ndkVersion rootProject.ext.ndkVersion
85-
86-
buildToolsVersion rootProject.ext.buildToolsVersion
87-
compileSdk rootProject.ext.compileSdkVersion
88-
89-
namespace "com.rnh.example"
90-
defaultConfig {
91-
applicationId "com.rnh.example"
92-
minSdkVersion rootProject.ext.minSdkVersion
93-
targetSdkVersion rootProject.ext.targetSdkVersion
94-
versionCode 1
95-
versionName "1.0"
96-
}
97-
signingConfigs {
98-
debug {
99-
storeFile file('debug.keystore')
100-
storePassword 'android'
101-
keyAlias 'androiddebugkey'
102-
keyPassword 'android'
85+
ndkVersion rootProject.ext.ndkVersion
86+
87+
buildToolsVersion rootProject.ext.buildToolsVersion
88+
compileSdk rootProject.ext.compileSdkVersion
89+
90+
namespace 'com.anonymous.example'
91+
defaultConfig {
92+
applicationId 'com.anonymous.example'
93+
minSdkVersion rootProject.ext.minSdkVersion
94+
targetSdkVersion rootProject.ext.targetSdkVersion
95+
versionCode 1
96+
versionName "1.0.0"
97+
98+
buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
10399
}
104-
}
105-
buildTypes {
106-
debug {
107-
signingConfig signingConfigs.debug
100+
signingConfigs {
101+
debug {
102+
storeFile file('debug.keystore')
103+
storePassword 'android'
104+
keyAlias 'androiddebugkey'
105+
keyPassword 'android'
106+
}
108107
}
109-
release {
110-
// Caution! In production, you need to generate your own keystore file.
111-
// see https://reactnative.dev/docs/signed-apk-android.
112-
signingConfig signingConfigs.debug
113-
shrinkResources (findProperty('android.enableShrinkResourcesInReleaseBuilds')?.toBoolean() ?: false)
114-
minifyEnabled enableProguardInReleaseBuilds
115-
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
116-
crunchPngs (findProperty('android.enablePngCrunchInReleaseBuilds')?.toBoolean() ?: true)
108+
buildTypes {
109+
debug {
110+
signingConfig signingConfigs.debug
111+
}
112+
release {
113+
// Caution! In production, you need to generate your own keystore file.
114+
// see https://reactnative.dev/docs/signed-apk-android.
115+
signingConfig signingConfigs.debug
116+
def enableShrinkResources = findProperty('android.enableShrinkResourcesInReleaseBuilds') ?: 'false'
117+
shrinkResources enableShrinkResources.toBoolean()
118+
minifyEnabled enableMinifyInReleaseBuilds
119+
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
120+
def enablePngCrunchInRelease = findProperty('android.enablePngCrunchInReleaseBuilds') ?: 'true'
121+
crunchPngs enablePngCrunchInRelease.toBoolean()
122+
}
117123
}
118-
}
119-
packagingOptions {
120-
jniLibs {
121-
useLegacyPackaging (findProperty('expo.useLegacyPackaging')?.toBoolean() ?: false)
124+
packagingOptions {
125+
jniLibs {
126+
def enableLegacyPackaging = findProperty('expo.useLegacyPackaging') ?: 'false'
127+
useLegacyPackaging enableLegacyPackaging.toBoolean()
128+
}
129+
}
130+
androidResources {
131+
ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
122132
}
123-
}
124-
androidResources {
125-
ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
126-
}
127133
}
128134

129135
// Apply static values from `gradle.properties` to the `android.packagingOptions`
130136
// Accepts values in comma delimited lists, example:
131137
// android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
132138
["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
133-
// Split option: 'foo,bar' -> ['foo', 'bar']
134-
def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
135-
// Trim all elements in place.
136-
for (i in 0..<options.size()) options[i] = options[i].trim();
137-
// `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
138-
options -= ""
139-
140-
if (options.length > 0) {
141-
println "android.packagingOptions.$prop += $options ($options.length)"
142-
// Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
143-
options.each {
144-
android.packagingOptions[prop] += it
139+
// Split option: 'foo,bar' -> ['foo', 'bar']
140+
def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
141+
// Trim all elements in place.
142+
for (i in 0..<options.size()) options[i] = options[i].trim();
143+
// `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
144+
options -= ""
145+
146+
if (options.length > 0) {
147+
println "android.packagingOptions.$prop += $options ($options.length)"
148+
// Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
149+
options.each {
150+
android.packagingOptions[prop] += it
151+
}
145152
}
146-
}
147153
}
148154

149155
dependencies {
150-
// The version of react-native is set by the React Native Gradle Plugin
151-
implementation("com.facebook.react:react-android")
152-
153-
def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
154-
def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
155-
def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
156-
157-
if (isGifEnabled) {
158-
// For animated gif support
159-
implementation("com.facebook.fresco:animated-gif:${reactAndroidLibs.versions.fresco.get()}")
160-
}
161-
162-
if (isWebpEnabled) {
163-
// For webp support
164-
implementation("com.facebook.fresco:webpsupport:${reactAndroidLibs.versions.fresco.get()}")
165-
if (isWebpAnimatedEnabled) {
166-
// Animated webp support
167-
implementation("com.facebook.fresco:animated-webp:${reactAndroidLibs.versions.fresco.get()}")
156+
// The version of react-native is set by the React Native Gradle Plugin
157+
implementation("com.facebook.react:react-android")
158+
159+
def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
160+
def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
161+
def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
162+
163+
if (isGifEnabled) {
164+
// For animated gif support
165+
implementation("com.facebook.fresco:animated-gif:${expoLibs.versions.fresco.get()}")
166+
}
167+
168+
if (isWebpEnabled) {
169+
// For webp support
170+
implementation("com.facebook.fresco:webpsupport:${expoLibs.versions.fresco.get()}")
171+
if (isWebpAnimatedEnabled) {
172+
// Animated webp support
173+
implementation("com.facebook.fresco:animated-webp:${expoLibs.versions.fresco.get()}")
174+
}
168175
}
169-
}
170176

171-
if (hermesEnabled.toBoolean()) {
172-
implementation("com.facebook.react:hermes-android")
173-
} else {
174-
implementation jscFlavor
175-
}
177+
if (hermesEnabled.toBoolean()) {
178+
implementation("com.facebook.react:hermes-android")
179+
} else {
180+
implementation jscFlavor
181+
}
176182
}

‎example/android/app/src/debug/AndroidManifest.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33

44
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
55

6-
<application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
6+
<application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
77
</manifest>

‎example/android/app/src/main/AndroidManifest.xml‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,10 @@
1111
<data android:scheme="https"/>
1212
</intent>
1313
</queries>
14-
<application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:theme="@style/AppTheme" android:supportsRtl="true">
15-
<meta-data android:name="expo.modules.updates.ENABLED" android:value="true"/>
16-
<meta-data android:name="expo.modules.updates.EXPO_SDK_VERSION" android:value="48.0.0"/>
14+
<application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true" android:enableOnBackInvokedCallback="false">
15+
<meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
1716
<meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
1817
<meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
19-
<meta-data android:name="expo.modules.updates.EXPO_UPDATE_URL" android:value="https://exp.host/@anonymous/example"/>
2018
<activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true">
2119
<intent-filter>
2220
<action android:name="android.intent.action.MAIN"/>
@@ -26,7 +24,6 @@
2624
<action android:name="android.intent.action.VIEW"/>
2725
<category android:name="android.intent.category.DEFAULT"/>
2826
<category android:name="android.intent.category.BROWSABLE"/>
29-
<data android:scheme="com.rnh.example"/>
3027
<data android:scheme="exp+example"/>
3128
</intent-filter>
3229
</activity>

0 commit comments

Comments
 (0)