Skip to content

Commit d57590e

Browse files
committed
feat: add basic React Server Component support (#2170)
## Description Add basic support for React Server Components support. Related PRs for more context: - necolas/react-native-web#2678 - AppAndFlow/react-native-safe-area-context#502 - software-mansion/react-native-svg#2287 ## Changes - Added basic React Server Component support ## Test code and steps to reproduce - It's kinda hard to test this E2E. I wrote a small jest runner in jest-expo which executes in RSC mode, but it requires React 19 to work. Here's where I tested this patch expo/expo#29404 - It will likely break between now and the full release, but this should at least reduce the number of patches required to work on Expo Router support. - There's pretty good compilation on web: ``` 2:I["../../node_modules/react-native-web/dist/exports/View/index.js",[],""] 3:I["../../node_modules/react-native-web/dist/exports/Image/index.js",[],""] 1:{"name":"ScreenStackHeaderBackButtonImage","env":"Server","owner":null} 0:D"$1" 0:["$","$L2",null,{"children":["$","$L3",null,{"resizeMode":"center","fadeDuration":0},"$1"]},"$1"] ``` - And more opaque compilation on native platforms: ``` 1:I["../../node_modules/react-native-screens/src/components/ScreenStackHeaderConfig.tsx",[],"ScreenStackHeaderBackButtonImage"] 0:["$","$L1",null,{},null] ``` ## Checklist - [ ] Included code example that can be used to test this change - [ ] Updated TS types - [ ] Updated documentation: <!-- For adding new props to native-stack --> - [ ] https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md - [ ] https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md - [ ] https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx - [ ] https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx - [ ] Ensured that CI passes
1 parent 0683cd1 commit d57590e

19 files changed

+39
-0
lines changed

src/TransitionProgressContext.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import * as React from 'react';
24
import { Animated } from 'react-native';
35

src/components/Screen.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import React from 'react';
24
import { Animated, View, Platform } from 'react-native';
35

src/components/Screen.web.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import { ScreenProps } from 'react-native-screens';
24
import { Animated, View } from 'react-native';
35
import React from 'react';
@@ -8,6 +10,7 @@ export const InnerScreen = View;
810

911
// We're using class component here because of the error from reanimated:
1012
// createAnimatedComponent` does not support stateless functional components; use a class component instead.
13+
// NOTE: React Server Components do not support class components.
1114
export class NativeScreen extends React.Component<ScreenProps> {
1215
render(): JSX.Element {
1316
let {

src/components/ScreenContainer.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import { Platform, View } from 'react-native';
24
import React from 'react';
35
import { ScreenContainerProps } from 'react-native-screens';

src/components/ScreenStack.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import React from 'react';
24
import { ScreenStackProps, freezeEnabled } from 'react-native-screens';
35
import DelayedFreeze from './helpers/DelayedFreeze';

src/components/ScreenStackHeaderConfig.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import React from 'react';
24
import {
35
HeaderSubviewTypes,

src/components/SearchBar.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import React from 'react';
24
import {
35
isSearchBarAvailableForCurrentPlatform,

src/core.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import { Platform, UIManager } from 'react-native';
24

35
// const that tells if the library should use new implementation, will be undefined for older versions

src/fabric/FullWindowOverlayNativeComponent.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
24
import type { ViewProps } from 'react-native';
35

src/fabric/ModalScreenNativeComponent.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
24
import type { ViewProps, ColorValue } from 'react-native';
35
import type {

0 commit comments

Comments
 (0)