Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add basic support for React Server Components #2678

Open
wants to merge 8 commits into
base: master
Choose a base branch
from

Conversation

EvanBacon
Copy link
Contributor

I'm adding React Server Components support to Expo Router, and need basic support added to React Native Web. This PR contains a cleaned up version of the patches I've been developing against for the last couple months. I just open sourced this branch which can be used to verify support: expo/expo#29404

Here are a few of the migration principles:

  • useState and other dynamic hooks cannot be used in server components.
  • createContext is not available in a react-server environment.
  • Component and PureComponent are not allowed in react-server.
  • React.Children.toArray appears to clobber transitional react elements. This caused a lot of headache since we perform the check in <View />
  • You cannot dot-access into client modules. This wasn't a huge issue with rnw since most of the modules are already optimized for the server, but in react-native this means any use of StyleSheet.create would be invalid, since StyleSheet is naively (by me) marked as a client module.

We can (and probably should) circle back and optimize the modules even more for react-server environments, but basic support is substantially nicer than no support.

Copy link

codesandbox-ci bot commented Jun 3, 2024

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit b0dda5b:

Sandbox Source
react-native-web-examples Configuration

@@ -6,6 +6,7 @@
*
* @flow strict
*/
'use client';
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can this move to exports/useLocaleContext?

@@ -7,6 +7,8 @@
* @flow
*/

'use client';
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why does this module need use client?

@@ -8,6 +8,8 @@
* @format
*/

'use client';
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can this move to exports/FlatList?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants