Skip to content

Commit 9222544

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

3 files changed

Lines changed: 192 additions & 8 deletions

File tree

‎src/components/Pre.js‎

Lines changed: 39 additions & 6 deletions
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‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,41 @@ 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+
It accepts the following props:
2256

2357
#### `headerTitle`
2458

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

Lines changed: 118 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,124 @@ 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+
It accepts the following props:
25142

26143
#### `headerTitle`
27144

0 commit comments

Comments
 (0)