@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.
Files changed (37) hide show
  1. package/lib/module/index.js +1 -1
  2. package/lib/module/index.js.map +1 -1
  3. package/lib/module/navigators/createNativeStackNavigator.js +7 -6
  4. package/lib/module/navigators/createNativeStackNavigator.js.map +1 -1
  5. package/lib/module/views/NativeStackView.js +4 -4
  6. package/lib/module/views/NativeStackView.js.map +1 -1
  7. package/lib/module/views/NativeStackView.native.js +123 -172
  8. package/lib/module/views/NativeStackView.native.js.map +1 -1
  9. package/lib/module/views/useHeaderConfigProps.js +11 -14
  10. package/lib/module/views/useHeaderConfigProps.js.map +1 -1
  11. package/lib/typescript/src/index.d.ts +1 -1
  12. package/lib/typescript/src/index.d.ts.map +1 -1
  13. package/lib/typescript/src/navigators/createNativeStackNavigator.d.ts +10 -6
  14. package/lib/typescript/src/navigators/createNativeStackNavigator.d.ts.map +1 -1
  15. package/lib/typescript/src/types.d.ts +16 -83
  16. package/lib/typescript/src/types.d.ts.map +1 -1
  17. package/lib/typescript/src/views/NativeStackView.d.ts.map +1 -1
  18. package/lib/typescript/src/views/NativeStackView.native.d.ts.map +1 -1
  19. package/lib/typescript/src/views/useHeaderConfigProps.d.ts +1 -1
  20. package/lib/typescript/src/views/useHeaderConfigProps.d.ts.map +1 -1
  21. package/package.json +11 -12
  22. package/src/index.tsx +4 -1
  23. package/src/navigators/createNativeStackNavigator.tsx +48 -25
  24. package/src/types.tsx +16 -88
  25. package/src/views/NativeStackView.native.tsx +138 -215
  26. package/src/views/NativeStackView.tsx +6 -9
  27. package/src/views/useHeaderConfigProps.tsx +13 -25
  28. package/lib/module/views/FontProcessor.js +0 -6
  29. package/lib/module/views/FontProcessor.js.map +0 -1
  30. package/lib/module/views/FontProcessor.native.js +0 -12
  31. package/lib/module/views/FontProcessor.native.js.map +0 -1
  32. package/lib/typescript/src/views/FontProcessor.d.ts +0 -2
  33. package/lib/typescript/src/views/FontProcessor.d.ts.map +0 -1
  34. package/lib/typescript/src/views/FontProcessor.native.d.ts +0 -2
  35. package/lib/typescript/src/views/FontProcessor.native.d.ts.map +0 -1
  36. package/src/views/FontProcessor.native.tsx +0 -12
  37. 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
- NavigationContext,
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 = presentation === 'card' ? 'horizontal' : 'vertical',
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
- if (gestureDirection === 'vertical' && Platform.OS === 'ios') {
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(frame, isModal, topInset),
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 usesNewAndroidHeaderHeightImplementation =
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: rawAnimatedHeaderHeight,
239
+ headerHeight: animatedHeaderHeight,
310
240
  },
311
241
  },
312
242
  ],
@@ -355,136 +285,129 @@ const SceneView = ({
355
285
  );
356
286
 
357
287
  return (
358
- <NavigationContext.Provider value={navigation}>
359
- <NavigationRouteContext.Provider value={route}>
360
- <ScreenStackItem
361
- key={route.key}
362
- screenId={route.key}
363
- activityState={isPreloaded ? 0 : 2}
364
- style={StyleSheet.absoluteFill}
365
- aria-hidden={!focused}
366
- customAnimationOnSwipe={animationMatchesGesture}
367
- fullScreenSwipeEnabled={fullScreenGestureEnabled}
368
- fullScreenSwipeShadowEnabled={fullScreenGestureShadowEnabled}
369
- freezeOnBlur={freezeOnBlur}
370
- gestureEnabled={
371
- Platform.OS === 'android'
372
- ? // This prop enables handling of system back gestures on Android
373
- // Since we handle them in JS side, we disable this
374
- false
375
- : gestureEnabled
376
- }
377
- homeIndicatorHidden={autoHideHomeIndicator}
378
- hideKeyboardOnSwipe={keyboardHandlingEnabled}
379
- navigationBarColor={navigationBarColor}
380
- navigationBarTranslucent={navigationBarTranslucent}
381
- navigationBarHidden={navigationBarHidden}
382
- replaceAnimation={animationTypeForReplace}
383
- stackPresentation={presentation === 'card' ? 'push' : presentation}
384
- stackAnimation={animation}
385
- screenOrientation={orientation}
386
- sheetAllowedDetents={sheetAllowedDetents}
387
- sheetLargestUndimmedDetentIndex={sheetLargestUndimmedDetentIndex}
388
- sheetGrabberVisible={sheetGrabberVisible}
389
- sheetInitialDetentIndex={sheetInitialDetentIndex}
390
- sheetCornerRadius={sheetCornerRadius}
391
- sheetElevation={sheetElevation}
392
- sheetExpandsWhenScrolledToEdge={sheetExpandsWhenScrolledToEdge}
393
- sheetShouldOverflowTopInset={sheetShouldOverflowTopInset}
394
- statusBarAnimation={statusBarAnimation}
395
- statusBarHidden={statusBarHidden}
396
- statusBarStyle={statusBarStyle}
397
- statusBarColor={statusBarBackgroundColor}
398
- statusBarTranslucent={statusBarTranslucent}
399
- swipeDirection={gestureDirectionOverride}
400
- transitionDuration={animationDuration}
401
- onWillAppear={onWillAppear}
402
- onWillDisappear={onWillDisappear}
403
- onAppear={onAppear}
404
- onDisappear={onDisappear}
405
- onDismissed={onDismissed}
406
- onGestureCancel={onGestureCancel}
407
- onSheetDetentChanged={onSheetDetentChanged}
408
- gestureResponseDistance={gestureResponseDistance}
409
- nativeBackButtonDismissalEnabled={false} // on Android
410
- onHeaderBackButtonClicked={onHeaderBackButtonClicked}
411
- preventNativeDismiss={isRemovePrevented} // on iOS
412
- scrollEdgeEffects={{
413
- bottom: scrollEdgeEffects?.bottom ?? 'automatic',
414
- top: scrollEdgeEffects?.top ?? 'automatic',
415
- left: scrollEdgeEffects?.left ?? 'automatic',
416
- right: scrollEdgeEffects?.right ?? 'automatic',
417
- }}
418
- onNativeDismissCancelled={onNativeDismissCancelled}
419
- onHeaderHeightChange={onHeaderHeightChange}
420
- contentStyle={[
421
- presentation !== 'transparentModal' &&
422
- presentation !== 'containedTransparentModal' && {
423
- backgroundColor: colors.background,
424
- },
425
- contentStyle,
426
- ]}
427
- headerConfig={headerConfig}
428
- unstable_sheetFooter={unstable_sheetFooter}
429
- // When ts-expect-error is added, it affects all the props below it
430
- // So we keep any props that need it at the end
431
- // Otherwise invalid props may not be caught by TypeScript
432
- shouldFreeze={shouldFreeze}
433
- >
434
- <AnimatedHeaderHeightContext.Provider value={animatedHeaderHeight}>
435
- <HeaderHeightContext.Provider
436
- value={
437
- headerShown !== false ? headerHeight : (parentHeaderHeight ?? 0)
438
- }
439
- >
440
- {headerBackground != null ? (
441
- /**
442
- * To show a custom header background, we render it at the top of the screen below the header
443
- * The header also needs to be positioned absolutely (with `translucent` style)
444
- */
445
- <View
446
- style={[
447
- styles.background,
448
- headerTransparent ? styles.translucent : null,
449
- { height: headerHeight },
450
- ]}
451
- >
452
- {headerBackground()}
453
- </View>
454
- ) : null}
455
- {header != null && headerShown !== false ? (
456
- <View
457
- onLayout={(e) => {
458
- const headerHeight = e.nativeEvent.layout.height;
459
-
460
- setHeaderHeight(headerHeight);
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
- <HeaderBackContext.Provider value={headerBack}>
480
- {render()}
481
- </HeaderBackContext.Provider>
482
- </HeaderShownContext.Provider>
483
- </HeaderHeightContext.Provider>
484
- </AnimatedHeaderHeightContext.Provider>
485
- </ScreenStackItem>
486
- </NavigationRouteContext.Provider>
487
- </NavigationContext.Provider>
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 = color(badgeBackgroundColor).isLight()
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
- headerLargeTitle: headerLargeTitleDeprecated,
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
- supportsHeaderSearchBar && headerSearchBarOptions != null;
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 || headerBackImageSource !== 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 {...headerSearchBarOptions} />
442
+ <SearchBar
443
+ {...headerSearchBarOptions}
444
+ onChangeText={headerSearchBarOptions.onChange}
445
+ />
458
446
  </ScreenStackHeaderSearchBarView>
459
447
  ) : null}
460
448
  </>
@@ -1,6 +0,0 @@
1
- "use strict";
2
-
3
- export function processFonts(_) {
4
- throw new Error('Not supported on Web');
5
- }
6
- //# sourceMappingURL=FontProcessor.js.map
@@ -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,2 +0,0 @@
1
- export declare function processFonts(_: (string | undefined)[]): (string | undefined)[];
2
- //# sourceMappingURL=FontProcessor.d.ts.map
@@ -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,2 +0,0 @@
1
- export declare function processFonts(fontFamilies: (string | undefined)[]): (string | undefined)[];
2
- //# sourceMappingURL=FontProcessor.native.d.ts.map
@@ -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"}