Add an example for using Header with a navigator

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

Hide file tree

Showing 3 changed files with 192 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,41 @@ 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>
+  );
+}
+```
+
+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,124 @@ 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>
+
+It accepts the following props:
 
 #### `headerTitle`