@@ -157,6 +157,32 @@ function resolveSheetInitialDetentIndex(
157
157
return index ;
158
158
}
159
159
160
+ function transformEdgeToEdgeProps ( props : ScreenProps ) : ScreenProps {
161
+ const {
162
+ // Filter out edge-to-edge related props
163
+ statusBarColor,
164
+ statusBarTranslucent,
165
+ navigationBarColor,
166
+ navigationBarTranslucent,
167
+ ...rest
168
+ } = props ;
169
+
170
+ if ( __DEV__ ) {
171
+ controlEdgeToEdgeValues ( {
172
+ statusBarColor,
173
+ statusBarTranslucent,
174
+ navigationBarColor,
175
+ navigationBarTranslucent,
176
+ } ) ;
177
+ }
178
+
179
+ return {
180
+ ...rest ,
181
+ statusBarTranslucent : true ,
182
+ navigationBarTranslucent : true ,
183
+ } ;
184
+ }
185
+
160
186
function isIndexInClosedRange (
161
187
value : number ,
162
188
lowerBound : number ,
@@ -184,13 +210,6 @@ export const InnerScreen = React.forwardRef<View, ScreenProps>(
184
210
enabled = screensEnabled ( ) ,
185
211
freezeOnBlur = freezeEnabled ( ) ,
186
212
shouldFreeze,
187
-
188
- // edge-to-edge related props
189
- navigationBarColor,
190
- navigationBarTranslucent,
191
- statusBarColor,
192
- statusBarTranslucent,
193
-
194
213
...rest
195
214
} = props ;
196
215
@@ -258,24 +277,6 @@ export const InnerScreen = React.forwardRef<View, ScreenProps>(
258
277
...props
259
278
} = rest ;
260
279
261
- const {
262
- // Filter out edge-to-edge related props
263
- navigationBarColor,
264
- navigationBarTranslucent,
265
- statusBarColor,
266
- statusBarTranslucent,
267
- ...edgeToEdgeFriendlyProps
268
- } = props ;
269
-
270
- if ( __DEV__ ) {
271
- controlEdgeToEdgeValues ( {
272
- navigationBarColor,
273
- navigationBarTranslucent,
274
- statusBarColor,
275
- statusBarTranslucent,
276
- } ) ;
277
- }
278
-
279
280
if ( active !== undefined && activityState === undefined ) {
280
281
console . warn (
281
282
'It appears that you are using old version of react-navigation library. Please update @react-navigation/bottom-tabs, @react-navigation/stack and @react-navigation/drawer to version 5.10.0 or above to take full advantage of new functionality added to react-native-screens' ,
@@ -320,13 +321,7 @@ export const InnerScreen = React.forwardRef<View, ScreenProps>(
320
321
return (
321
322
< DelayedFreeze freeze = { freeze } >
322
323
< AnimatedScreen
323
- { ...( EDGE_TO_EDGE
324
- ? {
325
- ...edgeToEdgeFriendlyProps ,
326
- navigationBarTranslucent : true ,
327
- statusBarTranslucent : true ,
328
- }
329
- : props ) }
324
+ { ...props }
330
325
/**
331
326
* This messy override is to conform NativeProps used by codegen and
332
327
* our Public API. To see reasoning go to this PR:
@@ -428,7 +423,12 @@ export const ScreenContext = React.createContext(InnerScreen);
428
423
const Screen = React . forwardRef < View , ScreenProps > ( ( props , ref ) => {
429
424
const ScreenWrapper = React . useContext ( ScreenContext ) || InnerScreen ;
430
425
431
- return < ScreenWrapper { ...props } ref = { ref } /> ;
426
+ return (
427
+ < ScreenWrapper
428
+ { ...( EDGE_TO_EDGE ? transformEdgeToEdgeProps ( props ) : props ) }
429
+ ref = { ref }
430
+ />
431
+ ) ;
432
432
} ) ;
433
433
434
434
Screen . displayName = 'Screen' ;
0 commit comments