From 9c372ad287beefd360c003e611426f52ea004c70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20Boro=C5=84?= Date: Mon, 27 Oct 2025 15:13:53 +0100 Subject: [PATCH 1/4] Add background component for native stack --- apps/src/tests/TestXXXX.tsx | 59 +++++++++++++++++++++++++++++ apps/src/tests/index.ts | 1 + guides/GUIDE_FOR_LIBRARY_AUTHORS.md | 4 ++ src/components/ScreenStackItem.tsx | 6 +++ src/types.tsx | 8 ++++ 5 files changed, 78 insertions(+) create mode 100644 apps/src/tests/TestXXXX.tsx diff --git a/apps/src/tests/TestXXXX.tsx b/apps/src/tests/TestXXXX.tsx new file mode 100644 index 0000000000..fdb3a3ce4d --- /dev/null +++ b/apps/src/tests/TestXXXX.tsx @@ -0,0 +1,59 @@ +import * as React from 'react'; +import { Text, View, StyleSheet, Image } from 'react-native'; +import { NavigationContainer } from '@react-navigation/native'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import Colors from '../shared/styling/Colors'; + +const Stack = createNativeStackNavigator(); + +const CustomBackgroundComponent = () => ( + +); + +function HomeScreen() { + return ( + + Home Screen + + ); +} + +const App = () => { + return ( + + + + + + ); +}; + +const styles = StyleSheet.create({ + screenContent: { + flex: 1, + backgroundColor: Colors.Navy, + justifyContent: 'center', + alignItems: 'center', + borderRadius: 10, + }, + text: { + fontSize: 24, + color: Colors.White, + }, +}); + +export default App; diff --git a/apps/src/tests/index.ts b/apps/src/tests/index.ts index ab31ec9bde..2d1da4b212 100644 --- a/apps/src/tests/index.ts +++ b/apps/src/tests/index.ts @@ -155,6 +155,7 @@ export { default as Test3239 } from './Test3239'; export { default as Test3265 } from './Test3265'; export { default as Test3271 } from './Test3271'; export { default as Test3282 } from './Test3282'; +export { default as TestXXXX } from './TestXXXX'; export { default as TestScreenAnimation } from './TestScreenAnimation'; export { default as TestScreenAnimationV5 } from './TestScreenAnimationV5'; export { default as TestHeader } from './TestHeader'; diff --git a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md index 333d135c80..3722e5cc7d 100644 --- a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md +++ b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md @@ -42,6 +42,10 @@ The `ScreenStackItem` component is a convenience wrapper around `Screen` that's Below is the list of additional properties that can be used for `ScreenStackItem` component: +### `backgroundComponent` + +Custom React element to be rendered as the background of the screen. + ### `customAnimationOnSwipe` (iOS only) Boolean indicating that swipe dismissal should trigger animation provided by `stackAnimation`. Defaults to `false`. diff --git a/src/components/ScreenStackItem.tsx b/src/components/ScreenStackItem.tsx index 879c78c6ef..ede112ad88 100644 --- a/src/components/ScreenStackItem.tsx +++ b/src/components/ScreenStackItem.tsx @@ -36,6 +36,7 @@ function ScreenStackItem( children, headerConfig, activityState, + backgroundComponent, shouldFreeze, stackPresentation, sheetAllowedDetents, @@ -100,6 +101,11 @@ function ScreenStackItem( contentStyle={contentStyle} style={debugContainerStyle} stackPresentation={stackPresentation ?? 'push'}> + {backgroundComponent && ( + + {backgroundComponent()} + + )} {shouldUseSafeAreaView ? ( {children} diff --git a/src/types.tsx b/src/types.tsx index 046156f8f5..3cb9f3dddd 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -147,6 +147,14 @@ export interface ScreenProps extends ViewProps { */ shouldFreeze?: boolean; children?: React.ReactNode; + /** + * Optional custom React element to be rendered as the background of the screen. + * + * This component will be rendered behind all foreground screen content. + * You can provide any valid React element, such as an ImageBackground, + * gradient, or a styled View. + */ + backgroundComponent?: () => React.ReactNode; /** * Boolean indicating that swipe dismissal should trigger animation provided by `stackAnimation`. Defaults to `false`. * From a361da96b1c43deb9920a98a1f0cc7535c4fbc43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20Boro=C5=84?= Date: Mon, 27 Oct 2025 15:24:57 +0100 Subject: [PATCH 2/4] Rename test --- apps/src/tests/{TestXXXX.tsx => Test3348.tsx} | 2 +- apps/src/tests/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename apps/src/tests/{TestXXXX.tsx => Test3348.tsx} (98%) diff --git a/apps/src/tests/TestXXXX.tsx b/apps/src/tests/Test3348.tsx similarity index 98% rename from apps/src/tests/TestXXXX.tsx rename to apps/src/tests/Test3348.tsx index fdb3a3ce4d..bb155f313d 100644 --- a/apps/src/tests/TestXXXX.tsx +++ b/apps/src/tests/Test3348.tsx @@ -12,7 +12,7 @@ const CustomBackgroundComponent = () => ( uri: 'https://fastly.picsum.photos/id/309/400/800.jpg?hmac=Pjy1rvSFQNX9tqavzeWNpy3dfWBGjLkY0doRN50JXBA', }} style={{ - width: '100%', + height: '100%', aspectRatio: 1 }} /> diff --git a/apps/src/tests/index.ts b/apps/src/tests/index.ts index 2d1da4b212..ccb3327dd6 100644 --- a/apps/src/tests/index.ts +++ b/apps/src/tests/index.ts @@ -155,7 +155,7 @@ export { default as Test3239 } from './Test3239'; export { default as Test3265 } from './Test3265'; export { default as Test3271 } from './Test3271'; export { default as Test3282 } from './Test3282'; -export { default as TestXXXX } from './TestXXXX'; +export { default as Test3348 } from './Test3348'; export { default as TestScreenAnimation } from './TestScreenAnimation'; export { default as TestScreenAnimationV5 } from './TestScreenAnimationV5'; export { default as TestHeader } from './TestHeader'; From 039e93925b115a9a57ae636134db3b28ee791e80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20Boro=C5=84?= Date: Mon, 27 Oct 2025 15:25:41 +0100 Subject: [PATCH 3/4] Comment out an example temporarly --- apps/src/tests/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/src/tests/index.ts b/apps/src/tests/index.ts index ccb3327dd6..d1a4c1965b 100644 --- a/apps/src/tests/index.ts +++ b/apps/src/tests/index.ts @@ -155,7 +155,7 @@ export { default as Test3239 } from './Test3239'; export { default as Test3265 } from './Test3265'; export { default as Test3271 } from './Test3271'; export { default as Test3282 } from './Test3282'; -export { default as Test3348 } from './Test3348'; +// export { default as Test3348 } from './Test3348'; // Waiting for react-navigation changes to propagate export { default as TestScreenAnimation } from './TestScreenAnimation'; export { default as TestScreenAnimationV5 } from './TestScreenAnimationV5'; export { default as TestHeader } from './TestHeader'; From b8fe5964147fde62a159e6570d61a4c9c575d58e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20Boro=C5=84?= Date: Thu, 30 Oct 2025 11:17:51 +0100 Subject: [PATCH 4/4] Rename --- apps/src/tests/Test3348.tsx | 2 +- guides/GUIDE_FOR_LIBRARY_AUTHORS.md | 8 ++++---- src/components/ScreenStackItem.tsx | 6 +++--- src/types.tsx | 16 ++++++++-------- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/apps/src/tests/Test3348.tsx b/apps/src/tests/Test3348.tsx index bb155f313d..d9718ee09a 100644 --- a/apps/src/tests/Test3348.tsx +++ b/apps/src/tests/Test3348.tsx @@ -34,7 +34,7 @@ const App = () => { contentStyle: { padding: 35, }, - backgroundComponent: CustomBackgroundComponent, + renderBackground: CustomBackgroundComponent, }}> diff --git a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md index 3722e5cc7d..72b4e138af 100644 --- a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md +++ b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md @@ -42,10 +42,6 @@ The `ScreenStackItem` component is a convenience wrapper around `Screen` that's Below is the list of additional properties that can be used for `ScreenStackItem` component: -### `backgroundComponent` - -Custom React element to be rendered as the background of the screen. - ### `customAnimationOnSwipe` (iOS only) Boolean indicating that swipe dismissal should trigger animation provided by `stackAnimation`. Defaults to `false`. @@ -158,6 +154,10 @@ A callback that gets called when the current screen will disappear. This is call Boolean indicating whether to prevent current screen from being dismissed. Defaults to `false`. +### `renderBackground` + +Callback returning the custom React element to be rendered as the background of the screen. + ### `replaceAnimation` Allows for the customization of the type of animation to use when this screen replaces another screen at the top of the stack. The following values are currently supported: diff --git a/src/components/ScreenStackItem.tsx b/src/components/ScreenStackItem.tsx index ede112ad88..7648744aea 100644 --- a/src/components/ScreenStackItem.tsx +++ b/src/components/ScreenStackItem.tsx @@ -36,7 +36,7 @@ function ScreenStackItem( children, headerConfig, activityState, - backgroundComponent, + renderBackground, shouldFreeze, stackPresentation, sheetAllowedDetents, @@ -101,9 +101,9 @@ function ScreenStackItem( contentStyle={contentStyle} style={debugContainerStyle} stackPresentation={stackPresentation ?? 'push'}> - {backgroundComponent && ( + {renderBackground && ( - {backgroundComponent()} + {renderBackground()} )} {shouldUseSafeAreaView ? ( diff --git a/src/types.tsx b/src/types.tsx index 3cb9f3dddd..74624b729c 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -147,14 +147,6 @@ export interface ScreenProps extends ViewProps { */ shouldFreeze?: boolean; children?: React.ReactNode; - /** - * Optional custom React element to be rendered as the background of the screen. - * - * This component will be rendered behind all foreground screen content. - * You can provide any valid React element, such as an ImageBackground, - * gradient, or a styled View. - */ - backgroundComponent?: () => React.ReactNode; /** * Boolean indicating that swipe dismissal should trigger animation provided by `stackAnimation`. Defaults to `false`. * @@ -344,6 +336,14 @@ export interface ScreenProps extends ViewProps { */ preventNativeDismiss?: boolean; ref?: React.Ref; + /** + * Callback returning the custom React element to be rendered as the background of the screen. + * + * This component will be rendered behind all foreground screen content. + * You can provide any valid React element, such as an ImageBackground, + * gradient, or a styled View. + */ + renderBackground?: () => React.ReactNode; /** * How should the screen replacing another screen animate. Defaults to `pop`. * The following values are currently supported: