diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 2618dc1431f..123190557ce 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,3 +1,5 @@ + diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml index 3c4d4ecdea3..d8e6daa5fa2 100644 --- a/.github/workflows/autofix.yml +++ b/.github/workflows/autofix.yml @@ -1,9 +1,6 @@ name: autofix.ci on: - push: - branches: - - main pull_request: branches: - main @@ -22,7 +19,10 @@ jobs: uses: ./.github/actions/setup - name: Fix lint issues - run: yarn markdownlint-cli2-fix + run: yarn markdownlint-cli2 --fix + + - name: Prettify code + run: yarn prettier --write . - name: Autofix - uses: autofix-ci/action@8106fde54b877517c9af2c3d68918ddeaa7bed64 + uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27 diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index b6cae2ead00..28efada4217 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -1,6 +1,7 @@ name: Deploy on: + workflow_dispatch: push: branches: - main diff --git a/.gitignore b/.gitignore index a63bf513f09..ea2920f1a31 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ node_modules .DS_Store .docusaurus .history +.idea build/ translated_docs/ diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000000..c7925452348 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,2 @@ +build +.yarn diff --git a/.prettierrc.json b/.prettierrc.json index 5b6ba3375e0..5b47106db9e 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -3,4 +3,4 @@ "tabWidth": 2, "trailingComma": "es5", "useTabs": false -} \ No newline at end of file +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000000..8752ffb20d3 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "editor.formatOnSave": true, + "editor.codeActionsOnSave": ["source.organizeImports", "source.fixAll"] +} diff --git a/blog/2018-02-06-react-navigation-1.0.md b/blog/2018-02-06-react-navigation-1.0.md index 65aa4a5bbc1..d507a61ee87 100644 --- a/blog/2018-02-06-react-navigation-1.0.md +++ b/blog/2018-02-06-react-navigation-1.0.md @@ -1,9 +1,6 @@ --- title: React Navigation 1.0 (goodbye, beta!) -author: Brent Vatne -author_url: https://twitter.com/notbrent -author_title: Core Team -author_image_url: https://avatars0.githubusercontent.com/u/90494?s=200&v=4 +authors: brent tags: [release, announcement] --- diff --git a/blog/2018-04-06-react-navigation-2.0-rc.md b/blog/2018-04-06-react-navigation-2.0-rc.md index 102664e3d2c..fc310f09ccc 100644 --- a/blog/2018-04-06-react-navigation-2.0-rc.md +++ b/blog/2018-04-06-react-navigation-2.0-rc.md @@ -1,9 +1,6 @@ --- title: 2.0 release candidate -author: Brent Vatne -author_url: https://twitter.com/notbrent -author_title: Core Team -author_image_url: https://avatars0.githubusercontent.com/u/90494?s=200&v=4 +authors: brent tags: [release, announcement] --- @@ -55,7 +52,7 @@ In 1.x, functions on the `navigation` were not contextual - they would be the sa Given that we only exposed generic helpers (`navigate`, `goBack`) and helpers specific to the stack in 1.x, this would only impact you if you attempted to use the stack helpers from outside of a stack. For example, if you had a tab navigator with a stack in tab A and just a plain screen in tab B, then tried to `push` a route from the screen in tab B, `push` would not be available. Keep this in mind when you update your app if it follows this type of structure. -One of the big improvements you get from this is that you can now add your own helpers to the `navigation` prop! Read more in [RFC 6](https://github.com/react-navigation/rfcs/blob/master/text/0006-action-creators.md). +One of the big improvements you get from this is that you can now add your own helpers to the `navigation` prop! Read more in [RFC 6](https://github.com/react-navigation/rfcs/blob/master/text/0006-action-creators.md). ## Deprecations @@ -76,6 +73,6 @@ This change was made to improve the ease of learning and understanding the libra ## New feature highlights -- State persistence - automatically save state and reload it when the app restarts. See [state persistence docs](docs/state-persistence) +- State persistence - automatically save state and reload it when the app restarts. See [state persistence docs](/docs/state-persistence) - Transitions between screens in stack with headers and without headers now animates as expected on iOS. [#3821](https://github.com/react-navigation/react-navigation/pull/3821). Thanks [skevy](https://github.com/skevy)! - As mentioned above, `createMaterialBottomNavigator` is a new navigator type that provides the material design bottom tab bar pattern. diff --git a/blog/2018-05-07-react-navigation-2.0.md b/blog/2018-05-07-react-navigation-2.0.md index 707b2a13800..72d2f826816 100644 --- a/blog/2018-05-07-react-navigation-2.0.md +++ b/blog/2018-05-07-react-navigation-2.0.md @@ -1,9 +1,6 @@ --- title: React Navigation 2.0 -author: Brent Vatne -author_url: https://twitter.com/notbrent -author_title: Core Team -author_image_url: https://avatars0.githubusercontent.com/u/90494?s=200&v=4 +authors: brent tags: [release, announcement] --- @@ -51,7 +48,7 @@ The following changes are considered “trivial” because you will only need ma ### Drawer routes have been replaced with actions -Rather than opening a drawer with `navigation.navigate(‘DrawerOpen’)`, you can now call `navigation.openDrawer()`. Other methods are `closeDrawer()` and `toggleDrawer()`. See [pull 3618](https://github.com/react-navigation/react-navigation/pull/3618). +Rather than opening a drawer with `navigation.navigate(‘DrawerOpen’)`, you can now call `navigation.openDrawer()`. Other methods are `closeDrawer()` and `toggleDrawer()`. See [pull 3618](https://github.com/react-navigation/react-navigation/pull/3618). ### Navigation actions API overhaul @@ -61,7 +58,7 @@ In 1.x, functions on the `navigation` were not contextual - they would be the sa Given that we only exposed generic helpers (`navigate`, `goBack`) and helpers specific to the stack in 1.x, this would only impact you if you attempted to use the stack helpers from outside of a stack. For example, if you had a tab navigator with a stack in tab A and just a plain screen in tab B, then tried to `push` a route from the screen in tab B, `push` would not be available. Keep this in mind when you update your app if it follows this type of structure. -One of the big improvements you get from this is that you can now add your own helpers to the `navigation` prop! Read more in [RFC 6](https://github.com/react-navigation/rfcs/blob/master/text/0006-action-creators.md) and in [pull 3392](https://github.com/react-navigation/react-navigation/pull/3392). +One of the big improvements you get from this is that you can now add your own helpers to the `navigation` prop! Read more in [RFC 6](https://github.com/react-navigation/rfcs/blob/master/text/0006-action-creators.md) and in [pull 3392](https://github.com/react-navigation/react-navigation/pull/3392). ### NavigationActions no longer have `toString()` implementations ([related](https://github.com/react-navigation/react-navigation/issues/4072)) @@ -85,24 +82,24 @@ It is worth noting additionally that `createBottomTabNavigator` is different fro ## Enhancements -* dangerouslyGetParent and dismiss helpers on navigation prop ([3669](https://github.com/react-navigation/react-navigation/pull/3669)) -* State persistence - automatically save state and reload it when the app restarts ([3716](https://github.com/react-navigation/react-navigation/pull/3716)) -* Smoothly transition header visibility in Stack ([3821](https://github.com/react-navigation/react-navigation/pull/3821)) -* Add initialRouteKey for StackRouter ([3540](https://github.com/react-navigation/react-navigation/pull/3540)) -* Make StackNavigator keyboard aware -- it hides automatically when you start to swipe back, and refocuses if you cancel the swipe back gesture ([3951](https://github.com/react-navigation/react-navigation/pull/3951)) -* Allow modification of SafeAreaView props in header ([3496](https://github.com/react-navigation/react-navigation/pull/3496)) -* Add `createMaterialBottomTabNavigator` for a material design style tab bar. (see [react-navigation-tabs](https://github.com/react-navigation/react-navigation-tabs)). -* Use findIndex instead of map/indexOf in StateUtils ([commit](https://github.com/react-navigation/react-navigation/commit/47fe858d4ec339d2b1f4b96f3a5444aed8f6f900) -* Warn when users have multiple stateful navigation containers ([commit](https://github.com/react-navigation/react-navigation/commit/68a2a106f370003dc1d46385fd8b5992be189ee2)) -* Remove almost all uses of React 16 deprecated lifecycle methods ([commit](https://github.com/react-navigation/react-navigation/commit/3f837c895e823de4d528b55fd70ee7ba167480d8)) -* Add `activeLabelStyle` and `inactiveLabelStyle` for `DrawerItem` ([commit](https://github.com/react-navigation/react-navigation/commit/7c488c8d4974028f85a4c5171d27209fa099170f)) +- dangerouslyGetParent and dismiss helpers on navigation prop ([3669](https://github.com/react-navigation/react-navigation/pull/3669)) +- State persistence - automatically save state and reload it when the app restarts ([3716](https://github.com/react-navigation/react-navigation/pull/3716)) +- Smoothly transition header visibility in Stack ([3821](https://github.com/react-navigation/react-navigation/pull/3821)) +- Add initialRouteKey for StackRouter ([3540](https://github.com/react-navigation/react-navigation/pull/3540)) +- Make StackNavigator keyboard aware -- it hides automatically when you start to swipe back, and refocuses if you cancel the swipe back gesture ([3951](https://github.com/react-navigation/react-navigation/pull/3951)) +- Allow modification of SafeAreaView props in header ([3496](https://github.com/react-navigation/react-navigation/pull/3496)) +- Add `createMaterialBottomTabNavigator` for a material design style tab bar. (see [react-navigation-tabs](https://github.com/react-navigation/react-navigation-tabs)). +- Use findIndex instead of map/indexOf in StateUtils ([commit](https://github.com/react-navigation/react-navigation/commit/47fe858d4ec339d2b1f4b96f3a5444aed8f6f900) +- Warn when users have multiple stateful navigation containers ([commit](https://github.com/react-navigation/react-navigation/commit/68a2a106f370003dc1d46385fd8b5992be189ee2)) +- Remove almost all uses of React 16 deprecated lifecycle methods ([commit](https://github.com/react-navigation/react-navigation/commit/3f837c895e823de4d528b55fd70ee7ba167480d8)) +- Add `activeLabelStyle` and `inactiveLabelStyle` for `DrawerItem` ([commit](https://github.com/react-navigation/react-navigation/commit/7c488c8d4974028f85a4c5171d27209fa099170f)) ## Bugfixes -* Avoid unnecessary navigation completion dispatches ([3902](https://github.com/react-navigation/react-navigation/pull/3902)) -* Use Header.HEIGHT instead of measuring to avoid flicker ([3940](https://github.com/react-navigation/react-navigation/pull/3940)) -* Implement paths on `SwitchRouter` ([commit](https://github.com/react-navigation/react-navigation/commit/5e4512f3ebef587bf90e4ec4d660708b72a0a865)). -* `SwitchRouter` now returns `null` on idempotent navigation ([commit](https://github.com/react-navigation/react-navigation/commit/577d99c1658ef85c061c82d55bf349c38e161e97)). +- Avoid unnecessary navigation completion dispatches ([3902](https://github.com/react-navigation/react-navigation/pull/3902)) +- Use Header.HEIGHT instead of measuring to avoid flicker ([3940](https://github.com/react-navigation/react-navigation/pull/3940)) +- Implement paths on `SwitchRouter` ([commit](https://github.com/react-navigation/react-navigation/commit/5e4512f3ebef587bf90e4ec4d660708b72a0a865)). +- `SwitchRouter` now returns `null` on idempotent navigation ([commit](https://github.com/react-navigation/react-navigation/commit/577d99c1658ef85c061c82d55bf349c38e161e97)). ## Final notes diff --git a/blog/2018-11-01-react-navigation-3.0-rc.md b/blog/2018-11-01-react-navigation-3.0-rc.md index d18e74a3f28..1a781af77d8 100644 --- a/blog/2018-11-01-react-navigation-3.0-rc.md +++ b/blog/2018-11-01-react-navigation-3.0-rc.md @@ -1,9 +1,6 @@ --- title: 3.0 release candidate -author: Brent Vatne -author_url: https://twitter.com/notbrent -author_title: Core Team -author_image_url: https://avatars0.githubusercontent.com/u/90494?s=200&v=4 +authors: brent tags: [release, announcement] --- @@ -46,40 +43,46 @@ const App = createAppContainer(MainNavigator); This should be an easy change - import `createAppContainer` in the root of your app and use it to wrap the root navigator. -> **Warning**: if you have any custom navigators, you may have used `createNavigationContainer`, you can remove this now because it’s only used at the root of the app and provided by the user. +> **Warning**: if you have any custom navigators, you may have used `createNavigationContainer`, you can remove this now because it’s only used at the root of the app and provided by the user. ### Renamed navigationOptions in navigator configuration When configuring navigators it’s often useful to pass in default navigation options for the screens inside of that navigator. For example in a stack you might want to set a background color and tint color for each screen. Previously, you would write something like this: ```js -const Home = createStackNavigator({ - Feed: ExampleScreen, - Profile: ExampleScreen, -}, { - navigationOptions: { - headerTintColor: '#fff', - headerStyle: { - backgroundColor: '#000', +const Home = createStackNavigator( + { + Feed: ExampleScreen, + Profile: ExampleScreen, + }, + { + navigationOptions: { + headerTintColor: '#fff', + headerStyle: { + backgroundColor: '#000', + }, }, } -}); +); ``` As of this release, `navigationOptions` in navigator configuration like this has been renamed to `defaultNavigationOptions`. ```js -const Home = createStackNavigator({ - Feed: ExampleScreen, - Profile: ExampleScreen, -}, { - defaultNavigationOptions: { - headerTintColor: '#fff', - headerStyle: { - backgroundColor: '#000', - }, +const Home = createStackNavigator( + { + Feed: ExampleScreen, + Profile: ExampleScreen, }, -}); + { + defaultNavigationOptions: { + headerTintColor: '#fff', + headerStyle: { + backgroundColor: '#000', + }, + }, + } +); ``` Sometimes you need to configure the `navigationOptions` for a navigator itself. Typically you’d do something like this: @@ -91,20 +94,23 @@ Home.navigationOptions = { tabBarLabel: 'Home!' }; As of this release, you can use `navigationOptions` in the navigator config for this instead. ```js -const Home = createStackNavigator({ - Feed: ExampleScreen, - Profile: ExampleScreen, -}, { - defaultNavigationOptions: { - headerTintColor: '#fff', - headerStyle: { - backgroundColor: '#000', - }, +const Home = createStackNavigator( + { + Feed: ExampleScreen, + Profile: ExampleScreen, }, - navigationOptions: { - tabBarLabel: 'Home!', - }, -}); + { + defaultNavigationOptions: { + headerTintColor: '#fff', + headerStyle: { + backgroundColor: '#000', + }, + }, + navigationOptions: { + tabBarLabel: 'Home!', + }, + } +); const Tabs = createBottomTabNavigator({ Home }); ``` @@ -132,7 +138,7 @@ const Store = createStackNavigator({ - Basic support for hooks in `react-navigation-hooks` - `headerBackgroundTransitionPreset: 'toggle' | 'fade' | 'translate'` lets you choose how to transition your custom `headerBackground` components between screens. -- Add options to opt in/out of the stack card overlay and shadow that are visible during transitions: `cardShadowEnabled` defaults to `true` and `cardOverlayEnabled` defaults to `false`. +- Add options to opt in/out of the stack card overlay and shadow that are visible during transitions: `cardShadowEnabled` defaults to `true` and `cardOverlayEnabled` defaults to `false`. - Export `StackGestureContext` and `DrawerGestureContext` from react-navigation-stack and react-navigation-drawer, so you can use the ref from the corresponding gestures with other gesture handlers (eg: [GestureInteraction.js](https://github.com/react-navigation/react-navigation-drawer/blob/bf4bdba7f6a4fbc12192f5d5ba2285f6280431b7/example/src/GestureInteraction.js)). ## Assorted fixes & improvements @@ -171,7 +177,7 @@ To keep the experience as simple as possible the `react-navigation` package will Now that the core of React Navigation can be used outside of React Native, we can provide first-class web support to anyone using React.js on the web, including those who do not want to use `react-native-web`. -Here is an example web app which demonstrates the new `createBrowserApp` container and the built-in `Link` component: +Here is an example web app which demonstrates the new `createBrowserApp` container and the built-in `Link` component: ```js import { createSwitchNavigator } from "@react-navigation/core"; @@ -209,10 +215,10 @@ export default App; ``` The above `Link` tag will render to: - `Brent's Photos` +`Brent's Photos` See a simple web app with Create React App [here](https://github.com/react-navigation/example-web). Or take a look at [this razzle app](https://github.com/react-navigation/web-server-example) for a more complicated example including server rendering. ----------- +--- Thanks for reading, please post any issues you encounter to [react-navigation/issues](https://github.com/react-navigation/react-navigation/issues)! diff --git a/blog/2018-11-17-react-navigation-3.0.md b/blog/2018-11-17-react-navigation-3.0.md index eaa6d3077ae..841dd2a3e60 100644 --- a/blog/2018-11-17-react-navigation-3.0.md +++ b/blog/2018-11-17-react-navigation-3.0.md @@ -1,9 +1,6 @@ --- title: React Navigation 3.0 -author: Brent Vatne -author_url: https://twitter.com/notbrent -author_title: Core Team -author_image_url: https://avatars0.githubusercontent.com/u/90494?s=200&v=4 +authors: brent tags: [release, announcement] --- diff --git a/blog/2019-09-16-react-navigation-4.0.md b/blog/2019-09-16-react-navigation-4.0.md index c15f2d92645..e950e5f3904 100644 --- a/blog/2019-09-16-react-navigation-4.0.md +++ b/blog/2019-09-16-react-navigation-4.0.md @@ -1,9 +1,6 @@ --- title: React Navigation 4.0 -author: Satyajit Sahoo -author_url: https://twitter.com/satya164 -author_title: Core Team -author_image_url: https://avatars2.githubusercontent.com/u/1174278?s=200&v=4 +authors: satya tags: [release, announcement] --- diff --git a/blog/2019-10-17-react-navigation-native.md b/blog/2019-10-17-react-navigation-native.md index 299b01d99e6..5d3748120b8 100644 --- a/blog/2019-10-17-react-navigation-native.md +++ b/blog/2019-10-17-react-navigation-native.md @@ -1,9 +1,6 @@ --- title: React Navigation meets native -author: Michał Osadnik -author_url: https://twitter.com/mosdnk -author_title: Core Team -author_image_url: https://avatars3.githubusercontent.com/u/25709300?s=460&v=4 +authors: michal tags: [announcement] --- diff --git a/blog/2019-11-04-using-react-navigation-5-with-ui-kitten.md b/blog/2019-11-04-using-react-navigation-5-with-ui-kitten.md index c42381146d6..892525bded6 100644 --- a/blog/2019-11-04-using-react-navigation-5-with-ui-kitten.md +++ b/blog/2019-11-04-using-react-navigation-5-with-ui-kitten.md @@ -1,9 +1,6 @@ --- title: Using React Navigation 5 with UI Kitten -author: Artur Yorsh -author_url: https://twitter.com/artyorsh -author_title: UI Kitten Team -author_image_url: https://avatars0.githubusercontent.com/u/10753921?s=200&v=4 +authors: artur tags: [tutorial, ui-kitten] --- diff --git a/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md b/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md index 2216fa5f2d5..f1518a34790 100644 --- a/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md +++ b/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md @@ -1,9 +1,6 @@ --- title: React Navigation v5 + React Native Paper = ❤️ -author: Dawid Urbaniak -author_url: https://twitter.com/trensik -author_title: Paper Team -author_image_url: https://avatars0.githubusercontent.com/u/18584155?s=200&v=4 +authors: dawid tags: [tutorial, react-native-paper] --- @@ -366,8 +363,8 @@ const Header = ({ scene, previous, navigation }) => { options.headerTitle !== undefined ? options.headerTitle : options.title !== undefined - ? options.title - : scene.route.name; + ? options.title + : scene.route.name; return ( @@ -385,8 +382,7 @@ const Header = ({ scene, previous, navigation }) => { @@ -688,7 +684,7 @@ import { Notifications } from './notifications'; const Tab = createMaterialBottomTabNavigator(); -export const BottomTabs = props => { +export const BottomTabs = (props) => { // Get a name of current screen const routeName = getFocusedRouteNameFromRoute(route) ?? 'Feed'; const isFocused = useIsFocused(); @@ -874,7 +870,7 @@ export default function Main() { function toggleTheme() { // We will pass this function to Drawer and invoke it on theme switch press - setIsDarkTheme(isDark => !isDark); + setIsDarkTheme((isDark) => !isDark); } return ( diff --git a/blog/2020-02-06-react-navigation-5.0.md b/blog/2020-02-06-react-navigation-5.0.md index 7508636a554..fd15458e996 100644 --- a/blog/2020-02-06-react-navigation-5.0.md +++ b/blog/2020-02-06-react-navigation-5.0.md @@ -1,13 +1,10 @@ --- title: React Navigation 5.0 - A new way to navigate -author: Satyajit Sahoo, Michał Osadnik -author_url: https://twitter.com/reactnavigation -author_title: Core Team -author_image_url: https://avatars1.githubusercontent.com/u/29647600?s=200&v=4 +authors: [satya, michal] tags: [release, announcement] --- -Exactly two years ago, we published the first stable version of React Navigation. Throughout this time, the library has been actively developed by adding many new features and bug fixes. The essence of React Navigation was that it was a project that was to become not only a project of individual programmers adapting it to their requirements, but a community as a whole, hence the emphasis on versatility, extensibility, and the tendency to reconsider the assumptions if there were such needs. Thanks to this, the Library has been undergoing metamorphosis of both incremental and completely reorganized shape. +Exactly two years ago, we published the first stable version of React Navigation. Throughout this time, the library has been actively developed by adding many new features and bug fixes. The essence of React Navigation was that it was a project that was to become not only a project of individual programmers adapting it to their requirements, but a community as a whole, hence the emphasis on versatility, extensibility, and the tendency to reconsider the assumptions if there were such needs. Thanks to this, the Library has been undergoing metamorphosis of both incremental and completely reorganized shape. @@ -47,16 +44,16 @@ This made it necessary to rewrite the core of the library, which allowed us to m Hooks are great for stateful logic and code organization. Now we have several hooks for common use cases: -- [`useNavigation`](/docs/use-navigation) -- [`useRoute`](/docs/use-route) -- [`useNavigationState`](/docs/use-navigation-state) -- [`useFocusEffect`](/docs/use-focus-effect) -- [`useIsFocused`](/docs/use-is-focused) -- [`useScrollToTop`](/docs/use-scroll-to-top) +- [`useNavigation`](/docs/5.x/use-navigation) +- [`useRoute`](/docs/5.x/use-route) +- [`useNavigationState`](/docs/5.x/use-navigation-state) +- [`useFocusEffect`](/docs/5.x/use-focus-effect) +- [`useIsFocused`](/docs/5.x/use-is-focused) +- [`useScrollToTop`](/docs/5.x/use-scroll-to-top) ### Update options from component -We’ve added a new [`setOptions`](/docs/navigation-prop#setoptions---update-screen-options-from-the-component) method on the `navigation` prop to make configuring screen navigation options more intuitive than its `static navigationOptions` predecessor. It lets us **easily set screen options based on props, state or context without messing with params**. Instead of using static options, we can call it anytime to configure the screen. +We’ve added a new [`setOptions`](/docs/5.x/navigation-prop#setoptions) method on the `navigation` prop to make configuring screen navigation options more intuitive than its `static navigationOptions` predecessor. It lets us **easily set screen options based on props, state or context without messing with params**. Instead of using static options, we can call it anytime to configure the screen. ```js navigation.setOptions({ @@ -68,7 +65,7 @@ navigation.setOptions({ }} /> ), -}) +}); ``` It can be used for things like adding a button in the header which needs to interact with the screen state. @@ -77,7 +74,7 @@ It can be used for things like adding a button in the header which needs to inte In React Navigation, we had basic theming support where you could specify whether to use a light or dark theme. It wasn't easy to customize the colors used by the built-in components such as header, tab bar etc. without extra code or repetition. -Now, we have revamped the [theme system](/docs/themes) for easier customization. It is possible to provide a theme object with your desired colors for background, accent color etc. and it will automatically change the colors of all navigators without any extra code. +Now, we have revamped the [theme system](/docs/5.x/themes) for easier customization. It is possible to provide a theme object with your desired colors for background, accent color etc. and it will automatically change the colors of all navigators without any extra code. ```js const MyTheme = { @@ -98,7 +95,7 @@ The new version has been written from the ground-up with TypeScript. We now get ![TypeScript in action](/assets/blog/announcing-5.0/typescript.gif) -We also have JSDoc for the built-in methods and options, so you get their description directly in your editor. See [our typescript documentation](/docs/typescript) for more details on how to use it. +We also have JSDoc for the built-in methods and options, so you get their description directly in your editor. See [our typescript documentation](/docs/5.x/typescript) for more details on how to use it. ### Redux DevTools integration @@ -117,7 +114,7 @@ Traditionally, we have written our navigators in JavaScript for greater customiz ### Native backends for Material top tab navigator -Similar to native stack, we also have [new backends](/docs/material-top-tab-navigator#pager) for Material top tab navigator based on [`react-native-viewpager`](https://github.com/react-native-community/react-native-viewpager) and [`ScrollView`](https://reactnative.dev/docs/scrollview). +Similar to native stack, we also have [new backends](/docs/5.x/material-top-tab-navigator#pager) for Material top tab navigator based on [`react-native-viewpager`](https://github.com/react-native-community/react-native-viewpager) and [`ScrollView`](https://reactnative.dev/docs/5.x/scrollview). ```js import ViewPagerAdapter from 'react-native-tab-view-viewpager-adapter'; @@ -146,9 +143,9 @@ import { ScrollPager } from 'react-native-tab-view'; In addition to these larger improvements, there are several smaller improvements to fit more use cases and make it easier to do certain tasks: - Revamped drawer navigator to make customizing the drawer sidebar content easier and more flexible. -- Simpler API for [`reset` action](/docs/navigation-prop#reset) where you can pass the new state directly instead of a chain of actions. -- More reliable [`focus` and `blur` events](/docs/navigation-lifecycle) to know when a screen's focus state changes. -- Integration with [`InteractionManager`](https://reactnative.dev/docs/interactionmanager) to delay tasks until animation is complete. +- Simpler API for [`reset` action](/docs/5.x/navigation-prop#reset) where you can pass the new state directly instead of a chain of actions. +- More reliable [`focus` and `blur` events](/docs/5.x/navigation-lifecycle) to know when a screen's focus state changes. +- Integration with [`InteractionManager`](https://reactnative.dev/docs/5.x/interactionmanager) to delay tasks until animation is complete. - Better safe area handling with [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context). ## Upgrading @@ -165,7 +162,7 @@ If you were using React Navigation 5 when it was alpha, you might need to check - If you have added `@react-navigation/core` to your dependencies, remove it, and replace all imports from `@react-navigation/core` with `@react-navigation/native` - If you were importing `NavigationNativeContainer`, change it to `NavigationContainer`, if you were using `NavigationContainer`, change it to `BaseNavigationContainer` -- If you had deep linking configured, the config format has changed for nesting. Check the [deep linking docs](/docs/deep-linking) for details. +- If you had deep linking configured, the config format has changed for nesting. Check the [deep linking docs](/docs/5.x/deep-linking) for details. ## Thanks to these wonderful people diff --git a/blog/2020-05-16-web-support.md b/blog/2020-05-16-web-support.md index 18a8e7e3772..0f5be8529cc 100644 --- a/blog/2020-05-16-web-support.md +++ b/blog/2020-05-16-web-support.md @@ -1,9 +1,6 @@ --- title: React Navigation on the Web -author: Satyajit Sahoo -author_url: https://twitter.com/satya164 -author_title: Core Team -author_image_url: https://avatars2.githubusercontent.com/u/1174278?s=200&v=4 +authors: satya tags: [announcement, web] --- @@ -25,6 +22,7 @@ The first step for web support is to have proper URL integration. This means: - Buttons that navigate to other screens in the app should be links, and users should be able use standard shortcuts with them @@ -36,13 +34,13 @@ Example: ```js const linking = { - prefixes: ['https://mychat.com', 'mychat://'], + prefixes: ['https://example.com', 'example://'], config: { screens: { Home: '', Profile: ':id/profile', Settings: ':id/blog', - } + }, }, }; @@ -96,6 +94,7 @@ Phones have small screens, so it's important to maximize the use of available sc It's especially important in case of the [stack navigator](/docs/stack-navigator) because not only we have the browser's address bar, but also the header at the top which is taking vertical space. Now we'll automatically adjust the styles of the stack navigator to get this behavior without you having to write any special code. @@ -104,6 +103,7 @@ It's especially important in case of the [stack navigator](/docs/stack-navigator Another way we can make maximum use of the available screen size is by making our UIs adapt to different screen sizes. For example, we may want to show a sidebar for navigation on large screens while switching to a drawer on smaller screens. You can now specify `drawerType` as `permanent` to show an always visible sidebar. See the [documentation for `drawerType`](/docs/drawer-navigator#drawertype) for example code on how to achieve it. diff --git a/blog/2020-05-19-joining-github-sponsors.md b/blog/2020-05-19-joining-github-sponsors.md index 38b9746fd89..c98d41a52e4 100644 --- a/blog/2020-05-19-joining-github-sponsors.md +++ b/blog/2020-05-19-joining-github-sponsors.md @@ -1,11 +1,7 @@ --- title: React Navigation joins GitHub Sponsors -author: Brent Vatne -author_url: https://twitter.com/notbrent -author_title: Assistant to the Regional Core Team Manager -author_image_url: https://avatars3.githubusercontent.com/u/90494?s=200&v=4 description: We joined GitHub Sponsors - https://github.com/sponsors/react-navigation! - +authors: brent tags: [announcement, web] --- diff --git a/blog/2021-03-12-react-navigation-6.0-next.md b/blog/2021-03-12-react-navigation-6.0-next.md index 6ac0e8219bb..10c722be267 100644 --- a/blog/2021-03-12-react-navigation-6.0-next.md +++ b/blog/2021-03-12-react-navigation-6.0-next.md @@ -1,29 +1,26 @@ --- title: On the way to React Navigation 6.0 -author: Satyajit Sahoo -author_url: https://twitter.com/satya164 -author_title: Core Team -author_image_url: https://avatars2.githubusercontent.com/u/1174278?s=200&v=4 +authors: satya tags: [release, announcement] --- -We're excited to announce that we finally have a prerelease version of React Navigation 6. We released React Navigation 5 more than half a year ago, and it brought a lot of new possibilities with the new dynamic API, and was met with overwhelmingly positive reaction. Since then, we've been working on incremental improvements and refinements to the library and thinking about how to make it even better. This brings us to the next major version of React Navigation. +We're excited to announce that we finally have a prerelease version of React Navigation 6. We released React Navigation 5 more than half a year ago, and it brought a lot of new possibilities with the new dynamic API, and was met with overwhelmingly positive reaction. Since then, we've been working on incremental improvements and refinements to the library and thinking about how to make it even better. This brings us to the next major version of React Navigation. While React Navigation 5 was complete overhaul to the API of React Navigation, React Navigation 6 keeps the same API, with some breaking changes to make things more consistent and provide more flexibility. We also tried to address some common pain points and confusions that users had. -We'll share few highlights of the release in this blog post. If you're looking for a detailed upgrade guide, you can find it [here](/docs/upgrading-from-5.x). +We'll share few highlights of the release in this blog post. If you're looking for a detailed upgrade guide, you can find it [here](/docs/6.x/upgrading-from-5.x). ## Highlights - Params are now overwritten on navigation instead of merging (with option to merge them) -- Modals in [stack](/docs/stack-navigator) now use the presentation style on iOS by default, and there's a new slide animation for modals on Android -- [Drawer](/docs/drawer-navigator) now uses a slide animation by default on iOS -- Headers are now shown by default in [drawer](/docs/drawer-navigator) and [bottom tab](/docs/bottom-tab-navigator) screens, so you don't need extra stack navigators -- We got rid of `tabBarOptions`, `drawerContentOptions` etc. and moved those to [`options` prop on screen](/docs/screen-options) to make it possible to configure them per screen -- [Material Top Tabs](/docs/material-top-tab-navigator) now use a `ViewPager` based implementation, which means it'll provide a native experience -- We now have a [UI elements library](/docs/elements) which contains various components we use in React Navigation +- Modals in [stack](/docs/6.x/stack-navigator) now use the presentation style on iOS by default, and there's a new slide animation for modals on Android +- [Drawer](/docs/6.x/drawer-navigator) now uses a slide animation by default on iOS +- Headers are now shown by default in [drawer](/docs/6.x/drawer-navigator) and [bottom tab](/docs/6.x/bottom-tab-navigator) screens, so you don't need extra stack navigators +- We got rid of `tabBarOptions`, `drawerContentOptions` etc. and moved those to [`options` prop on screen](/docs/6.x/screen-options) to make it possible to configure them per screen +- [Material Top Tabs](/docs/6.x/material-top-tab-navigator) now use a `ViewPager` based implementation, which means it'll provide a native experience +- We now have a [UI elements library](/docs/6.x/elements) which contains various components we use in React Navigation ## Try it out @@ -35,11 +32,11 @@ npm install @react-navigation/native@^6.x @react-navigation/stack@^6.x ## What's next? -We're planning to update our documentation to recommend [native-stack](/docs/native-stack-navigator) as the default. This will provide the best performance for people who don't need a lot of customization, while still having the option to use the JavaScript based implementation if they need it. +We're planning to update our documentation to recommend [native-stack](/docs/6.x/native-stack-navigator) as the default. This will provide the best performance for people who don't need a lot of customization, while still having the option to use the JavaScript based implementation if they need it. ## Sponsor us -If React Navigation helps you to deliver value to your customers, it'd awesome a lot if you could sponsor us. Sponsorships will help us to move more quickly towards our goal of building the best cross-platform navigation library and continue to provide timely support for bug reports in our GitHub issues. +If React Navigation helps you to deliver value to your customers, it'd mean a lot if you could sponsor us. Sponsorships will help us to move more quickly towards our goal of building the best cross-platform navigation library and continue to provide timely support for bug reports in our GitHub issues. 👉 [Visit our GitHub Sponsors page](https://github.com/sponsors/react-navigation) 👈 diff --git a/blog/2021-08-14-react-navigation-6.0.md b/blog/2021-08-14-react-navigation-6.0.md index 0590b01cc19..22bee1f83cd 100644 --- a/blog/2021-08-14-react-navigation-6.0.md +++ b/blog/2021-08-14-react-navigation-6.0.md @@ -1,13 +1,10 @@ --- title: React Navigation 6.0 -author: Satyajit Sahoo -author_url: https://twitter.com/satya164 -author_title: Core Team -author_image_url: https://avatars2.githubusercontent.com/u/1174278?s=200&v=4 +authors: satya tags: [release, announcement] --- -The documentation is now live at [reactnavigation.org](https://reactnavigation.org), and v5 lives [here](/docs/5.x/getting-started). +The documentation is now live at [reactnavigation.org](https://reactnavigation.org/6.x/getting-started), and v5 lives [here](/docs/5.x/getting-started). React Navigation 6 keeps mostly the same core API as React Navigation 5, and you can think of it as further polishing what was in React Navigation 5. Let's talk about the highlights of this release in this blog post. @@ -49,11 +46,11 @@ In React Navigation 6, many of these props are now screen options. The most sign > ``` -See [deprecations](/docs/upgrading-from-5.x#deprecations) for more details. +See [deprecations](/docs/6.x/upgrading-from-5.x#deprecations) for more details. ### Elements library -We extracted some of the components and helpers used across various navigators in React Navigation and published them under a new package called [`@react-navigation/elements`](/docs/elements). It can be useful if you're building your own navigator, or just want to reuse some of the components in your app. +We extracted some of the components and helpers used across various navigators in React Navigation and published them under a new package called [`@react-navigation/elements`](/docs/6.x/elements). It can be useful if you're building your own navigator, or just want to reuse some of the components in your app. Currently only a small set of components are exported, but there are more to come. @@ -61,15 +58,15 @@ Currently only a small set of components are exported, but there are more to com We simplified many APIs with React Navigation 6 to address common use cases. For example: -- Single option to use a modal presentation style and transparent modal with [`presentation`](/docs/stack-navigator#presentation) +- Single option to use a modal presentation style and transparent modal with [`presentation`](/docs/6.x/stack-navigator#presentation) - Custom header doesn't require setting `headerMode="screen"` manually anymore - The `useHeaderHeight` hook now ignores hidden headers and returns the height of the closest visible header in parent -- New option to set a [custom background](/docs/bottom-tab-navigator#tabbarbackground) (such as `BlurView`) for tab bar without having to use a custom tab bar -- New API to manage ref on the container [(`createNavigationContainerRef` and `useNavigationContainerRef`)](/docs/navigating-without-navigation-prop) +- New option to set a [custom background](/docs/6.x/bottom-tab-navigator#tabbarbackground) (such as `BlurView`) for tab bar without having to use a custom tab bar +- New API to manage ref on the container [(`createNavigationContainerRef` and `useNavigationContainerRef`)](/docs/6.x/navigating-without-navigation-prop) ### New `Group` component for organization -The [`Group`](/docs/group) component helps you organize screens inside your navigators and share common `screenOptions` between the `Group`s. Passing `screenOptions` to a group configures all the screens inside that group to use these options. You can override `Group` options by passing `options` to each Screen component, similar to how you can with `screenOptions` on Navigator. You can also nest `Group` components inside other `Group` components. They are lightweight and don’t render anything - like fragments, so they won’t affect performance. +The [`Group`](/docs/6.x/group) component helps you organize screens inside your navigators and share common `screenOptions` between the `Group`s. Passing `screenOptions` to a group configures all the screens inside that group to use these options. You can override `Group` options by passing `options` to each Screen component, similar to how you can with `screenOptions` on Navigator. You can also nest `Group` components inside other `Group` components. They are lightweight and don’t render anything - like fragments, so they won’t affect performance. In this code snippet, you can see that we group regular screens under one group and modal screens under another group: @@ -82,10 +79,7 @@ function App() { - + ); @@ -96,13 +90,13 @@ function App() { Developers often want to show a header for screens inside of drawers and bottom tabs. To do this, we had to nest a stack navigator which provides a header, even if it was a navigator with just one screen. So we now show headers by default in screens of drawer and bottom tabs. No nesting necessary. -We also export a [`Header`](/docs/elements#header) component in the new elements library to use anywhere in your components. +We also export a [`Header`](/docs/6.x/elements#header) component in the new elements library to use anywhere in your components. ### Native navigation by default Historically, React Navigation has been mostly JS based, with animations and gestures written in JavaScript on top of `react-native-gesture-handler`, and `react-native-reanimated` or `Animated`. While this works for a lot of apps, apps with heavy screens can suffer from poor performance, and some native features are difficult to re-create exactly (such as the large header on iOS). So, we wanted to address this by using native primitives for navigation. -With React Navigation 5, we introduced [`@react-navigation/native-stack`](/docs/native-stack-navigator) package powered by [`react-native-screens`](https://github.com/software-mansion/react-native-screens), as well as a native backend for [`@react-navigation/material-top-tabs`](/docs/material-top-tab-navigator) powered by [`react-native-pager-view`](https://github.com/callstack/react-native-pager-view). +With React Navigation 5, we introduced [`@react-navigation/native-stack`](/docs/6.x/native-stack-navigator) package powered by [`react-native-screens`](https://github.com/software-mansion/react-native-screens), as well as a native backend for [`@react-navigation/material-top-tabs`](/docs/6.x/material-top-tab-navigator) powered by [`react-native-pager-view`](https://github.com/callstack/react-native-pager-view). In React Navigation 6, we made `@react-navigation/native-stack` the default choice for setting up Stack navigation. It uses `UINavigationController` on iOS and Fragments on Android to implement navigation natively. We also focused a lot on aligning the API of `@react-navigation/native-stack` with `@react-navigation/stack` so that it’ll be easier to switch between them. @@ -128,7 +122,7 @@ declare global { } ``` -You can read [more about it in our TypeScript docs](/docs/typescript#specifying-default-types-for-usenavigation-link-ref-etc). +You can read [more about it in our TypeScript docs](/docs/6.x/typescript#specifying-default-types-for-usenavigation-link-ref-etc). ### Flipper plugin @@ -142,13 +136,13 @@ One advantage of the Flipper plugin over Redux Devtools Extension is that it doe ![React Navigation Linking](/assets/devtools/flipper-plugin-linking.png) -See the [guide for setting it up](/docs/devtools#useflipper) for more details. Note that Flipper support in Expo managed apps requires a [Custom Development Client](https://docs.expo.dev/clients/introduction/) and it does not work in Expo Go at the time of writing. +See the [guide for setting it up](/docs/6.x/devtools#useflipper) for more details. Note that Flipper support in Expo managed apps requires a [Custom Development Client](https://docs.expo.dev/clients/introduction/) and it does not work in Expo Go at the time of writing. ## Upgrading While React Navigation 6 doesn't introduce changes of the same magnitude as React Navigation 5, there are still some breaking changes. It is possible, however, to mix packages from React Navigation 5 and React Navigation 6 (with a few caveats) so that you can gradually upgrade packages. -See the [upgrade guide](/docs/upgrading-from-5.x) for a full list of changes and more details. +See the [upgrade guide](/docs/6.x/upgrading-from-5.x) for a full list of changes and more details. ## Sponsor us diff --git a/blog/2024-03-25-introducing-static-api.md b/blog/2024-03-25-introducing-static-api.md new file mode 100644 index 00000000000..014d7567e8b --- /dev/null +++ b/blog/2024-03-25-introducing-static-api.md @@ -0,0 +1,193 @@ +--- +title: Introducing Static API +authors: satya +tags: [announcement] +--- + +Two of the major pain points of using React Navigation have been TypeScript and deep linking configuration. Due to the dynamic nature of the navigators, it is necessary to manually maintain the TypeScript and deep linking configuration to match the navigation structure. This can be error-prone and time-consuming. + +To solve this, we’re adding a new static API to React Navigation 7. It’s not the same API as React Navigation 4, but it’s similar. Many apps don’t need the features that the dynamic API provides, and they can use the simpler static API instead to simplify their codebase. + + + +:::note + +The static API it’s an additional optional API. The dynamic API isn’t going away and will remain a first-class API of React Navigation. In fact, the static API is written entirely on top of the dynamic API. + +::: + +## Overview + +With the dynamic API, first, we import a function such as `createStackNavigator`, and then we use it to define screens - each screen has a `name` and a `component`: + +```js +const Stack = createStackNavigator(); + +function RootStack() { + return ( + + + + + + ); +} +``` + +The static API follows the same principles. Here we are specifying screens in a property called `screens`, the name of the screen is a key in the configuration object and the value contains the component to render: + +```js +const RootStack = createStackNavigator({ + screens: { + Home: { + screen: Home, + }, + Profile: { + screen: Profile, + }, + Settings: { + screen: Settings, + }, + }, +}); +``` + +Then after writing our navigation config, we call `createStaticNavigation` and render the returned component: + +```js +const Navigation = createStaticNavigation(RootStack); + +function App() { + return ; +} +``` + +This component is similar to `NavigationContainer` and accepts most of the props accepted by `NavigationContainer`. So this is the place where you can do things like track for screen changes, persist navigation state etc. + +See [Static API reference](/docs/static-configuration?config=static) for more details. + +## TypeScript + +The typescript types can be inferred from the root navigator with the `StaticParamList` type and then they will be available anywhere you use `useNavigation`. + +The only additional code we need to add is the code for the `RootParamList` interface: + +```js +declare global { + namespace ReactNavigation { + // highlight-next-line + interface RootParamList extends StaticParamList {} + } +} +``` + +See [Type checking with TypeScript](/docs/typescript?config=static) for more details. + +## Deep Linking + +There are 2 improvements to deep linking API: + +1. The linking configuration is now a part of the navigation configuration and can be specified next to the screen. This makes it easier to keep the linking configuration in sync with the navigation structure: + + ```js + const RootStack = createStackNavigator({ + screens: { + Profile: { + screen: ProfileScreen, + // highlight-start + linking: { + path: 'user/:id', + }, + // highlight-end + }, + Settings: { + screen: SettingsScreen, + // highlight-start + linking: { + path: 'settings', + }, + // highlight-end + }, + }, + }); + ``` + +2. Paths can be generated automatically from the screen names by specifying `enabled: 'auto'`. This avoids the need to specify a path for every screen manually: + + ```js + const RootStack = createStackNavigator({ + screens: { + // Generated path: '' + Home: { + screen: HomeScreen, + }, + // Generated path: 'profile' + Profile: { + screen: ProfileScreen, + }, + // Generated path: 'news-feed' + NewsFeed: { + screen: NewsFeedScreen, + }, + }, + }); + + const Navigation = createStaticNavigation(RootStack); + + function App() { + return ( + + + + ); + } + ``` + +See [Configuring links](/docs/configuring-links?config=static) for more details. + +## Authentication Flow + +One of the nice things about the dynamic APIs is the declarative authentication flow. You declaratively define which screens are available for logged-in and guest users, and React Navigation would handle showing the appropriate screens automatically. To keep a similar experience, we added some dynamism to the new static API with the if property: + +```js +const RootStack = createNativeStackNavigator({ + screens: { + Home: { + if: useIsSignedIn, + screen: HomeScreen, + }, + SignIn: { + if: useIsSignedOut, + screen: SignInScreen, + }, + }, +}); +``` + +The if property takes a hook that returns a boolean. When the hook returns true, the screen will be included in the navigation tree, and when it returns false, it won’t be included. + +See [Authentication flows](/docs/auth-flow?config=static) for more details. + +## Interoperability + +Since we have 2 different APIs in the same library, it's important that they both work together. This way you could start an app with the static API, but if you need flexibility for a specific navigator, you could use the dynamic API for that part. Or you may want to migrate to the static API to reduce the complexity, and with the interoperability, you can do that incrementally. + +See [Combining static and dynamic APIs](/docs/combine-static-with-dynamic) for more details. + +## Help us test + +The Static API is currently available in React Navigation 7 alpha. You can try it out by installing the `next` tag of the React Navigation packages: + +```sh +yarn add @react-navigation/native@next @react-navigation/native-stack@next +``` + +In addition to the static API, React Navigation 7 also includes a lot of other improvements and new features. Make sure to go through the [upgrade guide](/docs/upgrading-from-6.x) to see all the changes. + +We would love to get feedback from the community on how it works for you and catch any issues before the stable release. If you have any feedback or suggestions, please let us know on our [GitHub Discussions forum](https://github.com/react-navigation/react-navigation/discussions). If you find any issues, please report them on our [GitHub issues](https://github.com/react-navigation/react-navigation/issues). diff --git a/blog/2024-06-27-react-navigation-7.0-rc.md b/blog/2024-06-27-react-navigation-7.0-rc.md new file mode 100644 index 00000000000..16d92ef6314 --- /dev/null +++ b/blog/2024-06-27-react-navigation-7.0-rc.md @@ -0,0 +1,103 @@ +--- +title: React Navigation 7.0 Release Candidate +authors: satya +tags: [announcement] +--- + +We're excited to announce the release candidate of React Navigation 7.0. + +This release includes a new static API that simplifies the configuration of navigators and improves TypeScript and deep linking support. As well as various other improvements and new features. + + + +You can read the full list of changes in the [upgrade guide](/docs/upgrading-from-6.x). Here are some highlights: + +## Highlights + +### Static API + +The new static API is an optional API that simplifies the configuration of navigators and makes it easier to work with TypeScript and deep linking. + +It follows the same principles as the dynamic API, but instead of defining screens using functions, you define them using a configuration object, similar to React Navigation 4: + +```js +const Stack = createStackNavigator({ + screens: { + Home: { + screen: Home, + }, + Profile: { + screen: Profile, + }, + Settings: { + screen: Settings, + }, + }, +}); +``` + +For more details and examples, check out the [introduction to the static API](/blog/2024-03-25-introducing-static-api.md) blog post. + +### Preloading screens + +Many navigators now support preloading screens prior to navigating to them. This can be useful to improve the perceived performance of the app by preloading the screens that the user is likely to navigate to next. Preloading a screen will render it off-screen and execute its side-effects such as data fetching. + +To preload a screen, you can use the `preload` method on the navigation object: + +```js +navigation.preload('Details', { id: 42 }); +``` + +### Sidebar support in Bottom Tab Navigator + +The Bottom Tab Navigator now supports showing tabs on the side by specifying `tabBarPosition` option as `'left'` or `'right'`. This will make it easier to build responsive UIs for where you want to show tabs on the bottom on smaller screens and switch to a sidebar on larger screens. + +![Sidebar support in Bottom Tab Navigator](/assets/blog/7.x/bottom-tabs-sidebar.png) + +### Animation support in Bottom Tab Navigator + +The Bottom Tab Navigator now supports animations when switching between tabs. You can customize the animation using the `animation` option. + + + +### `react-native-drawer-layout` package + +The drawer implementation used in `@react-navigation/drawer` is now available as a standalone package called `react-native-drawer-layout`. This makes it easier to use the drawer implementation even if you're not using React Navigation, or if you want to use it without a navigator. + +You can install it with: + +```bash npm2yarn +npm install react-native-drawer-layout@next +``` + +See [`react-native-drawer-layout`](/docs/drawer-layout) for usage. + +## Try it out + +If you'd like to try it out, add `@next` to the package, you're installing. For example: + +```sh npm2yarn +npm install @react-navigation/native@next @react-navigation/bottom-tabs@next +``` + +This is the best time to try it out and provide feedback before the final release. If you encounter any issues or have any feedback or suggestions, please let us know on [GitHub issues](https://github.com/react-navigation/react-navigation/issues) or our [GitHub Discussions forum](https://github.com/react-navigation/react-navigation/discussions). + +## Special thanks + +I'd like to extend a big thank you to all the contributors who helped with this release. Your contributions are what make React Navigation great. + +I want to give a special shoutout to [Michał Osadnik](https://x.com/mosdnk) for working through many of the features and improvements in this release as well as providing much-needed motivation. + +Many thanks to [Patrycja Kalińska](https://x.com/patkalinska) from [Software Mansion](https://swmansion.com/) for helping with the documentation. + +I'd also like to thank [Tymoteusz Boba](https://x.com/tboba_) and [Kacper Kafara](https://x.com/kafara_kacper) from the [React Native Screens](https://github.com/software-mansion/react-native-screens). React Navigation wouldn't be where it is today without React Native Screens. + +Last but not least, without dedicated time from [Callstack](https://callstack.com/), it would be impossible to maintain and improve React Navigation. + +## Sponsor us + +If React Navigation helps you to deliver value to your customers, it'd mean a lot if you could sponsor us. Sponsorships will help us to move more quickly towards our goal of building the best cross-platform navigation library and continue to provide timely support for bug reports in our GitHub issues. + +👉 [Visit our GitHub Sponsors page](https://github.com/sponsors/react-navigation) 👈 diff --git a/blog/2024-11-06-react-navigation-7.0.md b/blog/2024-11-06-react-navigation-7.0.md new file mode 100644 index 00000000000..cb8b9193adf --- /dev/null +++ b/blog/2024-11-06-react-navigation-7.0.md @@ -0,0 +1,50 @@ +--- +title: React Navigation 7.0 +authors: satya +tags: [announcement] +--- + +The documentation is now live at [reactnavigation.org](/docs/getting-started), and v6 lives [here](/docs/6.x/getting-started). + +React Navigation 7 aims to improve the developer experience with a new static API as well as bring many new features and improvements. + + + +## Highlights + +- [**Static API**](/docs/hello-react-navigation?config=static): The new static API is an optional API that simplifies the configuration of navigators and makes it easier to work with TypeScript and deep linking. +- [**Preloading screens**](/docs/navigation-object/#preload): Many navigators now support preloading screens prior to navigating to them. This can be useful to improve the perceived performance of the app by preloading the screens that the user is likely to navigate to next. +- [**Layout props**](/docs/navigator#layout): Navigators and screens now support `layout` props to augment the navigators with additional UI and behavior. +- [**Improved Web integration**](/docs/web-support): The built in navigators now have better web-support such rendering anchor tags for more elements. The `Link` and `useLinkProps` APIs have also been revamped to use screen names instead of paths. +- [**Searchbar support in all navigators with header**](/docs/elements#headersearchbaroptions): All navigators with header now support a searchbar in the header. You can customize the searchbar using the `headerSearchBarOptions` option. +- [**New `useLogger` devtool to replace flipper plugin**](/docs/devtools#uselogger): The `use logger` hook can show navigation actions and state in the console for debugging. +- [**Sidebar support in Bottom Tab Navigator**](/docs/bottom-tab-navigator#tabbarposition): The Bottom Tab Navigator now supports showing tabs on the side by specifying `tabBarPosition` option as `'left'` or `'right'`. +- [**Animation support in Bottom Tab Navigator**](/docs/bottom-tab-navigator#animations): The Bottom Tab Navigator now supports animations when switching between tabs. You can customize the animation using the `animation` option. +- [**`react-native-drawer-layout` package**](/docs/drawer-layout): The drawer implementation used in `@react-navigation/drawer` is now available as a standalone package called `react-native-drawer-layout`. +- Many other improvements and bug fixes. + +See our [blog post for the release candidate](/blog/2024-06-27-react-navigation-7.0-rc.md) for a more detailed list of highlights. + +To see the full list of changes, check out the [upgrade guide](/docs/upgrading-from-6.x). + +## Upgrading + +In addition to the new features and improvements, React Navigation 7 also includes a number of breaking changes. We've put together a [detailed upgrade guide](/docs/upgrading-from-6.x) to help you migrate your app to the latest version. + +## Special thanks + +I'd like to extend a big thank you to all the contributors who helped with this release. Your contributions are what make React Navigation great. + +I want to give a special shoutout to [Michał Osadnik](https://x.com/mosdnk) for working through many of the features and improvements in this release as well as providing much-needed motivation. + +Many thanks to [Patrycja Kalińska](https://x.com/patkalinska) and [Ania Cichocka](https://github.com/AnCichocka) from [Software Mansion](https://swmansion.com/) for helping with the documentation. + +I'd also like to thank [Tymoteusz Boba](https://x.com/tboba_), [Maciej Stosio](https://x.com/maciekstosio) and [Kacper Kafara](https://x.com/kafara_kacper) from the [React Native Screens](https://github.com/software-mansion/react-native-screens). React Navigation wouldn't be where it is today without React Native Screens. + +Last but not least, without dedicated time from [Callstack](https://callstack.com/), it would be impossible to maintain and improve React Navigation. + +## Sponsor us + +If React Navigation helps you to deliver value to your customers, it'd mean a lot if you could sponsor us. Sponsorships will help us to move more quickly towards our goal of building the best cross-platform navigation library and continue to provide timely support for bug reports in our GitHub issues. + +👉 [Visit our GitHub Sponsors page](https://github.com/sponsors/react-navigation) 👈 diff --git a/blog/2025-01-29-using-react-navigation-with-native-bottom-tabs.md b/blog/2025-01-29-using-react-navigation-with-native-bottom-tabs.md new file mode 100644 index 00000000000..070c85e91ca --- /dev/null +++ b/blog/2025-01-29-using-react-navigation-with-native-bottom-tabs.md @@ -0,0 +1,143 @@ +--- +title: Bottom Tabs meet Native +authors: oskar +tags: [tutorial] +--- + +This is a guest post by Oskar Kwaśniewski, creator of `react-native-bottom-tabs`, a library exposing native tab primitives that integrates with React Navigation. If you like this guide, check out the `react-native-bottom-tabs` [documentation](https://callstackincubator.github.io/react-native-bottom-tabs/) for more! + +This blog post will explain the differences between the JavaScript Bottom Tabs navigator and provide a step-by-step guide for integrating React Navigation with the Native Bottom Tabs Navigator. + + + +## Introduction + +React Navigation comes with many navigators out of the box. We've got Stack, Native Stack, Drawer, and Bottom Tabs, but there were no Native Bottom Tabs until today! + +Both Android and iOS have predefined native components for handling bottom navigation. For iOS it's SwiftUI's `TabView` component and for Android it's `BottomNavigationView`. The native approach gives us an appropriate appearance no matter the platform we are running on. Native Bottom Tabs is a navigator that wraps the native `TabView` and `BottomNavigationView` - so you can use them with React Navigation. + +Let's dive into the details of this navigator. + +Note: Native Bottom Tabs navigator is a standalone package, not released as part of React Navigation. + +## Overview + +You still might be wondering the difference between `@react-navigation/bottom-tabs` and `react-native-bottom-tabs`. + +Let's go over the main differences: + +- JS Bottom Tabs recreate the UI as closely as possible while **Native Bottom Tabs use native platform primitives** to create the tabs. This makes your tab navigation indistinguishable from Native Apps as they use the same components under the hood. +- Native Bottom Tabs **adapt to interfaces of a given platform** for example: tvOS and visionOS show tabs as a sidebar on iPadOS they appear at the top, while JS Bottom Tabs are always at the bottom. + +### Distinctive features of Native Bottom Tabs + +#### Multi-platform support + +Native Bottom tabs adapt to the appearance of multiple platforms. You always get natively-looking tabs! + +Native Tabs on iOS + +Bottom Navigation on iOS, with native blur. + +Native Tabs on Android + +Bottom Navigation on Android, following Material Design 3 styling. + +Native Tabs on iPadOS + +On iPadOS tabs appear at the top with a button allowing you to go into the sidebar mode. + +Native Tabs on visionOS + +On visionOS, the tabs appear on the left side, attached outside of the window. + +Native Tabs on tvOS + +On tvOS tabs appear on the top, making navigation with the TV remote a breeze. + +Native Tabs on macOS + +On macOS, tabs appear on the left side, following the design of the Finder app. + +#### Automatic scroll to the top + +iOS TabView automatically scrolls to the top when ScrollView is embedded inside of it. + +#### Automatic PiP avoidance + +The operating system recognizes navigation in your app making the Picture in Picture window automatically avoid bottom navigation. + +#### Platform-specific styling + +For iOS bottom navigation has a built-in blur making your app stand out. For Android, you can choose between Material 2 and Material 3 and leverage Material You system styling. + +#### Sidebar + +TabView can turn in to a side bar on tvOS, iPadOS and macOS. The `sidebarAdaptable` prop controls this. + +## Getting started + +To get started follow the installation instructions in the `react-native-bottom-tabs` [documentation](https://callstackincubator.github.io/react-native-bottom-tabs/docs/getting-started/quick-start.html). + +Native Bottom Tabs Navigation resembles JavaScript Tabs API as closely as possible. Making your migration straightforward. + +As mentioned before, Native Bottom Tabs use native primitives to create the tabs. This approach also has some downsides: Native components enforce certain constraints that we need to follow. + +There are a few differences between the APIs worth noting. One of the biggest is how native tabs handle images. In JavaScript tabs, you can render React components as icons, in native tabs unfortunately it’s not possible. Instead, you have to provide one of the following options: + +```tsx + require('person.png'), + // SVG is also supported + tabBarIcon: () => require('person.svg'), + // or + tabBarIcon: () => ({ sfSymbol: 'person' }), + // You can also pass a URL + tabBarIcon: () => ({ uri: 'https://example.com/icon.png' }), + }} +/> +``` + +So if you need full customizability like providing custom tab bar icons, and advanced styling that goes beyond what’s possible with native components you should use JavaScript bottom tabs. + +On top of that, the scope of this library doesn’t include the web so for that platform, you should use JavaScript Tabs. + +To get started you can import `createNativeBottomTabNavigator` from `@bottom-tabs/react-navigation` and use it the same way as JavaScript Bottom Tabs. + +### Example usage + +```tsx +import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation'; + +const Tabs = createNativeBottomTabNavigator(); + +function NativeBottomTabs() { + return ( + + ({ uri: 'https://example.com/icon.png' }), + }} + /> + ({ uri: 'https://example.com/icon.png' }), + }} + /> + + ); +} +``` + +Native Tabs + +You can check out the project [here](https://github.com/callstackincubator/react-native-bottom-tabs). + +Thanks for reading! diff --git a/blog/authors.yml b/blog/authors.yml new file mode 100644 index 00000000000..a184d71c1bb --- /dev/null +++ b/blog/authors.yml @@ -0,0 +1,49 @@ +satya: + name: Satyajit Sahoo + url: https://satya164.page + image_url: https://avatars2.githubusercontent.com/u/1174278 + title: Core Team + socials: + x: satya164 + github: satya164 + +michal: + name: Michał Osadnik + image_url: https://avatars3.githubusercontent.com/u/25709300 + title: Core Team + socials: + x: mosdnk + github: osdnk + +brent: + name: Brent Vatne + url: https://bsky.app/profile/notbrent.bsky.social + image_url: https://avatars0.githubusercontent.com/u/90494 + title: Core Team + socials: + x: notbrent + github: brentvatne + +artur: + name: Artur Yorsh + image_url: https://pbs.twimg.com/profile_images/1668375708962357248/ntCXYm7e_400x400.jpg + title: UI Kitten Team + socials: + x: artyorsh + github: artyorsh + +dawid: + name: Dawid Urbaniak + image_url: https://avatars0.githubusercontent.com/u/18584155 + title: React Native Paper Team + socials: + x: trensik + github: Trancever + +oskar: + name: Oskar Kwaśniewski + image_url: https://avatars.githubusercontent.com/u/52801365 + title: Callstack + socials: + x: o_kwasniewski + github: okwasniewsk diff --git a/crowdin.yaml b/crowdin.yaml index 05b3c635dfb..8ae89d87510 100644 --- a/crowdin.yaml +++ b/crowdin.yaml @@ -1,20 +1,17 @@ project_identifier_env: CROWDIN_DOCUSAURUS_PROJECT_ID api_key_env: CROWDIN_DOCUSAURUS_API_KEY -base_path: "./" +base_path: './' preserve_hierarchy: true files: - - - source: '/docs/*.md' + - source: '/docs/*.md' translation: '/translated_docs/%locale%/%original_file_name%' languages_mapping: &anchor locale: 'zh-CN': 'zh-Hans' - - - source: '/i18n/en.json' + - source: '/i18n/en.json' translation: '/i18n/%locale%.json' languages_mapping: *anchor - - - source: '/versioned_docs/**/*.md' + - source: '/versioned_docs/**/*.md' translation: '/translated_docs/%locale%/**/%original_file_name%' languages_mapping: *anchor diff --git a/docusaurus.config.js b/docusaurus.config.js index 300187421b8..dd90010233c 100755 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -1,8 +1,10 @@ -import path from 'path'; import remarkNpm2Yarn from '@docusaurus/remark-plugin-npm2yarn'; import rehypeCodeblockMeta from './src/plugins/rehype-codeblock-meta.mjs'; export default { + future: { + experimental_faster: true, + }, title: 'React Navigation', tagline: 'Routing and navigation for your React Native apps', url: 'https://reactnavigation.org/', @@ -10,11 +12,27 @@ export default { favicon: 'img/favicon.ico', organizationName: 'react-navigation', projectName: 'react-navigation.github.io', - scripts: ['/js/snack-helpers.js'], + onBrokenAnchors: 'throw', + onBrokenMarkdownLinks: 'throw', + scripts: ['/js/snack-helpers.js', '/js/toc-fixes.js'], themeConfig: { + colorMode: { + defaultMode: 'light', + disableSwitch: false, + respectPrefersColorScheme: true, + }, prism: { theme: require('prism-react-renderer').themes.github, darkTheme: require('prism-react-renderer').themes.dracula, + magicComments: [ + { + className: 'theme-code-block-highlighted-line', + line: 'highlight-next-line', + block: { start: 'highlight-start', end: 'highlight-end' }, + }, + { className: 'code-block-diff-add-line', line: 'diff-add' }, + { className: 'code-block-diff-remove-line', line: 'diff-remove' }, + ], }, algolia: { appId: 'QCWXRU195A', @@ -29,110 +47,87 @@ export default { src: 'img/spiro.svg', }, items: [ - { to: 'docs/getting-started', label: 'Docs', position: 'left' }, - { to: 'blog', label: 'Blog', position: 'left' }, { - href: 'https://github.com/react-navigation', - label: 'GitHub', + type: 'docsVersionDropdown', position: 'right', }, { - to: 'help', - label: 'Help', + to: 'docs/getting-started', + activeBasePath: 'docs', + label: 'Docs', + position: 'right', }, { - type: 'docsVersionDropdown', - position: 'left', + to: 'blog', + label: 'Blog', + position: 'right', }, - ], - }, - footer: { - links: [ { - title: 'Docs', + type: 'dropdown', + label: 'Help', items: [ { - label: 'Getting Started', - to: 'docs/getting-started', + label: 'Issues', + href: 'https://github.com/react-navigation/react-navigation/issues', }, { - label: 'Building your own Navigator', - to: 'docs/custom-navigators', + label: 'Feature Requests', + href: 'https://react-navigation.canny.io/feature-requests', }, { - label: 'Contributing', - to: 'docs/contributing', + label: 'Reactiflux Discord', + href: 'https://www.reactiflux.com', }, - ], - }, - { - title: 'Support', - items: [ { - label: 'Chat in our Discord channel', - href: 'https://discord.gg/reactiflux', - }, - { - label: 'Get help on Stack Overflow', + label: 'Stack Overflow', href: 'https://stackoverflow.com/questions/tagged/react-navigation', }, { - label: 'Request a feature on Canny', - href: 'https://react-navigation.canny.io/feature-requests', + label: 'Troubleshooting', + to: 'docs/troubleshooting', }, { - label: 'Report a bug on GitHub', - href: 'https://github.com/react-navigation/react-navigation/issues/new/choose', + label: 'Contributing', + to: 'docs/contributing', }, ], + position: 'right', }, { - title: 'Social', - items: [ - { - label: 'Blog', - to: 'blog', - }, - { - label: 'GitHub', - href: 'https://github.com/react-navigation/react-navigation', - }, - { - label: 'Twitter', - href: 'https://twitter.com/reactnavigation', - }, - ], + href: 'https://x.com/reactnavigation', + className: 'navbar-social-link navbar-social-link-x', + 'aria-label': 'X', + position: 'right', }, { - title: 'Built with', - items: [ - { - label: 'Docusaurus', - to: 'https://docusaurus.io/', - }, - { - label: 'GitHub Pages', - href: 'https://pages.github.com/', - }, - { - label: 'Netlify', - href: 'https://www.netlify.com/', - }, - ], + href: 'https://github.com/react-navigation/react-navigation', + className: 'navbar-social-link navbar-social-link-github', + 'aria-label': 'GitHub', + position: 'right', }, ], }, }, plugins: [ + './src/plugins/disable-fully-specified.mjs', + './src/plugins/react-navigation-versions.mjs', [ '@docusaurus/plugin-client-redirects', { redirects: [ { from: '/next', - to: '/docs/7.x/getting-started', + to: '/docs/migration-guides', }, ], + createRedirects(existingPath) { + if ( + existingPath.includes('/docs/') && + !/\/docs\/\d+\.x/.test(existingPath) + ) { + return existingPath.replace('/docs/', '/docs/7.x/'); + } + }, }, ], ], @@ -144,11 +139,15 @@ export default { editUrl: 'https://github.com/react-navigation/react-navigation.github.io/edit/main/', includeCurrentVersion: false, - lastVersion: '6.x', + lastVersion: '7.x', breadcrumbs: false, + sidebarCollapsed: false, remarkPlugins: [[remarkNpm2Yarn, { sync: true }]], rehypePlugins: [ - [rehypeCodeblockMeta, { match: { snack: true } }], + [ + rehypeCodeblockMeta, + { match: { snack: true, lang: true, tabs: true } }, + ], ], }, blog: { diff --git a/package.json b/package.json index 4239daca30a..8c4108eb882 100755 --- a/package.json +++ b/package.json @@ -11,24 +11,34 @@ "deploy": "DEPLOYMENT_BRANCH=gh-pages docusaurus deploy", "crowdin-upload": "crowdin upload sources --auto-update -b main", "crowdin-download": "crowdin download -b main", - "fetch-sponsors": "node scripts/fetch-sponsors.js" + "fetch-sponsors": "node scripts/fetch-sponsors.js && prettier --write src/data/sponsors.js" }, "dependencies": { - "@docusaurus/core": "3.0.0", - "@docusaurus/plugin-client-redirects": "3.0.0", - "@docusaurus/plugin-google-analytics": "3.0.0", - "@docusaurus/preset-classic": "3.0.0", - "@docusaurus/remark-plugin-npm2yarn": "3.0.0", - "@octokit/graphql": "^7.0.2", - "@react-navigation/core": "^7.0.0-alpha.2", + "@docusaurus/core": "3.6.1", + "@docusaurus/faster": "3.6.1", + "@docusaurus/plugin-client-redirects": "3.6.1", + "@docusaurus/plugin-google-analytics": "3.6.1", + "@docusaurus/preset-classic": "3.6.1", + "@docusaurus/remark-plugin-npm2yarn": "3.6.1", + "@octokit/graphql": "^7.1.0", + "@react-navigation/core": "^7.0.4", "escape-html": "^1.0.3", "mkdirp": "^3.0.1", "netlify-plugin-cache": "^1.0.3", - "prism-react-renderer": "^2.3.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-simple-code-editor": "^0.13.1" + "prism-react-renderer": "^2.4.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-simple-code-editor": "^0.14.1" }, + "devDependencies": { + "markdownlint": "^0.36.1", + "markdownlint-cli2": "^0.14.0", + "prettier": "^3.3.3" + }, + "resolutions": { + "@rspack/core": "1.0.14" + }, + "packageManager": "yarn@4.0.2", "browserslist": { "production": [ ">0.2%", @@ -40,10 +50,5 @@ "last 1 firefox version", "last 1 safari version" ] - }, - "devDependencies": { - "markdownlint": "^0.32.1", - "markdownlint-cli2": "^0.11.0" - }, - "packageManager": "yarn@4.0.2" + } } diff --git a/scripts/fetch-sponsors.js b/scripts/fetch-sponsors.js index 2bef5e0fb14..a8230303420 100644 --- a/scripts/fetch-sponsors.js +++ b/scripts/fetch-sponsors.js @@ -62,7 +62,10 @@ async function fetchAndWriteSponsorsAsync() { 'data', 'sponsors.js' ); - fs.writeFileSync(sponsorsFilePath, `export default ${JSON.stringify(sponsors, null, 2)}`); + fs.writeFileSync( + sponsorsFilePath, + `export default ${JSON.stringify(sponsors, null, 2)}` + ); console.log(`Wrote updated sponsors to ${sponsorsFilePath}`); } diff --git a/src/components/Pre.js b/src/components/Pre.js index 8c39db7f679..227c15c070b 100644 --- a/src/components/Pre.js +++ b/src/components/Pre.js @@ -1,70 +1,129 @@ +import { useActiveVersion } from '@docusaurus/plugin-content-docs/client'; import { useColorMode } from '@docusaurus/theme-common'; +import { usePluginData } from '@docusaurus/useGlobalData'; import MDXPre from '@theme-original/MDXComponents/Pre'; -import CodeBlock from '@theme-original/CodeBlock'; import React from 'react'; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; -const peers = { - 'react-native-safe-area-context': '*', - 'react-native-screens': '*', -}; - -const versions = { - 7: { - '@react-navigation/bottom-tabs': ['7.0.0-alpha.7', peers], - '@react-navigation/core': '7.0.0-alpha.6', - '@react-navigation/native': '7.0.0-alpha.6', - '@react-navigation/drawer': [ - '7.0.0-alpha.7', - { - ...peers, - 'react-native-reanimated': '*', - }, - ], - '@react-navigation/elements': ['2.0.0-alpha.4', peers], - '@react-navigation/material-top-tabs': [ - '7.0.0-alpha.6', - { - ...peers, - 'react-native-pager-view': '*', - }, - ], - '@react-navigation/native-stack': ['7.0.0-alpha.7', peers], - '@react-navigation/routers': '7.0.0-alpha.4', - '@react-navigation/stack': [ - '7.0.0-alpha.7', - { - ...peers, - 'react-native-gesture-handler': '*', - }, - ], - 'react-native-drawer-layout': [ - '4.0.0-alpha.3', - { - 'react-native-gesture-handler': '*', - 'react-native-reanimated': '*', - }, - ], - 'react-native-tab-view': [ - '4.0.0-alpha.2', - { - 'react-native-pager-view': '*', - }, - ], - }, +const SUPPORTED_TABS = { + config: [ + { value: 'static', label: 'Static', default: true }, + { value: 'dynamic', label: 'Dynamic' }, + ], }; export default function Pre({ children, 'data-name': name, 'data-snack': snack, - 'data-version': version, 'data-dependencies': deps, + 'data-tabs': tabs, + 'data-lang': lang, ...rest }) { const { colorMode } = useColorMode(); + const activeVersion = useActiveVersion(); + const { versions } = usePluginData('react-navigation-versions'); + + const child = React.Children.only(children); + + // If we encounter tabs, we need to render 2 code blocks + if (tabs && tabs in SUPPORTED_TABS) { + return ( + + {SUPPORTED_TABS[tabs].map((tab) => { + const code = child.props.children; + if (typeof code !== 'string') { + throw new Error( + 'Code to display in tabs must be a string, but received ' + + typeof code + ); + } + + const lines = code.split('\n'); + + let content = ''; + let exclude = false; + let indent; + + for (const line of lines) { + if (line.trim().startsWith('// codeblock-tabs=')) { + exclude = line.trim() !== `// codeblock-tabs=${tab.value}`; + } else if (line.trim() === '// codeblock-tabs-end') { + exclude = false; + } else if (!exclude) { + content += line + '\n'; + } + } + + return ( + + 
+                {React.cloneElement(children, {
+                  ...child.props,
+                  children: content.trim(),
+                })}
+
+ + ); + })} + + ); + } + + // Handle diffs with language + if (child.props.className === 'language-diff' && lang) { + const code = child.props.children; + + if (typeof code !== 'string') { + throw new Error( + 'Diff code must be a string, but received ' + typeof code + ); + } + + // Replace + and - with magic comments + // Need to add following in docusaurus.config.js + // themeConfig.prims.magicComments: [ + // { className: 'code-block-diff-add-line', line: 'diff-add' }, + // { className: 'code-block-diff-remove-line', line: 'diff-remove' }, + // ], + const content = code + .split('\n') + .map((line) => { + if (line.startsWith('+ ')) { + return `// diff-add\n${line.replace(/^\+ /, '')}`; + } else if (line.startsWith('- ')) { + return `// diff-remove\n${line.replace(/^- /, '')}`; + } + + return line; + }) + .join('\n'); + + children = React.cloneElement(child, { + className: `language-${lang}`, + children: content, + }); + + return {children}; + } + + // Handle snack demos if (snack) { - const code = React.Children.only(children).props.children; + const code = child.props.children; if (typeof code !== 'string') { throw new Error( @@ -73,19 +132,51 @@ export default function Pre({ } const dependencies = deps - ? Object.fromEntries(deps.split(',').map((entry) => entry.split('@'))) + ? Object.fromEntries( + deps.split(',').map((entry) => { + let prefix = ''; + + // Handles scoped packages, e.g. @expo/vector-icons + if (entry.startsWith('@')) { + prefix = '@'; + entry = entry.slice(1); + } + + const [name, version = '*'] = entry.split('@'); + + return [prefix + name, version]; + }) + ) : {}; + const version = activeVersion?.name; + + if (version == null || versions[version] == null) { + throw new Error(`Invalid version: ${version}`); + } + Object.assign( dependencies, 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; @@ -96,8 +187,7 @@ export default function Pre({ }, {}) ); - // FIXME: use staging for now since react-navigation fails to build on prod - const url = new URL('https://staging-snack.expo.dev'); + const url = new URL('https://snack.expo.dev'); if (name) { url.searchParams.set('name', name); @@ -118,6 +208,11 @@ export default function Pre({ ].every((comment) => line.trim() !== comment) ) .join('\n') + // Use expo/vector-icons instead of react-native-vector-icons for snack + .replace( + /import (.*) from 'react-native-vector-icons\/(.*)'/g, + 'import $1 from "@expo/vector-icons/$2"' + ) ); url.searchParams.set( @@ -177,8 +272,8 @@ export default function Pre({ } } - children = React.Children.map(children, (child) => - React.cloneElement(child, { children: content }) + children = React.Children.map(children, (c) => + React.cloneElement(c, { children: content }) ); } @@ -191,7 +286,7 @@ export default function Pre({ target="_blank" href={url.href} > - Try this example on Snack{' '} + Try on Snack {routes.map((route, i) => ( diff --git a/src/css/custom.css b/src/css/custom.css index f8620d469b8..33d5487453c 100755 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -6,52 +6,302 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #6b52ae; - --ifm-color-primary-dark: #60499d; - --ifm-color-primary-darker: #5b4594; - --ifm-color-primary-darkest: #4b397a; - --ifm-color-primary-light: #7a63b6; - --ifm-color-primary-lighter: #816cba; - --ifm-color-primary-lightest: #9886c6; - - --ifm-hero-background-color: #6b52ae; - --ifm-hero-text-color: #fff; - --ifm-footer-background-color: #f7f7ff; + --primary-hue: 256.3; + --primary-saturation: 53.2%; + --primary-lightness: 50.2%; + + --ifm-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, + Consolas, Liberation Mono, Courier New, monospace; + --ifm-font-family-base: ui-sans-serif, system-ui, -apple-system, + BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, + sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, + Noto Color Emoji; + + --ifm-code-font-size: 85%; + + --ifm-heading-font-weight: 700; + --ifm-heading-line-height: 1.618; + --ifm-heading-margin-top: 1.618rem; + + --ifm-color-primary: hsl( + var(--primary-hue), + var(--primary-saturation), + var(--primary-lightness) + ); + + --ifm-color-primary-dark: hsl( + var(--primary-hue), + var(--primary-saturation), + 45.1% + ); + + --ifm-color-primary-darker: hsl( + var(--primary-hue), + var(--primary-saturation), + 40.1% + ); + + --ifm-color-primary-darkest: hsl( + var(--primary-hue), + var(--primary-saturation), + 35.1% + ); + + --ifm-color-primary-light: hsl( + var(--primary-hue), + var(--primary-saturation), + 55.2% + ); + + --ifm-color-primary-lighter: hsl( + var(--primary-hue), + var(--primary-saturation), + 60.2% + ); + + --ifm-color-primary-lightest: hsl( + var(--primary-hue), + var(--primary-saturation), + 77.6% + ); + + --ifm-hero-background-color: var(--ifm-color-primary); + --ifm-footer-background-color: var(--ifm-background-surface-color); --ifm-home-color-text: #414360; --ifm-home-color-background: #f7f7ff; --ifm-home-color-background-secondary: #d5d6f5; - --ifm-home-color-highlight: #8c90e0; + --ifm-home-color-highlight: hsl(var(--primary-hue), 57.5%, 71.4%); --ifm-home-color-border: #414360; --ifm-home-color-black: #25292e; --ifm-home-color-white: #f7f7ff; + --ifm-toc-border-color: var(--ifm-color-gray-200); --ifm-menu-color-background-active: rgba(107, 82, 174, 0.1); --docusaurus-highlighted-code-line-bg: rgba(107, 82, 174, 0.1); - --ifm-tabs-padding-vertical: 0.5rem; + --ifm-footer-padding-horizontal: var(--ifm-spacing-horizontal); + --ifm-footer-padding-vertical: var(--ifm-spacing-vertical); + --ifm-tabs-padding-vertical: 0.375rem; + + --ifm-alert-shadow: none; --ifm-alert-border-left-width: 0; + + --codeblock-background-color: #f6f8fa; } :root[data-theme='dark'] { - --ifm-color-primary: #a697ce; - --ifm-color-primary-dark: #917fc3; - --ifm-color-primary-darker: #8773bd; - --ifm-color-primary-darkest: #6950aa; - --ifm-color-primary-light: #bbafd9; - --ifm-color-primary-lighter: #c5bbdf; - --ifm-color-primary-lightest: #e4e0f0; + --primary-saturation: 35.9%; + --primary-lightness: 70%; + + --ifm-color-primary-dark: hsl( + var(--primary-hue), + var(--primary-saturation), + 63.1% + ); + + --ifm-color-primary-darker: hsl( + var(--primary-hue), + var(--primary-saturation), + 59.6% + ); + + --ifm-color-primary-darkest: hsl( + var(--primary-hue), + var(--primary-saturation), + 49% + ); + + --ifm-color-primary-light: hsl( + var(--primary-hue), + var(--primary-saturation), + 76.9% + ); + + --ifm-color-primary-lighter: hsl( + var(--primary-hue), + var(--primary-saturation), + 80.4% + ); + + --ifm-color-primary-lightest: hsl( + var(--primary-hue), + var(--primary-saturation), + 91% + ); --ifm-footer-background-color: #25292f; --ifm-home-color-text: #f7f7ff; --ifm-home-color-background: #414360; --ifm-home-color-background-secondary: #585b82; - --ifm-home-color-highlight: #9692ff; + --ifm-home-color-highlight: hsl(var(--primary-hue), 100%, 78.6%); --ifm-home-color-border: #f7f7ff; --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.07); + + --codeblock-background-color: #282a35; +} + +h1 { + font-size: 2.618rem; + letter-spacing: -0.02em; + margin-top: 0; + margin-left: -0.09rem; +} + +h2 { + font-size: 1.618rem; + letter-spacing: -0.02em; + margin-left: -0.09rem; +} + +h3 { + font-size: 1.382rem; + letter-spacing: -0.01em; +} + +h4 { + font-size: 1.145rem; +} + +h5 { + font-size: 1rem; +} + +h6 { + font-size: 0.85rem; +} + +p { + font-size: 1rem; + line-height: 1.75; +} + +@media (min-width: 90rem) { + .main-wrapper:not(.full-width), + .navbar__inner, + .footer .container { + max-width: 90rem; + margin: auto; + } +} + +@media (min-width: 85rem) { + .main-wrapper:not(.full-width) main { + padding: 2rem 0 2rem 2rem; + } + + .main-wrapper:not(.full-width) .container > .row > :first-child { + padding-right: 3rem; + } +} + +@media (min-width: 95rem) { + .main-wrapper:not(.full-width) main { + padding: 3rem 0 3rem 4rem; + } + + .main-wrapper:not(.full-width) .container > .row > :first-child { + padding-right: 5rem; + } +} + +.footer { + border-top: 1px solid var(--ifm-toc-border-color); +} + +.navbar { + padding: 0; +} + +.navbar__inner { + padding: var(--ifm-navbar-padding-vertical) + var(--ifm-navbar-padding-horizontal); +} + +.dropdown > .navbar__link:after { + top: 4px; + transform: rotate(90deg); + width: 10px; + height: 10px; + mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") + no-repeat; + mask-size: 100% 100%; + background-color: currentColor; +} + +.navbar div[class*='colorModeToggle'] { + margin: 0 0.5rem; +} + +.navbar .DocSearch-Button { + border-radius: var(--ifm-global-radius); +} + +.navbar .DocSearch-Button svg { + width: 16px; + height: 16px; +} + +.navbar__logo { + margin-right: 0.75rem; +} + +@media (min-width: 997px) { + .navbar__brand { + width: calc( + var(--doc-sidebar-width) - var(--ifm-navbar-padding-horizontal) + ); + box-shadow: 1px 0 0 0 var(--ifm-toc-border-color); + } +} + +@media (max-width: 996px) { + .navbar__inner .navbar__brand { + position: relative; + margin: auto; + left: -1rem; + } +} + +.navbar__toggle svg { + display: none; +} + +.navbar__toggle::after { + content: ''; + width: 24px; + height: 24px; + mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M21 6H3M15 12H3M17 18H3'/%3E%3C/svg%3E") + no-repeat; + background-color: currentColor; +} + +.navbar-social-link::before { + content: ''; + display: flex; + background-color: var(--ifm-navbar-link-color); + transition: background-color var(--ifm-transition-fast) + var(--ifm-transition-timing-default); +} + +.navbar-social-link:hover::before { + background-color: var(--ifm-navbar-link-hover-color); +} + +.navbar-social-link-x::before { + width: 18px; + height: 18px; + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E"); +} + +.navbar-social-link-github::before { + width: 20px; + height: 20px; + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E"); } .menu { + font-size: 93.75%; font-weight: var(--ifm-font-weight-normal); } @@ -59,28 +309,75 @@ background: transparent; } +.menu > .menu__list > .menu__list-item > .menu__list { + padding-left: 0; +} + +.menu > .menu__list > .menu__list-item { + position: relative; + padding-top: 0.5rem; + padding-bottom: 1rem; +} + +.menu > .menu__list > .menu__list-item:not(:last-child)::after { + content: ''; + display: block; + position: absolute; + bottom: 0; + left: 0.5rem; + width: calc(100% - 1.5rem); + height: 1px; + background-color: var(--ifm-toc-border-color); +} + +@media (min-width: 85rem) { + .menu > .menu__list > .menu__list-item { + padding-top: 1.5rem; + padding-bottom: 1.75rem; + } +} + +.menu__list { + position: relative; +} + +.menu__list .menu__list .menu__list-item-collapsible + .menu__list:before { + content: ''; + position: absolute; + width: 1px; + height: 100%; + background-color: var(--ifm-toc-border-color); +} + +.menu__list .menu__list .menu__list-item-collapsible + .menu__list > li { + margin-left: 5px; +} + .menu__list-item-collapsible > .menu__link { - font-weight: var(--ifm-font-weight-semibold); + font-weight: var(--ifm-font-weight-bold); + color: var(--ifm-color-emphasis-1000); } -.menu__link--sublist-caret:after { - background: var(--ifm-menu-link-sublist-icon) 50% / 1.25rem 1.25rem; - opacity: 0.5; +.menu__list-item-collapsible > .menu__link--active { + color: var(--ifm-color-emphasis-1000); } -.theme-doc-sidebar-container { - border-right: none !important; +.menu__link { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } -.table-of-contents__left-border { - border-left: none; +.menu__link--sublist-caret:after { + background: var(--ifm-menu-link-sublist-icon) 50% / 1.25rem 1.25rem; + opacity: 0.5; } .pagination-nav__link { border: none; } -.pagination-nav__label::before, .pagination-nav__label::after { +.pagination-nav__label::before, +.pagination-nav__label::after { display: none; } @@ -92,20 +389,196 @@ content: '← '; } +.tabs { + font-weight: var(--ifm-font-weight-semibold); +} + .tabs__item { - border-bottom-width: 2px; + border-bottom: 2px solid var(--ifm-toc-border-color); + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } -.theme-edit-this-page svg, .theme-admonition svg { +.tabs__item--active, +.tabs__item--active:hover { + border-bottom-color: var(--ifm-tabs-color-active-border); +} + +.tabs-container:has( + > .margin-top--md > [role='tabpanel'] > .theme-code-block:only-child + ):not(:has(> .margin-top--md > [role='tabpanel'] > :nth-child(2))) { + background-color: var(--codeblock-background-color); + border-radius: var(--ifm-code-border-radius); + + & > .margin-top--md { + margin-top: 0 !important; + } + + & > .tabs { + box-shadow: inset 0 -2px 0 var(--ifm-toc-border-color); + } + + & > .tabs > .tabs__item { + border-top-right-radius: 0; + } + + & > .tabs > .tabs__item:not(:first-child) { + border-top-left-radius: 0; + } +} + +.col:has(.table-of-contents) { + padding-left: 0; +} + +.table-of-contents__link--active { + position: relative; +} + +.table-of-contents__link--active::before { + content: ''; + position: absolute; + left: calc(-1rem - 1px); + top: 0; + bottom: 0; + width: 1px; + background-color: var(--ifm-color-primary); +} + +.table-of-contents > li > ul > li > .table-of-contents__link--active::before { + left: calc(-2rem - 1px); +} + +.theme-edit-this-page svg, +.theme-admonition svg { transform: scale(0.8); } +article { + text-wrap: pretty; +} + +article img, +article video { + vertical-align: top; + margin: var(--ifm-leading) 0; + border-radius: var(--ifm-pre-border-radius); + box-shadow: + 0 0 0 1px rgba(0, 0, 0, 0.05), + var(--ifm-global-shadow-lw); +} + +article img { + max-width: 100%; +} + +article video { + width: 300px; + height: auto; + max-width: 100%; +} + +article video[data-landscape] { + width: auto; + height: 373px; +} + +@media (max-width: 320px) { + article video, + article video[data-landscape] { + width: 100%; + height: auto; + } +} + +article video:has(+ video) { + margin-right: var(--ifm-leading); +} + +article p ~ video { + margin-top: 0; +} + samp { display: none; } +.theme-code-block { + box-shadow: none !important; +} + +.theme-code-block:has(+ .snack-sample-link) { + margin-bottom: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.theme-code-block + .snack-sample-link { + display: block; + font-size: var(--ifm-code-font-size); + text-align: right; + margin-top: 0; + margin-bottom: var(--ifm-leading); + padding: calc(var(--ifm-pre-padding) / 2) var(--ifm-pre-padding); + background-color: var(--codeblock-background-color); + border-top-width: 1px; + border-top-style: solid; + border-top-color: var(--ifm-color-gray-200); + border-bottom-left-radius: var(--ifm-pre-border-radius); + border-bottom-right-radius: var(--ifm-pre-border-radius); +} + +[data-theme='dark'] .theme-code-block + .snack-sample-link { + border-top-color: rgba(255, 255, 255, 0.07); +} + .snack-sample-link { display: block; margin-bottom: 25px; margin-top: -8px; } + +.snack-sample-link svg { + margin-left: 8px; +} + +/** + * use magic comments to mark diff blocks + */ +.code-block-diff-add-line { + background-color: var(--ifm-color-success-contrast-background); + display: block; + margin: 0 -2em; + padding: 0 2em; +} + +.code-block-diff-add-line::before { + position: absolute; + left: 8px; + padding-right: 8px; + content: '+'; + color: var(--ifm-color-success-dark); +} + +.code-block-diff-remove-line { + background-color: var(--ifm-color-danger-contrast-background); + display: block; + margin: 0 -2em; + padding: 0 2em; +} + +.code-block-diff-remove-line::before { + position: absolute; + left: 8px; + padding-right: 8px; + content: '-'; + color: var(--ifm-color-danger-dark); +} + +pre code:has(.code-block-diff-add-line) { + padding-left: 2em !important; +} + +pre code:has(.code-block-diff-remove-line) { + padding-left: 2em !important; +} diff --git a/src/data/sponsors.js b/src/data/sponsors.js index d62d44fee37..84d0f91f24a 100644 --- a/src/data/sponsors.js +++ b/src/data/sponsors.js @@ -1,167 +1,78 @@ export default [ { - "avatarUrl": "https://avatars.githubusercontent.com/u/9664363?u=a4a9e93dc4305c91ced38b83d4c08186f7254b04&v=4", - "username": "EvanBacon", - "name": "Evan Bacon" + avatarUrl: + 'https://avatars.githubusercontent.com/u/360412?u=15e7b90eb91a3d2b410f7f47461862cb793398ff&v=4', + username: 'jyc', + name: null, }, { - "avatarUrl": "https://avatars.githubusercontent.com/u/306134?v=4", - "username": "wcandillon", - "name": "William Candillon" + avatarUrl: + 'https://avatars.githubusercontent.com/u/1257695?u=e142a0ae6314aa8b462e664db429d926b31bf978&v=4', + username: 'karszawa', + name: 'Hiroaki KARASAWA', }, { - "avatarUrl": "https://avatars.githubusercontent.com/u/476779?v=4", - "username": "Expensify", - "name": "Expensify, Inc" + avatarUrl: + 'https://avatars.githubusercontent.com/u/1629785?u=f91613c118bb1fcf442a71008dff1cd5f9b30411&v=4', + username: 'JonnyBurger', + name: 'Jonny Burger', }, { - "avatarUrl": "https://avatars.githubusercontent.com/u/916690?u=66482eb2c5bb755553afbcfa219dcacc42fc487a&v=4", - "username": "benevbright", - "name": "Bright Lee" + avatarUrl: 'https://avatars.githubusercontent.com/u/2443340?v=4', + username: 'toyokumo', + name: 'TOYOKUMO', }, { - "avatarUrl": "https://avatars.githubusercontent.com/u/980234?u=59bb4c6ac0a23b53225bb2235b69c72a960ba83f&v=4", - "username": "simoncar", - "name": "Simoncar" + avatarUrl: + 'https://avatars.githubusercontent.com/u/4328772?u=c4e0fd72bd7cdb3751166c8ade8ef253e6f5ba67&v=4', + username: 'itsrifat', + name: 'Moinul Hossain', }, { - "avatarUrl": "https://avatars.githubusercontent.com/u/1057756?u=15c3cdff1c715ac27bbc63ccb8f0a1c27eeb3784&v=4", - "username": "zhigang1992", - "name": "Zhigang Fang" + avatarUrl: + 'https://avatars.githubusercontent.com/u/6936373?u=4edd14e6636c45d10ac6a3eecb4b3ffa6cc2bf5c&v=4', + username: 'Naturalclar', + name: 'Jesse Katsumata', }, { - "avatarUrl": "https://avatars.githubusercontent.com/u/1257695?u=e142a0ae6314aa8b462e664db429d926b31bf978&v=4", - "username": "karszawa", - "name": "Hiroaki KARASAWA" + avatarUrl: + 'https://avatars.githubusercontent.com/u/7029942?u=5eb1fed31f05fe97bcb07227268165c4028cc662&v=4', + username: 'radko93', + name: 'Radek Czemerys', }, { - "avatarUrl": "https://avatars.githubusercontent.com/u/1566403?u=3df07e2ae72e89a3a3509ba6c2f927115b5f38aa&v=4", - "username": "vonovak", - "name": "Vojtech Novak" + avatarUrl: + 'https://avatars.githubusercontent.com/u/7910545?u=95ae2c2a40b5f6f63f05fce29ee7c01622019c76&v=4', + username: 'UdaySravanK', + name: 'Uday Sravan K', }, { - "avatarUrl": "https://avatars.githubusercontent.com/u/1629785?u=12eb94da6070d00fc924761ce06e3a428d01b7e9&v=4", - "username": "JonnyBurger", - "name": "Jonny Burger" + avatarUrl: + 'https://avatars.githubusercontent.com/u/9664363?u=46ba6d5fbd29729df2950b845c9ca2cd085a1c2b&v=4', + username: 'EvanBacon', + name: 'Evan Bacon', }, { - "avatarUrl": "https://avatars.githubusercontent.com/u/1764217?u=f36737d852ffcc50b87e809474faa27eb2ce130a&v=4", - "username": "markholland", - "name": "Mark Holland" + avatarUrl: + 'https://avatars.githubusercontent.com/u/15199031?u=5a82dcb32237282ff576c0446567a1e2fe49b868&v=4', + username: 'mrousavy', + name: 'Marc Rousavy', }, { - "avatarUrl": "https://avatars.githubusercontent.com/u/3584560?u=f54bd481e956c6b3fe88a15f466ff9a3973e4b35&v=4", - "username": "hetmann", - "name": "Hetmann W. Iohan" + avatarUrl: + 'https://avatars.githubusercontent.com/u/23122214?u=7b3231a177e5d661d55b2cee88ea69e1713eb695&v=4', + username: 'sayurimizuguchi', + name: 'Sayuri Mizuguchi', }, { - "avatarUrl": "https://avatars.githubusercontent.com/u/4328772?u=c4e0fd72bd7cdb3751166c8ade8ef253e6f5ba67&v=4", - "username": "itsrifat", - "name": "Moinul Hossain" + avatarUrl: + 'https://avatars.githubusercontent.com/u/79333934?u=d18e4c6a4e063534d6fd7e77e0d51c367c91cfa0&v=4', + username: 'finanzguru', + name: 'Finanzguru', }, { - "avatarUrl": "https://avatars.githubusercontent.com/u/4376835?u=0cf5324a78dd4140ef71943048dedac328be68b9&v=4", - "username": "lnmunhoz", - "name": "Lucas N. Munhoz" + avatarUrl: 'https://avatars.githubusercontent.com/u/140319444?v=4', + username: 'jupli-apps', + name: 'Jupli', }, - { - "avatarUrl": "https://avatars.githubusercontent.com/u/5605177?v=4", - "username": "Razorholt", - "name": null - }, - { - "avatarUrl": "https://avatars.githubusercontent.com/u/5967956?u=f7f5ed6b6b399c2953fd0e3be0512c378e9f76c4&v=4", - "username": "codinsonn", - "name": "Thorr Stevens" - }, - { - "avatarUrl": "https://avatars.githubusercontent.com/u/6457344?u=47e100289441b7f4681a7809202ff683886e4f5e&v=4", - "username": "ryo-rm", - "name": "ryo kishida" - }, - { - "avatarUrl": "https://avatars.githubusercontent.com/u/6936373?u=4edd14e6636c45d10ac6a3eecb4b3ffa6cc2bf5c&v=4", - "username": "Naturalclar", - "name": "Jesse Katsumata" - }, - { - "avatarUrl": "https://avatars.githubusercontent.com/u/7029942?u=5eb1fed31f05fe97bcb07227268165c4028cc662&v=4", - "username": "radko93", - "name": "Radek Czemerys" - }, - { - "avatarUrl": "https://avatars.githubusercontent.com/u/12504344?v=4", - "username": "expo", - "name": "Expo" - }, - { - "avatarUrl": "https://avatars.githubusercontent.com/u/13601619?v=4", - "username": "itiden", - "name": "Itiden" - }, - { - "avatarUrl": "https://avatars.githubusercontent.com/u/14099522?u=965e74751a9db0f40a30ace9cd0cb1f82eaf1412&v=4", - "username": "aCanalez", - "name": "Alexi Canales" - }, - { - "avatarUrl": "https://avatars.githubusercontent.com/u/15199031?u=46da50e88594eb284cf249485f202d5d43d474d1&v=4", - "username": "mrousavy", - "name": "Marc Rousavy" - }, - { - "avatarUrl": "https://avatars.githubusercontent.com/u/17621507?u=0ee7f26191d430f4fc0672cef92c2759d948bbb5&v=4", - "username": "dsznajder", - "name": "Damian Sznajder" - }, - { - "avatarUrl": "https://avatars.githubusercontent.com/u/21980965?u=5a571092a83cb71508c60a9c86ab2520fde8a68e&v=4", - "username": "jarvisluong", - "name": "Jarvis Luong" - }, - { - "avatarUrl": "https://avatars.githubusercontent.com/u/26326015?u=33a1afbe11e8f6b962c6267606d59c2b2ef94716&v=4", - "username": "bang9", - "name": "Hyungu Kang | Airen" - }, - { - "avatarUrl": "https://avatars.githubusercontent.com/u/27461460?u=b5860875e26d33fd70fd210f4ea74f81cdf9d99b&v=4", - "username": "hyochan", - "name": "Hyo" - }, - { - "avatarUrl": "https://avatars.githubusercontent.com/u/30735054?v=4", - "username": "endearhq", - "name": "Endear" - }, - { - "avatarUrl": "https://avatars.githubusercontent.com/u/33361399?u=6180514361e35ae42e2401431555c82cc63adda9&v=4", - "username": "oliverloops", - "name": "Oliver Lopez " - }, - { - "avatarUrl": "https://avatars.githubusercontent.com/u/34658847?u=17fd3603d012d068c060039bcf009095055290a1&v=4", - "username": "RatebSeirawan", - "name": "Rateb Seirawan" - }, - { - "avatarUrl": "https://avatars.githubusercontent.com/u/36824170?u=6f56fa2998ffba6b5a3908c79e2ef9331bad502a&v=4", - "username": "luism3861", - "name": "Luis Medina Huerta" - }, - { - "avatarUrl": "https://avatars.githubusercontent.com/u/45317893?u=253e6eabcb23a5361e93a064914c9b8d136ac888&v=4", - "username": "GandresCoello18", - "name": "Andres Coello" - }, - { - "avatarUrl": "https://avatars.githubusercontent.com/u/46625943?u=63c9ed9017c34900df8b5ae2ed455ec4c82ef8aa&v=4", - "username": "bowen9284", - "name": "Matt Bowen" - }, - { - "avatarUrl": "https://avatars.githubusercontent.com/u/49920282?v=4", - "username": "reactrondev", - "name": "Reactron" - } -] \ No newline at end of file +]; diff --git a/src/pages/home/Footer.js b/src/pages/home/Footer.js new file mode 100644 index 00000000000..133a2bb6de4 --- /dev/null +++ b/src/pages/home/Footer.js @@ -0,0 +1,30 @@ +import React from 'react'; + +const links = [ + { title: 'Docusaurus', href: 'https://docusaurus.io/' }, + { title: 'GitHub Pages', href: 'https://pages.github.com/' }, + { title: 'Netlify', href: 'https://www.netlify.com/' }, +]; + +export default function Footer() { + return ( +
+
+
+
+ Copyright © 2024 React Navigation. Built with{' '} + {links.map((link, index) => ( + + {index > 0 && ', '} + + {link.title} + + + ))} + . +
+
+
+ + ); +} diff --git a/src/pages/home/Splash/index.js b/src/pages/home/Splash/index.js index 388331c6ec0..7310f105816 100644 --- a/src/pages/home/Splash/index.js +++ b/src/pages/home/Splash/index.js @@ -1,11 +1,10 @@ -import React from 'react'; -import useBaseUrl from '@docusaurus/useBaseUrl'; import Link from '@docusaurus/Link'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import React from 'react'; -import styles from './styles.module.css'; -import Spiro from '/img/spiro_header.svg'; import SplashLeftIllustration from './SplashLeftIllustration'; import SplashRightIllustration from './SplashRightIllustration'; +import styles from './styles.module.css'; export default function Splash() { return ( @@ -13,24 +12,22 @@ export default function Splash() {
-
- -

React Navigation

- Routing and navigation for Expo and React Native apps. + Routing and navigation for React Native and Web apps.

- Read Docs - + Try It diff --git a/src/pages/home/Splash/styles.module.css b/src/pages/home/Splash/styles.module.css index 94c9d6575e8..8cf912d1c3f 100644 --- a/src/pages/home/Splash/styles.module.css +++ b/src/pages/home/Splash/styles.module.css @@ -48,12 +48,6 @@ border-bottom-right-radius: 0.5rem; } -.spiroContainer { - color: var(--ifm-home-color-background-secondary); - position: absolute; - z-index: 0; -} - .mainContent { position: relative; } @@ -62,12 +56,14 @@ font-size: 4.375rem; color: var(--ifm-home-color-text); font-weight: 900; + margin-bottom: 0; } .subText { font-size: 1.5rem; color: var(--ifm-home-color-text); font-weight: 600; + margin-top: 0; } .buttonContainer { diff --git a/src/pages/home/Sponsors/index.js b/src/pages/home/Sponsors/index.js index 40c3bff4d8d..4bac27a7f4d 100644 --- a/src/pages/home/Sponsors/index.js +++ b/src/pages/home/Sponsors/index.js @@ -1,5 +1,3 @@ -import React from 'react'; - import sponsors from '../../../data/sponsors'; import styles from './styles.module.css'; @@ -8,15 +6,14 @@ export default function Sponsors() {

- React Navigation is built by Expo,{' '} - Software Mansion, and{' '} - Callstack, with contributions - from the{' '} + React Navigation relies on the support from the community. Thanks to{' '} + Software Mansion,{' '} + Callstack,{' '} + Expo, and our amazing{' '} - community + contributors {' '} - and{' '} - sponsors: + & sponsors:

{sponsors.map((sponsor) => ( diff --git a/src/pages/index.js b/src/pages/index.js index fc18c8b5089..9ad7899c428 100755 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,12 +1,10 @@ -import React from 'react'; -import Layout from '@theme/Layout'; -import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import sponsors from '../data/sponsors'; +import Layout from '@theme/Layout'; +import React from 'react'; -import Splash from './home/Splash'; import Features from './home/Features'; +import Footer from './home/Footer'; +import Splash from './home/Splash'; import Sponsors from './home/Sponsors'; const features = [ @@ -44,10 +42,15 @@ function Home() { const { siteConfig = {} } = context; return ( - + +