Skip to content

Commit

Permalink
feat: add basic React Server Component support (software-mansion#2170)
Browse files Browse the repository at this point in the history
## Description

Add basic support for React Server Components support.

Related PRs for more context:

- necolas/react-native-web#2678
- th3rdwave/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
  • Loading branch information
EvanBacon authored and ja1ns committed Oct 9, 2024
1 parent 8bb1204 commit 325293e
Show file tree
Hide file tree
Showing 19 changed files with 39 additions and 0 deletions.
2 changes: 2 additions & 0 deletions src/TransitionProgressContext.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

import * as React from 'react';
import { Animated } from 'react-native';

Expand Down
2 changes: 2 additions & 0 deletions src/components/Screen.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

import React from 'react';
import { Animated, View, Platform } from 'react-native';

Expand Down
3 changes: 3 additions & 0 deletions src/components/Screen.web.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

import { ScreenProps } from 'react-native-screens';
import { Animated, View } from 'react-native';
import React from 'react';
Expand All @@ -8,6 +10,7 @@ export const InnerScreen = View;

// We're using class component here because of the error from reanimated:
// createAnimatedComponent` does not support stateless functional components; use a class component instead.
// NOTE: React Server Components do not support class components.
export class NativeScreen extends React.Component<ScreenProps> {
render(): JSX.Element {
let {
Expand Down
2 changes: 2 additions & 0 deletions src/components/ScreenContainer.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

import { Platform, View } from 'react-native';
import React from 'react';
import { ScreenContainerProps } from 'react-native-screens';
Expand Down
2 changes: 2 additions & 0 deletions src/components/ScreenStack.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

import React from 'react';
import { ScreenStackProps, freezeEnabled } from 'react-native-screens';
import DelayedFreeze from './helpers/DelayedFreeze';
Expand Down
2 changes: 2 additions & 0 deletions src/components/ScreenStackHeaderConfig.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

import React from 'react';
import {
HeaderSubviewTypes,
Expand Down
2 changes: 2 additions & 0 deletions src/components/SearchBar.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

import React from 'react';
import {
isSearchBarAvailableForCurrentPlatform,
Expand Down
2 changes: 2 additions & 0 deletions src/core.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

import { Platform, UIManager } from 'react-native';

// const that tells if the library should use new implementation, will be undefined for older versions
Expand Down
2 changes: 2 additions & 0 deletions src/fabric/FullWindowOverlayNativeComponent.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps } from 'react-native';

Expand Down
2 changes: 2 additions & 0 deletions src/fabric/ModalScreenNativeComponent.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps, ColorValue } from 'react-native';
import type {
Expand Down
2 changes: 2 additions & 0 deletions src/fabric/NativeScreensModule.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

/* eslint-disable @typescript-eslint/ban-types */
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';
Expand Down
2 changes: 2 additions & 0 deletions src/fabric/ScreenContainerNativeComponent.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps } from 'react-native';

Expand Down
2 changes: 2 additions & 0 deletions src/fabric/ScreenNativeComponent.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps, ColorValue } from 'react-native';
import type {
Expand Down
2 changes: 2 additions & 0 deletions src/fabric/ScreenNavigationContainerNativeComponent.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps } from 'react-native';

Expand Down
2 changes: 2 additions & 0 deletions src/fabric/ScreenStackHeaderConfigNativeComponent.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps, ColorValue } from 'react-native';
import type {
Expand Down
2 changes: 2 additions & 0 deletions src/fabric/ScreenStackHeaderSubviewNativeComponent.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps } from 'react-native';
import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
Expand Down
2 changes: 2 additions & 0 deletions src/fabric/ScreenStackNativeComponent.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps } from 'react-native';
import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
Expand Down
2 changes: 2 additions & 0 deletions src/fabric/SearchBarNativeComponent.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

/* eslint-disable */
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps, ColorValue, HostComponent } from 'react-native';
Expand Down
2 changes: 2 additions & 0 deletions src/native-stack/contexts/GHContext.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

import React, { PropsWithChildren } from 'react';
import { GestureProviderProps } from '../types';

Expand Down

0 comments on commit 325293e

Please sign in to comment.