18 | )
19 | }
20 | ```
21 |
22 | ## Built-in Views
23 |
24 | React Native needs to have less boilerplate ([opinion: built-in react views](https://x.com/baconbrix/status/1773800723383275952?s=46&t=4GpE_iEDNlOGqhX9K_d56A)). This experiment patches React Native to support using lowercase JSX views that are registered just in time.
25 |
26 | ```swift
27 | // Map View available via
28 | @ReactView(jsName: "map-view")
29 | class MapView: RCTViewManager {
30 |
31 | @ReactProperty
32 | var zoomEnabled: Bool?
33 |
34 | override func view() -> UIView {
35 | MKMapView()
36 | }
37 | }
38 | ```
39 |
40 | Which can be used in JS-land (notice: no imports are required). This is because the React babel plugin converts this code to `React.createElement("map-view", { zoomEnabled: true })` which is then passed to React Native.
41 |
42 | ```jsx
43 | function App() {
44 | return ;
45 | }
46 | ```
47 |
48 | This can be typed the same as views in `react-dom` or React Three Fiber:
49 |
50 | ```ts
51 | declare global {
52 | namespace JSX {
53 | interface IntrinsicElements {
54 | /** MKMapView */
55 | "map-view": import("react-native").ViewProps & { zoomEnabled?: boolean };
56 | }
57 | }
58 | }
59 | ```
60 |
61 | ---
62 |
63 | To make this work, I patched `react-native/Libraries/Renderer/shims/ReactNativeViewConfigRegistry.js` to instantiate the view when it's missing:
64 |
65 | ```js
66 | if (typeof name[0] === "string" && /[a-z]/.test(name[0])) {
67 | // Just-in-time register the native view for lowercase names to replicate the behavior of
68 | // react-dom.
69 | const createReactNativeComponentClass = require("./createReactNativeComponentClass");
70 | const getNativeComponentAttributes = require("../../ReactNative/getNativeComponentAttributes");
71 |
72 | // Essentially just `requireNativeComponent('...');`.
73 | createReactNativeComponentClass(name, () =>
74 | getNativeComponentAttributes(name)
75 | );
76 | callback = viewConfigCallbacks.get(name);
77 | }
78 | ```
79 |
80 | ## Built-in APIs
81 |
82 | In the browser, APIs are just installed on the JS global object, e.g. `navigator.geolocation`. This experiment patches React Native to work similarly by using the global `native` object, e.g. `native.geolocation` instead of importing `react-native` and using `NativeModules`.
83 |
84 | ```js
85 | declare var native: typeof import("react-native").NativeModules;
86 | if (typeof native === "undefined") {
87 | globalThis.native = new Proxy(
88 | {},
89 | {
90 | get(target, prop) {
91 | const NativeModules = require("react-native").NativeModules;
92 | if (prop in NativeModules) {
93 | return NativeModules[prop];
94 | }
95 | },
96 | }
97 | );
98 | }
99 | ```
100 |
101 | This makes web interop a bit nicer too because you can just do:
102 |
103 | ```js
104 | if (typeof native !== "undefined") {
105 | native.geolocation.getCurrentPosition();
106 | }
107 | ```
108 |
109 | This can be typed like the browser (in the future this can be generated from parsing the Swift/Kotlin code):
110 |
111 | ```ts
112 | declare global {
113 | interface Window {
114 | native: typeof import("react-native").NativeModules & {
115 | /** Custom native module */
116 | geolocation: {
117 | /** Get the current position. */
118 | getCurrentPosition: () => void;
119 | };
120 | };
121 | }
122 | }
123 | ```
124 |
125 | ## Result
126 |
127 | The result is a React Native that feels more like the web and requires substantially less boilerplate/bundling. Standard web projects start with only a handful of imports, but React Native has thousands (~1,945 [last I checked](https://x.com/baconbrix/status/1773800723383275952?s=46&t=4GpE_iEDNlOGqhX9K_d56A)). Even with the fastest bundler in the world, this will still require seconds to create the graph.
128 |
129 | I've demonstrated here that you can still have types, doc blocks, and all the other benefits of React without the boilerplate of React Native.
130 |
131 | Overall, this workflow lends itself better to jumping between JS and native code to expose new APIs or views. It's also easier to maintain because there are fewer bridging APIs to keep in sync. In the future, we should generate the TypeScript types and doc blocks from the Swift/Kotlin code, but that's a problem for another day.
132 |
133 | ## Web interop
134 |
135 | Though it's not perfect, and possibly more confusing than helpful— I did play with adding a `div` view which just re-exports `RCTView`. Works like a View component but uses syntax that lends itself much better to use with a shared web codebase.
136 |
137 |
138 | ## Other cool stuff
139 |
140 | I used this Swift Macros library [ReactBridge](https://github.com/ikhvorost/ReactBridge) with Expo Router. I found this package in the [Indeed Job Search](https://apps.apple.com/us/app/indeed-job-search/id309735670) iOS app.
141 |
142 |
--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "expo": {
3 | "name": "jun21",
4 | "slug": "jun21",
5 | "version": "1.0.0",
6 | "orientation": "portrait",
7 | "icon": "./assets/images/icon.png",
8 | "scheme": "myapp",
9 | "userInterfaceStyle": "automatic",
10 | "splash": {
11 | "image": "./assets/images/splash.png",
12 | "resizeMode": "contain",
13 | "backgroundColor": "#ffffff"
14 | },
15 | "ios": {
16 | "supportsTablet": true,
17 | "bundleIdentifier": "com.bacon.jun21"
18 | },
19 | "android": {
20 | "adaptiveIcon": {
21 | "foregroundImage": "./assets/images/adaptive-icon.png",
22 | "backgroundColor": "#ffffff"
23 | }
24 | },
25 | "web": {
26 | "bundler": "metro",
27 | "output": "server",
28 | "favicon": "./assets/images/favicon.png"
29 | },
30 | "plugins": [
31 | [
32 | "expo-router",
33 | {
34 | "origin": "http://a.com"
35 | }
36 | ]
37 | ],
38 | "experiments": {
39 | "typedRoutes": true
40 | }
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/app/api/hello+api.ts:
--------------------------------------------------------------------------------
1 | export function GET() {
2 | return Response.json({ message: "Hello API" });
3 | }
4 |
--------------------------------------------------------------------------------
/app/index.tsx:
--------------------------------------------------------------------------------
1 | export default function Home() {
2 | return (
3 |