Add an example for using Header with a navigator

react-navigation · Mar 11, 2024 · fc43e9a · fc43e9a
1 parent 36f34f4
commit fc43e9a
Show file tree

Hide file tree

Showing 3 changed files with 204 additions and 8 deletions.
diff --git a/src/components/Pre.js b/src/components/Pre.js
@@ -9,31 +9,52 @@ const peers = {
 
 const versions = {
   7: {
-    '@react-navigation/bottom-tabs': ['7.0.0-alpha.17', peers],
+    '@react-navigation/bottom-tabs': [
+      '7.0.0-alpha.17',
+      {
+        ...peers,
+        '@react-navigation/native': '*',
+      },
+    ],
     '@react-navigation/core': '7.0.0-alpha.13',
     '@react-navigation/native': '7.0.0-alpha.14',
     '@react-navigation/drawer': [
       '7.0.0-alpha.15',
       {
         ...peers,
+        '@react-navigation/native': '*',
         'react-native-gesture-handler': '*',
         'react-native-reanimated': '*',
       },
     ],
-    '@react-navigation/elements': ['2.0.0-alpha.12', peers],
+    '@react-navigation/elements': [
+      '2.0.0-alpha.12',
+      {
+        ...peers,
+        '@react-navigation/native': '*',
+      },
+    ],
     '@react-navigation/material-top-tabs': [
       '7.0.0-alpha.14',
       {
         ...peers,
+        '@react-navigation/native': '*',
         'react-native-pager-view': '*',
       },
     ],
-    '@react-navigation/native-stack': ['7.0.0-alpha.15', peers],
+    '@react-navigation/native-stack': [
+      '7.0.0-alpha.15',
+      {
+        ...peers,
+        '@react-navigation/native': '*',
+      },
+    ],
     '@react-navigation/routers': '7.0.0-alpha.4',
     '@react-navigation/stack': [
       '7.0.0-alpha.15',
       {
         ...peers,
+        '@react-navigation/native': '*',
         'react-native-gesture-handler': '*',
       },
     ],
@@ -95,11 +116,23 @@ export default function Pre({
       Object.entries(versions[version]).reduce((acc, [key, value]) => {
         if (code.includes(`from '${key}'`)) {
           if (Array.isArray(value)) {
-            const [version, peers] = value;
+            const [v, peers] = value;
 
             Object.assign(acc, {
-              [key]: version,
-              ...peers,
+              [key]: v,
+              ...Object.fromEntries(
+                Object.entries(peers).map(([key, value]) => {
+                  const meta = versions[version][key];
+
+                  if (value === '*' && meta) {
+                    const v = Array.isArray(meta) ? meta[0] : meta;
+
+                    return [key, v];
+                  }
+
+                  return [key, value];
+                })
+              ),
             });
           } else {
             acc[key] = value;

diff --git a/versioned_docs/version-6.x/elements.md b/versioned_docs/version-6.x/elements.md
@@ -18,7 +18,47 @@ npm install @react-navigation/elements
 
 ### `Header`
 
-A component that can be used as a header. It accepts the following props:
+A component that can be used as a header. This is used by all the navigators by default.
+
+Usage:
+
+```js
+import { Header } from '@react-navigation/elements';
+
+function MyHeader() {
+  return <Header title="My app" />;
+}
+```
+
+To use the header in a navigator, you can use the `header` option in the screen options:
+
+```js
+import { Header, getHeaderTitle } from '@react-navigation/elements';
+
+const Stack = createNativeStackNavigator();
+
+function MyStack() {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        header: ({ options, route }) => (
+          <Header {...options} title={getHeaderTitle(options, route.name)} />
+        ),
+      }}
+    >
+      <Stack.Screen name="Home" component={HomeScreen} />
+    </Stack.Navigator>
+  );
+}
+```
+
+:::note
+
+This doesn't replicate the behavior of the header in stack and native stack navigators as the stack navigator also includes animations, and the native stack navigator header is provided by the native platform.
+
+:::
+
+It accepts the following props:
 
 #### `headerTitle`
 

diff --git a/versioned_docs/version-7.x/elements.md b/versioned_docs/version-7.x/elements.md
@@ -21,7 +21,130 @@ npm install @react-navigation/elements@next
 
 ### `Header`
 
-A component that can be used as a header. It accepts the following props:
+A component that can be used as a header. This is used by all the navigators by default.
+
+Usage:
+
+```js name="React Navigation Elements Header" snack version=7
+import * as React from 'react';
+import { SafeAreaProviderCompat } from '@react-navigation/elements';
+import { NavigationContainer } from '@react-navigation/native';
+// codeblock-focus-start
+import { Header } from '@react-navigation/elements';
+
+function MyHeader() {
+  return <Header title="My app" />;
+}
+// codeblock-focus-end
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <SafeAreaProviderCompat>
+        <MyHeader />
+      </SafeAreaProviderCompat>
+    </NavigationContainer>
+  );
+}
+```
+
+To use the header in a navigator, you can use the `header` option in the screen options:
+
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js name="Header with Native Stack" snack version=7
+import * as React from 'react';
+import { Text, View, Button } from 'react-native';
+import { createStaticNavigation } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+// codeblock-focus-start
+import { Header, getHeaderTitle } from '@react-navigation/elements';
+
+// codeblock-focus-end
+function HomeScreen() {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Home Screen</Text>
+    </View>
+  );
+}
+
+// codeblock-focus-start
+const MyStack = createNativeStackNavigator({
+  screenOptions: {
+    header: ({ options, route }) => (
+      <Header {...options} title={getHeaderTitle(options, route.name)} />
+    ),
+  },
+  screens: {
+    Home: HomeScreen,
+  },
+});
+// codeblock-focus-end
+
+const Navigation = createStaticNavigation(MyStack);
+
+export default function App() {
+  return <Navigation />;
+}
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```js name="Header with Native Stack" snack version=7
+import * as React from 'react';
+import { Text, View, Button } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+// codeblock-focus-start
+import { Header, getHeaderTitle } from '@react-navigation/elements';
+
+const Stack = createNativeStackNavigator();
+
+function MyStack() {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        header: ({ options, route }) => (
+          <Header {...options} title={getHeaderTitle(options, route.name)} />
+        ),
+      }}
+    >
+      <Stack.Screen name="Home" component={HomeScreen} />
+    </Stack.Navigator>
+  );
+}
+// codeblock-focus-end
+
+function HomeScreen() {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Home Screen</Text>
+    </View>
+  );
+}
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <MyStack />
+    </NavigationContainer>
+  );
+}
+```
+
+</TabItem>
+</Tabs>
+
+:::note
+
+This doesn't replicate the behavior of the header in stack and native stack navigators as the stack navigator also includes animations, and the native stack navigator header is provided by the native platform.
+
+:::
+
+It accepts the following props:
 
 #### `headerTitle`