diff --git a/shared/repro/App.js b/shared/repro/App.js new file mode 100644 index 000000000000..b53f5f5e7dec --- /dev/null +++ b/shared/repro/App.js @@ -0,0 +1,35 @@ +import React from 'react'; +import {View, Text, DynamicColorIOS} from 'react-native'; +import {NavigationContainer} from '@react-navigation/native'; +import {createNativeStackNavigator} from '@react-navigation/native-stack'; + +const Stack = createNativeStackNavigator(); + +function Screen() { + return ( + + Test Screen + + ); +} + +export default function App() { + return ( + + + + + + ); +} diff --git a/shared/repro/README.md b/shared/repro/README.md new file mode 100644 index 000000000000..d64abeec93b2 --- /dev/null +++ b/shared/repro/README.md @@ -0,0 +1,40 @@ +# Repro Project + +Minimal React Native project to reproduce DynamicColorIOS header backgroundColor issue. + +## Setup + +1. Initialize a new React Native project: + ```bash + npx react-native@0.81.5 init ReproApp + cd ReproApp + ``` + +2. Install required dependencies: + ```bash + npm install react-native-screens@4.20.0 @react-navigation/native-stack@7.9.1 @react-navigation/native react-native-safe-area-context + ``` + +3. Replace `App.js` with the contents from this repo's `App.js` + +4. Replace `index.js` with the contents from this repo's `index.js` + +5. For iOS: + ```bash + cd ios + pod install + cd .. + ``` + +6. Run the app: + ```bash + npx react-native run-ios + ``` + +## What to Test + +The header backgroundColor uses `DynamicColorIOS` with: +- `light: 'green'` +- `dark: 'blue'` + +Switch between light and dark mode in iOS settings to verify the header color changes. diff --git a/shared/repro/index.js b/shared/repro/index.js new file mode 100644 index 000000000000..d8e00bd3d845 --- /dev/null +++ b/shared/repro/index.js @@ -0,0 +1,3 @@ +import {AppRegistry} from 'react-native'; +import App from './App'; +AppRegistry.registerComponent('ReproApp', () => App); diff --git a/shared/repro/package.json b/shared/repro/package.json new file mode 100644 index 000000000000..3f7bc424503f --- /dev/null +++ b/shared/repro/package.json @@ -0,0 +1,13 @@ +{ + "name": "repro", + "version": "1.0.0", + "private": true, + "dependencies": { + "@react-navigation/native": "7.1.27", + "@react-navigation/native-stack": "7.9.1", + "react": "19.1.0", + "react-native": "0.81.5", + "react-native-safe-area-context": "5.6.2", + "react-native-screens": "4.20.0" + } +}