Skip to content

Commit

Permalink
mark all of react-native as client boundary for React Server Componen…
Browse files Browse the repository at this point in the history
…ts (#43986)

Summary:
While developing React Server Component support for React Native, I've been adding this patch to the `react-native` package. It opts the entire `react-native` package out of being server rendered.

In the future, we'll want to circle back and refactor the `react-native` package to be more isomorphic so we can allow for utilities like `processColor` to be used in server bundles that target native platforms.

## Changelog:

[GENERAL] [ADDED] - Added support for importing `react-native` in a `react-server` environment for React Server Components support.

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests

Pull Request resolved: #43986

Test Plan:
Using react-native with this patch in a framework that supports React Server Components for native platforms, such as my unreleased branch of Expo Router, will allow for server rendering views from `react-native` to RSC Flight code with client references to the `react-native` package, e.g.

```js
import { View } from 'react-native';

export default function App() {
  return <View testID="basic-view" style={{ "backgroundColor":"#191A20" }}/>
}
```

Can be server rendered to ↓

```
2:I["/node_modules/react-native/index.bundle?platform=ios&dev=true#798513620",["..."],"View"]
1:["$","$L2",null,{"testID":"basic-view","style":{"backgroundColor":"#191A20"}}]
```

> The client boundaries (URL paths) are specific to the current Expo CLI implementation (based on Metro) and may look different in other implementations.

Reviewed By: rickhanlonii

Differential Revision: D55891243

Pulled By: TheSavior

fbshipit-source-id: d8dc9590039181ebf2c013dacca5f255d7a8f625
  • Loading branch information
EvanBacon authored and facebook-github-bot committed Jun 26, 2024
1 parent ebf1a7b commit 8989c9b
Show file tree
Hide file tree
Showing 4 changed files with 6 additions and 0 deletions.
2 changes: 2 additions & 0 deletions packages/polyfills/console.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
* @format
*/

'use client';

/* eslint-disable no-shadow, eqeqeq, curly, no-unused-vars, no-void, no-control-regex */

/**
Expand Down
2 changes: 2 additions & 0 deletions packages/react-native/Libraries/Core/InitializeCore.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
* @flow strict-local
*/

'use client';

/**
* Sets up global variables typical in most JavaScript environments.
*
Expand Down
1 change: 1 addition & 0 deletions packages/react-native/Libraries/Core/setUpGlobals.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
* @format
*/

'use client';
'use strict';

/**
Expand Down
1 change: 1 addition & 0 deletions packages/react-native/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
*/

'use strict';
'use client';

// APIs
import typeof ActionSheetIOS from './Libraries/ActionSheetIOS/ActionSheetIOS';
Expand Down

0 comments on commit 8989c9b

Please sign in to comment.