Skip to content

Commit 77d3af7

Browse files
BogiKaysatya164
BogiKay
and
satya164
authored
feat: New architecture support (#4574)
* feat: update deps & enable new arch * chore: migrate Menu to functional component * fix: get rid of a few rerenders of Menu * fix: fix Modal flickering & cleanup * fix: dynamic update of Button styles * chore: update yarn * fix: fix scrolling on ExampleList screen (web) * fix: update runtimeVersion * fix: workaround for fixing textinput styling * chore: circleCI config update * chore: Update AnimatedText's props type Co-authored-by: Satyajit Sahoo <[email protected]> * fix: get rid of setting yarn version from circleCI config * fix: setting top offset of Menu based on anchorPosition --------- Co-authored-by: Satyajit Sahoo <[email protected]>
1 parent 2827b9c commit 77d3af7

40 files changed

+44567
-32168
lines changed

‎.circleci/config.yml

+4-3
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,10 @@ jobs:
2929
- run:
3030
name: Install dependencies
3131
command: |
32-
yarn install --cwd example --frozen-lockfile
33-
yarn install --cwd docs --frozen-lockfile
34-
yarn install --frozen-lockfile
32+
sudo corepack enable
33+
yarn --cwd example --immutable
34+
yarn --cwd docs --immutable
35+
yarn --immutable
3536
- save_cache:
3637
key: dependencies-{{ checksum "package.json" }}
3738
paths:

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -64,3 +64,6 @@ CHANGELOG.md
6464
lib/
6565

6666
.expo
67+
68+
# Yarn
69+
.yarn/*

‎.yarnrc.yml

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
nodeLinker: node-modules

‎docs/.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,6 @@ docs/components
2525
# legacy
2626
dist/
2727
.linaria-cache/
28+
29+
# Yarn
30+
.yarn/*

‎docs/package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@
1717
},
1818
"dependencies": {
1919
"@callstack/react-theme-provider": "^3.0.9",
20-
"@docusaurus/core": "^2.3.1",
21-
"@docusaurus/preset-classic": "^2.3.1",
22-
"@docusaurus/remark-plugin-npm2yarn": "^2.3.1",
20+
"@docusaurus/core": "^2.3.6",
21+
"@docusaurus/preset-classic": "^2.3.6",
22+
"@docusaurus/remark-plugin-npm2yarn": "^2.3.6",
2323
"@easyops-cn/docusaurus-search-local": "^0.33.4",
2424
"@material/material-color-utilities": "0.2.4",
2525
"@mdx-js/react": "^1.6.22",
@@ -37,7 +37,7 @@
3737
"use-latest-callback": "^0.1.7"
3838
},
3939
"devDependencies": {
40-
"@docusaurus/module-type-aliases": "^2.3.1",
40+
"@docusaurus/module-type-aliases": "^2.3.6",
4141
"@tsconfig/docusaurus": "^1.0.6",
4242
"@types/marked": "^4.0.7",
4343
"@types/react-color": "^3.0.6",
@@ -58,7 +58,7 @@
5858
]
5959
},
6060
"engines": {
61-
"node": ">=16.14"
61+
"node": ">=18"
6262
},
6363
"resolutions": {
6464
"@types/react": "18.0.8",

‎docs/yarn.lock

+15,183-10,619
Large diffs are not rendered by default.

‎example/.gitignore

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
# XDE
22
#
33
.expo/
4-
/coverage
4+
/coverage
5+
6+
# Yarn
7+
.yarn/*
8+
!.yarn/patches
9+
!.yarn/plugins
10+
!.yarn/releases
11+
!.yarn/sdks
12+
!.yarn/versions

‎example/android/app/build.gradle

+2-4
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,8 @@ react {
6666
//
6767
// The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
6868
// hermesFlags = ["-O", "-output-source-map"]
69+
70+
autolinkLibrariesWithApp()
6971
}
7072

7173
// Override `hermesEnabled` by `expo.jsEngine`
@@ -221,9 +223,6 @@ dependencies {
221223
}
222224

223225
implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")
224-
225-
implementation("com.facebook.react:flipper-integration")
226-
227226

228227
if (hermesEnabled.toBoolean()) {
229228
implementation("com.facebook.react:hermes-android")
@@ -232,5 +231,4 @@ dependencies {
232231
}
233232
}
234233

235-
apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json')"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
236234
applyNativeModulesAppBuildGradle(project)

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

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
android:allowBackup="true"
2121
android:theme="@style/AppTheme"
2222
android:usesCleartextTraffic="true"
23+
android:supportsRtl="true"
2324
>
2425

2526
<meta-data android:name="expo.modules.updates.ENABLED" android:value="true"/>

‎example/android/app/src/main/java/com/callstack/reactnativepaperexample/MainApplication.java

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
import com.facebook.react.ReactPackage;
1111
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
1212
import com.facebook.react.defaults.DefaultReactNativeHost;
13-
import com.facebook.react.flipper.ReactNativeFlipper;
13+
import com.facebook.react.soloader.OpenSourceMergedSoMapping;
1414
import com.facebook.soloader.SoLoader;
1515

1616
import expo.modules.ApplicationLifecycleDispatcher;
@@ -60,7 +60,7 @@ public ReactNativeHost getReactNativeHost() {
6060
@Override
6161
public void onCreate() {
6262
super.onCreate();
63-
SoLoader.init(this, /* native exopackage */ false);
63+
SoLoader.init(this, OpenSourceMergedSoMapping)
6464
if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
6565
// If you opted-in for the New Architecture, we load the native entry point for this app.
6666
DefaultNewArchitectureEntryPoint.load();

‎example/android/build.gradle

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@
22

33
buildscript {
44
ext {
5-
buildToolsVersion = findProperty('android.buildToolsVersion') ?: '34.0.0'
6-
minSdkVersion = Integer.parseInt(findProperty('android.minSdkVersion') ?: '21')
7-
compileSdkVersion = Integer.parseInt(findProperty('android.compileSdkVersion') ?: '34')
5+
buildToolsVersion = findProperty('android.buildToolsVersion') ?: '35.0.0'
6+
minSdkVersion = Integer.parseInt(findProperty('android.minSdkVersion') ?: '24')
7+
compileSdkVersion = Integer.parseInt(findProperty('android.compileSdkVersion') ?: '35')
88
targetSdkVersion = Integer.parseInt(findProperty('android.targetSdkVersion') ?: '34')
99
kotlinVersion = findProperty('android.kotlinVersion') ?: '1.8.0'
1010

1111
frescoVersion = findProperty('expo.frescoVersion') ?: '2.5.0'
1212

1313
// We use NDK 25 which has both M1 support and is the side-by-side NDK version from AGP.
14-
ndkVersion = "25.1.8937393"
14+
ndkVersion = "26.1.10909125"
1515
}
1616
repositories {
1717
google()

‎example/android/gradle.properties

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
3535
# your application. You should enable this flag either if you want
3636
# to write custom TurboModules/Fabric components OR use libraries that
3737
# are providing them.
38-
newArchEnabled=false
38+
newArchEnabled=true
3939

4040
# The hosted JavaScript engine
4141
# Supported values: expo.jsEngine = "hermes" | "jsc"

‎example/app.json

+2-3
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"primaryColor": "#6200EE",
1010
"userInterfaceStyle": "automatic",
1111
"icon": "./assets/images/paper-icon.png",
12+
"newArchEnabled": true,
1213
"packagerOpts": {
1314
"config": "./metro.config.js",
1415
"projectRoots": ""
@@ -39,9 +40,7 @@
3940
"projectId": "ba8f5139-58fe-48f0-b2f2-2d675b6eb2d4"
4041
}
4142
},
42-
"runtimeVersion": {
43-
"policy": "sdkVersion"
44-
},
43+
"runtimeVersion": "exposdk:52.0.0",
4544
"updates": {
4645
"url": "https://u.expo.dev/ba8f5139-58fe-48f0-b2f2-2d675b6eb2d4"
4746
},

‎example/package.json

+24-24
Original file line numberDiff line numberDiff line change
@@ -17,36 +17,36 @@
1717
"@expo/vector-icons": "^14.0.0",
1818
"@expo/webpack-config": "~19.0.1",
1919
"@pchmn/expo-material3-theme": "^1.3.2",
20-
"@react-native-async-storage/async-storage": "1.21.0",
21-
"@react-native-masked-view/masked-view": "0.3.0",
22-
"@react-navigation/bottom-tabs": "^6.5.3",
23-
"@react-navigation/drawer": "^6.5.7",
24-
"@react-navigation/native": "^6.1.2",
25-
"@react-navigation/stack": "^6.3.11",
26-
"expo": "~50.0.20",
27-
"expo-crypto": "~12.8.1",
28-
"expo-dev-client": "~3.3.12",
29-
"expo-font": "~11.10.3",
30-
"expo-keep-awake": "~12.8.2",
31-
"expo-splash-screen": "~0.26.5",
32-
"expo-status-bar": "~1.11.1",
33-
"expo-updates": "~0.24.13",
20+
"@react-native-async-storage/async-storage": "1.23.1",
21+
"@react-native-masked-view/masked-view": "0.3.2",
22+
"@react-navigation/bottom-tabs": "^6.6.1",
23+
"@react-navigation/drawer": "^6.7.2",
24+
"@react-navigation/native": "^6.1.18",
25+
"@react-navigation/stack": "^6.4.1",
26+
"expo": "^52.0.0",
27+
"expo-crypto": "~14.0.1",
28+
"expo-dev-client": "~5.0.4",
29+
"expo-font": "~13.0.1",
30+
"expo-keep-awake": "~14.0.1",
31+
"expo-splash-screen": "~0.29.13",
32+
"expo-status-bar": "~2.0.0",
33+
"expo-updates": "~0.26.9",
3434
"file-loader": "^6.2.0",
35-
"react": "18.2.0",
36-
"react-dom": "18.2.0",
37-
"react-native": "0.73.6",
38-
"react-native-gesture-handler": "~2.14.0",
39-
"react-native-reanimated": "~3.6.2",
40-
"react-native-safe-area-context": "4.8.2",
41-
"react-native-screens": "~3.29.0",
35+
"react": "18.3.1",
36+
"react-dom": "18.3.1",
37+
"react-native": "0.76.3",
38+
"react-native-gesture-handler": "~2.20.2",
39+
"react-native-reanimated": "~3.16.1",
40+
"react-native-safe-area-context": "4.12.0",
41+
"react-native-screens": "~4.1.0",
4242
"react-native-vector-icons": "^10.1.0",
43-
"react-native-web": "~0.19.6",
43+
"react-native-web": "~0.19.13",
4444
"typeface-roboto": "^1.1.13"
4545
},
4646
"devDependencies": {
47-
"@babel/core": "^7.12.9",
47+
"@babel/core": "^7.25.2",
4848
"babel-plugin-module-resolver": "^5.0.0",
49-
"babel-preset-expo": "^10.0.0",
49+
"babel-preset-expo": "~12.0.0",
5050
"url-loader": "^4.1.1"
5151
},
5252
"engines": {

‎example/src/Examples/MenuExample.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,22 @@ const MenuExample = ({ navigation }: Props) => {
146146
</TouchableRipple>
147147
</List.Section>
148148
</View>
149+
<View style={styles.alignCenter}>
150+
<Menu
151+
visible={_getVisible('menu5')}
152+
onDismiss={_toggleMenu('menu5')}
153+
anchorPosition="bottom"
154+
anchor={
155+
<Button mode="outlined" onPress={_toggleMenu('menu5')}>
156+
Menu with anchor position
157+
</Button>
158+
}
159+
>
160+
<Menu.Item onPress={() => {}} title="Item 1" />
161+
<Menu.Item onPress={() => {}} title="Item 2" />
162+
<Menu.Item onPress={() => {}} title="Item 3" />
163+
</Menu>
164+
</View>
149165

150166
<View style={styles.bottomMenu}>
151167
<Menu

‎example/src/RootNavigator.tsx

+63-50
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { Platform } from 'react-native';
2+
import { Platform, StyleSheet, View } from 'react-native';
33

44
import type { DrawerNavigationProp } from '@react-navigation/drawer';
55
import { getHeaderTitle } from '@react-navigation/elements';
@@ -19,55 +19,68 @@ export default function Root() {
1919
? CardStyleInterpolators.forFadeFromBottomAndroid
2020
: CardStyleInterpolators.forHorizontalIOS;
2121
return (
22-
<Stack.Navigator
23-
screenOptions={({ navigation }) => {
24-
return {
25-
detachPreviousScreen: !navigation.isFocused(),
26-
cardStyleInterpolator,
27-
header: ({ navigation, route, options, back }) => {
28-
const title = getHeaderTitle(options, route.name);
29-
return (
30-
<Appbar.Header elevated>
31-
{back ? (
32-
<Appbar.BackAction onPress={() => navigation.goBack()} />
33-
) : (navigation as any).openDrawer ? (
34-
<Appbar.Action
35-
icon="menu"
36-
isLeading
37-
onPress={() =>
38-
(
39-
navigation as any as DrawerNavigationProp<{}>
40-
).openDrawer()
41-
}
42-
/>
43-
) : null}
44-
<Appbar.Content title={title} />
45-
</Appbar.Header>
46-
);
47-
},
48-
};
49-
}}
50-
>
51-
<Stack.Screen
52-
name="ExampleList"
53-
component={ExampleList}
54-
options={{
55-
title: 'Examples',
22+
<View style={styles.stackWrapper}>
23+
<Stack.Navigator
24+
screenOptions={({ navigation }) => {
25+
return {
26+
detachPreviousScreen: !navigation.isFocused(),
27+
cardStyleInterpolator,
28+
header: ({ navigation, route, options, back }) => {
29+
const title = getHeaderTitle(options, route.name);
30+
return (
31+
<Appbar.Header elevated>
32+
{back ? (
33+
<Appbar.BackAction onPress={() => navigation.goBack()} />
34+
) : (navigation as any).openDrawer ? (
35+
<Appbar.Action
36+
icon="menu"
37+
isLeading
38+
onPress={() =>
39+
(
40+
navigation as any as DrawerNavigationProp<{}>
41+
).openDrawer()
42+
}
43+
/>
44+
) : null}
45+
<Appbar.Content title={title} />
46+
</Appbar.Header>
47+
);
48+
},
49+
};
5650
}}
57-
/>
58-
{(Object.keys(examples) as Array<keyof typeof examples>).map((id) => {
59-
return (
60-
<Stack.Screen
61-
key={id}
62-
name={id}
63-
component={examples[id]}
64-
options={{
65-
title: examples[id].title,
66-
headerShown: id !== 'themingWithReactNavigation',
67-
}}
68-
/>
69-
);
70-
})}
71-
</Stack.Navigator>
51+
>
52+
<Stack.Screen
53+
name="ExampleList"
54+
component={ExampleList}
55+
options={{
56+
title: 'Examples',
57+
}}
58+
/>
59+
{(Object.keys(examples) as Array<keyof typeof examples>).map((id) => {
60+
return (
61+
<Stack.Screen
62+
key={id}
63+
name={id}
64+
component={examples[id]}
65+
options={{
66+
title: examples[id].title,
67+
headerShown: id !== 'themingWithReactNavigation',
68+
}}
69+
/>
70+
);
71+
})}
72+
</Stack.Navigator>
73+
</View>
7274
);
7375
}
76+
77+
const styles = StyleSheet.create({
78+
stackWrapper: {
79+
flex: 1,
80+
...Platform.select({
81+
web: {
82+
overflow: 'scroll',
83+
},
84+
}),
85+
},
86+
});

0 commit comments

Comments
 (0)