react-native-screens 3.18.1 → 3.19.0

package/src/index.native.tsx

@@ -1,14 +1,16 @@
-import React from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
 import {
   Animated,
   Image,
   ImageProps,
   Platform,
   requireNativeComponent,
+  StyleProp,
   StyleSheet,
   UIManager,
   View,
   ViewProps,
+  ViewStyle,
 } from 'react-native';
 import { Freeze } from 'react-freeze';
 import { version } from 'react-native/package.json';
@@ -79,12 +81,16 @@ let NativeScreenContainerValue: React.ComponentType<ScreenContainerProps>;
 let NativeScreenNavigationContainerValue: React.ComponentType<ScreenContainerProps>;
 let NativeScreenStack: React.ComponentType<ScreenStackProps>;
 let NativeScreenStackHeaderConfig: React.ComponentType<ScreenStackHeaderConfigProps>;
-let NativeScreenStackHeaderSubview: React.ComponentType<React.PropsWithChildren<
-  ViewProps & { type?: HeaderSubviewTypes }
->>;
+let NativeScreenStackHeaderSubview: React.ComponentType<
+  React.PropsWithChildren<ViewProps & { type?: HeaderSubviewTypes }>
+>;
 let AnimatedNativeScreen: React.ComponentType<ScreenProps>;
 let NativeSearchBar: React.ComponentType<SearchBarProps>;
-let NativeFullWindowOverlay: React.ComponentType<View>;
+let NativeFullWindowOverlay: React.ComponentType<
+  PropsWithChildren<{
+    style: StyleProp<ViewStyle>;
+  }>
+>;
 
 const ScreensNativeModules = {
   get NativeScreen() {
@@ -284,7 +290,8 @@ class InnerScreen extends React.Component<ScreenProps> {
                     ],
                     { useNativeDriver: true }
                   )
-            }>
+            }
+          >
             {!isNativeStack ? ( // see comment of this prop in types.tsx for information why it is needed
               children
             ) : (
@@ -293,7 +300,8 @@ class InnerScreen extends React.Component<ScreenProps> {
                   progress: this.progress,
                   closing: this.closing,
                   goingForward: this.goingForward,
-                }}>
+                }}
+              >
                 {children}
               </TransitionProgressContext.Provider>
             )}
@@ -337,6 +345,20 @@ function ScreenContainer(props: ScreenContainerProps) {
   return <View {...rest} />;
 }
 
+function FullWindowOverlay(props: { children: ReactNode }) {
+  if (Platform.OS !== 'ios') {
+    console.warn('Importing FullWindowOverlay is only valid on iOS devices.');
+    return <View {...props} />;
+  }
+  return (
+    <ScreensNativeModules.NativeFullWindowOverlay
+      style={{ position: 'absolute', width: '100%', height: '100%' }}
+    >
+      {props.children}
+    </ScreensNativeModules.NativeFullWindowOverlay>
+  );
+}
+
 const styles = StyleSheet.create({
   headerSubview: {
     position: 'absolute',
@@ -351,7 +373,8 @@ 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>
 );
@@ -431,6 +454,7 @@ module.exports = {
   ScreenContext,
   ScreenStack,
   InnerScreen,
+  FullWindowOverlay,
 
   get NativeScreen() {
     return ScreensNativeModules.NativeScreen;
@@ -460,14 +484,6 @@ module.exports = {
 
     return ScreensNativeModules.NativeSearchBar;
   },
-  get FullWindowOverlay() {
-    if (Platform.OS !== 'ios') {
-      console.warn('Importing FullWindowOverlay is only valid on iOS devices.');
-      return View;
-    }
-
-    return ScreensNativeModules.NativeFullWindowOverlay;
-  },
   // these are functions and will not be evaluated until used
   // so no need to use getters for them
   ScreenStackHeaderBackButtonImage,

package/src/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Animated, View, ViewProps, ImageProps, Image } from 'react-native';
 import {
   ScreenProps,
@@ -68,13 +68,17 @@ export const ScreenContext = React.createContext(Screen);
 
 export const ScreenContainer: React.ComponentType<ScreenContainerProps> = View;
 
-export const NativeScreenContainer: React.ComponentType<ScreenContainerProps> = View;
+export const NativeScreenContainer: React.ComponentType<ScreenContainerProps> =
+  View;
 
-export const NativeScreenNavigationContainer: React.ComponentType<ScreenContainerProps> = View;
+export const NativeScreenNavigationContainer: React.ComponentType<ScreenContainerProps> =
+  View;
 
 export const ScreenStack: React.ComponentType<ScreenStackProps> = View;
 
-export const FullWindowOverlay = View;
+export const FullWindowOverlay = View as React.ComponentType<{
+  children: ReactNode;
+}>;
 
 export const ScreenStackHeaderBackButtonImage = (
   props: ImageProps
@@ -100,13 +104,14 @@ export const ScreenStackHeaderSearchBarView = (
   props: React.PropsWithChildren<SearchBarProps>
 ): JSX.Element => <View {...props} />;
 
-export const ScreenStackHeaderConfig: React.ComponentType<ScreenStackHeaderConfigProps> = View;
+export const ScreenStackHeaderConfig: React.ComponentType<ScreenStackHeaderConfigProps> =
+  View;
 
 // @ts-expect-error: search bar props have no common props with View
 export const SearchBar: React.ComponentType<SearchBarProps> = View;
 
-export const ScreenStackHeaderSubview: React.ComponentType<React.PropsWithChildren<
-  ViewProps & { type?: HeaderSubviewTypes }
->> = View;
+export const ScreenStackHeaderSubview: React.ComponentType<
+  React.PropsWithChildren<ViewProps & { type?: HeaderSubviewTypes }>
+> = View;
 
 export const shouldUseActivityState = true;

package/src/native-stack/types.tsx

@@ -382,11 +382,10 @@ export type NativeStackNavigationOptions = {
   transitionDuration?: number;
 };
 
-export type NativeStackNavigatorProps = DefaultNavigatorOptions<
-  NativeStackNavigationOptions
-> &
-  StackRouterOptions &
-  NativeStackNavigationConfig;
+export type NativeStackNavigatorProps =
+  DefaultNavigatorOptions<NativeStackNavigationOptions> &
+    StackRouterOptions &
+    NativeStackNavigationConfig;
 
 export type NativeStackDescriptor = Descriptor<
   ParamListBase,

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

@@ -65,15 +65,12 @@ export default function HeaderConfig({
     isDisabled: !searchBar || !!searchBar.disableBackButtonOverride,
   });
 
-  const [
-    backTitleFontFamily,
-    largeTitleFontFamily,
-    titleFontFamily,
-  ] = processFonts([
-    headerBackTitleStyle.fontFamily,
-    headerLargeTitleStyle.fontFamily,
-    headerTitleStyle.fontFamily,
-  ]);
+  const [backTitleFontFamily, largeTitleFontFamily, titleFontFamily] =
+    processFonts([
+      headerBackTitleStyle.fontFamily,
+      headerLargeTitleStyle.fontFamily,
+      headerTitleStyle.fontFamily,
+    ]);
 
   // We want to clear clearSubscription only when components unmounts or search bar changes
   React.useEffect(() => clearSubscription, [searchBar]);
@@ -141,7 +138,8 @@ 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

@@ -98,7 +98,8 @@ const MaybeNestedStack = ({
         contentStyle,
       ]}
       // @ts-ignore Wrong props passed to View
-      stackPresentation={stackPresentation}>
+      stackPresentation={stackPresentation}
+    >
       {children}
     </Container>
   );
@@ -293,16 +294,19 @@ const RouteView = ({
           source: route.key,
           target: stateKey,
         });
-      }}>
+      }}
+    >
       <HeaderHeightContext.Provider
         value={
           isHeaderInPush !== false ? headerHeight : parentHeaderHeight ?? 0
-        }>
+        }
+      >
         <HeaderConfig {...options} route={route} headerShown={isHeaderInPush} />
         <MaybeNestedStack
           options={options}
           route={route}
-          stackPresentation={stackPresentation}>
+          stackPresentation={stackPresentation}
+        >
           {renderScene()}
         </MaybeNestedStack>
       </HeaderHeightContext.Provider>

package/src/reanimated/ReanimatedNativeStackScreen.tsx

@@ -11,7 +11,7 @@ import Animated, { useEvent, useSharedValue } from 'react-native-reanimated';
 import ReanimatedTransitionProgressContext from './ReanimatedTransitionProgressContext';
 
 const AnimatedScreen = Animated.createAnimatedComponent(
-  (InnerScreen as unknown) as React.ComponentClass
+  InnerScreen as unknown as React.ComponentClass
 );
 
 // We use prop added to global by reanimated since it seems safer than the one from RN. See:
@@ -51,13 +51,15 @@ const ReanimatedNativeStackScreen = React.forwardRef<
             : 'topTransitionProgress',
         ]
       )}
-      {...rest}>
+      {...rest}
+    >
       <ReanimatedTransitionProgressContext.Provider
         value={{
           progress: progress,
           closing: closing,
           goingForward: goingForward,
-        }}>
+        }}
+      >
         {children}
       </ReanimatedTransitionProgressContext.Provider>
     </AnimatedScreen>

package/src/reanimated/ReanimatedScreen.tsx

@@ -5,7 +5,7 @@ import { InnerScreen, ScreenProps } from 'react-native-screens';
 import Animated from 'react-native-reanimated';
 
 const AnimatedScreen = Animated.createAnimatedComponent(
-  (InnerScreen as unknown) as React.ComponentClass
+  InnerScreen as unknown as React.ComponentClass
 );
 
 const ReanimatedScreen = React.forwardRef<typeof AnimatedScreen, ScreenProps>(