@react-navigation/native-stack 7.9.0 → 8.0.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/module/index.js +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/navigators/createNativeStackNavigator.js +7 -6
- package/lib/module/navigators/createNativeStackNavigator.js.map +1 -1
- package/lib/module/views/NativeStackView.js +4 -4
- package/lib/module/views/NativeStackView.js.map +1 -1
- package/lib/module/views/NativeStackView.native.js +123 -172
- package/lib/module/views/NativeStackView.native.js.map +1 -1
- package/lib/module/views/useHeaderConfigProps.js +11 -14
- package/lib/module/views/useHeaderConfigProps.js.map +1 -1
- package/lib/typescript/src/index.d.ts +1 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/navigators/createNativeStackNavigator.d.ts +10 -6
- package/lib/typescript/src/navigators/createNativeStackNavigator.d.ts.map +1 -1
- package/lib/typescript/src/types.d.ts +16 -83
- package/lib/typescript/src/types.d.ts.map +1 -1
- package/lib/typescript/src/views/NativeStackView.d.ts.map +1 -1
- package/lib/typescript/src/views/NativeStackView.native.d.ts.map +1 -1
- package/lib/typescript/src/views/useHeaderConfigProps.d.ts +1 -1
- package/lib/typescript/src/views/useHeaderConfigProps.d.ts.map +1 -1
- package/package.json +11 -12
- package/src/index.tsx +4 -1
- package/src/navigators/createNativeStackNavigator.tsx +48 -25
- package/src/types.tsx +16 -88
- package/src/views/NativeStackView.native.tsx +138 -215
- package/src/views/NativeStackView.tsx +6 -9
- package/src/views/useHeaderConfigProps.tsx +13 -25
- package/lib/module/views/FontProcessor.js +0 -6
- package/lib/module/views/FontProcessor.js.map +0 -1
- package/lib/module/views/FontProcessor.native.js +0 -12
- package/lib/module/views/FontProcessor.native.js.map +0 -1
- package/lib/typescript/src/views/FontProcessor.d.ts +0 -2
- package/lib/typescript/src/views/FontProcessor.d.ts.map +0 -1
- package/lib/typescript/src/views/FontProcessor.native.d.ts +0 -2
- package/lib/typescript/src/views/FontProcessor.native.d.ts.map +0 -1
- package/src/views/FontProcessor.native.tsx +0 -12
- package/src/views/FontProcessor.tsx +0 -5
|
@@ -4,12 +4,11 @@ import {
|
|
|
4
4
|
HeaderBackContext,
|
|
5
5
|
HeaderHeightContext,
|
|
6
6
|
HeaderShownContext,
|
|
7
|
-
SafeAreaProviderCompat,
|
|
8
7
|
useFrameSize,
|
|
9
8
|
} from '@react-navigation/elements';
|
|
9
|
+
import { SafeAreaProviderCompat } from '@react-navigation/elements/internal';
|
|
10
10
|
import {
|
|
11
|
-
|
|
12
|
-
NavigationRouteContext,
|
|
11
|
+
NavigationProvider,
|
|
13
12
|
type ParamListBase,
|
|
14
13
|
type RouteProp,
|
|
15
14
|
StackActions,
|
|
@@ -21,14 +20,12 @@ import * as React from 'react';
|
|
|
21
20
|
import {
|
|
22
21
|
Animated,
|
|
23
22
|
Platform,
|
|
24
|
-
StatusBar,
|
|
25
23
|
StyleSheet,
|
|
26
24
|
useAnimatedValue,
|
|
27
25
|
View,
|
|
28
26
|
} from 'react-native';
|
|
29
27
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
30
28
|
import {
|
|
31
|
-
compatibilityFlags,
|
|
32
29
|
type ScreenProps,
|
|
33
30
|
ScreenStack,
|
|
34
31
|
ScreenStackItem,
|
|
@@ -80,7 +77,6 @@ const SceneView = ({
|
|
|
80
77
|
shouldFreeze,
|
|
81
78
|
descriptor,
|
|
82
79
|
previousDescriptor,
|
|
83
|
-
nextDescriptor,
|
|
84
80
|
isPresentationModal,
|
|
85
81
|
isPreloaded,
|
|
86
82
|
onWillDisappear,
|
|
@@ -95,19 +91,15 @@ const SceneView = ({
|
|
|
95
91
|
}: SceneViewProps) => {
|
|
96
92
|
const { route, navigation, options, render } = descriptor;
|
|
97
93
|
|
|
98
|
-
let {
|
|
99
|
-
animation,
|
|
100
|
-
animationMatchesGesture,
|
|
101
|
-
presentation = isPresentationModal ? 'modal' : 'card',
|
|
102
|
-
fullScreenGestureEnabled,
|
|
103
|
-
} = options;
|
|
104
|
-
|
|
105
94
|
const {
|
|
95
|
+
animation,
|
|
106
96
|
animationDuration,
|
|
97
|
+
animationMatchesGesture,
|
|
107
98
|
animationTypeForReplace = 'push',
|
|
99
|
+
fullScreenGestureEnabled,
|
|
108
100
|
fullScreenGestureShadowEnabled = true,
|
|
109
101
|
gestureEnabled,
|
|
110
|
-
gestureDirection
|
|
102
|
+
gestureDirection,
|
|
111
103
|
gestureResponseDistance,
|
|
112
104
|
header,
|
|
113
105
|
headerBackButtonMenuEnabled,
|
|
@@ -116,8 +108,6 @@ const SceneView = ({
|
|
|
116
108
|
headerTransparent,
|
|
117
109
|
autoHideHomeIndicator,
|
|
118
110
|
keyboardHandlingEnabled,
|
|
119
|
-
navigationBarColor,
|
|
120
|
-
navigationBarTranslucent,
|
|
121
111
|
navigationBarHidden,
|
|
122
112
|
orientation,
|
|
123
113
|
sheetAllowedDetents = [1.0],
|
|
@@ -127,42 +117,16 @@ const SceneView = ({
|
|
|
127
117
|
sheetElevation = 24,
|
|
128
118
|
sheetExpandsWhenScrolledToEdge = true,
|
|
129
119
|
sheetInitialDetentIndex = 0,
|
|
130
|
-
sheetShouldOverflowTopInset = false,
|
|
131
120
|
statusBarAnimation,
|
|
132
121
|
statusBarHidden,
|
|
133
122
|
statusBarStyle,
|
|
134
|
-
statusBarTranslucent,
|
|
135
|
-
statusBarBackgroundColor,
|
|
136
123
|
unstable_sheetFooter,
|
|
137
124
|
scrollEdgeEffects,
|
|
138
125
|
freezeOnBlur,
|
|
139
126
|
contentStyle,
|
|
140
127
|
} = options;
|
|
141
128
|
|
|
142
|
-
|
|
143
|
-
// for `vertical` direction to work, we need to set `fullScreenGestureEnabled` to `true`
|
|
144
|
-
// so the screen can be dismissed from any point on screen.
|
|
145
|
-
// `animationMatchesGesture` needs to be set to `true` so the `animation` set by user can be used,
|
|
146
|
-
// otherwise `simple_push` will be used.
|
|
147
|
-
// Also, the default animation for this direction seems to be `slide_from_bottom`.
|
|
148
|
-
if (fullScreenGestureEnabled === undefined) {
|
|
149
|
-
fullScreenGestureEnabled = true;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
if (animationMatchesGesture === undefined) {
|
|
153
|
-
animationMatchesGesture = true;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
if (animation === undefined) {
|
|
157
|
-
animation = 'slide_from_bottom';
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
// workaround for rn-screens where gestureDirection has to be set on both
|
|
162
|
-
// current and previous screen - software-mansion/react-native-screens/pull/1509
|
|
163
|
-
const nextGestureDirection = nextDescriptor?.options.gestureDirection;
|
|
164
|
-
const gestureDirectionOverride =
|
|
165
|
-
nextGestureDirection != null ? nextGestureDirection : gestureDirection;
|
|
129
|
+
let { presentation = isPresentationModal ? 'modal' : 'card' } = options;
|
|
166
130
|
|
|
167
131
|
if (index === 0) {
|
|
168
132
|
// first screen should always be treated as `card`, it resolves problems with no header animation
|
|
@@ -201,7 +165,11 @@ const SceneView = ({
|
|
|
201
165
|
// So our `getDefaultHeaderHeight` doesn't return the correct value
|
|
202
166
|
// So we hardcode the value here for now until screens is updated
|
|
203
167
|
android: ANDROID_DEFAULT_HEADER_HEIGHT + topInset,
|
|
204
|
-
default: getDefaultHeaderHeight(
|
|
168
|
+
default: getDefaultHeaderHeight({
|
|
169
|
+
landscape: frame.width > frame.height,
|
|
170
|
+
modalPresentation: isModal,
|
|
171
|
+
topInset,
|
|
172
|
+
}),
|
|
205
173
|
})
|
|
206
174
|
);
|
|
207
175
|
|
|
@@ -218,46 +186,7 @@ const SceneView = ({
|
|
|
218
186
|
|
|
219
187
|
const hasCustomHeader = header != null;
|
|
220
188
|
|
|
221
|
-
const
|
|
222
|
-
'usesNewAndroidHeaderHeightImplementation' in compatibilityFlags &&
|
|
223
|
-
compatibilityFlags['usesNewAndroidHeaderHeightImplementation'] === true;
|
|
224
|
-
|
|
225
|
-
let headerHeightCorrectionOffset = 0;
|
|
226
|
-
|
|
227
|
-
if (
|
|
228
|
-
Platform.OS === 'android' &&
|
|
229
|
-
!hasCustomHeader &&
|
|
230
|
-
!usesNewAndroidHeaderHeightImplementation
|
|
231
|
-
) {
|
|
232
|
-
const statusBarHeight = StatusBar.currentHeight ?? 0;
|
|
233
|
-
|
|
234
|
-
// On Android, the native header height is not correctly calculated
|
|
235
|
-
// It includes status bar height even if statusbar is not translucent
|
|
236
|
-
// And the statusbar value itself doesn't match the actual status bar height
|
|
237
|
-
// So we subtract the bogus status bar height and add the actual top inset
|
|
238
|
-
headerHeightCorrectionOffset = -statusBarHeight + topInset;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
const rawAnimatedHeaderHeight = useAnimatedValue(defaultHeaderHeight);
|
|
242
|
-
const animatedHeaderHeight = React.useMemo(
|
|
243
|
-
() =>
|
|
244
|
-
Animated.add<number>(
|
|
245
|
-
rawAnimatedHeaderHeight,
|
|
246
|
-
headerHeightCorrectionOffset
|
|
247
|
-
),
|
|
248
|
-
[headerHeightCorrectionOffset, rawAnimatedHeaderHeight]
|
|
249
|
-
);
|
|
250
|
-
|
|
251
|
-
// During the very first render topInset is > 0 when running
|
|
252
|
-
// in non edge-to-edge mode on Android, while on every consecutive render
|
|
253
|
-
// topInset === 0, causing header content to jump, as we add padding on the first frame,
|
|
254
|
-
// just to remove it in next one. To prevent this, when statusBarTranslucent is set,
|
|
255
|
-
// we apply additional padding in header only if its true.
|
|
256
|
-
// For more details see: https://github.com/react-navigation/react-navigation/pull/12014
|
|
257
|
-
const headerTopInsetEnabled =
|
|
258
|
-
typeof statusBarTranslucent === 'boolean'
|
|
259
|
-
? statusBarTranslucent
|
|
260
|
-
: topInset !== 0;
|
|
189
|
+
const headerTopInsetEnabled = topInset !== 0;
|
|
261
190
|
|
|
262
191
|
const canGoBack = previousDescriptor != null || parentHeaderBack != null;
|
|
263
192
|
const backTitle = previousDescriptor
|
|
@@ -277,6 +206,8 @@ const SceneView = ({
|
|
|
277
206
|
|
|
278
207
|
const isRemovePrevented = preventedRoutes[route.key]?.preventRemove;
|
|
279
208
|
|
|
209
|
+
const animatedHeaderHeight = useAnimatedValue(defaultHeaderHeight);
|
|
210
|
+
|
|
280
211
|
const headerConfig = useHeaderConfigProps({
|
|
281
212
|
...options,
|
|
282
213
|
route,
|
|
@@ -291,7 +222,6 @@ const SceneView = ({
|
|
|
291
222
|
headerHeight,
|
|
292
223
|
headerShown: header !== undefined ? false : headerShown,
|
|
293
224
|
headerTopInsetEnabled,
|
|
294
|
-
headerTransparent,
|
|
295
225
|
headerBack,
|
|
296
226
|
});
|
|
297
227
|
|
|
@@ -306,7 +236,7 @@ const SceneView = ({
|
|
|
306
236
|
[
|
|
307
237
|
{
|
|
308
238
|
nativeEvent: {
|
|
309
|
-
headerHeight:
|
|
239
|
+
headerHeight: animatedHeaderHeight,
|
|
310
240
|
},
|
|
311
241
|
},
|
|
312
242
|
],
|
|
@@ -355,136 +285,129 @@ const SceneView = ({
|
|
|
355
285
|
);
|
|
356
286
|
|
|
357
287
|
return (
|
|
358
|
-
<
|
|
359
|
-
<
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
rawAnimatedHeaderHeight.setValue(headerHeight);
|
|
462
|
-
}}
|
|
463
|
-
style={[
|
|
464
|
-
styles.header,
|
|
465
|
-
headerTransparent ? styles.absolute : null,
|
|
466
|
-
]}
|
|
467
|
-
>
|
|
468
|
-
{header({
|
|
469
|
-
back: headerBack,
|
|
470
|
-
options,
|
|
471
|
-
route,
|
|
472
|
-
navigation,
|
|
473
|
-
})}
|
|
474
|
-
</View>
|
|
475
|
-
) : null}
|
|
476
|
-
<HeaderShownContext.Provider
|
|
477
|
-
value={isParentHeaderShown || headerShown !== false}
|
|
288
|
+
<NavigationProvider navigation={navigation} route={route}>
|
|
289
|
+
<ScreenStackItem
|
|
290
|
+
key={route.key}
|
|
291
|
+
screenId={route.key}
|
|
292
|
+
activityState={isPreloaded ? 0 : 2}
|
|
293
|
+
style={StyleSheet.absoluteFill}
|
|
294
|
+
aria-hidden={!focused}
|
|
295
|
+
customAnimationOnSwipe={animationMatchesGesture}
|
|
296
|
+
fullScreenSwipeEnabled={fullScreenGestureEnabled}
|
|
297
|
+
fullScreenSwipeShadowEnabled={fullScreenGestureShadowEnabled}
|
|
298
|
+
freezeOnBlur={freezeOnBlur}
|
|
299
|
+
gestureEnabled={
|
|
300
|
+
Platform.OS === 'android'
|
|
301
|
+
? // This prop enables handling of system back gestures on Android
|
|
302
|
+
// Since we handle them in JS side, we disable this
|
|
303
|
+
false
|
|
304
|
+
: gestureEnabled
|
|
305
|
+
}
|
|
306
|
+
homeIndicatorHidden={autoHideHomeIndicator}
|
|
307
|
+
hideKeyboardOnSwipe={keyboardHandlingEnabled}
|
|
308
|
+
navigationBarHidden={navigationBarHidden}
|
|
309
|
+
replaceAnimation={animationTypeForReplace}
|
|
310
|
+
stackPresentation={presentation === 'card' ? 'push' : presentation}
|
|
311
|
+
stackAnimation={animation}
|
|
312
|
+
screenOrientation={orientation}
|
|
313
|
+
sheetAllowedDetents={sheetAllowedDetents}
|
|
314
|
+
sheetLargestUndimmedDetentIndex={sheetLargestUndimmedDetentIndex}
|
|
315
|
+
sheetGrabberVisible={sheetGrabberVisible}
|
|
316
|
+
sheetInitialDetentIndex={sheetInitialDetentIndex}
|
|
317
|
+
sheetCornerRadius={sheetCornerRadius}
|
|
318
|
+
sheetElevation={sheetElevation}
|
|
319
|
+
sheetExpandsWhenScrolledToEdge={sheetExpandsWhenScrolledToEdge}
|
|
320
|
+
statusBarAnimation={statusBarAnimation}
|
|
321
|
+
statusBarHidden={statusBarHidden}
|
|
322
|
+
statusBarStyle={statusBarStyle}
|
|
323
|
+
swipeDirection={gestureDirection}
|
|
324
|
+
transitionDuration={animationDuration}
|
|
325
|
+
onWillAppear={onWillAppear}
|
|
326
|
+
onWillDisappear={onWillDisappear}
|
|
327
|
+
onAppear={onAppear}
|
|
328
|
+
onDisappear={onDisappear}
|
|
329
|
+
onDismissed={onDismissed}
|
|
330
|
+
onGestureCancel={onGestureCancel}
|
|
331
|
+
onSheetDetentChanged={onSheetDetentChanged}
|
|
332
|
+
gestureResponseDistance={gestureResponseDistance}
|
|
333
|
+
nativeBackButtonDismissalEnabled={false} // on Android
|
|
334
|
+
onHeaderBackButtonClicked={onHeaderBackButtonClicked}
|
|
335
|
+
preventNativeDismiss={isRemovePrevented} // on iOS
|
|
336
|
+
scrollEdgeEffects={{
|
|
337
|
+
bottom: scrollEdgeEffects?.bottom ?? 'automatic',
|
|
338
|
+
top: scrollEdgeEffects?.top ?? 'automatic',
|
|
339
|
+
left: scrollEdgeEffects?.left ?? 'automatic',
|
|
340
|
+
right: scrollEdgeEffects?.right ?? 'automatic',
|
|
341
|
+
}}
|
|
342
|
+
onNativeDismissCancelled={onNativeDismissCancelled}
|
|
343
|
+
onHeaderHeightChange={onHeaderHeightChange}
|
|
344
|
+
contentStyle={[
|
|
345
|
+
presentation !== 'transparentModal' &&
|
|
346
|
+
presentation !== 'containedTransparentModal' && {
|
|
347
|
+
backgroundColor: colors.background,
|
|
348
|
+
},
|
|
349
|
+
contentStyle,
|
|
350
|
+
]}
|
|
351
|
+
headerConfig={headerConfig}
|
|
352
|
+
unstable_sheetFooter={unstable_sheetFooter}
|
|
353
|
+
// When ts-expect-error is added, it affects all the props below it
|
|
354
|
+
// So we keep any props that need it at the end
|
|
355
|
+
// Otherwise invalid props may not be caught by TypeScript
|
|
356
|
+
shouldFreeze={shouldFreeze}
|
|
357
|
+
>
|
|
358
|
+
<AnimatedHeaderHeightContext.Provider value={animatedHeaderHeight}>
|
|
359
|
+
<HeaderHeightContext.Provider
|
|
360
|
+
value={
|
|
361
|
+
headerShown !== false ? headerHeight : (parentHeaderHeight ?? 0)
|
|
362
|
+
}
|
|
363
|
+
>
|
|
364
|
+
{headerBackground != null ? (
|
|
365
|
+
/**
|
|
366
|
+
* To show a custom header background, we render it at the top of the screen below the header
|
|
367
|
+
* The header also needs to be positioned absolutely (with `translucent` style)
|
|
368
|
+
*/
|
|
369
|
+
<View
|
|
370
|
+
style={[
|
|
371
|
+
styles.background,
|
|
372
|
+
headerTransparent ? styles.translucent : null,
|
|
373
|
+
{ height: headerHeight },
|
|
374
|
+
]}
|
|
375
|
+
>
|
|
376
|
+
{headerBackground()}
|
|
377
|
+
</View>
|
|
378
|
+
) : null}
|
|
379
|
+
{header != null && headerShown !== false ? (
|
|
380
|
+
<View
|
|
381
|
+
onLayout={(e) => {
|
|
382
|
+
const headerHeight = e.nativeEvent.layout.height;
|
|
383
|
+
|
|
384
|
+
animatedHeaderHeight.setValue(headerHeight);
|
|
385
|
+
setHeaderHeight(headerHeight);
|
|
386
|
+
}}
|
|
387
|
+
style={[
|
|
388
|
+
styles.header,
|
|
389
|
+
headerTransparent ? styles.absolute : null,
|
|
390
|
+
]}
|
|
478
391
|
>
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
392
|
+
{header({
|
|
393
|
+
back: headerBack,
|
|
394
|
+
options,
|
|
395
|
+
route,
|
|
396
|
+
navigation,
|
|
397
|
+
})}
|
|
398
|
+
</View>
|
|
399
|
+
) : null}
|
|
400
|
+
<HeaderShownContext.Provider
|
|
401
|
+
value={isParentHeaderShown || headerShown !== false}
|
|
402
|
+
>
|
|
403
|
+
<HeaderBackContext.Provider value={headerBack}>
|
|
404
|
+
{render()}
|
|
405
|
+
</HeaderBackContext.Provider>
|
|
406
|
+
</HeaderShownContext.Provider>
|
|
407
|
+
</HeaderHeightContext.Provider>
|
|
408
|
+
</AnimatedHeaderHeightContext.Provider>
|
|
409
|
+
</ScreenStackItem>
|
|
410
|
+
</NavigationProvider>
|
|
488
411
|
);
|
|
489
412
|
};
|
|
490
413
|
|
|
@@ -3,10 +3,12 @@ import {
|
|
|
3
3
|
Header,
|
|
4
4
|
HeaderBackButton,
|
|
5
5
|
HeaderBackContext,
|
|
6
|
-
SafeAreaProviderCompat,
|
|
7
|
-
Screen,
|
|
8
6
|
useHeaderHeight,
|
|
9
7
|
} from '@react-navigation/elements';
|
|
8
|
+
import {
|
|
9
|
+
SafeAreaProviderCompat,
|
|
10
|
+
Screen,
|
|
11
|
+
} from '@react-navigation/elements/internal';
|
|
10
12
|
import {
|
|
11
13
|
type ParamListBase,
|
|
12
14
|
type RouteProp,
|
|
@@ -81,7 +83,6 @@ export function NativeStackView({ state, descriptors, describe }: Props) {
|
|
|
81
83
|
header,
|
|
82
84
|
headerShown,
|
|
83
85
|
headerBackIcon,
|
|
84
|
-
headerBackImageSource,
|
|
85
86
|
headerLeft,
|
|
86
87
|
headerTransparent,
|
|
87
88
|
headerBackTitle,
|
|
@@ -131,14 +132,10 @@ export function NativeStackView({ state, descriptors, describe }: Props) {
|
|
|
131
132
|
label={headerBackTitle ?? label}
|
|
132
133
|
tintColor={tintColor}
|
|
133
134
|
backImage={
|
|
134
|
-
headerBackIcon !== undefined
|
|
135
|
-
headerBackImageSource !== undefined
|
|
135
|
+
headerBackIcon !== undefined
|
|
136
136
|
? () => (
|
|
137
137
|
<Image
|
|
138
|
-
source={
|
|
139
|
-
headerBackIcon?.source ??
|
|
140
|
-
headerBackImageSource
|
|
141
|
-
}
|
|
138
|
+
source={headerBackIcon.source}
|
|
142
139
|
resizeMode="contain"
|
|
143
140
|
tintColor={tintColor}
|
|
144
141
|
style={styles.backImage}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { getHeaderTitle, HeaderTitle } from '@react-navigation/elements';
|
|
2
|
+
import { Color } from '@react-navigation/elements/internal';
|
|
2
3
|
import {
|
|
3
4
|
type Route,
|
|
4
5
|
type Theme,
|
|
5
6
|
useLocale,
|
|
6
7
|
useTheme,
|
|
7
8
|
} from '@react-navigation/native';
|
|
8
|
-
import color from 'color';
|
|
9
9
|
import { Platform, StyleSheet, type TextStyle, View } from 'react-native';
|
|
10
10
|
import {
|
|
11
11
|
type HeaderBarButtonItem,
|
|
@@ -27,7 +27,6 @@ import type {
|
|
|
27
27
|
NativeStackHeaderItemMenuSubmenu,
|
|
28
28
|
NativeStackNavigationOptions,
|
|
29
29
|
} from '../types';
|
|
30
|
-
import { processFonts } from './FontProcessor';
|
|
31
30
|
|
|
32
31
|
type Props = NativeStackNavigationOptions & {
|
|
33
32
|
headerTopInsetEnabled: boolean;
|
|
@@ -110,7 +109,7 @@ const processBarButtonItems = (
|
|
|
110
109
|
if (badge) {
|
|
111
110
|
const badgeBackgroundColor =
|
|
112
111
|
badge.style?.backgroundColor ?? colors.notification;
|
|
113
|
-
const badgeTextColor =
|
|
112
|
+
const badgeTextColor = Color(badgeBackgroundColor)?.isLight()
|
|
114
113
|
? 'black'
|
|
115
114
|
: 'white';
|
|
116
115
|
|
|
@@ -166,7 +165,6 @@ const getMenuItem = (
|
|
|
166
165
|
|
|
167
166
|
export function useHeaderConfigProps({
|
|
168
167
|
headerBackIcon,
|
|
169
|
-
headerBackImageSource,
|
|
170
168
|
headerBackButtonDisplayMode,
|
|
171
169
|
headerBackButtonMenuEnabled,
|
|
172
170
|
headerBackTitle,
|
|
@@ -174,8 +172,7 @@ export function useHeaderConfigProps({
|
|
|
174
172
|
headerBackVisible,
|
|
175
173
|
headerShadowVisible,
|
|
176
174
|
headerLargeStyle,
|
|
177
|
-
|
|
178
|
-
headerLargeTitleEnabled = headerLargeTitleDeprecated,
|
|
175
|
+
headerLargeTitleEnabled,
|
|
179
176
|
headerLargeTitleShadowVisible,
|
|
180
177
|
headerLargeTitleStyle,
|
|
181
178
|
headerBackground,
|
|
@@ -217,17 +214,11 @@ export function useHeaderConfigProps({
|
|
|
217
214
|
const headerStyleFlattened = StyleSheet.flatten(headerStyle) || {};
|
|
218
215
|
const headerLargeStyleFlattened = StyleSheet.flatten(headerLargeStyle) || {};
|
|
219
216
|
|
|
220
|
-
const [backTitleFontFamily, largeTitleFontFamily, titleFontFamily] =
|
|
221
|
-
processFonts([
|
|
222
|
-
headerBackTitleStyleFlattened.fontFamily,
|
|
223
|
-
headerLargeTitleStyleFlattened.fontFamily,
|
|
224
|
-
headerTitleStyleFlattened.fontFamily,
|
|
225
|
-
]);
|
|
226
|
-
|
|
227
217
|
const backTitleFontSize =
|
|
228
218
|
'fontSize' in headerBackTitleStyleFlattened
|
|
229
219
|
? headerBackTitleStyleFlattened.fontSize
|
|
230
220
|
: undefined;
|
|
221
|
+
const backTitleFontFamily = headerBackTitleStyleFlattened.fontFamily;
|
|
231
222
|
|
|
232
223
|
const titleText = getHeaderTitle({ title, headerTitle }, route.name);
|
|
233
224
|
const titleColor =
|
|
@@ -239,6 +230,7 @@ export function useHeaderConfigProps({
|
|
|
239
230
|
? headerTitleStyleFlattened.fontSize
|
|
240
231
|
: undefined;
|
|
241
232
|
const titleFontWeight = headerTitleStyleFlattened.fontWeight;
|
|
233
|
+
const titleFontFamily = headerTitleStyleFlattened.fontFamily;
|
|
242
234
|
|
|
243
235
|
const largeTitleBackgroundColor = headerLargeStyleFlattened.backgroundColor;
|
|
244
236
|
const largeTitleColor =
|
|
@@ -250,6 +242,7 @@ export function useHeaderConfigProps({
|
|
|
250
242
|
? headerLargeTitleStyleFlattened.fontSize
|
|
251
243
|
: undefined;
|
|
252
244
|
const largeTitleFontWeight = headerLargeTitleStyleFlattened.fontWeight;
|
|
245
|
+
const largeTitleFontFamily = headerLargeTitleStyleFlattened.fontFamily;
|
|
253
246
|
|
|
254
247
|
const headerTitleStyleSupported: TextStyle = { color: titleColor };
|
|
255
248
|
|
|
@@ -297,14 +290,8 @@ export function useHeaderConfigProps({
|
|
|
297
290
|
})
|
|
298
291
|
: null;
|
|
299
292
|
|
|
300
|
-
const supportsHeaderSearchBar =
|
|
301
|
-
typeof isSearchBarAvailableForCurrentPlatform === 'boolean'
|
|
302
|
-
? isSearchBarAvailableForCurrentPlatform
|
|
303
|
-
: // Fallback for older versions of react-native-screens
|
|
304
|
-
Platform.OS === 'ios' && SearchBar != null;
|
|
305
|
-
|
|
306
293
|
const hasHeaderSearchBar =
|
|
307
|
-
|
|
294
|
+
isSearchBarAvailableForCurrentPlatform && headerSearchBarOptions != null;
|
|
308
295
|
|
|
309
296
|
/**
|
|
310
297
|
* We need to set this in if:
|
|
@@ -426,10 +413,8 @@ export function useHeaderConfigProps({
|
|
|
426
413
|
) : null}
|
|
427
414
|
</>
|
|
428
415
|
)}
|
|
429
|
-
{headerBackIcon !== undefined
|
|
430
|
-
<ScreenStackHeaderBackButtonImage
|
|
431
|
-
source={headerBackIcon?.source ?? headerBackImageSource}
|
|
432
|
-
/>
|
|
416
|
+
{headerBackIcon !== undefined ? (
|
|
417
|
+
<ScreenStackHeaderBackButtonImage source={headerBackIcon.source} />
|
|
433
418
|
) : null}
|
|
434
419
|
{Platform.OS === 'ios' && rightItems ? (
|
|
435
420
|
rightItems.map((item, index) => {
|
|
@@ -454,7 +439,10 @@ export function useHeaderConfigProps({
|
|
|
454
439
|
) : null}
|
|
455
440
|
{hasHeaderSearchBar ? (
|
|
456
441
|
<ScreenStackHeaderSearchBarView>
|
|
457
|
-
<SearchBar
|
|
442
|
+
<SearchBar
|
|
443
|
+
{...headerSearchBarOptions}
|
|
444
|
+
onChangeText={headerSearchBarOptions.onChange}
|
|
445
|
+
/>
|
|
458
446
|
</ScreenStackHeaderSearchBarView>
|
|
459
447
|
) : null}
|
|
460
448
|
</>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["processFonts","_","Error"],"sourceRoot":"../../../src","sources":["views/FontProcessor.tsx"],"mappings":";;AAAA,OAAO,SAASA,YAAYA,CAC1BC,CAAyB,EACD;EACxB,MAAM,IAAIC,KAAK,CAAC,sBAAsB,CAAC;AACzC","ignoreList":[]}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
// @ts-expect-error importing private module
|
|
4
|
-
import ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
|
|
5
|
-
export function processFonts(fontFamilies) {
|
|
6
|
-
const fontFamilyProcessor = ReactNativeStyleAttributes.fontFamily?.process;
|
|
7
|
-
if (typeof fontFamilyProcessor === 'function') {
|
|
8
|
-
return fontFamilies.map(fontFamilyProcessor);
|
|
9
|
-
}
|
|
10
|
-
return fontFamilies;
|
|
11
|
-
}
|
|
12
|
-
//# sourceMappingURL=FontProcessor.native.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["ReactNativeStyleAttributes","processFonts","fontFamilies","fontFamilyProcessor","fontFamily","process","map"],"sourceRoot":"../../../src","sources":["views/FontProcessor.native.tsx"],"mappings":";;AAAA;AACA,OAAOA,0BAA0B,MAAM,mEAAmE;AAE1G,OAAO,SAASC,YAAYA,CAC1BC,YAAoC,EACZ;EACxB,MAAMC,mBAAmB,GAAGH,0BAA0B,CAACI,UAAU,EAAEC,OAAO;EAC1E,IAAI,OAAOF,mBAAmB,KAAK,UAAU,EAAE;IAC7C,OAAOD,YAAY,CAACI,GAAG,CAACH,mBAAmB,CAAC;EAC9C;EACA,OAAOD,YAAY;AACrB","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FontProcessor.d.ts","sourceRoot":"","sources":["../../../../src/views/FontProcessor.tsx"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,CAC1B,CAAC,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,GACxB,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAExB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FontProcessor.native.d.ts","sourceRoot":"","sources":["../../../../src/views/FontProcessor.native.tsx"],"names":[],"mappings":"AAGA,wBAAgB,YAAY,CAC1B,YAAY,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,GACnC,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAMxB"}
|