react-native-screens 3.24.0 → 3.26.0

package/src/index.native.tsx

@@ -5,7 +5,6 @@ import {
   Image,
   ImageProps,
   Platform,
-  requireNativeComponent,
   StyleProp,
   StyleSheet,
   UIManager,
@@ -137,28 +136,29 @@ const ScreensNativeModules = {
     NativeScreenNavigationContainerValue =
       NativeScreenNavigationContainerValue ||
       (Platform.OS === 'ios'
-        ? requireNativeComponent('RNSScreenNavigationContainer')
+        ? require('./fabric/ScreenNavigationContainerNativeComponent').default
         : this.NativeScreenContainer);
     return NativeScreenNavigationContainerValue;
   },
 
   get NativeScreenStack() {
     NativeScreenStack =
-      NativeScreenStack || requireNativeComponent('RNSScreenStack');
+      NativeScreenStack ||
+      require('./fabric/ScreenStackNativeComponent').default;
     return NativeScreenStack;
   },
 
   get NativeScreenStackHeaderConfig() {
     NativeScreenStackHeaderConfig =
       NativeScreenStackHeaderConfig ||
-      requireNativeComponent('RNSScreenStackHeaderConfig');
+      require('./fabric/ScreenStackHeaderConfigNativeComponent').default;
     return NativeScreenStackHeaderConfig;
   },
 
   get NativeScreenStackHeaderSubview() {
     NativeScreenStackHeaderSubview =
       NativeScreenStackHeaderSubview ||
-      requireNativeComponent('RNSScreenStackHeaderSubview');
+      require('./fabric/ScreenStackHeaderSubviewNativeComponent').default;
     return NativeScreenStackHeaderSubview;
   },
 
@@ -167,6 +167,7 @@ const ScreensNativeModules = {
       NativeSearchBar || require('./fabric/SearchBarNativeComponent').default;
     return NativeSearchBar;
   },
+
   get NativeSearchBarCommands() {
     NativeSearchBarCommands =
       NativeSearchBarCommands ||
@@ -176,7 +177,8 @@ const ScreensNativeModules = {
 
   get NativeFullWindowOverlay() {
     NativeFullWindowOverlay =
-      NativeFullWindowOverlay || requireNativeComponent('RNSFullWindowOverlay');
+      NativeFullWindowOverlay ||
+      require('./fabric/FullWindowOverlayNativeComponent').default;
     return NativeFullWindowOverlay;
   },
 };
@@ -346,8 +348,7 @@ class InnerScreen extends React.Component<ScreenProps> {
               (() => {
                 // for internal use
               })
-            }
-          >
+            }>
             {!isNativeStack ? ( // see comment of this prop in types.tsx for information why it is needed
               children
             ) : (
@@ -356,8 +357,7 @@ class InnerScreen extends React.Component<ScreenProps> {
                   progress: this.progress,
                   closing: this.closing,
                   goingForward: this.goingForward,
-                }}
-              >
+                }}>
                 {children}
               </TransitionProgressContext.Provider>
             )}
@@ -408,8 +408,7 @@ function FullWindowOverlay(props: { children: ReactNode }) {
   }
   return (
     <ScreensNativeModules.NativeFullWindowOverlay
-      style={{ position: 'absolute', width: '100%', height: '100%' }}
-    >
+      style={{ position: 'absolute', width: '100%', height: '100%' }}>
       {props.children}
     </ScreensNativeModules.NativeFullWindowOverlay>
   );
@@ -429,8 +428,7 @@ const styles = StyleSheet.create({
 const ScreenStackHeaderBackButtonImage = (props: ImageProps): JSX.Element => (
   <ScreensNativeModules.NativeScreenStackHeaderSubview
     type="back"
-    style={styles.headerSubview}
-  >
+    style={styles.headerSubview}>
     <Image resizeMode="center" fadeDuration={0} {...props} />
   </ScreensNativeModules.NativeScreenStackHeaderSubview>
 );
@@ -455,31 +453,31 @@ class SearchBar extends React.Component<SearchBarProps> {
   }
 
   blur() {
-    this._callMethodWithRef((ref) =>
+    this._callMethodWithRef(ref =>
       ScreensNativeModules.NativeSearchBarCommands.blur(ref)
     );
   }
 
   focus() {
-    this._callMethodWithRef((ref) =>
+    this._callMethodWithRef(ref =>
       ScreensNativeModules.NativeSearchBarCommands.focus(ref)
     );
   }
 
   toggleCancelButton(flag: boolean) {
-    this._callMethodWithRef((ref) =>
+    this._callMethodWithRef(ref =>
       ScreensNativeModules.NativeSearchBarCommands.toggleCancelButton(ref, flag)
     );
   }
 
   clearText() {
-    this._callMethodWithRef((ref) =>
+    this._callMethodWithRef(ref =>
       ScreensNativeModules.NativeSearchBarCommands.clearText(ref)
     );
   }
 
   setText(text: string) {
-    this._callMethodWithRef((ref) =>
+    this._callMethodWithRef(ref =>
       ScreensNativeModules.NativeSearchBarCommands.setText(ref, text)
     );
   }

package/src/native-stack/index.tsx

@@ -14,6 +14,9 @@ export { default as NativeStackView } from './views/NativeStackView';
 export { default as useHeaderHeight } from './utils/useHeaderHeight';
 export { default as HeaderHeightContext } from './utils/HeaderHeightContext';
 
+export { default as useAnimatedHeaderHeight } from './utils/useAnimatedHeaderHeight';
+export { default as AnimatedHeaderHeightContext } from './utils/AnimatedHeaderHeightContext';
+
 /**
  * Types
  */

package/src/native-stack/types.tsx

@@ -10,7 +10,12 @@ import {
   RouteProp,
 } from '@react-navigation/native';
 import * as React from 'react';
-import { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+import {
+  ImageSourcePropType,
+  StyleProp,
+  ViewStyle,
+  ColorValue,
+} from 'react-native';
 import {
   ScreenProps,
   ScreenStackHeaderConfigProps,
@@ -41,6 +46,10 @@ export type NativeStackNavigationEventMap = {
    * Event which fires when a swipe back is canceled on iOS.
    */
   gestureCancel: { data: undefined };
+  /**
+   * Event which fires when a header height gets changed.
+   */
+  headerHeightChange: { data: { headerHeight: number } };
 };
 
 export type NativeStackNavigationProp<
@@ -157,7 +166,7 @@ export type NativeStackNavigationOptions = {
   /**
    * Function which returns a React Element to display in the center of the header.
    */
-  headerCenter?: (props: { tintColor?: string }) => React.ReactNode;
+  headerCenter?: (props: { tintColor?: ColorValue }) => React.ReactNode;
   /**
    * Boolean indicating whether to hide the back button in header.
    */
@@ -173,7 +182,7 @@ export type NativeStackNavigationOptions = {
    * @platform ios
    */
   headerLargeStyle?: {
-    backgroundColor?: string;
+    backgroundColor?: ColorValue;
   };
   /**
    * Boolean to set native property to prefer large title header (like in iOS setting).
@@ -202,16 +211,16 @@ export type NativeStackNavigationOptions = {
     fontFamily?: string;
     fontSize?: number;
     fontWeight?: string;
-    color?: string;
+    color?: ColorValue;
   };
   /**
    * Function which returns a React Element to display on the left side of the header.
    */
-  headerLeft?: (props: { tintColor?: string }) => React.ReactNode;
+  headerLeft?: (props: { tintColor?: ColorValue }) => React.ReactNode;
   /**
    * Function which returns a React Element to display on the right side of the header.
    */
-  headerRight?: (props: { tintColor?: string }) => React.ReactNode;
+  headerRight?: (props: { tintColor?: ColorValue }) => React.ReactNode;
   /**
    * Whether to show the header.
    */
@@ -222,13 +231,13 @@ export type NativeStackNavigationOptions = {
    * - blurEffect
    */
   headerStyle?: {
-    backgroundColor?: string;
+    backgroundColor?: ColorValue;
     blurEffect?: ScreenStackHeaderConfigProps['blurEffect'];
   };
   /**
    * Tint color for the header. Changes the color of back button and title.
    */
-  headerTintColor?: string;
+  headerTintColor?: ColorValue;
   /**
    * String to display in the header as title. Defaults to scene `title`.
    */
@@ -244,7 +253,7 @@ export type NativeStackNavigationOptions = {
     fontFamily?: string;
     fontSize?: number;
     fontWeight?: string;
-    color?: string;
+    color?: ColorValue;
   };
   /**
    * A flag to that lets you opt out of insetting the header. You may want to
@@ -284,7 +293,7 @@ export type NativeStackNavigationOptions = {
    *
    * @platform android
    */
-  navigationBarColor?: string;
+  navigationBarColor?: ColorValue;
   /**
    * Sets the visibility of the navigation bar. Defaults to `false`.
    *
@@ -341,7 +350,7 @@ export type NativeStackNavigationOptions = {
    * The corner radius that the sheet will try to render with.
    * Works only when `stackPresentation` is set to `formSheet`.
    *
-   * If set to non-negative value it will try to render sheet with provided radius, else ti will apply system default.
+   * If set to non-negative value it will try to render sheet with provided radius, else it will apply system default.
    *
    * If left unset system default is used.
    *
@@ -406,7 +415,7 @@ export type NativeStackNavigationOptions = {
    *
    * @platform android
    */
-  statusBarColor?: string;
+  statusBarColor?: ColorValue;
   /**
    * Whether the status bar should be hidden on this screen. Requires enabling (or deleting) `View controller-based status bar appearance` in your Info.plist file on iOS. Defaults to `false`.
    */

package/src/native-stack/utils/AnimatedHeaderHeightContext.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Animated } from 'react-native';
+
+const AnimatedHeaderHeightContext = React.createContext<
+  Animated.Value | undefined
+>(undefined);
+
+export default AnimatedHeaderHeightContext;

package/src/native-stack/utils/SafeAreaProviderCompat.tsx

@@ -36,7 +36,7 @@ const initialMetrics =
 export default function SafeAreaProviderCompat({ children, style }: Props) {
   return (
     <SafeAreaInsetsContext.Consumer>
-      {(insets) => {
+      {insets => {
         if (insets) {
           // If we already have insets, don't wrap the stack in another safe area provider
           // This avoids an issue with updates at the cost of potentially incorrect values

package/src/native-stack/utils/getStatusBarHeight.tsx

@@ -0,0 +1,22 @@
+import { Rect } from 'react-native-safe-area-context';
+import { Platform } from 'react-native';
+
+export default function getStatusBarHeight(
+  topInset: number,
+  dimensions: Rect,
+  isStatusBarTranslucent: boolean
+) {
+  if (Platform.OS === 'ios') {
+    // It looks like some iOS devices don't have strictly set status bar height to 44.
+    // Thus, if the top inset is higher than 50, then the device should have a dynamic island.
+    // On models with Dynamic Island the status bar height is smaller than the safe area top inset by 5 pixels.
+    // See https://developer.apple.com/forums/thread/662466 for more details about status bar height.
+    const hasDynamicIsland = topInset > 50;
+    return hasDynamicIsland ? topInset - 5 : topInset;
+  } else if (Platform.OS === 'android') {
+    // On Android we should also rely on frame's y-axis position, as topInset is 0 on visible status bar.
+    return isStatusBarTranslucent ? topInset : dimensions.y;
+  }
+
+  return topInset;
+}

package/src/native-stack/utils/useAnimatedHeaderHeight.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import AnimatedHeaderHeightContext from './AnimatedHeaderHeightContext';
+
+export default function useAnimatedHeaderHeight() {
+  const animatedValue = React.useContext(AnimatedHeaderHeightContext);
+
+  if (animatedValue === undefined) {
+    throw new Error(
+      "Couldn't find the header height. Are you inside a screen in a navigator with a header?"
+    );
+  }
+
+  return animatedValue;
+}

package/src/native-stack/views/HeaderConfig.tsx

@@ -140,8 +140,7 @@ export default function HeaderConfig({
       topInsetEnabled={headerTopInsetEnabled}
       translucent={headerTranslucent === true}
       onAttached={handleAttached}
-      onDetached={handleDetached}
-    >
+      onDetached={handleDetached}>
       {headerRight !== undefined ? (
         <ScreenStackHeaderRightView>
           {headerRight({ tintColor })}

package/src/native-stack/views/NativeStackView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Platform, StyleSheet, View, ViewProps } from 'react-native';
+import { Animated, Platform, StyleSheet, View, ViewProps } from 'react-native';
 // @ts-ignore Getting private component
 // eslint-disable-next-line import/no-named-as-default, import/default, import/no-named-as-default-member, import/namespace
 import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
@@ -22,7 +22,6 @@ import {
   useSafeAreaFrame,
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
-
 import {
   NativeStackDescriptorMap,
   NativeStackNavigationHelpers,
@@ -31,7 +30,9 @@ import {
 import HeaderConfig from './HeaderConfig';
 import SafeAreaProviderCompat from '../utils/SafeAreaProviderCompat';
 import getDefaultHeaderHeight from '../utils/getDefaultHeaderHeight';
+import getStatusBarHeight from '../utils/getStatusBarHeight';
 import HeaderHeightContext from '../utils/HeaderHeightContext';
+import AnimatedHeaderHeightContext from '../utils/AnimatedHeaderHeightContext';
 
 const isAndroid = Platform.OS === 'android';
 
@@ -103,32 +104,37 @@ const MaybeNestedStack = ({
       // This view must *not* be flattened.
       // See https://github.com/software-mansion/react-native-screens/pull/1825
       // for detailed explanation.
-      collapsable={false}
-    >
+      collapsable={false}>
       {children}
     </Container>
   );
 
   const dimensions = useSafeAreaFrame();
   const topInset = useSafeAreaInsets().top;
-  let statusBarHeight = topInset;
-  const hasDynamicIsland = Platform.OS === 'ios' && topInset === 59;
-  const isLargeHeader = options.headerLargeTitle ?? false;
-  if (hasDynamicIsland) {
-    // On models with Dynamic Island the status bar height is smaller than the safe area top inset.
-    statusBarHeight = 54;
-  }
+  const isStatusBarTranslucent = options.statusBarTranslucent ?? false;
+  const statusBarHeight = getStatusBarHeight(
+    topInset,
+    dimensions,
+    isStatusBarTranslucent
+  );
+
+  const hasLargeHeader = options.headerLargeTitle ?? false;
+
   const headerHeight = getDefaultHeaderHeight(
     dimensions,
     statusBarHeight,
     stackPresentation,
-    isLargeHeader
+    hasLargeHeader
   );
 
   if (isHeaderInModal) {
     return (
       <ScreenStack style={styles.container}>
-        <Screen enabled isNativeStack style={StyleSheet.absoluteFill}>
+        <Screen
+          enabled
+          isNativeStack
+          hasLargeHeader={hasLargeHeader}
+          style={StyleSheet.absoluteFill}>
           <HeaderHeightContext.Provider value={headerHeight}>
             <HeaderConfig {...options} route={route} />
             {content}
@@ -217,27 +223,42 @@ const RouteView = ({
     stackPresentation = 'push';
   }
 
-  const isHeaderInPush = isAndroid
-    ? headerShown
-    : stackPresentation === 'push' && headerShown !== false;
-
   const dimensions = useSafeAreaFrame();
   const topInset = useSafeAreaInsets().top;
-  let statusBarHeight = topInset;
-  const hasDynamicIsland = Platform.OS === 'ios' && topInset === 59;
-  const isLargeHeader = options.headerLargeTitle ?? false;
+  const isStatusBarTranslucent = options.statusBarTranslucent ?? false;
+  const statusBarHeight = getStatusBarHeight(
+    topInset,
+    dimensions,
+    isStatusBarTranslucent
+  );
 
-  if (hasDynamicIsland) {
-    // On models with Dynamic Island the status bar height is smaller than the safe area top inset.
-    statusBarHeight = 54;
-  }
-  const headerHeight = getDefaultHeaderHeight(
+  const hasLargeHeader = options.headerLargeTitle ?? false;
+
+  const defaultHeaderHeight = getDefaultHeaderHeight(
     dimensions,
     statusBarHeight,
     stackPresentation,
-    isLargeHeader
+    hasLargeHeader
   );
+
   const parentHeaderHeight = React.useContext(HeaderHeightContext);
+  const isHeaderInPush = isAndroid
+    ? headerShown
+    : stackPresentation === 'push' && headerShown !== false;
+
+  const staticHeaderHeight =
+    isHeaderInPush !== false ? defaultHeaderHeight : parentHeaderHeight ?? 0;
+
+  // We need to ensure the first retrieved header height will be cached and set in animatedHeaderHeight.
+  // We're caching the header height here, as on iOS native side events are not always coming to the JS on first notify.
+  // TODO: Check why first event is not being received once it is cached on the native side.
+  const cachedAnimatedHeaderHeight = React.useRef(defaultHeaderHeight);
+  const animatedHeaderHeight = React.useRef(
+    new Animated.Value(staticHeaderHeight, {
+      useNativeDriver: true,
+    })
+  ).current;
+
   const Screen = React.useContext(ScreenContext);
 
   const { dark } = useTheme();
@@ -247,6 +268,7 @@ const RouteView = ({
       key={route.key}
       enabled
       isNativeStack
+      hasLargeHeader={hasLargeHeader}
       style={StyleSheet.absoluteFill}
       sheetAllowedDetents={sheetAllowedDetents}
       sheetLargestUndimmedDetent={sheetLargestUndimmedDetent}
@@ -313,7 +335,19 @@ const RouteView = ({
           target: route.key,
         });
       }}
-      onDismissed={(e) => {
+      onHeaderHeightChange={e => {
+        const headerHeight = e.nativeEvent.headerHeight;
+
+        if (cachedAnimatedHeaderHeight.current !== headerHeight) {
+          // Currently, we're setting value by Animated#setValue, because we want to cache animated value.
+          // Also, in React Native 0.72 there was a bug on Fabric causing a large delay between the screen transition,
+          // which should not occur.
+          // TODO: Check if it's possible to replace animated#setValue to Animated#event.
+          animatedHeaderHeight.setValue(headerHeight);
+          cachedAnimatedHeaderHeight.current = headerHeight;
+        }
+      }}
+      onDismissed={e => {
         navigation.emit({
           type: 'dismiss',
           target: route.key,
@@ -333,25 +367,25 @@ const RouteView = ({
           type: 'gestureCancel',
           target: route.key,
         });
-      }}
-    >
-      <HeaderHeightContext.Provider
-        value={
-          isHeaderInPush !== false ? headerHeight : parentHeaderHeight ?? 0
-        }
-      >
-        <MaybeNestedStack
-          options={options}
-          route={route}
-          stackPresentation={stackPresentation}
-        >
-          {renderScene()}
-        </MaybeNestedStack>
-        {/* HeaderConfig must not be first child of a Screen. 
+      }}>
+      <AnimatedHeaderHeightContext.Provider value={animatedHeaderHeight}>
+        <HeaderHeightContext.Provider value={staticHeaderHeight}>
+          <MaybeNestedStack
+            options={options}
+            route={route}
+            stackPresentation={stackPresentation}>
+            {renderScene()}
+          </MaybeNestedStack>
+          {/* HeaderConfig must not be first child of a Screen.
            See https://github.com/software-mansion/react-native-screens/pull/1825
            for detailed explanation */}
-        <HeaderConfig {...options} route={route} headerShown={isHeaderInPush} />
-      </HeaderHeightContext.Provider>
+          <HeaderConfig
+            {...options}
+            route={route}
+            headerShown={isHeaderInPush}
+          />
+        </HeaderHeightContext.Provider>
+      </AnimatedHeaderHeightContext.Provider>
     </Screen>
   );
 };

package/src/reanimated/ReanimatedHeaderHeightContext.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+// @ts-ignore file to be used only if `react-native-reanimated` available in the project
+import Animated from 'react-native-reanimated';
+
+export default React.createContext<Animated.SharedValue<number> | undefined>(
+  undefined
+);

package/src/reanimated/ReanimatedNativeStackScreen.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Platform } from 'react-native';
 import {
+  HeaderHeightChangeEventType,
   InnerScreen,
   ScreenProps,
   TransitionProgressEventType,
@@ -9,6 +10,13 @@ import {
 // @ts-ignore file to be used only if `react-native-reanimated` available in the project
 import Animated, { useEvent, useSharedValue } from 'react-native-reanimated';
 import ReanimatedTransitionProgressContext from './ReanimatedTransitionProgressContext';
+import {
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
+import getDefaultHeaderHeight from '../native-stack/utils/getDefaultHeaderHeight';
+import getStatusBarHeight from '../native-stack/utils/getStatusBarHeight';
+import ReanimatedHeaderHeightContext from './ReanimatedHeaderHeightContext';
 
 const AnimatedScreen = Animated.createAnimatedComponent(
   InnerScreen as unknown as React.ComponentClass
@@ -24,6 +32,28 @@ const ReanimatedNativeStackScreen = React.forwardRef<
   ScreenProps
 >((props, ref) => {
   const { children, ...rest } = props;
+  const { stackPresentation = 'push', hasLargeHeader } = rest;
+
+  const dimensions = useSafeAreaFrame();
+  const topInset = useSafeAreaInsets().top;
+  const isStatusBarTranslucent = rest.statusBarTranslucent ?? false;
+  const statusBarHeight = getStatusBarHeight(
+    topInset,
+    dimensions,
+    isStatusBarTranslucent
+  );
+
+  // Default header height, normally used in `useHeaderHeight` hook.
+  // Here, it is used for returning a default value for shared value.
+  const defaultHeaderHeight = getDefaultHeaderHeight(
+    dimensions,
+    statusBarHeight,
+    stackPresentation,
+    hasLargeHeader
+  );
+
+  const cachedHeaderHeight = React.useRef(defaultHeaderHeight);
+  const headerHeight = useSharedValue(defaultHeaderHeight);
 
   const progress = useSharedValue(0);
   const closing = useSharedValue(0);
@@ -51,17 +81,34 @@ const ReanimatedNativeStackScreen = React.forwardRef<
             : 'topTransitionProgress',
         ]
       )}
-      {...rest}
-    >
-      <ReanimatedTransitionProgressContext.Provider
-        value={{
-          progress: progress,
-          closing: closing,
-          goingForward: goingForward,
-        }}
-      >
-        {children}
-      </ReanimatedTransitionProgressContext.Provider>
+      onHeaderHeightChangeReanimated={useEvent(
+        (event: HeaderHeightChangeEventType) => {
+          'worklet';
+          if (event.headerHeight !== cachedHeaderHeight.current) {
+            headerHeight.value = event.headerHeight;
+            cachedHeaderHeight.current = event.headerHeight;
+          }
+        },
+        [
+          // @ts-ignore wrong type
+          Platform.OS === 'android'
+            ? 'onHeaderHeightChange'
+            : ENABLE_FABRIC
+            ? 'onHeaderHeightChange'
+            : 'topHeaderHeightChange',
+        ]
+      )}
+      {...rest}>
+      <ReanimatedHeaderHeightContext.Provider value={headerHeight}>
+        <ReanimatedTransitionProgressContext.Provider
+          value={{
+            progress,
+            closing,
+            goingForward,
+          }}>
+          {children}
+        </ReanimatedTransitionProgressContext.Provider>
+      </ReanimatedHeaderHeightContext.Provider>
     </AnimatedScreen>
   );
 });

package/src/reanimated/index.tsx

@@ -1,2 +1,3 @@
 export { default as ReanimatedScreenProvider } from './ReanimatedScreenProvider';
 export { default as useReanimatedTransitionProgress } from './useReanimatedTransitionProgress';
+export { default as useReanimatedHeaderHeight } from './useReanimatedHeaderHeight';

package/src/reanimated/useReanimatedHeaderHeight.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import ReanimatedHeaderHeightContext from './ReanimatedHeaderHeightContext';
+
+export default function useReanimatedHeaderHeight() {
+  const height = React.useContext(ReanimatedHeaderHeightContext);
+
+  if (height === undefined) {
+    throw new Error(
+      "Couldn't find the header height using Reanimated. Are you inside a screen in a navigator with a header and your NavigationContainer is wrapped in ReanimatedScreenProvider?"
+    );
+  }
+
+  return height;
+}