@rn-tools/navigation 2.2.5 → 2.2.6

package/README.md

@@ -301,16 +301,12 @@ function switchMainTabsToTab(tabIndex: number) {
 
 ### Rendering a header
 
-Use the `Stack.Header` component to render a native header in a screen.
+Use the `Stack.Header` component to render a native header in a screen by passing it as a prop to `Stack.Screen`.
 
 Under the hood this is using `react-native-screens` header - [here is a reference for the available props](https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md#screenstackheaderconfig)
 
 You can provide custom left, center, and right views in the header by using the `Stack.HeaderLeft`, `Stack.HeaderCenter`, and `Stack.HeaderRight` view container components as children of `Stack.Header`.
 
-**Note:** Wrap your App in a `SafeAreaProvider` to ensure your screen components are rendered correctly with the header
-
-**Note:**: The header component **has to be the first child** of a `Stack.Screen` component.
-
 ```tsx
 import { navigation, Stack } from "@rn-tools/navigation";
 import * as React from "react";
@@ -331,20 +327,20 @@ function MyScreenWithHeader() {
   let [title, setTitle] = React.useState("");
 
   return (
-    <Stack.Screen>
-      {/* Header must be the first child */}
-      <Stack.Header
-        title={title}
-        // Some potentially useful props - see the reference posted above for all available props
-        backTitle="Custom back title"
-        backTitleFontSize={16}
-        hideBackButton={false}
-      >
-        <Stack.HeaderRight>
-          <Text>Custom right text!</Text>
-        </Stack.HeaderRight>
-      </Stack.Header>
-
+    <Stack.Screen
+      header={
+        <Stack.Header
+          title={title}
+          backTitle="Custom back title"
+          backTitleFontSize={16}
+          hideBackButton={false}
+        >
+          <Stack.HeaderRight>
+            <Text>Custom right text!</Text>
+          </Stack.HeaderRight>
+        </Stack.Header>
+      }
+    >
       <View
         style={{
           flex: 1,
@@ -751,17 +747,19 @@ function MyScreen() {
       preventNativeDismiss={!canGoBack}
       nativeBackButtonDismissalEnabled={!canGoBack}
       gestureEnabled={canGoBack}
+      header={
+        <Stack.Header title="Prevent going back">
+          <Stack.HeaderLeft>
+            <TouchableOpacity
+              onPress={onPressBackButton}
+              style={{ opacity: canGoBack ? 1 : 0.4 }}
+            >
+              <Text>Back</Text>
+            </TouchableOpacity>
+          </Stack.HeaderLeft>
+        </Stack.Header>
+      }
     >
-      <Stack.Header title="Prevent going back">
-        <Stack.HeaderLeft>
-          <TouchableOpacity
-            onPress={onPressBackButton}
-            style={{ opacity: canGoBack ? 1 : 0.4 }}
-          >
-            <Text>Back</Text>
-          </TouchableOpacity>
-        </Stack.HeaderLeft>
-      </Stack.Header>
       <View style={{ paddingVertical: 48, paddingHorizontal: 16, gap: 16 }}>
         <Text style={{ fontSize: 22, fontWeight: "medium" }}>
           Enter some text and try to go back

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rn-tools/navigation",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "main": "./src/index.ts",
   "license": "MIT",
   "files": [

package/src/stack.tsx

@@ -143,7 +143,9 @@ let defaultScreenStyle: ViewStyle = {
   backgroundColor: "white",
 };
 
-export type StackScreenProps = RNScreenProps;
+export type StackScreenProps = RNScreenProps & {
+  header?: React.ReactElement<StackScreenHeaderProps>
+}
 
 let HeaderHeightContext = React.createContext<number>(0);
 
@@ -153,6 +155,7 @@ let StackScreen = React.memo(function StackScreen({
   gestureEnabled = true,
   onDismissed: onDismissedProp,
   onHeaderHeightChange: onHeaderHeightChangeProp,
+  header,
   ...props
 }: StackScreenProps) {
   let stackId = React.useContext(StackIdContext);
@@ -188,19 +191,29 @@ let StackScreen = React.memo(function StackScreen({
     };
   }, [gestureEnabled, stack, screenId, isActive, dispatch]);
 
-  let style = React.useMemo(() => styleProp || defaultScreenStyle, [styleProp]);
-
-  let [headerHeight, setHeaderHeight] = React.useState(0);
+  let parentHeaderHeight = React.useContext(HeaderHeightContext);
+  let [headerHeight, setHeaderHeight] = React.useState(parentHeaderHeight);
 
   let onHeaderHeightChange: ScreenProps["onHeaderHeightChange"] =
     React.useCallback(
       (e) => {
-        Platform.OS === "ios" && setHeaderHeight(e.nativeEvent.headerHeight);
+        Platform.OS === "ios" &&
+          e.nativeEvent.headerHeight > 0 &&
+          setHeaderHeight(e.nativeEvent.headerHeight);
         onHeaderHeightChangeProp?.(e);
       },
       [onHeaderHeightChangeProp]
     );
 
+  let style = React.useMemo(
+    () => [
+      defaultScreenStyle,
+      { paddingTop: headerHeight || parentHeaderHeight },
+      styleProp,
+    ],
+    [styleProp, headerHeight, parentHeaderHeight]
+  );
+
   return (
     <HeaderHeightContext.Provider value={headerHeight}>
       {/* @ts-expect-error - Ref typings in RNScreens */}
@@ -212,6 +225,7 @@ let StackScreen = React.memo(function StackScreen({
         onDismissed={onDismissed}
         onHeaderHeightChange={onHeaderHeightChange}
       >
+        {header}
         {children}
       </RNScreen>
     </HeaderHeightContext.Provider>
@@ -255,20 +269,7 @@ export type StackScreenHeaderProps = RNScreenStackHeaderConfigProps;
 let StackScreenHeader = React.memo(function StackScreenHeader({
   ...props
 }: StackScreenHeaderProps) {
-  let headerHeight = React.useContext(HeaderHeightContext);
-
-  let placeholderStyle = React.useMemo<ViewStyle>(() => {
-    return {
-      height: headerHeight,
-    };
-  }, [headerHeight]);
-
-  return (
-    <React.Fragment>
-      <RNScreenStackHeaderConfig {...props} />
-      <View style={placeholderStyle} />
-    </React.Fragment>
-  );
+  return <RNScreenStackHeaderConfig {...props} />;
 });
 
 let StackScreenHeaderLeft = React.memo(function StackScreenHeaderLeft({