Skip to content

Commit

Permalink
Add an example for using Header with a navigator
Browse files Browse the repository at this point in the history
  • Loading branch information
satya164 committed Mar 11, 2024
1 parent 36f34f4 commit fc43e9a
Show file tree
Hide file tree
Showing 3 changed files with 204 additions and 8 deletions.
45 changes: 39 additions & 6 deletions src/components/Pre.js
Original file line number Diff line number Diff line change
Expand Up @@ -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': '*',
},
],
Expand Down Expand Up @@ -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;
Expand Down
42 changes: 41 additions & 1 deletion versioned_docs/version-6.x/elements.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand Down
125 changes: 124 additions & 1 deletion versioned_docs/version-7.x/elements.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand Down

0 comments on commit fc43e9a

Please sign in to comment.