Skip to content

Commit fc43e9a

Browse files
satya164satya164
committed
Add an example for using Header with a navigator
1 parent 36f34f4 commit fc43e9a

File tree

3 files changed

+204
-8
lines changed

3 files changed

+204
-8
lines changed

‎src/components/Pre.js

+39-6
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,52 @@ const peers = {
99

1010
const versions = {
1111
7: {
12-
'@react-navigation/bottom-tabs': ['7.0.0-alpha.17', peers],
12+
'@react-navigation/bottom-tabs': [
13+
'7.0.0-alpha.17',
14+
{
15+
...peers,
16+
'@react-navigation/native': '*',
17+
},
18+
],
1319
'@react-navigation/core': '7.0.0-alpha.13',
1420
'@react-navigation/native': '7.0.0-alpha.14',
1521
'@react-navigation/drawer': [
1622
'7.0.0-alpha.15',
1723
{
1824
...peers,
25+
'@react-navigation/native': '*',
1926
'react-native-gesture-handler': '*',
2027
'react-native-reanimated': '*',
2128
},
2229
],
23-
'@react-navigation/elements': ['2.0.0-alpha.12', peers],
30+
'@react-navigation/elements': [
31+
'2.0.0-alpha.12',
32+
{
33+
...peers,
34+
'@react-navigation/native': '*',
35+
},
36+
],
2437
'@react-navigation/material-top-tabs': [
2538
'7.0.0-alpha.14',
2639
{
2740
...peers,
41+
'@react-navigation/native': '*',
2842
'react-native-pager-view': '*',
2943
},
3044
],
31-
'@react-navigation/native-stack': ['7.0.0-alpha.15', peers],
45+
'@react-navigation/native-stack': [
46+
'7.0.0-alpha.15',
47+
{
48+
...peers,
49+
'@react-navigation/native': '*',
50+
},
51+
],
3252
'@react-navigation/routers': '7.0.0-alpha.4',
3353
'@react-navigation/stack': [
3454
'7.0.0-alpha.15',
3555
{
3656
...peers,
57+
'@react-navigation/native': '*',
3758
'react-native-gesture-handler': '*',
3859
},
3960
],
@@ -95,11 +116,23 @@ export default function Pre({
95116
Object.entries(versions[version]).reduce((acc, [key, value]) => {
96117
if (code.includes(`from '${key}'`)) {
97118
if (Array.isArray(value)) {
98-
const [version, peers] = value;
119+
const [v, peers] = value;
99120

100121
Object.assign(acc, {
101-
[key]: version,
102-
...peers,
122+
[key]: v,
123+
...Object.fromEntries(
124+
Object.entries(peers).map(([key, value]) => {
125+
const meta = versions[version][key];
126+
127+
if (value === '*' && meta) {
128+
const v = Array.isArray(meta) ? meta[0] : meta;
129+
130+
return [key, v];
131+
}
132+
133+
return [key, value];
134+
})
135+
),
103136
});
104137
} else {
105138
acc[key] = value;

‎versioned_docs/version-6.x/elements.md

+41-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,47 @@ npm install @react-navigation/elements
1818

1919
### `Header`
2020

21-
A component that can be used as a header. It accepts the following props:
21+
A component that can be used as a header. This is used by all the navigators by default.
22+
23+
Usage:
24+
25+
```js
26+
import { Header } from '@react-navigation/elements';
27+
28+
function MyHeader() {
29+
return <Header title="My app" />;
30+
}
31+
```
32+
33+
To use the header in a navigator, you can use the `header` option in the screen options:
34+
35+
```js
36+
import { Header, getHeaderTitle } from '@react-navigation/elements';
37+
38+
const Stack = createNativeStackNavigator();
39+
40+
function MyStack() {
41+
return (
42+
<Stack.Navigator
43+
screenOptions={{
44+
header: ({ options, route }) => (
45+
<Header {...options} title={getHeaderTitle(options, route.name)} />
46+
),
47+
}}
48+
>
49+
<Stack.Screen name="Home" component={HomeScreen} />
50+
</Stack.Navigator>
51+
);
52+
}
53+
```
54+
55+
:::note
56+
57+
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.
58+
59+
:::
60+
61+
It accepts the following props:
2262

2363
#### `headerTitle`
2464

‎versioned_docs/version-7.x/elements.md

+124-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,130 @@ npm install @react-navigation/elements@next
2121

2222
### `Header`
2323

24-
A component that can be used as a header. It accepts the following props:
24+
A component that can be used as a header. This is used by all the navigators by default.
25+
26+
Usage:
27+
28+
```js name="React Navigation Elements Header" snack version=7
29+
import * as React from 'react';
30+
import { SafeAreaProviderCompat } from '@react-navigation/elements';
31+
import { NavigationContainer } from '@react-navigation/native';
32+
// codeblock-focus-start
33+
import { Header } from '@react-navigation/elements';
34+
35+
function MyHeader() {
36+
return <Header title="My app" />;
37+
}
38+
// codeblock-focus-end
39+
40+
export default function App() {
41+
return (
42+
<NavigationContainer>
43+
<SafeAreaProviderCompat>
44+
<MyHeader />
45+
</SafeAreaProviderCompat>
46+
</NavigationContainer>
47+
);
48+
}
49+
```
50+
51+
To use the header in a navigator, you can use the `header` option in the screen options:
52+
53+
<Tabs groupId="config" queryString="config">
54+
<TabItem value="static" label="Static" default>
55+
56+
```js name="Header with Native Stack" snack version=7
57+
import * as React from 'react';
58+
import { Text, View, Button } from 'react-native';
59+
import { createStaticNavigation } from '@react-navigation/native';
60+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
61+
// codeblock-focus-start
62+
import { Header, getHeaderTitle } from '@react-navigation/elements';
63+
64+
// codeblock-focus-end
65+
function HomeScreen() {
66+
return (
67+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
68+
<Text>Home Screen</Text>
69+
</View>
70+
);
71+
}
72+
73+
// codeblock-focus-start
74+
const MyStack = createNativeStackNavigator({
75+
screenOptions: {
76+
header: ({ options, route }) => (
77+
<Header {...options} title={getHeaderTitle(options, route.name)} />
78+
),
79+
},
80+
screens: {
81+
Home: HomeScreen,
82+
},
83+
});
84+
// codeblock-focus-end
85+
86+
const Navigation = createStaticNavigation(MyStack);
87+
88+
export default function App() {
89+
return <Navigation />;
90+
}
91+
```
92+
93+
</TabItem>
94+
<TabItem value="dynamic" label="Dynamic">
95+
96+
```js name="Header with Native Stack" snack version=7
97+
import * as React from 'react';
98+
import { Text, View, Button } from 'react-native';
99+
import { NavigationContainer } from '@react-navigation/native';
100+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
101+
// codeblock-focus-start
102+
import { Header, getHeaderTitle } from '@react-navigation/elements';
103+
104+
const Stack = createNativeStackNavigator();
105+
106+
function MyStack() {
107+
return (
108+
<Stack.Navigator
109+
screenOptions={{
110+
header: ({ options, route }) => (
111+
<Header {...options} title={getHeaderTitle(options, route.name)} />
112+
),
113+
}}
114+
>
115+
<Stack.Screen name="Home" component={HomeScreen} />
116+
</Stack.Navigator>
117+
);
118+
}
119+
// codeblock-focus-end
120+
121+
function HomeScreen() {
122+
return (
123+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
124+
<Text>Home Screen</Text>
125+
</View>
126+
);
127+
}
128+
129+
export default function App() {
130+
return (
131+
<NavigationContainer>
132+
<MyStack />
133+
</NavigationContainer>
134+
);
135+
}
136+
```
137+
138+
</TabItem>
139+
</Tabs>
140+
141+
:::note
142+
143+
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.
144+
145+
:::
146+
147+
It accepts the following props:
25148

26149
#### `headerTitle`
27150

0 commit comments

Comments
 (0)