Skip to content

Commit c787998

Browse files
samijabersamijaber
authored
Fix: React Native SDK (#3345)
## Description Handle multiple compatibility issues with Expo 50+ - async storage: handle SSR/static rendering - async storage: add `regenerator-runtime` polyfill - include source in build as per https://callstack.github.io/react-native-builder-bob/build#source - update e2e and snippets to use Expo 50+ TODO: - [x] fix react-native-render-html `defaultProps` usage - [x] fix development builds - [x] test development builds - [ ] add detox e2e test
1 parent 3a41d13 commit c787998

Some content is hidden

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

49 files changed

+4691
-2064
lines changed

‎.changeset/gorgeous-mugs-sit.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@builder.io/sdk-react-native": patch
3+
---
4+
5+
Fix: add `regeneratorRuntime` polyfill

‎.changeset/nice-toys-pretend.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@builder.io/sdk-react-native': patch
3+
---
4+
5+
Fix: replace `react-native-render-html` with `@builder.io/react-native-render-html` to remove `defaultProps` errors.
6+
See https://github.com/meliorence/react-native-render-html/issues/661

‎.changeset/orange-vans-burn.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@builder.io/sdk-react-native": patch
3+
---
4+
5+
Fix: disable async storage during static rendering (node.js)

‎.yarn/versions/f4280de6.yml

Whitespace-only changes.

‎.yarnrc.yml

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
nodeLinker: node-modules
22

3+
npmPublishAccess: public
4+
35
plugins:
46
- path: .yarn/plugins/@yarnpkg/plugin-version.cjs
5-
spec: '@yarnpkg/plugin-version'
7+
spec: "@yarnpkg/plugin-version"
68
- path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
7-
spec: '@yarnpkg/plugin-workspace-tools'
9+
spec: "@yarnpkg/plugin-workspace-tools"
810

911
yarnPath: .yarn/releases/yarn-3.6.1.cjs
10-
11-
npmPublishAccess: 'public'

‎packages/sdks/.prettierignore

+3
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,6 @@ overrides/react-native/src/blocks/**/*
2626

2727
# Frequently used for debugging.
2828
e2e/**/src/sdk-src
29+
30+
**/react-native/ios
31+
**/react-native/android

‎packages/sdks/e2e/react-native/.detoxrc.js

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/** @type {Detox.DetoxConfig} */
2+
module.exports = {
3+
testRunner: {
4+
args: {
5+
$0: 'jest',
6+
config: 'e2e/jest.config.js',
7+
},
8+
jest: {
9+
setupTimeout: 120000,
10+
},
11+
},
12+
artifacts: {
13+
plugins: {
14+
log: process.env.CI ? 'failing' : undefined,
15+
screenshot: 'failing',
16+
},
17+
},
18+
apps: {
19+
'ios.debug': {
20+
type: 'ios.app',
21+
binaryPath: 'myapp.app',
22+
build:
23+
'xcodebuild -workspace ios/com.jabersami.myapp.xcworkspace -scheme com.jabersami.myapp -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build',
24+
},
25+
'ios.release': {
26+
type: 'ios.app',
27+
binaryPath: 'myapp.app',
28+
build:
29+
'xcodebuild -workspace ios/com.jabersami.myapp.xcworkspace -scheme com.jabersami.myapp -configuration Release -sdk iphonesimulator -derivedDataPath ios/build',
30+
},
31+
'android.debug': {
32+
type: 'android.apk',
33+
binaryPath: 'android/app/build/outputs/apk/debug/app-debug.apk',
34+
build:
35+
'cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug',
36+
reversePorts: [8081],
37+
},
38+
'android.release': {
39+
type: 'android.apk',
40+
binaryPath: 'android/app/build/outputs/apk/release/app-release.apk',
41+
build:
42+
'cd android && ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release',
43+
},
44+
},
45+
devices: {
46+
simulator: {
47+
type: 'ios.simulator',
48+
device: {
49+
type: 'iPhone 15',
50+
},
51+
},
52+
attached: {
53+
type: 'android.attached',
54+
device: {
55+
adbName: '.*',
56+
},
57+
},
58+
emulator: {
59+
type: 'android.emulator',
60+
device: {
61+
avdName: 'Pixel_3a_API_30_x86',
62+
},
63+
},
64+
},
65+
configurations: {
66+
'ios.debug': {
67+
device: 'simulator',
68+
app: 'ios.debug',
69+
},
70+
'ios.release': {
71+
device: 'simulator',
72+
app: 'ios.release',
73+
},
74+
'android.att.debug': {
75+
device: 'attached',
76+
app: 'android.debug',
77+
},
78+
'android.att.release': {
79+
device: 'attached',
80+
app: 'android.release',
81+
},
82+
'android.emu.debug': {
83+
device: 'emulator',
84+
app: 'android.debug',
85+
},
86+
'android.emu.release': {
87+
device: 'emulator',
88+
app: 'android.release',
89+
},
90+
},
91+
};

‎packages/sdks/e2e/react-native/.gitignore

+15-22
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,28 @@
1-
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
2-
3-
# dependencies
41
node_modules/
5-
6-
# Expo
72
.expo/
83
dist/
9-
web-build/
10-
11-
# Native
12-
*.orig.*
4+
npm-debug.*
135
*.jks
146
*.p8
157
*.p12
168
*.key
179
*.mobileprovision
18-
19-
# Metro
20-
.metro-health-check*
21-
22-
# debug
23-
npm-debug.*
24-
yarn-debug.*
25-
yarn-error.*
10+
*.orig.*
11+
web-build/
2612

2713
# macOS
2814
.DS_Store
29-
*.pem
3015

31-
# local env files
32-
.env*.local
16+
# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
17+
# The following patterns were generated by expo-cli
18+
19+
expo-env.d.ts
20+
# @end expo-cli
21+
22+
# ignore eas local builds
23+
build-*.tar.gz
24+
*build.tar.gz
3325

34-
# typescript
35-
*.tsbuildinfo
26+
# ignore ios build
27+
ios
28+
android

‎packages/sdks/e2e/react-native/App.tsx

-74
This file was deleted.

‎packages/sdks/e2e/react-native/AppEntry.js

-5
This file was deleted.

‎packages/sdks/e2e/react-native/app.json

+28-11
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,45 @@
11
{
22
"expo": {
3-
"name": "react-native",
4-
"slug": "react-native",
3+
"name": "my-app",
4+
"slug": "my-app",
55
"version": "1.0.0",
66
"orientation": "portrait",
7-
"icon": "./assets/icon.png",
8-
"userInterfaceStyle": "light",
7+
"icon": "./assets/images/icon.png",
8+
"scheme": "myapp",
9+
"userInterfaceStyle": "automatic",
910
"splash": {
10-
"image": "./assets/splash.png",
11+
"image": "./assets/images/splash.png",
1112
"resizeMode": "contain",
1213
"backgroundColor": "#ffffff"
1314
},
14-
"assetBundlePatterns": ["**/*"],
1515
"ios": {
16-
"supportsTablet": true
16+
"supportsTablet": true,
17+
"bundleIdentifier": "com.jabersami.myapp"
1718
},
1819
"android": {
1920
"adaptiveIcon": {
20-
"foregroundImage": "./assets/adaptive-icon.png",
21+
"foregroundImage": "./assets/images/adaptive-icon.png",
2122
"backgroundColor": "#ffffff"
22-
}
23+
},
24+
"package": "com.jabersami.myapp"
2325
},
2426
"web": {
25-
"favicon": "./assets/favicon.png"
26-
}
27+
"bundler": "metro",
28+
"output": "server",
29+
"favicon": "./assets/images/favicon.png"
30+
},
31+
"plugins": ["expo-router", "@config-plugins/detox"],
32+
"experiments": {
33+
"typedRoutes": true
34+
},
35+
"extra": {
36+
"router": {
37+
"origin": false
38+
},
39+
"eas": {
40+
"projectId": "31b277d4-8498-4a75-8dd8-4ecd8e7810a1"
41+
}
42+
},
43+
"owner": "jabersami"
2744
}
2845
}

‎packages/sdks/e2e/react-native/app/+html.tsx

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { ScrollViewStyleReset } from 'expo-router/html';
2+
import { type PropsWithChildren } from 'react';
3+
4+
/**
5+
* This file is web-only and used to configure the root HTML for every web page during static rendering.
6+
* The contents of this function only run in Node.js environments and do not have access to the DOM or browser APIs.
7+
*/
8+
export default function Root({ children }: PropsWithChildren) {
9+
return (
10+
<html lang="en">
11+
<head>
12+
<meta charSet="utf-8" />
13+
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
14+
<meta
15+
name="viewport"
16+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
17+
/>
18+
19+
{/*
20+
Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
21+
However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
22+
*/}
23+
<ScrollViewStyleReset />
24+
25+
{/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
26+
<style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
27+
{/* Add any additional <head> elements that you want globally available on web... */}
28+
</head>
29+
<body>{children}</body>
30+
</html>
31+
);
32+
}
33+
34+
const responsiveBackground = `
35+
body {
36+
background-color: #fff;
37+
}
38+
@media (prefers-color-scheme: dark) {
39+
body {
40+
background-color: #000;
41+
}
42+
}`;

0 commit comments

Comments
 (0)