From fc43e9a128bf229ecb56bae9e75e29211ef00181 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Mon, 11 Mar 2024 09:52:34 +0100 Subject: [PATCH] Add an example for using Header with a navigator --- src/components/Pre.js | 45 +++++++-- versioned_docs/version-6.x/elements.md | 42 ++++++++- versioned_docs/version-7.x/elements.md | 125 ++++++++++++++++++++++++- 3 files changed, 204 insertions(+), 8 deletions(-) diff --git a/src/components/Pre.js b/src/components/Pre.js index 207bad81844..d2354824150 100644 --- 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 index c5ee5afa42d..84304a7c8c6 100644 --- 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
; +} +``` + +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 ( + ( +
+ ), + }} + > + + + ); +} +``` + +:::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 index c9ce92789ae..b9605b57208 100644 --- 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
; +} +// codeblock-focus-end + +export default function App() { + return ( + + + + + + ); +} +``` + +To use the header in a navigator, you can use the `header` option in the screen options: + + + + +```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 ( + + Home Screen + + ); +} + +// codeblock-focus-start +const MyStack = createNativeStackNavigator({ + screenOptions: { + header: ({ options, route }) => ( +
+ ), + }, + screens: { + Home: HomeScreen, + }, +}); +// codeblock-focus-end + +const Navigation = createStaticNavigation(MyStack); + +export default function App() { + return ; +} +``` + + + + +```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 ( + ( +
+ ), + }} + > + + + ); +} +// codeblock-focus-end + +function HomeScreen() { + return ( + + Home Screen + + ); +} + +export default function App() { + return ( + + + + ); +} +``` + + + + +:::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`