From 91b70d005cf2755cfa5a7961da858d9c99b87658 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Wed, 8 Apr 2026 14:42:52 +0200 Subject: [PATCH 1/5] update Docusaurus to 3.10, perform related changes --- docs/_canary-channel-api-warning.mdx | 2 +- docs/_experimental-channel-api-warning.mdx | 2 +- docs/alertios.md | 2 +- docs/asyncstorage.md | 2 +- docs/checkbox.md | 2 +- docs/clipboard.md | 2 +- docs/datepickerandroid.md | 2 +- docs/datepickerios.md | 2 +- docs/imagepickerios.md | 2 +- docs/legacy/native-modules-ios.md | 2 +- docs/{metro.md => metro.mdx} | 42 +- docs/profiling.md | 6 +- docs/segmentedcontrolios.md | 2 +- docs/signed-apk-android.md | 6 +- docs/statusbarios.md | 2 +- docs/strict-typescript-api.md | 4 +- .../create-module-library.mdx | 8 +- docs/the-new-architecture/pure-cxx-modules.md | 2 +- .../the-new-architecture/using-codegen.mdx | 4 +- .../the-new-architecture/what-is-codegen.mdx | 2 +- docs/timepickerandroid.md | 2 +- docs/turbo-native-modules-android.md | 2 +- eslint.config.js | 2 + ....md => 2019-11-18-react-native-doctor.mdx} | 20 +- ...on-0.62.md => 2020-03-26-version-0.62.mdx} | 2 +- ...s-update.md => 2020-07-23-docs-update.mdx} | 2 +- ...on-0.64.md => 2021-03-12-version-0.64.mdx} | 2 +- ...GAAD-March-Accessibility-Issue-Update.mdx} | 2 +- ....md => 2021-05-20-GAAD-One-Year-Later.mdx} | 2 +- ...8-19-h2-2021.md => 2021-08-19-h2-2021.mdx} | 4 +- ...md => 2021-08-26-many-platform-vision.mdx} | 36 +- ...08-30-react-native-is-hiring-managers.mdx} | 18 +- ...ng-your-app-for-iOS-15-and-android-12.mdx} | 7 +- ...sion-066.md => 2021-10-01-version-066.mdx} | 13 +- ...10-26-toward-hermes-being-the-default.mdx} | 4 +- ...sion-067.md => 2022-01-19-version-067.mdx} | 2 +- ...2022-01-21-react-native-h2-2021-recap.mdx} | 4 +- ...pdate-on-the-new-architecture-rollout.mdx} | 4 +- ...sion-068.md => 2022-03-30-version-068.mdx} | 2 +- ...ate.md => 2022-05-19-GAAD-2022-update.mdx} | 6 +- ...ative-library-to-the-new-architecture.mdx} | 12 +- ...sion-069.md => 2022-06-21-version-069.mdx} | 2 +- ...d => 2022-07-08-hermes-as-the-default.mdx} | 27 +- ...sion-070.md => 2022-09-05-version-070.mdx} | 2 +- ...t-native-core-contributor-summit-2022.mdx} | 4 +- ...-12-13-pointer-events-in-react-native.mdx} | 2 +- ...rst.md => 2023-01-03-typescript-first.mdx} | 2 +- ...sion-071.md => 2023-01-12-version-071.mdx} | 2 +- ...01-27-71rc1-android-outage-postmortem.mdx} | 2 +- ...1-0.72-metro-package-exports-symlinks.mdx} | 2 +- ...=> 2023-06-21-package-exports-support.mdx} | 2 +- ...ebugging-improvements-stable-symlinks.mdx} | 2 +- ...se-0.74.md => 2024-04-22-release-0.74.mdx} | 31 +- ...-framework-to-build-react-native-apps.mdx} | 4 +- ...se-0.75.md => 2024-08-12-release-0.75.mdx} | 2 +- ...4-10-23-release-0.76-new-architecture.mdx} | 20 +- ...24-10-23-the-new-architecture-is-here.mdx} | 64 +- ...on-0.77.md => 2025-01-21-version-0.77.mdx} | 4 +- ...t-native-core-contributor-summit-2024.mdx} | 2 +- ...78.md => 2025-02-19-react-native-0.78.mdx} | 2 +- ...79.md => 2025-04-08-react-native-0.79.mdx} | 4 +- ...oving-towards-a-stable-javascript-api.mdx} | 74 +- ...80.md => 2025-06-12-react-native-0.80.mdx} | 2 +- ...81.md => 2025-08-12-react-native-0.81.mdx} | 6 +- ...82.md => 2025-10-08-react-native-0.82.mdx} | 20 +- ...83.md => 2025-12-10-react-native-0.83.mdx} | 9 +- ...84.md => 2026-02-11-react-native-0.84.mdx} | 2 +- ...2-24-react-native-comes-to-meta-quest.mdx} | 7 +- .../_markdown-GH-release-notes-prerelease.mdx | 6 +- .../_markdown-road-to-release-template.mdx | 8 +- ...-overview.md => contributing-overview.mdx} | 2 +- ....md => contribution-license-agreement.mdx} | 2 +- ...requests.md => managing-pull-requests.mdx} | 7 +- website/docusaurus.config.ts | 2 +- website/package.json | 16 +- .../version-0.77/accessibilityinfo.md | 2 +- .../metro.md => version-0.77/metro.mdx} | 42 +- .../versioned_docs/version-0.77/profiling.md | 6 +- .../version-0.77/signed-apk-android.md | 6 +- .../versioned_docs/version-0.77/statusbar.md | 2 +- ...e-library.md => create-module-library.mdx} | 8 +- .../the-new-architecture/pure-cxx-modules.md | 2 +- .../{using-codegen.md => using-codegen.mdx} | 2 +- .../the-new-architecture/what-is-codegen.mdx} | 2 +- .../versioned_docs/version-0.77/transforms.md | 2 +- .../turbo-native-modules-android.md | 2 +- .../version-0.77/turbo-native-modules.md | 2 +- .../version-0.78/accessibilityinfo.md | 2 +- .../metro.md => version-0.78/metro.mdx} | 42 +- .../versioned_docs/version-0.78/profiling.md | 6 +- .../version-0.78/signed-apk-android.md | 6 +- .../versioned_docs/version-0.78/statusbar.md | 2 +- .../create-module-library.mdx} | 8 +- .../the-new-architecture/pure-cxx-modules.md | 2 +- .../{using-codegen.md => using-codegen.mdx} | 2 +- .../the-new-architecture/what-is-codegen.mdx} | 2 +- .../versioned_docs/version-0.78/transforms.md | 2 +- .../turbo-native-modules-android.md | 2 +- .../version-0.78/turbo-native-modules.md | 2 +- .../version-0.79/accessibilityinfo.md | 2 +- .../metro.md => version-0.79/metro.mdx} | 42 +- .../version-0.79/other-debugging-methods.md | 2 +- .../versioned_docs/version-0.79/profiling.md | 6 +- .../version-0.79/signed-apk-android.md | 6 +- .../versioned_docs/version-0.79/statusbar.md | 2 +- .../create-module-library.mdx} | 8 +- .../the-new-architecture/pure-cxx-modules.md | 2 +- .../{using-codegen.md => using-codegen.mdx} | 2 +- .../the-new-architecture/what-is-codegen.mdx} | 2 +- .../versioned_docs/version-0.79/transforms.md | 2 +- .../turbo-native-modules-android.md | 2 +- .../version-0.79/turbo-native-modules.md | 2 +- .../version-0.80/accessibilityinfo.md | 2 +- .../version-0.80/interactionmanager.md | 2 +- website/versioned_docs/version-0.80/metro.md | 104 -- website/versioned_docs/version-0.80/metro.mdx | 112 ++ .../version-0.80/other-debugging-methods.md | 2 +- .../versioned_docs/version-0.80/profiling.md | 6 +- .../version-0.80/signed-apk-android.md | 6 +- .../versioned_docs/version-0.80/statusbar.md | 2 +- .../version-0.80/strict-typescript-api.md | 4 +- .../create-module-library.mdx | 8 +- .../the-new-architecture/pure-cxx-modules.md | 2 +- .../{using-codegen.md => using-codegen.mdx} | 2 +- ...what-is-codegen.md => what-is-codegen.mdx} | 2 +- website/versioned_docs/version-0.80/timers.md | 2 +- .../versioned_docs/version-0.80/transforms.md | 2 +- .../turbo-native-modules-android.md | 2 +- .../version-0.80/turbo-native-modules.md | 2 +- .../version-0.81/accessibilityinfo.md | 2 +- .../version-0.81/building-for-tv.md | 2 +- .../integration-with-android-fragment.md | 2 +- .../version-0.81/interactionmanager.md | 2 +- website/versioned_docs/version-0.81/metro.md | 104 -- website/versioned_docs/version-0.81/metro.mdx | 112 ++ .../versioned_docs/version-0.81/network.md | 2 +- .../version-0.81/other-debugging-methods.md | 2 +- .../versioned_docs/version-0.81/profiling.md | 6 +- .../versioned_docs/version-0.81/security.md | 4 +- .../version-0.81/signed-apk-android.md | 6 +- .../versioned_docs/version-0.81/statusbar.md | 2 +- .../version-0.81/strict-typescript-api.md | 4 +- ...e-library.md => create-module-library.mdx} | 8 +- .../the-new-architecture/pure-cxx-modules.md | 2 +- .../the-new-architecture/using-codegen.mdx} | 4 +- .../the-new-architecture/what-is-codegen.mdx} | 2 +- website/versioned_docs/version-0.81/timers.md | 2 +- .../versioned_docs/version-0.81/transforms.md | 2 +- .../turbo-native-modules-android.md | 2 +- .../version-0.81/turbo-native-modules.md | 2 +- .../_canary-channel-api-warning.mdx | 2 +- .../_experimental-channel-api-warning.mdx | 2 +- .../version-0.82/accessibilityinfo.md | 2 +- .../versioned_docs/version-0.82/alertios.md | 2 +- .../version-0.82/asyncstorage.md | 2 +- .../version-0.82/backhandler.md | 2 +- .../version-0.82/building-for-tv.md | 2 +- .../versioned_docs/version-0.82/checkbox.md | 2 +- .../versioned_docs/version-0.82/clipboard.md | 2 +- .../version-0.82/datepickerandroid.md | 2 +- .../version-0.82/datepickerios.md | 2 +- .../global-PerformanceEventTiming.md | 2 +- .../global-PerformanceLongTaskTiming.md | 2 +- .../version-0.82/global-performance.md | 6 +- .../version-0.82/imagepickerios.md | 2 +- .../integration-with-android-fragment.md | 2 +- .../version-0.82/interactionmanager.md | 2 +- .../version-0.82/legacy/native-modules-ios.md | 2 +- website/versioned_docs/version-0.82/metro.md | 104 -- website/versioned_docs/version-0.82/metro.mdx | 112 ++ website/versioned_docs/version-0.82/modal.md | 2 +- .../versioned_docs/version-0.82/network.md | 2 +- .../version-0.82/other-debugging-methods.md | 2 +- .../versioned_docs/version-0.82/profiling.md | 6 +- .../version-0.82/progressbarandroid.md | 2 +- .../version-0.82/pushnotificationios.md | 2 +- .../version-0.82/safeareaview.md | 2 +- .../versioned_docs/version-0.82/security.md | 4 +- .../version-0.82/segmentedcontrolios.md | 2 +- .../version-0.82/signed-apk-android.md | 6 +- .../versioned_docs/version-0.82/statusbar.md | 2 +- .../version-0.82/statusbarios.md | 2 +- .../version-0.82/strict-typescript-api.md | 4 +- .../versioned_docs/version-0.82/stylesheet.md | 2 +- .../versioned_docs/version-0.82/textinput.md | 2 +- ...e-library.md => create-module-library.mdx} | 8 +- .../the-new-architecture/pure-cxx-modules.md | 2 +- .../the-new-architecture/using-codegen.mdx | 4 +- .../the-new-architecture/what-is-codegen.mdx} | 2 +- .../version-0.82/timepickerandroid.md | 2 +- website/versioned_docs/version-0.82/timers.md | 2 +- .../versioned_docs/version-0.82/transforms.md | 2 +- .../turbo-native-modules-android.md | 2 +- .../version-0.82/virtualizedlist.md | 2 +- .../_canary-channel-api-warning.mdx | 2 +- .../_experimental-channel-api-warning.mdx | 2 +- .../version-0.83/accessibilityinfo.md | 2 +- .../versioned_docs/version-0.83/alertios.md | 2 +- .../version-0.83/asyncstorage.md | 2 +- .../version-0.83/backhandler.md | 2 +- .../version-0.83/building-for-tv.md | 2 +- .../versioned_docs/version-0.83/checkbox.md | 2 +- .../versioned_docs/version-0.83/clipboard.md | 2 +- .../version-0.83/datepickerandroid.md | 2 +- .../version-0.83/datepickerios.md | 2 +- .../global-PerformanceEventTiming.md | 2 +- .../global-PerformanceLongTaskTiming.md | 2 +- .../global-PerformanceResourceTiming.md | 2 +- .../global-intersectionobserver.md | 2 +- .../global-intersectionobserverentry.md | 2 +- .../version-0.83/global-performance.md | 6 +- .../version-0.83/imagepickerios.md | 2 +- .../integration-with-android-fragment.md | 2 +- .../version-0.83/interactionmanager.md | 2 +- .../version-0.83/legacy/native-modules-ios.md | 2 +- website/versioned_docs/version-0.83/metro.md | 104 -- website/versioned_docs/version-0.83/metro.mdx | 112 ++ website/versioned_docs/version-0.83/modal.md | 2 +- .../versioned_docs/version-0.83/network.md | 2 +- .../version-0.83/other-debugging-methods.md | 2 +- .../versioned_docs/version-0.83/profiling.md | 6 +- .../version-0.83/progressbarandroid.md | 2 +- .../version-0.83/pushnotificationios.md | 2 +- .../version-0.83/safeareaview.md | 2 +- .../versioned_docs/version-0.83/security.md | 4 +- .../version-0.83/segmentedcontrolios.md | 2 +- .../version-0.83/signed-apk-android.md | 6 +- .../versioned_docs/version-0.83/statusbar.md | 2 +- .../version-0.83/statusbarios.md | 2 +- .../version-0.83/strict-typescript-api.md | 4 +- .../versioned_docs/version-0.83/stylesheet.md | 2 +- .../versioned_docs/version-0.83/textinput.md | 2 +- .../create-module-library.md | 192 ---- .../create-module-library.mdx | 196 ++++ .../the-new-architecture/pure-cxx-modules.md | 2 +- .../the-new-architecture/using-codegen.mdx} | 4 +- .../the-new-architecture/what-is-codegen.mdx | 2 +- .../version-0.83/timepickerandroid.md | 2 +- website/versioned_docs/version-0.83/timers.md | 2 +- .../versioned_docs/version-0.83/transforms.md | 2 +- .../turbo-native-modules-android.md | 2 +- .../version-0.83/virtualizedlist.md | 2 +- .../_canary-channel-api-warning.mdx | 2 +- .../_experimental-channel-api-warning.mdx | 2 +- .../version-0.84/accessibilityinfo.md | 2 +- .../versioned_docs/version-0.84/alertios.md | 2 +- .../version-0.84/asyncstorage.md | 2 +- .../version-0.84/backhandler.md | 2 +- .../version-0.84/building-for-tv.md | 2 +- .../versioned_docs/version-0.84/checkbox.md | 2 +- .../versioned_docs/version-0.84/clipboard.md | 2 +- .../version-0.84/datepickerandroid.md | 2 +- .../version-0.84/datepickerios.md | 2 +- .../global-PerformanceEventTiming.md | 2 +- .../global-PerformanceLongTaskTiming.md | 2 +- .../global-PerformanceResourceTiming.md | 2 +- .../global-intersectionobserver.md | 2 +- .../global-intersectionobserverentry.md | 2 +- .../version-0.84/global-performance.md | 6 +- .../version-0.84/imagepickerios.md | 2 +- .../integration-with-android-fragment.md | 2 +- .../version-0.84/interactionmanager.md | 2 +- .../version-0.84/legacy/native-modules-ios.md | 2 +- website/versioned_docs/version-0.84/metro.md | 104 -- website/versioned_docs/version-0.84/metro.mdx | 112 ++ website/versioned_docs/version-0.84/modal.md | 2 +- .../versioned_docs/version-0.84/network.md | 2 +- .../version-0.84/other-debugging-methods.md | 2 +- .../versioned_docs/version-0.84/profiling.md | 6 +- .../version-0.84/progressbarandroid.md | 2 +- .../version-0.84/pushnotificationios.md | 2 +- .../version-0.84/safeareaview.md | 2 +- .../versioned_docs/version-0.84/security.md | 4 +- .../version-0.84/segmentedcontrolios.md | 2 +- .../version-0.84/signed-apk-android.md | 6 +- .../versioned_docs/version-0.84/statusbar.md | 2 +- .../version-0.84/statusbarios.md | 2 +- .../version-0.84/strict-typescript-api.md | 4 +- .../versioned_docs/version-0.84/stylesheet.md | 2 +- .../versioned_docs/version-0.84/textinput.md | 2 +- .../create-module-library.md | 192 ---- .../create-module-library.mdx | 196 ++++ .../the-new-architecture/pure-cxx-modules.md | 2 +- .../the-new-architecture/using-codegen.md | 236 ---- .../the-new-architecture/using-codegen.mdx | 236 ++++ .../the-new-architecture/what-is-codegen.md | 15 - .../the-new-architecture/what-is-codegen.mdx | 15 + .../version-0.84/timepickerandroid.md | 2 +- website/versioned_docs/version-0.84/timers.md | 2 +- .../versioned_docs/version-0.84/transforms.md | 2 +- .../turbo-native-modules-android.md | 2 +- .../version-0.84/virtualizedlist.md | 2 +- yarn.lock | 1008 ++++++++--------- 293 files changed, 2403 insertions(+), 2208 deletions(-) rename docs/{metro.md => metro.mdx} (82%) rename website/versioned_docs/version-0.80/the-new-architecture/create-module-library.md => docs/the-new-architecture/create-module-library.mdx (97%) rename website/versioned_docs/version-0.81/the-new-architecture/using-codegen.md => docs/the-new-architecture/using-codegen.mdx (99%) rename website/versioned_docs/version-0.81/the-new-architecture/what-is-codegen.md => docs/the-new-architecture/what-is-codegen.mdx (97%) rename website/blog/{2019-11-18-react-native-doctor.md => 2019-11-18-react-native-doctor.mdx} (85%) rename website/blog/{2020-03-26-version-0.62.md => 2020-03-26-version-0.62.mdx} (99%) rename website/blog/{2020-07-23-docs-update.md => 2020-07-23-docs-update.mdx} (99%) rename website/blog/{2021-03-12-version-0.64.md => 2021-03-12-version-0.64.mdx} (99%) rename website/blog/{2021-04-08-GAAD-March-Accessibility-Issue-Update.md => 2021-04-08-GAAD-March-Accessibility-Issue-Update.mdx} (99%) rename website/blog/{2021-05-20-GAAD-One-Year-Later.md => 2021-05-20-GAAD-One-Year-Later.mdx} (99%) rename website/blog/{2021-08-19-h2-2021.md => 2021-08-19-h2-2021.mdx} (99%) rename website/blog/{2021-08-26-many-platform-vision.md => 2021-08-26-many-platform-vision.mdx} (93%) rename website/blog/{2021-08-30-react-native-is-hiring-managers.md => 2021-08-30-react-native-is-hiring-managers.mdx} (83%) rename website/blog/{2021-09-01-preparing-your-app-for-iOS-15-and-android-12.md => 2021-09-01-preparing-your-app-for-iOS-15-and-android-12.mdx} (97%) rename website/blog/{2021-10-01-version-066.md => 2021-10-01-version-066.mdx} (95%) rename website/blog/{2021-10-26-toward-hermes-being-the-default.md => 2021-10-26-toward-hermes-being-the-default.mdx} (99%) rename website/blog/{2022-01-19-version-067.md => 2022-01-19-version-067.mdx} (99%) rename website/blog/{2022-01-21-react-native-h2-2021-recap.md => 2022-01-21-react-native-h2-2021-recap.mdx} (99%) rename website/blog/{2022-03-15-an-update-on-the-new-architecture-rollout.md => 2022-03-15-an-update-on-the-new-architecture-rollout.mdx} (99%) rename website/blog/{2022-03-30-version-068.md => 2022-03-30-version-068.mdx} (99%) rename website/blog/{2022-05-19-GAAD-2022-update.md => 2022-05-19-GAAD-2022-update.mdx} (96%) rename website/blog/{2022-06-16-resources-migrating-your-react-native-library-to-the-new-architecture.md => 2022-06-16-resources-migrating-your-react-native-library-to-the-new-architecture.mdx} (97%) rename website/blog/{2022-06-21-version-069.md => 2022-06-21-version-069.mdx} (99%) rename website/blog/{2022-07-08-hermes-as-the-default.md => 2022-07-08-hermes-as-the-default.mdx} (92%) rename website/blog/{2022-09-05-version-070.md => 2022-09-05-version-070.mdx} (99%) rename website/blog/{2022-11-22-react-native-core-contributor-summit-2022.md => 2022-11-22-react-native-core-contributor-summit-2022.mdx} (99%) rename website/blog/{2022-12-13-pointer-events-in-react-native.md => 2022-12-13-pointer-events-in-react-native.mdx} (99%) rename website/blog/{2023-01-03-typescript-first.md => 2023-01-03-typescript-first.mdx} (99%) rename website/blog/{2023-01-12-version-071.md => 2023-01-12-version-071.mdx} (99%) rename website/blog/{2023-01-27-71rc1-android-outage-postmortem.md => 2023-01-27-71rc1-android-outage-postmortem.mdx} (99%) rename website/blog/{2023-06-21-0.72-metro-package-exports-symlinks.md => 2023-06-21-0.72-metro-package-exports-symlinks.mdx} (99%) rename website/blog/{2023-06-21-package-exports-support.md => 2023-06-21-package-exports-support.mdx} (99%) rename website/blog/{2023-12-06-0.73-debugging-improvements-stable-symlinks.md => 2023-12-06-0.73-debugging-improvements-stable-symlinks.mdx} (99%) rename website/blog/{2024-04-22-release-0.74.md => 2024-04-22-release-0.74.mdx} (95%) rename website/blog/{2024-06-25-use-a-framework-to-build-react-native-apps.md => 2024-06-25-use-a-framework-to-build-react-native-apps.mdx} (98%) rename website/blog/{2024-08-12-release-0.75.md => 2024-08-12-release-0.75.mdx} (99%) rename website/blog/{2024-10-23-release-0.76-new-architecture.md => 2024-10-23-release-0.76-new-architecture.mdx} (91%) rename website/blog/{2024-10-23-the-new-architecture-is-here.md => 2024-10-23-the-new-architecture-is-here.mdx} (92%) rename website/blog/{2025-01-21-version-0.77.md => 2025-01-21-version-0.77.mdx} (99%) rename website/blog/{2025-02-03-react-native-core-contributor-summit-2024.md => 2025-02-03-react-native-core-contributor-summit-2024.mdx} (99%) rename website/blog/{2025-02-19-react-native-0.78.md => 2025-02-19-react-native-0.78.mdx} (99%) rename website/blog/{2025-04-08-react-native-0.79.md => 2025-04-08-react-native-0.79.mdx} (99%) rename website/blog/{2025-06-12-moving-towards-a-stable-javascript-api.md => 2025-06-12-moving-towards-a-stable-javascript-api.mdx} (91%) rename website/blog/{2025-06-12-react-native-0.80.md => 2025-06-12-react-native-0.80.mdx} (99%) rename website/blog/{2025-08-12-react-native-0.81.md => 2025-08-12-react-native-0.81.mdx} (98%) rename website/blog/{2025-10-08-react-native-0.82.md => 2025-10-08-react-native-0.82.mdx} (97%) rename website/blog/{2025-12-10-react-native-0.83.md => 2025-12-10-react-native-0.83.mdx} (98%) rename website/blog/{2026-02-11-react-native-0.84.md => 2026-02-11-react-native-0.84.mdx} (99%) rename website/blog/{2026-02-24-react-native-comes-to-meta-quest.md => 2026-02-24-react-native-comes-to-meta-quest.mdx} (98%) rename website/contributing/{contributing-overview.md => contributing-overview.mdx} (99%) rename website/contributing/{contribution-license-agreement.md => contribution-license-agreement.mdx} (97%) rename website/contributing/{managing-pull-requests.md => managing-pull-requests.mdx} (97%) rename website/versioned_docs/{version-0.79/metro.md => version-0.77/metro.mdx} (82%) rename website/versioned_docs/version-0.77/the-new-architecture/{create-module-library.md => create-module-library.mdx} (97%) rename website/versioned_docs/version-0.77/the-new-architecture/{using-codegen.md => using-codegen.mdx} (99%) rename website/versioned_docs/{version-0.78/the-new-architecture/what-is-codegen.md => version-0.77/the-new-architecture/what-is-codegen.mdx} (97%) rename website/versioned_docs/{version-0.77/metro.md => version-0.78/metro.mdx} (82%) rename website/versioned_docs/{version-0.79/the-new-architecture/create-module-library.md => version-0.78/the-new-architecture/create-module-library.mdx} (97%) rename website/versioned_docs/version-0.78/the-new-architecture/{using-codegen.md => using-codegen.mdx} (99%) rename website/versioned_docs/{version-0.79/the-new-architecture/what-is-codegen.md => version-0.78/the-new-architecture/what-is-codegen.mdx} (97%) rename website/versioned_docs/{version-0.78/metro.md => version-0.79/metro.mdx} (82%) rename website/versioned_docs/{version-0.78/the-new-architecture/create-module-library.md => version-0.79/the-new-architecture/create-module-library.mdx} (97%) rename website/versioned_docs/version-0.79/the-new-architecture/{using-codegen.md => using-codegen.mdx} (99%) rename website/versioned_docs/{version-0.77/the-new-architecture/what-is-codegen.md => version-0.79/the-new-architecture/what-is-codegen.mdx} (97%) delete mode 100644 website/versioned_docs/version-0.80/metro.md create mode 100644 website/versioned_docs/version-0.80/metro.mdx rename docs/the-new-architecture/create-module-library.md => website/versioned_docs/version-0.80/the-new-architecture/create-module-library.mdx (97%) rename website/versioned_docs/version-0.80/the-new-architecture/{using-codegen.md => using-codegen.mdx} (99%) rename website/versioned_docs/version-0.80/the-new-architecture/{what-is-codegen.md => what-is-codegen.mdx} (97%) delete mode 100644 website/versioned_docs/version-0.81/metro.md create mode 100644 website/versioned_docs/version-0.81/metro.mdx rename website/versioned_docs/version-0.81/the-new-architecture/{create-module-library.md => create-module-library.mdx} (97%) rename website/versioned_docs/{version-0.83/the-new-architecture/using-codegen.md => version-0.81/the-new-architecture/using-codegen.mdx} (99%) rename website/versioned_docs/{version-0.82/the-new-architecture/what-is-codegen.md => version-0.81/the-new-architecture/what-is-codegen.mdx} (97%) delete mode 100644 website/versioned_docs/version-0.82/metro.md create mode 100644 website/versioned_docs/version-0.82/metro.mdx rename website/versioned_docs/version-0.82/the-new-architecture/{create-module-library.md => create-module-library.mdx} (97%) rename docs/the-new-architecture/using-codegen.md => website/versioned_docs/version-0.82/the-new-architecture/using-codegen.mdx (99%) rename website/versioned_docs/{version-0.83/the-new-architecture/what-is-codegen.md => version-0.82/the-new-architecture/what-is-codegen.mdx} (97%) delete mode 100644 website/versioned_docs/version-0.83/metro.md create mode 100644 website/versioned_docs/version-0.83/metro.mdx delete mode 100644 website/versioned_docs/version-0.83/the-new-architecture/create-module-library.md create mode 100644 website/versioned_docs/version-0.83/the-new-architecture/create-module-library.mdx rename website/versioned_docs/{version-0.82/the-new-architecture/using-codegen.md => version-0.83/the-new-architecture/using-codegen.mdx} (99%) rename docs/the-new-architecture/what-is-codegen.md => website/versioned_docs/version-0.83/the-new-architecture/what-is-codegen.mdx (97%) delete mode 100644 website/versioned_docs/version-0.84/metro.md create mode 100644 website/versioned_docs/version-0.84/metro.mdx delete mode 100644 website/versioned_docs/version-0.84/the-new-architecture/create-module-library.md create mode 100644 website/versioned_docs/version-0.84/the-new-architecture/create-module-library.mdx delete mode 100644 website/versioned_docs/version-0.84/the-new-architecture/using-codegen.md create mode 100644 website/versioned_docs/version-0.84/the-new-architecture/using-codegen.mdx delete mode 100644 website/versioned_docs/version-0.84/the-new-architecture/what-is-codegen.md create mode 100644 website/versioned_docs/version-0.84/the-new-architecture/what-is-codegen.mdx diff --git a/docs/_canary-channel-api-warning.mdx b/docs/_canary-channel-api-warning.mdx index e8b3934b850..2c1ae5cf423 100644 --- a/docs/_canary-channel-api-warning.mdx +++ b/docs/_canary-channel-api-warning.mdx @@ -1,4 +1,4 @@ -:::tip Canary 🧪 +:::tip[Canary 🧪] **This API is currently only available in React Native’s Canary and Experimental channels.** diff --git a/docs/_experimental-channel-api-warning.mdx b/docs/_experimental-channel-api-warning.mdx index 8f290343124..ffcfae347fe 100644 --- a/docs/_experimental-channel-api-warning.mdx +++ b/docs/_experimental-channel-api-warning.mdx @@ -1,4 +1,4 @@ -:::tip Experimental Feature 🧪 +:::tip[Experimental Feature 🧪] **This API is currently only available in React Native’s Experimental channels.** diff --git a/docs/alertios.md b/docs/alertios.md index 64d298d5e0a..a2d6d4f2610 100644 --- a/docs/alertios.md +++ b/docs/alertios.md @@ -3,6 +3,6 @@ id: alertios title: '❌ AlertIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use [`Alert`](alert) instead. ::: diff --git a/docs/asyncstorage.md b/docs/asyncstorage.md index dfe35feaa3d..e1fb69471fa 100644 --- a/docs/asyncstorage.md +++ b/docs/asyncstorage.md @@ -3,6 +3,6 @@ id: asyncstorage title: '❌ AsyncStorage' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=storage) instead. ::: diff --git a/docs/checkbox.md b/docs/checkbox.md index 0a85111a8ae..e92591defd5 100644 --- a/docs/checkbox.md +++ b/docs/checkbox.md @@ -3,6 +3,6 @@ id: checkbox title: '❌ CheckBox' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=checkbox) instead. ::: diff --git a/docs/clipboard.md b/docs/clipboard.md index 2e67bf9ba5a..bcfbf8714d9 100644 --- a/docs/clipboard.md +++ b/docs/clipboard.md @@ -3,6 +3,6 @@ id: clipboard title: '❌ Clipboard' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=clipboard) instead. ::: diff --git a/docs/datepickerandroid.md b/docs/datepickerandroid.md index d837b48b957..c928fdffee6 100644 --- a/docs/datepickerandroid.md +++ b/docs/datepickerandroid.md @@ -3,6 +3,6 @@ id: datepickerandroid title: '❌ DatePickerAndroid' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead. ::: diff --git a/docs/datepickerios.md b/docs/datepickerios.md index 0e536ffa686..7965ec05c3a 100644 --- a/docs/datepickerios.md +++ b/docs/datepickerios.md @@ -3,6 +3,6 @@ id: datepickerios title: '❌ DatePickerIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead. ::: diff --git a/docs/imagepickerios.md b/docs/imagepickerios.md index d4749216253..ca5814e8677 100644 --- a/docs/imagepickerios.md +++ b/docs/imagepickerios.md @@ -3,6 +3,6 @@ id: imagepickerios title: '❌ ImagePickerIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=image+picker) instead. ::: diff --git a/docs/legacy/native-modules-ios.md b/docs/legacy/native-modules-ios.md index fb3303985bb..6c33c64ec75 100644 --- a/docs/legacy/native-modules-ios.md +++ b/docs/legacy/native-modules-ios.md @@ -551,7 +551,7 @@ RCT_EXPORT_METHOD(doSomethingExpensive:(NSString *)param callback:(RCTResponseSe ``` -:::info Sharing dispatch queues between modules +:::info[Sharing dispatch queues between modules] The `methodQueue` method will be called once when the module is initialized, and then retained by React Native, so there is no need to keep a reference to the queue yourself, unless you wish to make use of it within your module. However, if you wish to share the same queue between multiple modules then you will need to ensure that you retain and return the same queue instance for each of them. ::: diff --git a/docs/metro.md b/docs/metro.mdx similarity index 82% rename from docs/metro.md rename to docs/metro.mdx index a61962a5512..dd9d297e77a 100644 --- a/docs/metro.md +++ b/docs/metro.mdx @@ -20,9 +20,12 @@ In React Native, your Metro config should extend either [`@react-native/metro-co Below is the default `metro.config.js` file in a React Native template project: - +{/* prettier-ignore */} ```js -const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); +const { + getDefaultConfig, + mergeConfig, +} = require('@react-native/metro-config'); /** * Metro configuration @@ -45,23 +48,28 @@ Exporting a config function is an opt-in to managing the final config yourself **From `@react-native/metro-config` 0.72.1**, it is no longer necessary to use a config function to access the complete default config. See the **Tip** section below. ::: - +{/* prettier-ignore */} ```js -const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); +const { + getDefaultConfig, + mergeConfig, +} = require('@react-native/metro-config'); module.exports = function (baseConfig) { - const defaultConfig = mergeConfig(baseConfig, getDefaultConfig(__dirname)); - const {resolver: {assetExts, sourceExts}} = defaultConfig; - - return mergeConfig( - defaultConfig, - { - resolver: { - assetExts: assetExts.filter(ext => ext !== 'svg'), - sourceExts: [...sourceExts, 'svg'], - }, - }, + const defaultConfig = mergeConfig( + baseConfig, + getDefaultConfig(__dirname), ); + const { + resolver: {assetExts, sourceExts}, + } = defaultConfig; + + return mergeConfig(defaultConfig, { + resolver: { + assetExts: assetExts.filter(ext => ext !== 'svg'), + sourceExts: [...sourceExts, 'svg'], + }, + }); }; ``` @@ -70,7 +78,7 @@ Using a config function is for advanced use cases. A simpler method than the abo **Alternative** - +{/* prettier-ignore */} ```js const defaultConfig = getDefaultConfig(__dirname); @@ -87,7 +95,7 @@ module.exports = mergeConfig(defaultConfig, config); ✅ **Recommended** - +{/* prettier-ignore */} ```js const config = { resolver: { diff --git a/docs/profiling.md b/docs/profiling.md index f833a4440c2..73cbed73ad1 100644 --- a/docs/profiling.md +++ b/docs/profiling.md @@ -33,13 +33,13 @@ After opening the trace in Android Studio or Perfetto, you should see something ![Example](/docs/assets/SystraceExample.png) -:::note Hint +:::note[Hint] Use the WASD keys to strafe and zoom. ::: The exact UI might be different but the instructions below will apply regardless of the tool you're using. -:::info Enable VSync highlighting +:::info[Enable VSync highlighting] Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries: ![Enable VSync Highlighting](/docs/assets/SystraceHighlightVSync.png) @@ -133,7 +133,7 @@ There isn't a quick way to mitigate this unless you're able to postpone creating If the problem seems to be on the native side, you can use the [CPU hotspot profiler](https://developer.android.com/studio/profile/record-java-kotlin-methods) to get more details on what's happening. Open the Android Studio Profiler panel and select "Find CPU Hotspots (Java/Kotlin Method Recording)". -:::info Choose the Java/Kotlin recording +:::info[Choose the Java/Kotlin recording] Make sure you select "Find CPU Hotspots **(Java/Kotlin Recording)**" rather than "Find CPU Hotspots (Callstack Sample)". They have similar icons but do different things. ::: diff --git a/docs/segmentedcontrolios.md b/docs/segmentedcontrolios.md index bab15ae9ba1..d9ede6e35e8 100644 --- a/docs/segmentedcontrolios.md +++ b/docs/segmentedcontrolios.md @@ -3,7 +3,7 @@ id: segmentedcontrolios title: '❌ SegmentedControlIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=segmentedcontrol) instead. ::: diff --git a/docs/signed-apk-android.md b/docs/signed-apk-android.md index d51ecd67bbe..c5158f4aab0 100644 --- a/docs/signed-apk-android.md +++ b/docs/signed-apk-android.md @@ -65,11 +65,11 @@ MYAPP_UPLOAD_KEY_PASSWORD=***** These are going to be global Gradle variables, which we can later use in our Gradle config to sign our app. -:::note Note about using git +:::note[Note about using git] Saving the above Gradle variables in `~/.gradle/gradle.properties` instead of `android/gradle.properties` prevents them from being checked in to git. You may have to create the `~/.gradle/gradle.properties` file in your user's home directory before you can add the variables. ::: -:::note Note about security +:::note[Note about security] If you are not keen on storing your passwords in plaintext, and you are running macOS, you can also [store your credentials in the Keychain Access app](https://pilloxa.gitlab.io/posts/safer-passwords-in-gradle/). Then you can skip the two last rows in `~/.gradle/gradle.properties`. ::: @@ -174,7 +174,7 @@ Please note that you will also have to configure distinct version codes, as [sug Proguard is a tool that can slightly reduce the size of the APK. It does this by stripping parts of the React Native Java bytecode (and its dependencies) that your app is not using. -:::caution Important +:::caution[Important] Make sure to thoroughly test your app if you've enabled Proguard. Proguard often requires configuration specific to each native library you're using. See `app/proguard-rules.pro`. ::: diff --git a/docs/statusbarios.md b/docs/statusbarios.md index 67ae7994778..2b17ba436a2 100644 --- a/docs/statusbarios.md +++ b/docs/statusbarios.md @@ -3,7 +3,7 @@ id: statusbarios title: '❌ StatusBarIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use [`StatusBar`](statusbar.md) for mutating the status bar. ::: diff --git a/docs/strict-typescript-api.md b/docs/strict-typescript-api.md index 4223527eeab..a426511835b 100644 --- a/docs/strict-typescript-api.md +++ b/docs/strict-typescript-api.md @@ -32,7 +32,7 @@ Opting in is a **breaking change**, since some of our new types have updated nam } ``` -:::note Under the hood +:::note[Under the hood] This will instruct TypeScript to resolve `react-native` types from our new [`types_generated/`](https://www.npmjs.com/package/react-native?activeTab=code) dir, instead of the previous [`types/`](https://www.npmjs.com/package/react-native?activeTab=code) dir (manually maintained). No restart of TypeScript or your editor is required. @@ -40,7 +40,7 @@ This will instruct TypeScript to resolve `react-native` types from our new [`typ The Strict TypeScript API follows our [RFC](https://github.com/react-native-community/discussions-and-proposals/pull/894) to remove deep imports from React Native. Therefore, some APIs are no longer exported at root. This is intentional, in order to reduce the overall surface area of React Native's API. -:::tip API feedback +:::tip[API feedback] **Sending feedback**: We will be working with the community to finalize which APIs we export over (at least) the next two React Native releases. Please share your feedback in our [feedback thread](https://github.com/react-native-community/discussions-and-proposals/discussions/893). diff --git a/website/versioned_docs/version-0.80/the-new-architecture/create-module-library.md b/docs/the-new-architecture/create-module-library.mdx similarity index 97% rename from website/versioned_docs/version-0.80/the-new-architecture/create-module-library.md rename to docs/the-new-architecture/create-module-library.mdx index 657ef9441bd..0a5091fab26 100644 --- a/website/versioned_docs/version-0.80/the-new-architecture/create-module-library.md +++ b/docs/the-new-architecture/create-module-library.mdx @@ -38,7 +38,11 @@ npx create-react-native-library@latest Once the interactive prompt is done, the tool creates a folder whose structure looks like this in Visual Studio Code: -Folder structure after initializing a new library. +Folder structure after initializing a new library. Feel free to explore the code that has been created for you. However, the most important parts: @@ -70,7 +74,7 @@ Finally, the library contains already all the infrastructure to let the library The rest of the guide assumes that you have a local Turbo Native Module in your app, created following the guidelines shown in the other guides in the website: platform specific Turbo Native Modules, or [cross-platform Turbo Native Modules](./pure-cxx-modules). But it works also for Components and legacy architecture modules and components. You'll have to adapt the files you need to copy and update. - +{/* TODO: add links for Turbo Native Modules */} 1. **[Not required for legacy architecture modules and components]** Move the code you have in the `specs` folder in your app into the `src` folder created by the `create-react-native-library` folder. 2. Update the `index.ts` file to properly export the Turbo Native Module spec so that it is accessible from the library. For example: diff --git a/docs/the-new-architecture/pure-cxx-modules.md b/docs/the-new-architecture/pure-cxx-modules.md index 37fa505e53f..b7c08196290 100644 --- a/docs/the-new-architecture/pure-cxx-modules.md +++ b/docs/the-new-architecture/pure-cxx-modules.md @@ -72,7 +72,7 @@ export default TurboModuleRegistry.getEnforcing( ## 2. Configure Codegen -The next step is to configure [Codegen](what-is-codegen.md) in your `package.json`. Update the file to include: +The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include: ```json title="package.json" "start": "react-native start", diff --git a/website/versioned_docs/version-0.81/the-new-architecture/using-codegen.md b/docs/the-new-architecture/using-codegen.mdx similarity index 99% rename from website/versioned_docs/version-0.81/the-new-architecture/using-codegen.md rename to docs/the-new-architecture/using-codegen.mdx index 56aca7b981c..49df503003f 100644 --- a/website/versioned_docs/version-0.81/the-new-architecture/using-codegen.md +++ b/docs/the-new-architecture/using-codegen.mdx @@ -19,12 +19,12 @@ The **Codegen** process is tightly coupled with the build of the app, and the sc For the sake of this guide, create a project using the React Native CLI as follows: -{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`} + {`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`} **Codegen** is used to generate the glue-code for your custom modules or components. See the guides for Turbo Native Modules and Fabric Native Components for more details on how to create them. - +{/* TODO: add links */} ## Configuring **Codegen** diff --git a/website/versioned_docs/version-0.81/the-new-architecture/what-is-codegen.md b/docs/the-new-architecture/what-is-codegen.mdx similarity index 97% rename from website/versioned_docs/version-0.81/the-new-architecture/what-is-codegen.md rename to docs/the-new-architecture/what-is-codegen.mdx index bc9cc37e7e0..717380c4df8 100644 --- a/website/versioned_docs/version-0.81/the-new-architecture/what-is-codegen.md +++ b/docs/the-new-architecture/what-is-codegen.mdx @@ -4,7 +4,7 @@ React Native invokes Codegen automatically every time an iOS or Android app is built. Occasionally, you would like to manually run the Codegen scripts to know which types and files are actually generated: this is a common scenario when developing [Turbo Native Modules](/docs/turbo-native-modules-introduction) and Fabric Native Components. - +{/* TODO: Add links to TM and FC */} ## How Codegen Works diff --git a/docs/timepickerandroid.md b/docs/timepickerandroid.md index 29bf4573cef..f6c06c1b89e 100644 --- a/docs/timepickerandroid.md +++ b/docs/timepickerandroid.md @@ -3,6 +3,6 @@ id: timepickerandroid title: '❌ TimePickerAndroid' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=timepicker) instead. ::: diff --git a/docs/turbo-native-modules-android.md b/docs/turbo-native-modules-android.md index 21fbd7703e1..83d922f9918 100644 --- a/docs/turbo-native-modules-android.md +++ b/docs/turbo-native-modules-android.md @@ -206,7 +206,7 @@ Finally, we need to tell the React Native in our main application how to find th In this case, you add it to be returned by the [getPackages](https://github.com/facebook/react-native/blob/8d8b8c343e62115a5509e1aed62047053c2f6e39/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactNativeHost.java#L233) method. :::info -Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.md#publish-the-library-on-npm), which our build tooling will autolink for you. +Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.mdx#publish-the-library-on-npm), which our build tooling will autolink for you. ::: diff --git a/eslint.config.js b/eslint.config.js index ac9621e332d..2764f3afda7 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -161,6 +161,8 @@ export default defineConfig([ }, }, ], + // causes false-positive warnings in files with MDX extension + '@typescript-eslint/no-unused-vars': 'off', }, }, ]); diff --git a/website/blog/2019-11-18-react-native-doctor.md b/website/blog/2019-11-18-react-native-doctor.mdx similarity index 85% rename from website/blog/2019-11-18-react-native-doctor.md rename to website/blog/2019-11-18-react-native-doctor.mdx index 34a71350161..ba0d0babf28 100644 --- a/website/blog/2019-11-18-react-native-doctor.md +++ b/website/blog/2019-11-18-react-native-doctor.mdx @@ -10,13 +10,20 @@ tags: [announcement] After over 20 pull requests from 6 contributors in the React Native Community, we're excited to launch `react-native doctor`, a new command to help you out with getting started, troubleshooting and automatically fixing errors with your development environment. The `doctor` command is heavily inspired by [Expo](https://expo.io/) and [Homebrew](https://brew.sh/)'s own doctor command with a pinch of UI inspired by [Jest](https://jestjs.io/). - +{/* truncate */} Here it is in action:

-

@@ -25,7 +32,12 @@ Here it is in action: The `doctor` command currently supports most of the software and libraries that React Native relies on, such as CocoaPods, Xcode and Android SDK. With `doctor` we'll find issues with your development environment and give you the option to automatically fix them. If `doctor` is not able to fix an issue, it will display a message and a helpful link explaining how to fix it manually as the following:

- Doctor command with a link to help on Android SDK's installation + Doctor command with a link to help on Android SDK's installation

## Try it now diff --git a/website/blog/2020-03-26-version-0.62.md b/website/blog/2020-03-26-version-0.62.mdx similarity index 99% rename from website/blog/2020-03-26-version-0.62.md rename to website/blog/2020-03-26-version-0.62.mdx index 3f31c9d6132..2cc99224da7 100644 --- a/website/blog/2020-03-26-version-0.62.md +++ b/website/blog/2020-03-26-version-0.62.mdx @@ -10,7 +10,7 @@ tags: [announcement, release] Today we’re releasing React Native version 0.62 which includes support for Flipper by default. - +{/* alex ignore master */} This release comes in the midst of a global pandemic. We’re releasing this version today to respect the work of hundreds of contributors who made this release possible and to prevent the release from falling too far behind master. Please be mindful of the reduced capacity of contributors to help with issues and prepare to delay upgrading if necessary. diff --git a/website/blog/2020-07-23-docs-update.md b/website/blog/2020-07-23-docs-update.mdx similarity index 99% rename from website/blog/2020-07-23-docs-update.md rename to website/blog/2020-07-23-docs-update.mdx index cfe5f9f67d6..d50be56f262 100644 --- a/website/blog/2020-07-23-docs-update.md +++ b/website/blog/2020-07-23-docs-update.mdx @@ -21,7 +21,7 @@ Last year we conducted user interviews and sent out [a survey](https://www.surve Thank you so much to everyone who participated in the interviews, the survey, and our documentation efforts! Your collaboration makes this possible. - +{/* truncate */} ## What’s next? diff --git a/website/blog/2021-03-12-version-0.64.md b/website/blog/2021-03-12-version-0.64.mdx similarity index 99% rename from website/blog/2021-03-12-version-0.64.md rename to website/blog/2021-03-12-version-0.64.mdx index 9e212d5d3f3..0c4194c1bc2 100644 --- a/website/blog/2021-03-12-version-0.64.md +++ b/website/blog/2021-03-12-version-0.64.mdx @@ -56,7 +56,7 @@ More information about Inline Requires is available in the [Performance document ## View Hermes traces with Chrome - +{/* alex ignore fellowship */} Over the last year Facebook has sponsored the [Major League Hacking fellowship](https://fellowship.mlh.io/), supporting contributions to React Native. [Jessie Nguyen](https://twitter.com/jessie_anh_ng) and [Saphal Patro](https://twitter.com/saphalinsaan) added the ability to use the Performance tab on Chrome DevTools to visualize the execution of your application when it is using Hermes. diff --git a/website/blog/2021-04-08-GAAD-March-Accessibility-Issue-Update.md b/website/blog/2021-04-08-GAAD-March-Accessibility-Issue-Update.mdx similarity index 99% rename from website/blog/2021-04-08-GAAD-March-Accessibility-Issue-Update.md rename to website/blog/2021-04-08-GAAD-March-Accessibility-Issue-Update.mdx index 748ff734afc..50b0dd8410f 100644 --- a/website/blog/2021-04-08-GAAD-March-Accessibility-Issue-Update.md +++ b/website/blog/2021-04-08-GAAD-March-Accessibility-Issue-Update.mdx @@ -10,7 +10,7 @@ While this work continues, the React Native and Accessibility teams at Facebook Thank you to all the community members who have participated. You are truly moving the needle in making React Native more accessible for everyone! - +{/* truncate */} ## Closed Pull Requests 🎉 diff --git a/website/blog/2021-05-20-GAAD-One-Year-Later.md b/website/blog/2021-05-20-GAAD-One-Year-Later.mdx similarity index 99% rename from website/blog/2021-05-20-GAAD-One-Year-Later.md rename to website/blog/2021-05-20-GAAD-One-Year-Later.mdx index 2b251733498..79504c3369e 100644 --- a/website/blog/2021-05-20-GAAD-One-Year-Later.md +++ b/website/blog/2021-05-20-GAAD-One-Year-Later.mdx @@ -18,7 +18,7 @@ We started with 90 outstanding gap analysis issues and from March 2021, when the We want to recognize and thank the React Native community for the significant progress towards a more accessible React Native over the past year. Every contributor's effort has counted in making progress on improving React Native Accessibility. - +{/* truncate */} ## Fixes diff --git a/website/blog/2021-08-19-h2-2021.md b/website/blog/2021-08-19-h2-2021.mdx similarity index 99% rename from website/blog/2021-08-19-h2-2021.md rename to website/blog/2021-08-19-h2-2021.mdx index 47d2b6e496c..e4cbe8fed00 100644 --- a/website/blog/2021-08-19-h2-2021.md +++ b/website/blog/2021-08-19-h2-2021.mdx @@ -10,7 +10,7 @@ At Facebook, our team works in half-year cycles. Each half we review our strateg H2 2021 is an exciting half for React Native. Our areas of focus include nurturing the community, beginning to roll out the new architecture to open source, and pushing the technology forward. - +{/* truncate */} ## Setting up the Community for Success @@ -54,6 +54,6 @@ Oculus has long used React Native to power core experiences like Store, where pe ### Summary - +{/* alex ignore gross */} We hope our H2 plans excite you as much as it does us, and we look forward to sharing more with you in the upcoming months! We will also be attending React Native EU on September 1, 2021 where teammate Joshua Gross ([@joshuaisgross](https://twitter.com/joshuaisgross)) will share how we replaced the architecture for the world’s largest React Native app. [Register for React Native EU](https://www.react-native.eu/) if you haven’t already! In the meantime, connect with us on Twitter ([@reactnative](https://twitter.com/reactnative)) for updates on events, our roadmap, and much more. diff --git a/website/blog/2021-08-26-many-platform-vision.md b/website/blog/2021-08-26-many-platform-vision.mdx similarity index 93% rename from website/blog/2021-08-26-many-platform-vision.md rename to website/blog/2021-08-26-many-platform-vision.mdx index 9ba0178dd97..1cf557464ea 100644 --- a/website/blog/2021-08-26-many-platform-vision.md +++ b/website/blog/2021-08-26-many-platform-vision.mdx @@ -6,7 +6,7 @@ tags: [announcement] React Native has been very successful at raising the bar for mobile development, both at Facebook and elsewhere in the industry. As we interact with computers in new ways and as new devices are invented, we want React Native to be there for everyone. Although React Native was originally created to build mobile apps, we believe that focusing on many platforms and building to each platform’s strengths and constraints has a symbiotic effect. We have seen huge benefits when we extended this technology to desktop and virtual reality, and we're excited to share what this means for the future of React Native. - +{/* truncate */} ## Respecting the Platform @@ -20,14 +20,18 @@ We believe that React Native enables developers to meet users’ expectations wh ### Embracing Platform Constraints - +{/* alex ignore easy */} Specific device hardware or user expectations impose unique constraints and requirements. As an example, memory is typically more constrained on Android and VR headsets than on iOS, macOS, and Windows. As another example, users expect mobile apps to start up almost instantaneously, but they are less frustrated when desktop apps take longer to start up. **We have found that by approaching these problems with React Native, we can more easily borrow lessons learned and code written for one platform, and apply them to other platforms.**
- Screenshot of Facebook Dating on mobile + Screenshot of Facebook Dating on mobile
- React Native and Relay power over 1000 Facebook surfaces on Android and iOS. + React Native and Relay power over 1000 Facebook surfaces on + Android and iOS.
@@ -50,9 +54,13 @@ In addition to domain-specific engineers and meetups and conferences, each platf **We believe that competition leads to better outcomes for everyone in the long run.** By studying what makes other players on each platform great, we can learn lessons that may apply to other platforms. For example, the race to simplify complex websites influenced the development of React and gave React Native a head start to offer a declarative framework for mobile apps. The demand for faster iteration cycles and build times for the web also led to the development of Fast Refresh which significantly benefited React Native. Similarly, performance optimizations in our internal mobile frameworks — especially around data fetching and parallelization — challenged us to improve React Native in a way that has also influenced React when we built the new [Facebook.com](https://facebook.com/) website.
- Screenshot of the Facebook.com website + Screenshot of the Facebook.com website
- React and Relay powers the Facebook.com website. + React and Relay powers the{' '} + Facebook.com website.
@@ -65,9 +73,13 @@ React and React Native are at a turning point. React has [started the road to a Building for desktop has been very exciting for us. We have taken what we know about building mobile experiences and applied them to desktop with eyes wide open. We’ve expanded our horizons with multiple child windows, menu bars, system trays, and more. As we continue collaborating on new desktop Messenger features, we expect to find opportunities that influence how we build on web and mobile. If you want to stay up to date, our desktop collaboration work is taking place [on GitHub](https://github.com/microsoft/react-native-windows).
- Screenshot of the Messenger app on macOS + Screenshot of the Messenger app on macOS
- React Native powers Video Calling in Messenger for Windows and macOS. + React Native powers Video Calling in Messenger for Windows and + macOS.
@@ -78,9 +90,13 @@ Similar to how we approach React Native for mobile, we will be validating our te Although most of the development for VR will still be internal, we hope to share more as soon as we can. We also anticipate that improvements to React Native for VR will surface in open source. For example, we anticipate that projects to reduce memory usage for VR use cases will also reduce memory usage for React Native on mobile and desktop experiences.
- Screenshot of Oculus Home in virtual reality + Screenshot of Oculus Home in virtual reality
- React and Relay power the Oculus Home and many other virtual reality experiences. + React and Relay power the Oculus Home and many other virtual + reality experiences.
diff --git a/website/blog/2021-08-30-react-native-is-hiring-managers.md b/website/blog/2021-08-30-react-native-is-hiring-managers.mdx similarity index 83% rename from website/blog/2021-08-30-react-native-is-hiring-managers.md rename to website/blog/2021-08-30-react-native-is-hiring-managers.mdx index 513d74265ae..98fc831a407 100644 --- a/website/blog/2021-08-30-react-native-is-hiring-managers.md +++ b/website/blog/2021-08-30-react-native-is-hiring-managers.mdx @@ -8,19 +8,27 @@ We recently shared [React Native’s Many Platform Vision](https://reactnative.d As [part of our plans beginning earlier this year](https://reactnative.dev/blog/2021/08/19/h2-2021), we are growing our focus on these platforms and growing our teams to help us achieve our vision. In order to support our new teammates, and many more to come, **we are hiring two Engineering Managers: one to help support React Native for Desktop, and one to support React Native for VR**. - +{/* truncate */}
- Screenshot of the Messenger app on macOS + Screenshot of the Messenger app on macOS
- React Native powers Video Calling in Messenger for Windows and macOS. + React Native powers Video Calling in Messenger for Windows and + macOS.
- Screenshot of Oculus Home in virtual reality + Screenshot of Oculus Home in virtual reality
- React and Relay power the Oculus Home and many other virtual reality experiences. + React and Relay power the Oculus Home and many other virtual + reality experiences.
diff --git a/website/blog/2021-09-01-preparing-your-app-for-iOS-15-and-android-12.md b/website/blog/2021-09-01-preparing-your-app-for-iOS-15-and-android-12.mdx similarity index 97% rename from website/blog/2021-09-01-preparing-your-app-for-iOS-15-and-android-12.md rename to website/blog/2021-09-01-preparing-your-app-for-iOS-15-and-android-12.mdx index 4cf9d66b080..e79c111ef8a 100644 --- a/website/blog/2021-09-01-preparing-your-app-for-iOS-15-and-android-12.md +++ b/website/blog/2021-09-01-preparing-your-app-for-iOS-15-and-android-12.mdx @@ -8,7 +8,7 @@ Hello everyone! With new mobile OS versions releasing late this year, we recommend preparing your React Native apps beforehand to avoid regressions when the releases become generally available. - +{/* truncate */} ## iOS 15 @@ -21,7 +21,10 @@ The release date of iOS 15 hasn’t been announced yet, but based on previous iO The way to disable _QuickType_ bar in _[TextInput](/docs/textinput)_ has changed. _QuickType_ bar is the bar above keyboard with three suggested words. In case your UI needs to have the bar hidden, setting [autoCorrect](/docs/textinput#autocorrect) to `false` no longer disables _QuickType_ bar in iOS 15 like earlier versions. In order to hide the _QuickType_ bar, you need to also set [spellCheck](/docs/textinput#spellcheck-ios) to `false`. This will disable spell check, the red underlines, in your _TextInput_. Disabling QuickType bar with spell check enabled is no longer an option.
- Screenshot of QuickType bar + Screenshot of QuickType bar
QuickType bar with three suggested words
diff --git a/website/blog/2021-10-01-version-066.md b/website/blog/2021-10-01-version-066.mdx similarity index 95% rename from website/blog/2021-10-01-version-066.md rename to website/blog/2021-10-01-version-066.mdx index 3b25b550877..dad812b2df0 100644 --- a/website/blog/2021-10-01-version-066.md +++ b/website/blog/2021-10-01-version-066.mdx @@ -14,7 +14,7 @@ Today we’re releasing React Native v0.66 for Android 12 and iOS 15 support alo - [Hermes 0.9.0](/blog/2021/10/01/version-066#hermes-090) - [Nightly and “Commitly” Releases](/blog/2021/10/01/version-066#nightly-and-commitly-releases) - +{/* truncate */} ### Handle taps on child views outside parent boundaries on Android @@ -62,13 +62,18 @@ The process for migrating your project to a React Native nightly release is very #### Using Commitly Releases (Commitlies)
- Screenshot of CircleCI artifact panel to find tarball + Screenshot of CircleCI artifact panel to find tarball
- Find the "build_npm_package-1" job related to a commit and head to the "Artifacts" panel to download the tarball for the commitly. + Find the "build_npm_package-1" job related to a commit and + head to the "Artifacts" panel to download the tarball for the + commitly.
- +{/* alex ignore just */} Just like with a nightly release, first make sure that your project has been upgraded to the most recent stable version. Then, go to the [`react-native` dashboard on Circle CI](https://app.circleci.com/pipelines/github/facebook/react-native) and look up the workflow that was triggered by the commit in question. There, you should see a job named `build_npm_package`. That job will have an “Artifacts” panel which will provide a link that you may use to download a tarball file. You can then run the following: diff --git a/website/blog/2021-10-26-toward-hermes-being-the-default.md b/website/blog/2021-10-26-toward-hermes-being-the-default.mdx similarity index 99% rename from website/blog/2021-10-26-toward-hermes-being-the-default.md rename to website/blog/2021-10-26-toward-hermes-being-the-default.mdx index 59115d89a9a..6c2cdc097ed 100644 --- a/website/blog/2021-10-26-toward-hermes-being-the-default.md +++ b/website/blog/2021-10-26-toward-hermes-being-the-default.mdx @@ -6,7 +6,7 @@ tags: [announcement] Since [we announced Hermes in 2019](https://engineering.fb.com/2019/07/12/android/hermes/), it has been increasingly gaining adoption in the community. The team at [Expo](https://expo.dev/), who maintain a popular meta-framework for React Native apps, recently [announced experimental](https://blog.expo.dev/expo-sdk-42-579aee2348b6) [support](https://blog.expo.dev/expo-sdk-43-beta-is-now-available-47dc54a8d29f) for Hermes after being [one of the most requested features of Expo](https://expo.canny.io/feature-requests/p/enabling-hermes). The team at [Realm](https://realm.io/), a popular mobile database, also recently shipped its [alpha support](https://github.com/realm/realm-js/issues/3940) for Hermes. In this post, we want to highlight some of the most exciting progress we've made over the past two years to push Hermes towards being _the best_ JavaScript engine for React Native. Looking forward, we are confident that with these improvements and more to come, we can make Hermes the default JavaScript engine for React Native across all platforms. - +{/* truncate */} ## Optimizing for React Native @@ -60,7 +60,7 @@ Last but not least, Hermes has also been powering all virtual reality experience We acknowledge there are still blockers that prevent parts of the community from adopting Hermes and we are committed to building support for these missing features. Our goal is to be fully featured so that Hermes is the right choice for most React Native apps. Here is how the community has already shaped the Hermes roadmap: - +{/* alex ignore just fellowship */} - [`Proxy` and `Reflect`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Meta_programming) were originally excluded from Hermes because Facebook does not use them. We were also concerned that adding Proxy would hurt property lookup performance even when Proxy is not used. But Proxy quickly become [the most requested feature](https://github.com/facebook/hermes/issues/33) of Hermes due to popular libraries such as [MobX](https://mobx.js.org/README.html) and [Immer](https://immerjs.github.io/immer/). We carefully evaluated and decided to build it just for the community, and we managed to implement it with very low cost. Since this is a feature we don’t use, we relied on our community to prove its stability. We started by testing Proxy behind a flag and created opt-in npm packages for [release v0.4](https://github.com/facebook/hermes/issues/33#issuecomment-668374607) and [v0.5](https://github.com/facebook/hermes/issues/33#issuecomment-668374607), and it’s [enabled by default starting from v0.7](https://github.com/facebook/hermes/releases/tag/v0.7.0). - [ECMAScript Internationalization API Specification (ECMA-402, or `Intl`)](https://hermesengine.dev/docs/intl) was [the second most requested feature](https://github.com/facebook/hermes/issues/23). `Intl` is a huge set of APIs and often requires the implementation to include **6MB worth** of [Unicode CLDR](https://cldr.unicode.org/index) data. This is why polyfills like [FormatJS (a.k.a. `react-intl`)](https://github.com/formatjs/formatjs) and JS engines like the [international variant build of community JSC](https://github.com/react-native-community/jsc-android-buildscripts#international-variant) are so huge. To avoid substantially increasing the binary size of Hermes, we decided to implement it with another strategy by consuming and mapping the ICU facilities provided by the libraries included in the operating systems, at the cost of some (often minor) variance in behaviors across platforms. diff --git a/website/blog/2022-01-19-version-067.md b/website/blog/2022-01-19-version-067.mdx similarity index 99% rename from website/blog/2022-01-19-version-067.md rename to website/blog/2022-01-19-version-067.mdx index b74a89c021f..99eacae7960 100644 --- a/website/blog/2022-01-19-version-067.md +++ b/website/blog/2022-01-19-version-067.mdx @@ -12,7 +12,7 @@ Happy new year everyone! Today we are announcing the latest release of React Nat - [Improvements to Release Process](/blog/2022/01/19/version-067#improvements-to-release-process) - [Interested in helping React Native stabilise new releases?](/blog/2022/01/19/version-067#interested-in-helping-react-native-stabilise-new-releases) - +{/* truncate */} ## Highlights of 0.67 diff --git a/website/blog/2022-01-21-react-native-h2-2021-recap.md b/website/blog/2022-01-21-react-native-h2-2021-recap.mdx similarity index 99% rename from website/blog/2022-01-21-react-native-h2-2021-recap.md rename to website/blog/2022-01-21-react-native-h2-2021-recap.mdx index 06ba8689a90..5310027d446 100644 --- a/website/blog/2022-01-21-react-native-h2-2021-recap.md +++ b/website/blog/2022-01-21-react-native-h2-2021-recap.mdx @@ -6,7 +6,7 @@ tags: [announcement] While we're all still excited for the [release of React Native 0.67](/blog/2022/01/19/version-067), we want to take a moment to **celebrate** what the community achieved in the last half and share what we have on the **horizon** for the future of React Native. - +{/* truncate */} Specifically, H2 2021 was an [exciting half for both us and the community](/blog/2021/08/19/h2-2021#pushing-the-technology-forward) where we had the opportunity to invest more in our open-source ecosystem. We revamped some of our processes and created new ones from scratch that will help you, us, and the community to enjoy a **better** React Native experience. @@ -48,7 +48,7 @@ There are so many more PRs we would like to call out, and we want to **thank** a At the beginning of the half we set a goal to **communicate** with our community more and set process for the behavior to continue. Here were some of our engagements in H2 2021: - +{/* alex ignore gross */} - We had the opportunity to participate in [React Native EU](https://www.react-native.eu/) with a talk from [Joshua Gross](https://twitter.com/joshuaisgross) - [Bringing the Fabric renderer to the “Facebook” app](https://www.youtube.com/watch?v=xKOkILSLs0Q&t=3987s) - We hosted an [“Ask Us Anything“ (AUA) on Reddit](https://www.reddit.com/r/reactnative/comments/pzdo1r/react_native_team_aua_thursday_oct_14_9am_pt/) and received over 100 questions! AUAs are a great opportunity for both us, to get a sense of the community engagement, and you all, to ask any kind of questions. If you haven’t yet, make sure you check the answers as some of them are extremely insightful diff --git a/website/blog/2022-03-15-an-update-on-the-new-architecture-rollout.md b/website/blog/2022-03-15-an-update-on-the-new-architecture-rollout.mdx similarity index 99% rename from website/blog/2022-03-15-an-update-on-the-new-architecture-rollout.md rename to website/blog/2022-03-15-an-update-on-the-new-architecture-rollout.mdx index 19a5e43073f..c53035bae64 100644 --- a/website/blog/2022-03-15-an-update-on-the-new-architecture-rollout.md +++ b/website/blog/2022-03-15-an-update-on-the-new-architecture-rollout.mdx @@ -16,7 +16,7 @@ If you still haven’t had the time to look into the New React Native Architectu We would like to share with the community some initiatives and material we prepared to make sure everyone is onboard on this endeavor. - +{/* truncate */} ### The Working Group @@ -50,7 +50,7 @@ React Native **0.68.0** is close to release. This version of React Native marks This means that you will be able to try the New Architecture **by changing one line** in the template. We also added extensive **comments and documentation** to the template to make sure you don’t need extra reading to use it out of the box. We hope this will help you adopt the New Architecture by **reducing the amount of code** your have to write. - +{/* alex ignore simple */} In the next releases, we will keep on updating the template to make it even more streamlined and simple to use. diff --git a/website/blog/2022-03-30-version-068.md b/website/blog/2022-03-30-version-068.mdx similarity index 99% rename from website/blog/2022-03-30-version-068.md rename to website/blog/2022-03-30-version-068.mdx index fba91533499..a26bf47c37d 100644 --- a/website/blog/2022-03-30-version-068.md +++ b/website/blog/2022-03-30-version-068.mdx @@ -13,7 +13,7 @@ Hello everyone! Today we are announcing the 0.68.0 release of React Native, with - [Website updates](/blog/2022/03/30/version-068#website-updates) - [Interested in helping React Native stabilise new releases?](/blog/2022/03/30/version-068#interested-in-helping-react-native-stabilize-new-releases) - +{/* truncate */} ## Highlights of 0.68 diff --git a/website/blog/2022-05-19-GAAD-2022-update.md b/website/blog/2022-05-19-GAAD-2022-update.mdx similarity index 96% rename from website/blog/2022-05-19-GAAD-2022-update.md rename to website/blog/2022-05-19-GAAD-2022-update.mdx index fc8d365d44f..712743ed16a 100644 --- a/website/blog/2022-05-19-GAAD-2022-update.md +++ b/website/blog/2022-05-19-GAAD-2022-update.mdx @@ -19,7 +19,7 @@ The process initially began with a thorough review and gap analysis of the frame We didn’t stop there, and in early 2022, we reviewed and prioritized the remaining issues from this gap analysis on the [Improved React Native Accessibility Board](https://github.com/facebook/react-native/projects/15) based on their impact on developers and end users. - +{/* truncate */} ## Fixes that have already landed in 2022 @@ -35,7 +35,7 @@ We didn’t stop there, and in early 2022, we reviewed and prioritized the remai ## Contributor highlight - +{/* alex disable he-she herself-himself her-him */} We want to recognize and send a tremendous thank you to [Fabrizo Bertoglio](https://github.com/fabriziobertoglio1987) who has contributed several high-quality accessibility fixes to React Native in 2021 and 2022. @@ -43,7 +43,7 @@ Fabrizio has made it a personal goal to enable users through high quality soluti His pull requests have been very high quality, well documented, and include thorough test cases. Well done Fabrizio! The React Native Accessibility community thanks you for your many outstanding contributions. - +{/* alex enable he-she herself-himself her-him */} ## What’s next in 2022 diff --git a/website/blog/2022-06-16-resources-migrating-your-react-native-library-to-the-new-architecture.md b/website/blog/2022-06-16-resources-migrating-your-react-native-library-to-the-new-architecture.mdx similarity index 97% rename from website/blog/2022-06-16-resources-migrating-your-react-native-library-to-the-new-architecture.md rename to website/blog/2022-06-16-resources-migrating-your-react-native-library-to-the-new-architecture.mdx index 4aecc5faccd..05364af59a8 100644 --- a/website/blog/2022-06-16-resources-migrating-your-react-native-library-to-the-new-architecture.md +++ b/website/blog/2022-06-16-resources-migrating-your-react-native-library-to-the-new-architecture.mdx @@ -7,7 +7,7 @@ date: 2022-06-16 **tl; dr**: We are working on improving the resources supporting the React Native New Architecture. We have already released a repository to help migrate your app ([RNNewArchitectureApp](https://github.com/react-native-community/RNNewArchitectureApp)) and one for your libraries ([RNNewArchitectureLibraries](https://github.com/react-native-community/RNNewArchitectureLibraries)). We are also revamping the [New Architecture guide](https://github.com/facebook/react-native-website/pull/3037) on the Website and we created a [GitHub Working Group](https://github.com/reactwg/react-native-new-architecture/discussions) to answer questions related to the New Architecture. - +{/* truncate */} ## Introduction @@ -40,8 +40,14 @@ For developers who may want to follow along in code, we’ve prepared two exampl [This repo](https://github.com/react-native-community/RNNewArchitectureApp) was created to demonstrate how to migrate an app, the native modules and the native components from the legacy architecture on the React Native version 0.67 to the New Architecture and the most recent version of React Native. Each commit corresponds to an isolated migration step.
- Example steps to migrate an app -
Commit list for a migration in the RNNewArchitectureApp repository
+ Example steps to migrate an app +
+ Commit list for a migration in the RNNewArchitectureApp + repository +
The repo is organized as follows: diff --git a/website/blog/2022-06-21-version-069.md b/website/blog/2022-06-21-version-069.mdx similarity index 99% rename from website/blog/2022-06-21-version-069.md rename to website/blog/2022-06-21-version-069.mdx index 38a256f17f0..74cb307336b 100644 --- a/website/blog/2022-06-21-version-069.md +++ b/website/blog/2022-06-21-version-069.mdx @@ -14,7 +14,7 @@ We are excited to release a new version of React Native, 0.69.0. This version co - [Bundled Hermes](/blog/2022/06/21/version-069#bundled-hermes) - [Highlights of 0.69](/blog/2022/06/21/version-069#highlights-of-069) - +{/* truncate */} ## React 18 diff --git a/website/blog/2022-07-08-hermes-as-the-default.md b/website/blog/2022-07-08-hermes-as-the-default.mdx similarity index 92% rename from website/blog/2022-07-08-hermes-as-the-default.md rename to website/blog/2022-07-08-hermes-as-the-default.mdx index 5a09cb5072d..ac799f95622 100644 --- a/website/blog/2022-07-08-hermes-as-the-default.md +++ b/website/blog/2022-07-08-hermes-as-the-default.mdx @@ -14,7 +14,7 @@ Since the announcement, a lot of work has gone into making Hermes better, and to Note that while Hermes will be enabled by default in new React Native projects, support for other engines will continue. - +{/* truncate */} ## Benchmarking @@ -29,13 +29,19 @@ We measured three different metrics important to app developers: TTI, binary siz All the android tests were performed on a Samsung Galaxy S20.
- Android Benchmarking Data + Android Benchmarking Data
### TTI Video
- Android TTI Video + Android TTI Video
## iOS Benchmarking Data @@ -43,19 +49,28 @@ All the android tests were performed on a Samsung Galaxy S20. All the iOS tests were performed on an iPhone 12 Pro.
- iOS Benchmarking Data + iOS Benchmarking Data
### TTI Video
- iOS TTI Video + iOS TTI Video
### Slowed Down TTI Video, to better show the difference in startup time.
- iOS Slowed Down TTI Video + iOS Slowed Down TTI Video
## React Native/Hermes Integration diff --git a/website/blog/2022-09-05-version-070.md b/website/blog/2022-09-05-version-070.mdx similarity index 99% rename from website/blog/2022-09-05-version-070.md rename to website/blog/2022-09-05-version-070.mdx index 8565e7495fd..26721c3abe0 100644 --- a/website/blog/2022-09-05-version-070.md +++ b/website/blog/2022-09-05-version-070.mdx @@ -17,7 +17,7 @@ We are excited to release a new version of React Native, 0.70.0. This version co - [Full CMake support for Android builds](/blog/2022/09/05/version-070#full-cmake-support-for-android-builds) - [Highlights of 0.70](/blog/2022/09/05/version-070#highlights-of-070) - +{/* truncate */} ## New Architecture’s New Documentation diff --git a/website/blog/2022-11-22-react-native-core-contributor-summit-2022.md b/website/blog/2022-11-22-react-native-core-contributor-summit-2022.mdx similarity index 99% rename from website/blog/2022-11-22-react-native-core-contributor-summit-2022.md rename to website/blog/2022-11-22-react-native-core-contributor-summit-2022.mdx index 3fd9340015b..9a7b54b3e7e 100644 --- a/website/blog/2022-11-22-react-native-core-contributor-summit-2022.md +++ b/website/blog/2022-11-22-react-native-core-contributor-summit-2022.mdx @@ -21,7 +21,7 @@ Together with the React Native core team, we devised a series of **workshops** i We were impressed by the amount of knowledge-sharing and collaboration over those two days. In this blog post, we’d like to give you a sneak peek of the results of this gathering. - +{/* truncate */} ### React Native Codegen & TypeScript Support @@ -77,7 +77,7 @@ The focus of this session was to discuss improving Metro's feature set to work b From the [Node.js documentation](https://nodejs.org/api/packages.html#package-entry-points): - +{/* alex ignore clearly */} :::info The ["exports"](https://nodejs.org/api/packages.html#exports) provides a modern alternative to ["main"](https://nodejs.org/api/packages.html#main) allowing multiple entry points to be defined, conditional entry resolution support between environments, and **preventing any other entry points besides those defined in ["exports"](https://nodejs.org/api/packages.html#exports)**. This encapsulation allows module authors to define the public interface for their package clearly. diff --git a/website/blog/2022-12-13-pointer-events-in-react-native.md b/website/blog/2022-12-13-pointer-events-in-react-native.mdx similarity index 99% rename from website/blog/2022-12-13-pointer-events-in-react-native.md rename to website/blog/2022-12-13-pointer-events-in-react-native.mdx index 3289647e8b6..d9ada8147ef 100644 --- a/website/blog/2022-12-13-pointer-events-in-react-native.md +++ b/website/blog/2022-12-13-pointer-events-in-react-native.mdx @@ -11,7 +11,7 @@ Today we are sharing an experimental cross-platform pointer API for React Native It’s been over a year since we shared [our many platform vision](https://reactnative.dev/blog/2021/08/26/many-platform-vision) on the wins of building beyond mobile and how it sets a higher bar for all platforms. During this time, we've increased our investments in React Native for VR, Desktop, and Web. With differences in hardware and interactions on these platforms, it raised the question of how React Native should holistically handle input. - +{/* truncate */} ### Going Beyond Touch diff --git a/website/blog/2023-01-03-typescript-first.md b/website/blog/2023-01-03-typescript-first.mdx similarity index 99% rename from website/blog/2023-01-03-typescript-first.md rename to website/blog/2023-01-03-typescript-first.mdx index cab19161406..651671c7c55 100644 --- a/website/blog/2023-01-03-typescript-first.md +++ b/website/blog/2023-01-03-typescript-first.mdx @@ -15,7 +15,7 @@ With the release of 0.71, React Native is investing in the TypeScript experience In this post we’ll cover what these changes mean for you as a TypeScript or Flow user. - +{/* truncate */} ## New App Template is TypeScript By Default diff --git a/website/blog/2023-01-12-version-071.md b/website/blog/2023-01-12-version-071.mdx similarity index 99% rename from website/blog/2023-01-12-version-071.md rename to website/blog/2023-01-12-version-071.mdx index 55f537d2920..9b666372764 100644 --- a/website/blog/2023-01-12-version-071.md +++ b/website/blog/2023-01-12-version-071.mdx @@ -16,7 +16,7 @@ Today we’re releasing React Native version 0.71! This is a feature-packed rele In this post we’ll cover some of the highlights of 0.71. - +{/* truncate */} :::info For a full list of changes, check out [CHANGELOG.md](https://github.com/facebook/react-native/blob/main/CHANGELOG.md#v071). diff --git a/website/blog/2023-01-27-71rc1-android-outage-postmortem.md b/website/blog/2023-01-27-71rc1-android-outage-postmortem.mdx similarity index 99% rename from website/blog/2023-01-27-71rc1-android-outage-postmortem.md rename to website/blog/2023-01-27-71rc1-android-outage-postmortem.mdx index dd4e669abd6..1e18624ef86 100644 --- a/website/blog/2023-01-27-71rc1-android-outage-postmortem.md +++ b/website/blog/2023-01-27-71rc1-android-outage-postmortem.mdx @@ -9,7 +9,7 @@ Now that 0.71 is [available](/blog/2023/01/12/version-071), we want to share som The contributors who helped tackle the incident recently attended a post-mortem meeting to discuss in detail what happened, what we all learned from it, and what actions we are going to take to avoid similar outages in the future. - +{/* truncate */} ## What happened diff --git a/website/blog/2023-06-21-0.72-metro-package-exports-symlinks.md b/website/blog/2023-06-21-0.72-metro-package-exports-symlinks.mdx similarity index 99% rename from website/blog/2023-06-21-0.72-metro-package-exports-symlinks.md rename to website/blog/2023-06-21-0.72-metro-package-exports-symlinks.mdx index a3311e72f5f..b1f665a4301 100644 --- a/website/blog/2023-06-21-0.72-metro-package-exports-symlinks.md +++ b/website/blog/2023-06-21-0.72-metro-package-exports-symlinks.mdx @@ -20,7 +20,7 @@ This release adds highly requested features for Metro, better error handling, an - [Deprecated Component Removals](/blog/2023/06/21/0.72-metro-package-exports-symlinks#deprecated-component-removals) - [Package Renames](/blog/2023/06/21/0.72-metro-package-exports-symlinks#package-renames) - +{/* truncate */} ## Highlights diff --git a/website/blog/2023-06-21-package-exports-support.md b/website/blog/2023-06-21-package-exports-support.mdx similarity index 99% rename from website/blog/2023-06-21-package-exports-support.md rename to website/blog/2023-06-21-package-exports-support.mdx index db9ed4b1b31..f1e0cabe637 100644 --- a/website/blog/2023-06-21-package-exports-support.md +++ b/website/blog/2023-06-21-package-exports-support.mdx @@ -15,7 +15,7 @@ With the release of [React Native 0.72](/blog/2023/06/21/0.72-metro-package-expo In this post we'll cover how Package Exports works, and what these changes mean for you as a React Native app developer or package maintainer. - +{/* truncate */} ## What is Package Exports? diff --git a/website/blog/2023-12-06-0.73-debugging-improvements-stable-symlinks.md b/website/blog/2023-12-06-0.73-debugging-improvements-stable-symlinks.mdx similarity index 99% rename from website/blog/2023-12-06-0.73-debugging-improvements-stable-symlinks.md rename to website/blog/2023-12-06-0.73-debugging-improvements-stable-symlinks.mdx index 219c3b001e6..b8d1809fd5a 100644 --- a/website/blog/2023-12-06-0.73-debugging-improvements-stable-symlinks.md +++ b/website/blog/2023-12-06-0.73-debugging-improvements-stable-symlinks.mdx @@ -23,7 +23,7 @@ Today we're releasing React Native 0.73! This release adds improvements to debug - [React Native CLI Changes](/blog/2023/12/06/0.73-debugging-improvements-stable-symlinks#react-native-cli-changes) - [Deprecated @types/react-native](/blog/2023/12/06/0.73-debugging-improvements-stable-symlinks#deprecated-typesreact-native) - +{/* truncate */} ## Highlights diff --git a/website/blog/2024-04-22-release-0.74.md b/website/blog/2024-04-22-release-0.74.mdx similarity index 95% rename from website/blog/2024-04-22-release-0.74.md rename to website/blog/2024-04-22-release-0.74.mdx index c7d26117822..4176651bee9 100644 --- a/website/blog/2024-04-22-release-0.74.md +++ b/website/blog/2024-04-22-release-0.74.mdx @@ -24,7 +24,7 @@ We are also removing deprecated APIs, with the removal of `PropTypes` and breaki - [Removal of Flipper React Native Plugin](/blog/2024/04/22/release-0.74#removal-of-flipper-react-native-plugin) - [Other Breaking Changes](/blog/2024/04/22/release-0.74#other-breaking-changes) - +{/* truncate */} ## Highlights @@ -98,8 +98,17 @@ React Native [previously flipped](https://yogalayout.dev/blog/announcing-yoga-3. Yoga 3.0 brings support for [`alignContent: 'space-evenly'`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#space-evenly). `space-evenly` distributes the lines in a multi-line flex container using evenly spaced gaps, placed between line and container edges.
- Visual reference for alignContent behaviors -
Source: [World Wide Web Consortium](https://www.w3.org/TR/css-align-3/#distribution-values)
+ Visual reference for alignContent behaviors +
+ + Source: [World Wide Web + Consortium](https://www.w3.org/TR/css-align-3/#distribution-values) + +
#### Support for `position: 'static'` @@ -333,9 +342,19 @@ If the tapped notification resulted in app launch, call `setInitialNotification: Finally, delete the following methods and adapt the logic into the callbacks above which will be called instead: -1. [application:didReceiveLocalNotification:](https://developer.apple.com/documentation/uikit/uiapplicationdelegate/1622930-application?language=objc) [deprecated] -2. [application:didReceiveRemoteNotification:](https://developer.apple.com/documentation/uikit/uiapplicationdelegate/1623117-application?language=objc) [deprecated] -3. [application:didReceiveRemoteNotification:fetchCompletionHandler:](https://developer.apple.com/documentation/uikit/uiapplicationdelegate/1623013-application?language=objc) [not deprecated, but is superseded by the UNUserNotificationCenterDelegate methods] +1. + [application:didReceiveLocalNotification:](https://developer.apple.com/documentation/uikit/uiapplicationdelegate/1622930-application?language=objc) + + [deprecated] +2. + [application:didReceiveRemoteNotification:](https://developer.apple.com/documentation/uikit/uiapplicationdelegate/1623117-application?language=objc) + + [deprecated] +3. + [application:didReceiveRemoteNotification:fetchCompletionHandler:](https://developer.apple.com/documentation/uikit/uiapplicationdelegate/1623013-application?language=objc) + + [not deprecated, but is superseded by the + UNUserNotificationCenterDelegate methods] Delete any usages of [application:didRegisterUserNotificationSettings:](https://developer.apple.com/documentation/uikit/uiapplicationdelegate/1623022-application?language=objc) and RCTPushNotificationManager’s corresponding didRegisterUserNotificationSettings: as well. diff --git a/website/blog/2024-06-25-use-a-framework-to-build-react-native-apps.md b/website/blog/2024-06-25-use-a-framework-to-build-react-native-apps.mdx similarity index 98% rename from website/blog/2024-06-25-use-a-framework-to-build-react-native-apps.md rename to website/blog/2024-06-25-use-a-framework-to-build-react-native-apps.mdx index d1c2e367afa..728db62b776 100644 --- a/website/blog/2024-06-25-use-a-framework-to-build-react-native-apps.md +++ b/website/blog/2024-06-25-use-a-framework-to-build-react-native-apps.mdx @@ -11,7 +11,7 @@ Using React Native frameworks, such as Expo, is now the **recommended** approach In this blogpost we want to walk you through what they are in detail and what they mean for you as a React Native developer starting a new project. - +{/* truncate */} ## What is a React Native framework? @@ -39,7 +39,7 @@ Expo, the framework, is and will remain free and open source, while Expo Applica ::: - +{/* alex ignore he-she retext-equality */} If you haven’t used Expo recently, make sure you don’t miss [this talk from Kadi @ Expo](https://www.youtube.com/live/0ckOUBiuxVY?si=N-WSfmAJSMfd6wDL&t=3888) where she’s showcasing what you can do with Expo in 2024. diff --git a/website/blog/2024-08-12-release-0.75.md b/website/blog/2024-08-12-release-0.75.mdx similarity index 99% rename from website/blog/2024-08-12-release-0.75.md rename to website/blog/2024-08-12-release-0.75.mdx index f1f42d39346..9773dc571f5 100644 --- a/website/blog/2024-08-12-release-0.75.md +++ b/website/blog/2024-08-12-release-0.75.mdx @@ -32,7 +32,7 @@ This release ships several features, such as Yoga 3.1 with support for `%` value - [iOS: Finalized Push Notifications deprecation work](/blog/2024/08/12/release-0.75#ios-finalized-pushnotificationios-deprecation-work) - [Community CLI: Removal of ram-bundle and profile-hermes commands](/blog/2024/08/12/release-0.75#community-cli-removal-of-ram-bundle-and-profile-hermes-commands) - +{/* truncate */} ## Highlights diff --git a/website/blog/2024-10-23-release-0.76-new-architecture.md b/website/blog/2024-10-23-release-0.76-new-architecture.mdx similarity index 91% rename from website/blog/2024-10-23-release-0.76-new-architecture.md rename to website/blog/2024-10-23-release-0.76-new-architecture.mdx index 47a3ae2691c..9f0e5b85bb0 100644 --- a/website/blog/2024-10-23-release-0.76-new-architecture.md +++ b/website/blog/2024-10-23-release-0.76-new-architecture.mdx @@ -22,7 +22,7 @@ This is a major milestone for React Native, as we’re enabling the New Architec - [Android Apps are ~3.8Mb smaller thanks to Native Library merging](/blog/2024/10/23/release-0.76-new-architecture#android-apps-are-38mb-smaller-thanks-to-native-library-merging) - [Updates to Minimum iOS and Android SDK requirements](/blog/2024/10/23/release-0.76-new-architecture#updates-to-minimum-ios-and-android-sdk-requirements) - +{/* truncate */} ## Highlights @@ -65,7 +65,13 @@ In our next release, we're removing forwarded logs in Metro to align with modern We've shipped several performance improvements to Metro's resolver, the component responsible for finding a module from an import path, making it around [15x faster](https://x.com/MetroBundler/status/1831709057670861260). This improves the overall performance of Metro, particularly for warm builds, which we've seen at around 4x faster.
- +
### Box Shadow and Filter style props @@ -100,8 +106,14 @@ The [previous shadow functionality](https://reactnative.dev/docs/shadow-props) h `filter` adds certain graphical filters to an element. There are a mix of color filters that let you modify things like brightness, saturation, and hue as well as non-color filters that let you add blurs and shadows. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) for a full overview of each individual filter function, along with a fiddle to try them out for yourself. Below is a hot dog image with various filters applied to it.
- Filters demonstration -
From left to right: no filter, saturate filter, blur filter, invert filter
+ Filters demonstration +
+ From left to right: no filter, saturate filter,{' '} + blur filter, invert filter +
Like `boxShadow`, `filter` can take either a string, which mimics the CSS syntax, or an array of JS objects which can embed variables. For example the string `‘saturate(0.5) grayscale(0.25)’` and the array `[{saturate: 0.5}, {grayscale: 0.25}]` would yield the same filter. diff --git a/website/blog/2024-10-23-the-new-architecture-is-here.md b/website/blog/2024-10-23-the-new-architecture-is-here.mdx similarity index 92% rename from website/blog/2024-10-23-the-new-architecture-is-here.md rename to website/blog/2024-10-23-the-new-architecture-is-here.mdx index 9207136de2a..28e7b389b96 100644 --- a/website/blog/2024-10-23-the-new-architecture-is-here.md +++ b/website/blog/2024-10-23-the-new-architecture-is-here.mdx @@ -15,7 +15,7 @@ This release is the result of a ground-up rewrite of React Native we’ve been w Most apps will be able to adopt React Native 0.76 with the same level of effort as any other release. The most popular React Native libraries already support the New Architecture. The New Architecture also includes an automatic interoperability layer to enable backward compatibility with libraries targeting the old architecture. - +{/* truncate */} Over the past several years of development, our team has publicly shared our vision for the New Architecture. If you missed any of these talks, check them out here: @@ -231,12 +231,24 @@ Here's a comparison of the old architecture without transitions and the new arch
- A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. -
Before: rendering tiles without marking it as a transition.
+ A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. +
+ Before: rendering tiles without marking it as a + transition. +
- A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. There are less batch renders in comparison to the next video. -
After: rendering tiles with transitions to interrupt in-progress renders of stale state.
+ A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. There are less batch renders in comparison to the next video. +
+ After: rendering tiles with transitions to + interrupt in-progress renders of stale state. +
@@ -250,12 +262,24 @@ Automatic batching allows React to batch together more state updates when render
- A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI slowly catches up to rendering 1000 views. -
Before: rendering frequent state updates with legacy renderer.
+ A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI slowly catches up to rendering 1000 views. +
+ Before: rendering frequent state updates with legacy + renderer. +
- A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI resolves to 1000 views faster than the previous example, without as many intermediate states. -
After: rendering frequent state updates with automatic batching.
+ A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI resolves to 1000 views faster than the previous example, without as many intermediate states. +
+ After: rendering frequent state updates with{' '} + automatic batching. +
@@ -304,12 +328,26 @@ This change allows you to read layout information synchronously and update the U
- A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The tooltip is rendered after a short delay after the view moves -
In the old architecture, layout was read asynchronously in `onLayout`, causing the position of the tooltip to be delayed.
+ A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The tooltip is rendered after a short delay after the view moves +
+ In the old architecture, layout was read asynchronously in + `onLayout`, causing the position of the tooltip to be + delayed. +
- A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The view and tooltip move in unison. -
In the New Architecture, layout can be read in `useLayoutEffect` synchronously, updating the tooltip position before displaying.
+ A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The view and tooltip move in unison. +
+ In the New Architecture, layout can be read in + `useLayoutEffect` synchronously, updating the tooltip + position before displaying. +
diff --git a/website/blog/2025-01-21-version-0.77.md b/website/blog/2025-01-21-version-0.77.mdx similarity index 99% rename from website/blog/2025-01-21-version-0.77.md rename to website/blog/2025-01-21-version-0.77.mdx index 824539fe4ea..d81bd69a4c4 100644 --- a/website/blog/2025-01-21-version-0.77.md +++ b/website/blog/2025-01-21-version-0.77.mdx @@ -9,7 +9,7 @@ Today we are excited to release React Native 0.77! This release ships several features: new styling capabilities such as support for `display: contents`, `boxSizing`, `mixBlendMode`, and `outline`-related properties to provide a more powerful layout options; Android 16KB page support to be compatible with the newer Android devices. We are also modernizing the community template by migrating it to Swift, while continuing to support and maintain compatibility with Objective-C for developers who prefer it. - +{/* truncate */} ### Highlights @@ -234,7 +234,6 @@ The equivalent Objective-C lines are the following: } // remaining of the AppDelegate - ``` ## Breaking Changes @@ -330,6 +329,7 @@ The following classes are now either internal or have been removed, so can’t b - `SwipeRefreshLayoutManager` - `TaskCompletionSource` - Parameter `jsBundleLoader` from DefaultReactHost.getDefaultReactHost() + #### iOS diff --git a/website/blog/2025-02-03-react-native-core-contributor-summit-2024.md b/website/blog/2025-02-03-react-native-core-contributor-summit-2024.mdx similarity index 99% rename from website/blog/2025-02-03-react-native-core-contributor-summit-2024.md rename to website/blog/2025-02-03-react-native-core-contributor-summit-2024.mdx index 9957a40086e..8a07f0d11a4 100644 --- a/website/blog/2025-02-03-react-native-core-contributor-summit-2024.md +++ b/website/blog/2025-02-03-react-native-core-contributor-summit-2024.mdx @@ -12,7 +12,7 @@ Last year was no different—with small exception. We usually meet a day before ![all-participants](../static/blog/assets/react-native-core-contributor-summit-2024-1.jpeg) - +{/* truncate */} This annual tradition has become a valuable opportunity for contributors to share insights and voice their concerns, and for the core team to share their plans and gather feedback from key contributors to the React Native ecosystem—including partner companies, individual library authors and friends. diff --git a/website/blog/2025-02-19-react-native-0.78.md b/website/blog/2025-02-19-react-native-0.78.mdx similarity index 99% rename from website/blog/2025-02-19-react-native-0.78.md rename to website/blog/2025-02-19-react-native-0.78.mdx index 311763390ab..5765722083c 100644 --- a/website/blog/2025-02-19-react-native-0.78.md +++ b/website/blog/2025-02-19-react-native-0.78.mdx @@ -19,7 +19,7 @@ This release ships React 19 in React Native and some other relevant features lik - [Added support for Android XML drawables](/blog/2025/02/19/react-native-0.78#added-support-for-android-xml-drawables) - [ReactNativeFactory on iOS](/blog/2025/02/19/react-native-0.78#reactnativefactory-on-ios) - +{/* truncate */} ## Highlights diff --git a/website/blog/2025-04-08-react-native-0.79.md b/website/blog/2025-04-08-react-native-0.79.mdx similarity index 99% rename from website/blog/2025-04-08-react-native-0.79.md rename to website/blog/2025-04-08-react-native-0.79.mdx index 2d428455a10..e2246b0a9f1 100644 --- a/website/blog/2025-04-08-react-native-0.79.md +++ b/website/blog/2025-04-08-react-native-0.79.mdx @@ -19,7 +19,7 @@ This release ships with performance improvements on various fronts, as well as s - [Android: Faster App Startup](/blog/2025/04/08/react-native-0.79#android-faster-app-startup) - [Removal of Remote JS Debugging](/blog/2025/04/08/react-native-0.79#removal-of-remote-js-debugging) - +{/* truncate */} ## Highlights @@ -33,7 +33,7 @@ Also in Metro 0.82, we’re promoting `package.json` `"exports"` and `"imports"` This improves compatibility with modern npm dependencies, and opens up new, standards-compliant ways to organise your projects. -:::warning Breaking change +:::warning[Breaking change] While we've been testing `package.json` `"exports"` in the community for a while, this switchover can be a breaking change for certain packages and project setups. diff --git a/website/blog/2025-06-12-moving-towards-a-stable-javascript-api.md b/website/blog/2025-06-12-moving-towards-a-stable-javascript-api.mdx similarity index 91% rename from website/blog/2025-06-12-moving-towards-a-stable-javascript-api.md rename to website/blog/2025-06-12-moving-towards-a-stable-javascript-api.mdx index d9140e502d3..0ca16e122e8 100644 --- a/website/blog/2025-06-12-moving-towards-a-stable-javascript-api.md +++ b/website/blog/2025-06-12-moving-towards-a-stable-javascript-api.mdx @@ -13,7 +13,7 @@ In React Native 0.80, we're introducing two significant changes to React Native' - **Opt-in Strict TypeScript API**: We are moving to from-source TypeScript types and a new public API baseline under TypeScript. These enable stronger and more futureproof type accuracy, and will be a one-time breaking change. [Opt in](/blog/2025/06/12/moving-towards-a-stable-javascript-api#strict-typescript-api) via `compilerOptions` in your project's `tsconfig.json`. - We'll work with the community over time to ensure that these changes work for everyone, before enabling the Strict TypeScript API by default in a future React Native release. - +{/* truncate */} ## What's changing and why @@ -39,7 +39,7 @@ import {Alert} from 'react-native'; This change reduces the total surface area of our JavaScript API into a fixed set of exports which we can control and make stable in a future release. We're targeting a removal of these import paths in 0.82. -:::info API feedback +:::info[API feedback] Some APIs are not exported at root, and will become unavailable without deep imports. We have an **[open feedback thread](https://github.com/react-native-community/discussions-and-proposals/discussions/893)** and will be working with the community to finalize the exports in our public API. Please share your feedback! @@ -56,27 +56,30 @@ Please bear in mind that we aim to remove deep imports from React Native's API i Disable the `no-deep-imports` rule using `overrides`. - +{/* prettier-ignore */} ```js title=".eslintrc.js" - overrides: [ - { - files: ['*.js', '*.jsx', '*.ts', '*.tsx'], - rules: { - '@react-native/no-deep-imports': 0, - }, +overrides: [ + { + files: ['*.js', '*.jsx', '*.ts', '*.tsx'], + rules: { + '@react-native/no-deep-imports': 0, }, - ] + }, +]; ``` #### Console warnings Pass the `disableDeepImportWarnings` option to `@react-native/babel-preset`. - +{/* prettier-ignore */} ```js title="babel.config.js" module.exports = { presets: [ - ['module:@react-native/babel-preset', {disableDeepImportWarnings: true}] + [ + 'module:@react-native/babel-preset', + {disableDeepImportWarnings: true}, + ], ], }; ``` @@ -95,7 +98,7 @@ npx @react-native-community/cli start --reset-cache Disable the `no-deep-imports` rule using `overrides`. - +{/* prettier-ignore */} ```js title=".eslintrc.js" overrides: [ { @@ -111,12 +114,14 @@ overrides: [ Pass the `disableDeepImportWarnings` option to `babel-preset-expo`. - +{/* prettier-ignore */} ```js title="babel.config.js" module.exports = function (api) { api.cache(true); return { - presets: [['babel-preset-expo', {disableDeepImportWarnings: true}]], + presets: [ + ['babel-preset-expo', {disableDeepImportWarnings: true}], + ], }; }; ``` @@ -150,7 +155,7 @@ When the community is ready, the Strict TypeScript API will become our default A } ``` -:::note Under the hood +:::note[Under the hood] This will instruct TypeScript to resolve `react-native` types from our new [`types_generated/`](https://www.npmjs.com/package/react-native?activeTab=code) dir, instead of the previous [`types/`](https://www.npmjs.com/package/react-native?activeTab=code) dir (manually maintained). No restart of TypeScript or your editor is required. @@ -168,7 +173,7 @@ import {Alert} from 'react-native/Libraries/Alert/Alert'; import {Alert} from 'react-native'; ``` -:::tip Key win +:::tip[Key win] We've scoped our public API to the exports of React Native's `index.js` file, which we carefully maintain. This means that file changes elsewhere in our codebase will no longer be breaking changes. @@ -181,7 +186,7 @@ Types are now generated from source, rather than manually maintained. In doing t - We've aligned differences that had built up from the community contributed types — and also increased the type coverage of our source code. - We've intentionally updated some type names and type shapes, where there was scope to simplify or reduce ambiguity. -:::tip Key win +:::tip[Key win] Because types are now generated from React Native's source code, you can be confident that the typechecker is **always accurate** for a given version of `react-native`. @@ -233,7 +238,7 @@ The `"react-native-strict-api"` opt-in is stable in the 0.80 release. - Under either mode, nothing will change for your app at runtime — this affects TypeScript analysis only. - **And**, we will take feedback on missing APIs, via our [dedicated feedback thread](https://github.com/react-native-community/discussions-and-proposals/discussions/893). -:::tip Recommended +:::tip[Recommended] The Strict TypeScript API will become our default API in the future. @@ -302,17 +307,32 @@ These changes were made possible by [Iwo Plaza](https://x.com/iwoplaza), [Jakub Thanks also to [Pieter Vanderwerff](https://github.com/pieterv), [Rubén Norte](https://github.com/rubennorte), and [Rob Hogan](https://x.com/robjhogan) for their additional help and input. -:::note Learn more - -
-
- Watch the talk! - We shared a deep dive into our motivations and the work behind the Strict TypeScript API at App.js 2025. -

**[View on YouTube](https://www.youtube.com/live/UTaJlqhTk2g?si=SDRmj80kss7hXuGG&t=6520)**

+:::note[Learn more] + +
+
+ + Watch the talk! + + + We shared a deep dive into our motivations and the work + behind the Strict TypeScript API at{' '} + App.js 2025. + +

+ **[View on + YouTube](https://www.youtube.com/live/UTaJlqhTk2g?si=SDRmj80kss7hXuGG&t=6520)** +

App.js 2025 Talk
diff --git a/website/blog/2025-06-12-react-native-0.80.md b/website/blog/2025-06-12-react-native-0.80.mdx similarity index 99% rename from website/blog/2025-06-12-react-native-0.80.md rename to website/blog/2025-06-12-react-native-0.80.mdx index c532f98359f..c8940d01e10 100644 --- a/website/blog/2025-06-12-react-native-0.80.md +++ b/website/blog/2025-06-12-react-native-0.80.mdx @@ -22,7 +22,7 @@ Moreover, the Legacy Architecture of React Native is now officially frozen, and - [React 19.1.0](/blog/2025/06/12/react-native-0.80#react-1910) - [Experimental - React Native iOS dependencies are now prebuilt](/blog/2025/06/12/react-native-0.80#experimental---react-native-ios-dependencies-are-now-prebuilt) - +{/* truncate */} ## Highlights diff --git a/website/blog/2025-08-12-react-native-0.81.md b/website/blog/2025-08-12-react-native-0.81.mdx similarity index 98% rename from website/blog/2025-08-12-react-native-0.81.md rename to website/blog/2025-08-12-react-native-0.81.mdx index 1e542bb603d..25574394970 100644 --- a/website/blog/2025-08-12-react-native-0.81.md +++ b/website/blog/2025-08-12-react-native-0.81.mdx @@ -18,7 +18,7 @@ This ships with support for Android 16 (API level 36) and includes a variety of - [Community-maintained JavaScriptCore support](/blog/2025/08/12/react-native-0.81#community-maintained-javascriptcore-support) - [Experimental Precompiled iOS builds](/blog/2025/08/12/react-native-0.81#experimental-precompiled-ios-builds) - +{/* truncate */} ## Highlights @@ -132,11 +132,11 @@ Read the full list of breaking changes [in the CHANGELOG for 0.81](https://githu React Native 0.81 contains over 1110 commits from 110 contributors. Thanks for all your hard work! - +{/* alex ignore special retext-equality */} We want to send a special thank you to those community members that shipped significant contributions in this release: -- [Christian Falch](https://github.com/chrfalch) for the amazing work on precompiled iOS builds. +- [Christian Falch](https://github.com/chrfalch) for the amazing work on precompiled iOS builds. {/* // @case-police-ignore Mathieu */} - [Mathieu Acthernoene](https://github.com/zoontek) for crucial contributions to Android edge-to-edge support - [Enrique López-Mañas](https://github.com/kikoso) and for helping test Android 16 integration and the SafeAreaView deprecation. diff --git a/website/blog/2025-10-08-react-native-0.82.md b/website/blog/2025-10-08-react-native-0.82.mdx similarity index 97% rename from website/blog/2025-10-08-react-native-0.82.md rename to website/blog/2025-10-08-react-native-0.82.mdx index 27b25783000..d54d2481694 100644 --- a/website/blog/2025-10-08-react-native-0.82.md +++ b/website/blog/2025-10-08-react-native-0.82.mdx @@ -23,7 +23,7 @@ In addition, 0.82 also ships with an experimental opt-in to a newer version of H - [React 19.1.1](/blog/2025/10/08/react-native-0.82#react-1911) - [DOM Node APIs](/blog/2025/10/08/react-native-0.82#dom-node-apis) - +{/* truncate */} ## New Architecture Only @@ -36,8 +36,12 @@ This means that if you try to set `newArchEnabled=false` on Android, or if you t ### How to migrate If you haven’t migrated your project to the New Architecture, we recommend first migrating your project to React Native 0.81 or Expo SDK 54. These are the last versions that allow you to use the Legacy Architecture. They contain warnings and performance improvements specifically to help migrating to the New Architecture. -
Then enable the New Architecture in 0.81 and verify that your application is working fine. -
Once you're using the New Architecture in 0.81, you can update safely to React Native 0.82 which prevents enabling the Legacy Architecture. + +
Then enable the New Architecture in 0.81 and verify that +your application is working fine. +
Once you're using the New Architecture in 0.81, you can +update safely to React Native 0.82 which prevents enabling the +Legacy Architecture. If an incompatible 3rd party dependency is blocking you from migrating to the New Architecture, we recommend you reach out to the library maintainers directly. @@ -154,7 +158,7 @@ React 19.1.1 also improves the reliability of [`useDeferredValue`](https://react Starting from React Native 0.82, native components will provide DOM-like nodes via refs. - +{/* alex ignore just retext-equality */} Before, native components provided React Native-specific objects with just a handful of methods like `measure` and `setNativeProps`. After this release, they will provide [nodes implementing a subset of the DOM API](https://reactnative.dev/docs/element-nodes) to traverse the UI tree, measure layout, and more as on Web. For example: @@ -225,14 +229,10 @@ To run the `debugOptimized` variant for your app you can invoke: - ``` - npx react-native run-android --mode debugOptimized - ``` + ``` npx react-native run-android --mode debugOptimized ``` - ``` - npx expo run:android --variant debugOptimized - ``` + ``` npx expo run:android --variant debugOptimized ``` diff --git a/website/blog/2025-12-10-react-native-0.83.md b/website/blog/2025-12-10-react-native-0.83.mdx similarity index 98% rename from website/blog/2025-12-10-react-native-0.83.md rename to website/blog/2025-12-10-react-native-0.83.mdx index bb0fde3f71d..d433aa6d270 100644 --- a/website/blog/2025-12-10-react-native-0.83.md +++ b/website/blog/2025-12-10-react-native-0.83.mdx @@ -21,13 +21,13 @@ This release includes React 19.2, significant new features for React Native DevT - [Intersection Observers (Canary)](/blog/2025/12/10/react-native-0.83#intersection-observers-canary) - [Web Performance APIs as stable](/blog/2025/12/10/react-native-0.83#web-performance-apis-as-stable) - +{/* truncate */} ## React 19.2 This release includes React 19.2, bringing the new `` and `useEffectEvent` APIs to React Native. -:::warning Important: [CVE-2025-55182](https://react.dev/blog/2025/12/03/critical-security-vulnerability-in-react-server-components) +:::warning[Important: [CVE-2025-55182](https://react.dev/blog/2025/12/03/critical-security-vulnerability-in-react-server-components)] At time of release, `react-native@0.83.0` depends on `react@19.2.0`, and you might also have seen the recent [Critical Security Vulnerability in React Server Components](https://react.dev/blog/2025/12/03/critical-security-vulnerability-in-react-server-components). @@ -126,7 +126,10 @@ As part of our effort to bring web APIs to React Native, we have added support f

diff --git a/website/blog/2026-02-11-react-native-0.84.md b/website/blog/2026-02-11-react-native-0.84.mdx similarity index 99% rename from website/blog/2026-02-11-react-native-0.84.md rename to website/blog/2026-02-11-react-native-0.84.mdx index a0249bee9fd..5a3b001fd69 100644 --- a/website/blog/2026-02-11-react-native-0.84.md +++ b/website/blog/2026-02-11-react-native-0.84.mdx @@ -21,7 +21,7 @@ This release makes Hermes V1 the default JavaScript engine, bringing significant - [Legacy Architecture Components Removed](/blog/2026/02/11/react-native-0.84#legacy-architecture-components-removed) - [Node.js 22 Minimum](/blog/2026/02/11/react-native-0.84#nodejs-22-minimum) - +{/* truncate */} ## Hermes V1 as Default diff --git a/website/blog/2026-02-24-react-native-comes-to-meta-quest.md b/website/blog/2026-02-24-react-native-comes-to-meta-quest.mdx similarity index 98% rename from website/blog/2026-02-24-react-native-comes-to-meta-quest.md rename to website/blog/2026-02-24-react-native-comes-to-meta-quest.mdx index 51731594bb5..7ce944b3346 100644 --- a/website/blog/2026-02-24-react-native-comes-to-meta-quest.md +++ b/website/blog/2026-02-24-react-native-comes-to-meta-quest.mdx @@ -9,7 +9,7 @@ React Native has always focused on helping developers reuse knowledge across pla At React Conf 2025, we took another step toward that vision by [announcing official React Native support for Meta Quest devices](https://youtu.be/NiYwlvXsBKw?si=IGl4MiF6QtywVFGL&t=1075). This post focuses on how to get started with React Native on Meta Quest, what works today, and how developers can build and ship VR apps using familiar tools and patterns. - +{/* truncate */} ## Highlights @@ -22,7 +22,10 @@ At React Conf 2025, we took another step toward that vision by [announcing offic ## React Native on Meta Quest
- React Native app running on Meta Quest headset + React Native app running on Meta Quest headset
React Native apps running on Meta Quest.
diff --git a/website/contributing/_markdown-GH-release-notes-prerelease.mdx b/website/contributing/_markdown-GH-release-notes-prerelease.mdx index 9e8501b2447..f9443cf352c 100644 --- a/website/contributing/_markdown-GH-release-notes-prerelease.mdx +++ b/website/contributing/_markdown-GH-release-notes-prerelease.mdx @@ -1,11 +1,11 @@ ```markdown -- +- {/_ TODO List out notable picks for this patch _/} --- To test it, run: - +{/_ TODO Update with your version _/} npx react-native init RN069RC0 --version 0.69.0-rc.0 @@ -21,7 +21,7 @@ npx react-native init RN069RC0 --version 0.69.0-rc.0 ### Help us testing 🧪 - +{/_ TODO Add the call to action for something specific that we want folks to test _/} Let us know how it went by posting a comment in the [working group discussion](https://github.com/reactwg/react-native-releases/discussions)! Please specify with system you tried it on (ex. macos, windows). diff --git a/website/contributing/_markdown-road-to-release-template.mdx b/website/contributing/_markdown-road-to-release-template.mdx index 7bc928e6e48..da662ad0cf3 100644 --- a/website/contributing/_markdown-road-to-release-template.mdx +++ b/website/contributing/_markdown-road-to-release-template.mdx @@ -1,11 +1,11 @@ ```markdown - +{/_ Title: Road to _/} The branch cut has happened. ## Notice - +{/_ TODO update the version _/} - [Current release candidate: 0.69.0-rc.0][current-release] - Have an issue with current release candidate? [File an issue][issue-form] and we will triage. @@ -14,7 +14,7 @@ The branch cut has happened. #### Highlighted Changes in this release - +{/_ Add stand-out changes in this release, and link to changelog PR. _/} - Checkout this [Changelog PR][changelog-pr] @@ -33,7 +33,7 @@ The branch cut has happened. #### Retrospective Topics - +{/_ List out pain points, issues to investigate that are not release-blocking to follow up on _/} - diff --git a/website/contributing/contributing-overview.md b/website/contributing/contributing-overview.mdx similarity index 99% rename from website/contributing/contributing-overview.md rename to website/contributing/contributing-overview.mdx index d8126e9a133..c77fc70c7e2 100644 --- a/website/contributing/contributing-overview.md +++ b/website/contributing/contributing-overview.mdx @@ -4,7 +4,7 @@ title: Contributing Overview description: How to contribute to React Native --- - +{/* alex disable simple simply */} Thank you for your interest in contributing to React Native! From commenting on and triaging issues, to reviewing and sending Pull Requests, all contributions are welcome. We aim to build a vibrant and inclusive [ecosystem of partners, core contributors, and community](https://github.com/facebook/react-native/blob/main/ECOSYSTEM.md) that goes beyond the main React Native GitHub repository. diff --git a/website/contributing/contribution-license-agreement.md b/website/contributing/contribution-license-agreement.mdx similarity index 97% rename from website/contributing/contribution-license-agreement.md rename to website/contributing/contribution-license-agreement.mdx index b2834b79f6c..1dbc7390e1a 100644 --- a/website/contributing/contribution-license-agreement.md +++ b/website/contributing/contribution-license-agreement.mdx @@ -8,6 +8,6 @@ However, you don't have to do this up-front. We welcome you to follow, fork, and When your pull request is created, it is classified by the Facebook GitHub bot. If you have not signed a CLA, the bot will provide instructions for [signing a CLA](https://code.facebook.com/cla) before your pull request can be considered eligible for merging. Once you have done so, the current and all future pull requests will be labelled as "CLA Signed". - +{/* alex ignore simple */} Signing the CLA might sound scary, but it's actually very simple and can be done in less than a minute. diff --git a/website/contributing/managing-pull-requests.md b/website/contributing/managing-pull-requests.mdx similarity index 97% rename from website/contributing/managing-pull-requests.md rename to website/contributing/managing-pull-requests.mdx index 518b902d7b3..5eb3299a3ff 100644 --- a/website/contributing/managing-pull-requests.md +++ b/website/contributing/managing-pull-requests.mdx @@ -16,7 +16,7 @@ Any pull request may require a deeper understanding of some area of React Native Pull Requests need to be reviewed and approved using GitHub's review feature before they can be merged. While anyone has the ability to review and approve a pull request, we typically only consider a pull request ready to be merged when the approval comes from one of the [contributors](https://github.com/facebook/react-native/blob/main/ECOSYSTEM.md). - +{/* alex ignore clearly */} So you've found a pull request that you feel confident reviewing. Please make use of the GitHub Review feature, and clearly and politely communicate any suggested changes. @@ -48,7 +48,10 @@ Meta employees are using a custom browser extension for GitHub that can import a
-
Screenshot of the custom browser extension. The button "Import to fbsource" is used to import a Pull Request internally.
+
+ Screenshot of the custom browser extension. The button "Import + to fbsource" is used to import a Pull Request internally. +
## Bots diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts index 8f45f7418da..4e2c7a9bcb1 100644 --- a/website/docusaurus.config.ts +++ b/website/docusaurus.config.ts @@ -74,7 +74,7 @@ const config: Config = { // See https://github.com/facebook/docusaurus/issues/10556 // See https://github.com/facebook/react-native-website/pull/4268 // See https://docusaurus.io/blog/releases/3.6 - experimental_faster: (process.env.DOCUSAURUS_FASTER ?? 'true') === 'true', + faster: (process.env.DOCUSAURUS_FASTER ?? 'true') === 'true', }, title: 'React Native', diff --git a/website/package.json b/website/package.json index ecda949572b..3f077639edb 100644 --- a/website/package.json +++ b/website/package.json @@ -45,20 +45,20 @@ ] }, "dependencies": { - "@docusaurus/core": "3.9.2", - "@docusaurus/faster": "3.9.2", - "@docusaurus/plugin-google-gtag": "3.9.2", - "@docusaurus/plugin-pwa": "3.9.2", - "@docusaurus/preset-classic": "3.9.2", + "@docusaurus/core": "3.10.0", + "@docusaurus/faster": "3.10.0", + "@docusaurus/plugin-google-gtag": "3.10.0", + "@docusaurus/plugin-pwa": "3.10.0", + "@docusaurus/preset-classic": "3.10.0", "docusaurus-plugin-sass": "^0.2.6", "react": "^19.2.4", "react-dom": "^19.2.4", "react-github-btn": "^1.4.0" }, "devDependencies": { - "@docusaurus/module-type-aliases": "3.9.2", - "@docusaurus/tsconfig": "3.9.2", - "@docusaurus/types": "3.9.2", + "@docusaurus/module-type-aliases": "3.10.0", + "@docusaurus/tsconfig": "3.10.0", + "@docusaurus/types": "3.10.0", "@prettier/plugin-oxc": "^0.1.3", "@react-native-website/lint-examples": "*", "@signalwire/docusaurus-plugin-llms-txt": "^1.2.2", diff --git a/website/versioned_docs/version-0.77/accessibilityinfo.md b/website/versioned_docs/version-0.77/accessibilityinfo.md index 9629db59870..fab883898c3 100644 --- a/website/versioned_docs/version-0.77/accessibilityinfo.md +++ b/website/versioned_docs/version-0.77/accessibilityinfo.md @@ -254,7 +254,7 @@ Query whether reduce motion and prefer cross-fade transitions settings are curre ### `setAccessibilityFocus()` -:::warning Deprecated +:::warning[Deprecated] Prefer using `sendAccessibilityEvent` with eventType `focus` instead. ::: diff --git a/website/versioned_docs/version-0.79/metro.md b/website/versioned_docs/version-0.77/metro.mdx similarity index 82% rename from website/versioned_docs/version-0.79/metro.md rename to website/versioned_docs/version-0.77/metro.mdx index a61962a5512..dd9d297e77a 100644 --- a/website/versioned_docs/version-0.79/metro.md +++ b/website/versioned_docs/version-0.77/metro.mdx @@ -20,9 +20,12 @@ In React Native, your Metro config should extend either [`@react-native/metro-co Below is the default `metro.config.js` file in a React Native template project: - +{/* prettier-ignore */} ```js -const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); +const { + getDefaultConfig, + mergeConfig, +} = require('@react-native/metro-config'); /** * Metro configuration @@ -45,23 +48,28 @@ Exporting a config function is an opt-in to managing the final config yourself **From `@react-native/metro-config` 0.72.1**, it is no longer necessary to use a config function to access the complete default config. See the **Tip** section below. ::: - +{/* prettier-ignore */} ```js -const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); +const { + getDefaultConfig, + mergeConfig, +} = require('@react-native/metro-config'); module.exports = function (baseConfig) { - const defaultConfig = mergeConfig(baseConfig, getDefaultConfig(__dirname)); - const {resolver: {assetExts, sourceExts}} = defaultConfig; - - return mergeConfig( - defaultConfig, - { - resolver: { - assetExts: assetExts.filter(ext => ext !== 'svg'), - sourceExts: [...sourceExts, 'svg'], - }, - }, + const defaultConfig = mergeConfig( + baseConfig, + getDefaultConfig(__dirname), ); + const { + resolver: {assetExts, sourceExts}, + } = defaultConfig; + + return mergeConfig(defaultConfig, { + resolver: { + assetExts: assetExts.filter(ext => ext !== 'svg'), + sourceExts: [...sourceExts, 'svg'], + }, + }); }; ``` @@ -70,7 +78,7 @@ Using a config function is for advanced use cases. A simpler method than the abo **Alternative** - +{/* prettier-ignore */} ```js const defaultConfig = getDefaultConfig(__dirname); @@ -87,7 +95,7 @@ module.exports = mergeConfig(defaultConfig, config); ✅ **Recommended** - +{/* prettier-ignore */} ```js const config = { resolver: { diff --git a/website/versioned_docs/version-0.77/profiling.md b/website/versioned_docs/version-0.77/profiling.md index f833a4440c2..73cbed73ad1 100644 --- a/website/versioned_docs/version-0.77/profiling.md +++ b/website/versioned_docs/version-0.77/profiling.md @@ -33,13 +33,13 @@ After opening the trace in Android Studio or Perfetto, you should see something ![Example](/docs/assets/SystraceExample.png) -:::note Hint +:::note[Hint] Use the WASD keys to strafe and zoom. ::: The exact UI might be different but the instructions below will apply regardless of the tool you're using. -:::info Enable VSync highlighting +:::info[Enable VSync highlighting] Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries: ![Enable VSync Highlighting](/docs/assets/SystraceHighlightVSync.png) @@ -133,7 +133,7 @@ There isn't a quick way to mitigate this unless you're able to postpone creating If the problem seems to be on the native side, you can use the [CPU hotspot profiler](https://developer.android.com/studio/profile/record-java-kotlin-methods) to get more details on what's happening. Open the Android Studio Profiler panel and select "Find CPU Hotspots (Java/Kotlin Method Recording)". -:::info Choose the Java/Kotlin recording +:::info[Choose the Java/Kotlin recording] Make sure you select "Find CPU Hotspots **(Java/Kotlin Recording)**" rather than "Find CPU Hotspots (Callstack Sample)". They have similar icons but do different things. ::: diff --git a/website/versioned_docs/version-0.77/signed-apk-android.md b/website/versioned_docs/version-0.77/signed-apk-android.md index d51ecd67bbe..c5158f4aab0 100644 --- a/website/versioned_docs/version-0.77/signed-apk-android.md +++ b/website/versioned_docs/version-0.77/signed-apk-android.md @@ -65,11 +65,11 @@ MYAPP_UPLOAD_KEY_PASSWORD=***** These are going to be global Gradle variables, which we can later use in our Gradle config to sign our app. -:::note Note about using git +:::note[Note about using git] Saving the above Gradle variables in `~/.gradle/gradle.properties` instead of `android/gradle.properties` prevents them from being checked in to git. You may have to create the `~/.gradle/gradle.properties` file in your user's home directory before you can add the variables. ::: -:::note Note about security +:::note[Note about security] If you are not keen on storing your passwords in plaintext, and you are running macOS, you can also [store your credentials in the Keychain Access app](https://pilloxa.gitlab.io/posts/safer-passwords-in-gradle/). Then you can skip the two last rows in `~/.gradle/gradle.properties`. ::: @@ -174,7 +174,7 @@ Please note that you will also have to configure distinct version codes, as [sug Proguard is a tool that can slightly reduce the size of the APK. It does this by stripping parts of the React Native Java bytecode (and its dependencies) that your app is not using. -:::caution Important +:::caution[Important] Make sure to thoroughly test your app if you've enabled Proguard. Proguard often requires configuration specific to each native library you're using. See `app/proguard-rules.pro`. ::: diff --git a/website/versioned_docs/version-0.77/statusbar.md b/website/versioned_docs/version-0.77/statusbar.md index 6345e7bf4ef..93810f7b0e0 100644 --- a/website/versioned_docs/version-0.77/statusbar.md +++ b/website/versioned_docs/version-0.77/statusbar.md @@ -440,7 +440,7 @@ Show or hide the status bar. ### 🗑️ `setNetworkActivityIndicatorVisible()`
iOS
-:::warning Deprecated +:::warning[Deprecated] The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release. ::: diff --git a/website/versioned_docs/version-0.77/the-new-architecture/create-module-library.md b/website/versioned_docs/version-0.77/the-new-architecture/create-module-library.mdx similarity index 97% rename from website/versioned_docs/version-0.77/the-new-architecture/create-module-library.md rename to website/versioned_docs/version-0.77/the-new-architecture/create-module-library.mdx index f081810b85b..9479f3c931c 100644 --- a/website/versioned_docs/version-0.77/the-new-architecture/create-module-library.md +++ b/website/versioned_docs/version-0.77/the-new-architecture/create-module-library.mdx @@ -38,7 +38,11 @@ npx create-react-native-library@latest Once the interactive prompt is done, the tool creates a folder whose structure looks like this in Visual Studio Code: -Folder structure after initializing a new library. +Folder structure after initializing a new library. Feel free to explore the code that has been created for you. However, the most important parts: @@ -70,7 +74,7 @@ Finally, the library contains already all the infrastructure to let the library The rest of the guide assumes that you have a local Turbo Native Module in your app, created following the guidelines shown in the other guides in the website: platform specific Turbo Native Modules, or [cross-platform Turbo Native Modules](./pure-cxx-modules). But it works also for Components and legacy architecture modules and components. You'll have to adapt the files you need to copy and update. - +{/* TODO: add links for Turbo Native Modules */} 1. **[Not required for legacy architecture modules and components]** Move the code you have in the `specs` folder in your app into the `src` folder created by the `create-react-native-library` folder. 2. Update the `index.ts` file to properly export the Turbo Native Module spec so that it is accessible from the library. For example: diff --git a/website/versioned_docs/version-0.77/the-new-architecture/pure-cxx-modules.md b/website/versioned_docs/version-0.77/the-new-architecture/pure-cxx-modules.md index b6d7b2d8310..56821e0984f 100644 --- a/website/versioned_docs/version-0.77/the-new-architecture/pure-cxx-modules.md +++ b/website/versioned_docs/version-0.77/the-new-architecture/pure-cxx-modules.md @@ -71,7 +71,7 @@ export default TurboModuleRegistry.getEnforcing( ## 2. Configure Codegen -The next step is to configure [Codegen](what-is-codegen.md) in your `package.json`. Update the file to include: +The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include: ```json title="package.json" "start": "react-native start", diff --git a/website/versioned_docs/version-0.77/the-new-architecture/using-codegen.md b/website/versioned_docs/version-0.77/the-new-architecture/using-codegen.mdx similarity index 99% rename from website/versioned_docs/version-0.77/the-new-architecture/using-codegen.md rename to website/versioned_docs/version-0.77/the-new-architecture/using-codegen.mdx index fc68d2a7e4d..6fd070f08aa 100644 --- a/website/versioned_docs/version-0.77/the-new-architecture/using-codegen.md +++ b/website/versioned_docs/version-0.77/the-new-architecture/using-codegen.mdx @@ -21,7 +21,7 @@ npx @react-native-community/cli@latest init SampleApp --version 0.76.0 **Codegen** is used to generate the glue-code for your custom modules or components. See the guides for Turbo Native Modules and Fabric Native Components for more details on how to create them. - +{/* TODO: add links */} ## Configuring **Codegen** diff --git a/website/versioned_docs/version-0.78/the-new-architecture/what-is-codegen.md b/website/versioned_docs/version-0.77/the-new-architecture/what-is-codegen.mdx similarity index 97% rename from website/versioned_docs/version-0.78/the-new-architecture/what-is-codegen.md rename to website/versioned_docs/version-0.77/the-new-architecture/what-is-codegen.mdx index d83ff7ef572..382695cf86d 100644 --- a/website/versioned_docs/version-0.78/the-new-architecture/what-is-codegen.md +++ b/website/versioned_docs/version-0.77/the-new-architecture/what-is-codegen.mdx @@ -4,7 +4,7 @@ React Native invokes **Codegen** automatically every time an iOS or Android app is built. Occasionally, you would like to manually run the **Codegen** scripts to know which types and files are actually generated: this is a common scenario when developing Turbo Native Modules and Fabric Native Components. - +{/* TODO: Add links to TM and FC */} ## How does Codegen works diff --git a/website/versioned_docs/version-0.77/transforms.md b/website/versioned_docs/version-0.77/transforms.md index e0576ae8101..d3ed78c59f7 100644 --- a/website/versioned_docs/version-0.77/transforms.md +++ b/website/versioned_docs/version-0.77/transforms.md @@ -268,7 +268,7 @@ Matrix transforms are useful when you need to apply pre-calculated transformatio ### `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY` -:::warning Deprecated +:::warning[Deprecated] Use the [`transform`](transforms#transform) prop instead. ::: diff --git a/website/versioned_docs/version-0.77/turbo-native-modules-android.md b/website/versioned_docs/version-0.77/turbo-native-modules-android.md index 51b4c8cca29..63b320430e0 100644 --- a/website/versioned_docs/version-0.77/turbo-native-modules-android.md +++ b/website/versioned_docs/version-0.77/turbo-native-modules-android.md @@ -206,7 +206,7 @@ Finally, we need to tell the React Native in our main application how to find th In this case, you add it to be returned by the [getPackages](https://github.com/facebook/react-native/blob/8d8b8c343e62115a5509e1aed62047053c2f6e39/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactNativeHost.java#L233) method. :::info -Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.md#publish-the-library-on-npm), which our build tooling will autolink for you. +Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.mdx#publish-the-library-on-npm), which our build tooling will autolink for you. ::: diff --git a/website/versioned_docs/version-0.77/turbo-native-modules.md b/website/versioned_docs/version-0.77/turbo-native-modules.md index 30f1942f5dc..a6a67db2335 100644 --- a/website/versioned_docs/version-0.77/turbo-native-modules.md +++ b/website/versioned_docs/version-0.77/turbo-native-modules.md @@ -34,7 +34,7 @@ To make this work on mobile, we need to use Android and iOS APIs: ### 1. Declare Typed Specification -React Native provides a tool called [Codegen](/the-new-architecture/what-is-codegen.md), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification. +React Native provides a tool called [Codegen](/the-new-architecture/what-is-codegen.mdx), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification. To create a specs file: diff --git a/website/versioned_docs/version-0.78/accessibilityinfo.md b/website/versioned_docs/version-0.78/accessibilityinfo.md index 9629db59870..fab883898c3 100644 --- a/website/versioned_docs/version-0.78/accessibilityinfo.md +++ b/website/versioned_docs/version-0.78/accessibilityinfo.md @@ -254,7 +254,7 @@ Query whether reduce motion and prefer cross-fade transitions settings are curre ### `setAccessibilityFocus()` -:::warning Deprecated +:::warning[Deprecated] Prefer using `sendAccessibilityEvent` with eventType `focus` instead. ::: diff --git a/website/versioned_docs/version-0.77/metro.md b/website/versioned_docs/version-0.78/metro.mdx similarity index 82% rename from website/versioned_docs/version-0.77/metro.md rename to website/versioned_docs/version-0.78/metro.mdx index a61962a5512..dd9d297e77a 100644 --- a/website/versioned_docs/version-0.77/metro.md +++ b/website/versioned_docs/version-0.78/metro.mdx @@ -20,9 +20,12 @@ In React Native, your Metro config should extend either [`@react-native/metro-co Below is the default `metro.config.js` file in a React Native template project: - +{/* prettier-ignore */} ```js -const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); +const { + getDefaultConfig, + mergeConfig, +} = require('@react-native/metro-config'); /** * Metro configuration @@ -45,23 +48,28 @@ Exporting a config function is an opt-in to managing the final config yourself **From `@react-native/metro-config` 0.72.1**, it is no longer necessary to use a config function to access the complete default config. See the **Tip** section below. ::: - +{/* prettier-ignore */} ```js -const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); +const { + getDefaultConfig, + mergeConfig, +} = require('@react-native/metro-config'); module.exports = function (baseConfig) { - const defaultConfig = mergeConfig(baseConfig, getDefaultConfig(__dirname)); - const {resolver: {assetExts, sourceExts}} = defaultConfig; - - return mergeConfig( - defaultConfig, - { - resolver: { - assetExts: assetExts.filter(ext => ext !== 'svg'), - sourceExts: [...sourceExts, 'svg'], - }, - }, + const defaultConfig = mergeConfig( + baseConfig, + getDefaultConfig(__dirname), ); + const { + resolver: {assetExts, sourceExts}, + } = defaultConfig; + + return mergeConfig(defaultConfig, { + resolver: { + assetExts: assetExts.filter(ext => ext !== 'svg'), + sourceExts: [...sourceExts, 'svg'], + }, + }); }; ``` @@ -70,7 +78,7 @@ Using a config function is for advanced use cases. A simpler method than the abo **Alternative** - +{/* prettier-ignore */} ```js const defaultConfig = getDefaultConfig(__dirname); @@ -87,7 +95,7 @@ module.exports = mergeConfig(defaultConfig, config); ✅ **Recommended** - +{/* prettier-ignore */} ```js const config = { resolver: { diff --git a/website/versioned_docs/version-0.78/profiling.md b/website/versioned_docs/version-0.78/profiling.md index f833a4440c2..73cbed73ad1 100644 --- a/website/versioned_docs/version-0.78/profiling.md +++ b/website/versioned_docs/version-0.78/profiling.md @@ -33,13 +33,13 @@ After opening the trace in Android Studio or Perfetto, you should see something ![Example](/docs/assets/SystraceExample.png) -:::note Hint +:::note[Hint] Use the WASD keys to strafe and zoom. ::: The exact UI might be different but the instructions below will apply regardless of the tool you're using. -:::info Enable VSync highlighting +:::info[Enable VSync highlighting] Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries: ![Enable VSync Highlighting](/docs/assets/SystraceHighlightVSync.png) @@ -133,7 +133,7 @@ There isn't a quick way to mitigate this unless you're able to postpone creating If the problem seems to be on the native side, you can use the [CPU hotspot profiler](https://developer.android.com/studio/profile/record-java-kotlin-methods) to get more details on what's happening. Open the Android Studio Profiler panel and select "Find CPU Hotspots (Java/Kotlin Method Recording)". -:::info Choose the Java/Kotlin recording +:::info[Choose the Java/Kotlin recording] Make sure you select "Find CPU Hotspots **(Java/Kotlin Recording)**" rather than "Find CPU Hotspots (Callstack Sample)". They have similar icons but do different things. ::: diff --git a/website/versioned_docs/version-0.78/signed-apk-android.md b/website/versioned_docs/version-0.78/signed-apk-android.md index d51ecd67bbe..c5158f4aab0 100644 --- a/website/versioned_docs/version-0.78/signed-apk-android.md +++ b/website/versioned_docs/version-0.78/signed-apk-android.md @@ -65,11 +65,11 @@ MYAPP_UPLOAD_KEY_PASSWORD=***** These are going to be global Gradle variables, which we can later use in our Gradle config to sign our app. -:::note Note about using git +:::note[Note about using git] Saving the above Gradle variables in `~/.gradle/gradle.properties` instead of `android/gradle.properties` prevents them from being checked in to git. You may have to create the `~/.gradle/gradle.properties` file in your user's home directory before you can add the variables. ::: -:::note Note about security +:::note[Note about security] If you are not keen on storing your passwords in plaintext, and you are running macOS, you can also [store your credentials in the Keychain Access app](https://pilloxa.gitlab.io/posts/safer-passwords-in-gradle/). Then you can skip the two last rows in `~/.gradle/gradle.properties`. ::: @@ -174,7 +174,7 @@ Please note that you will also have to configure distinct version codes, as [sug Proguard is a tool that can slightly reduce the size of the APK. It does this by stripping parts of the React Native Java bytecode (and its dependencies) that your app is not using. -:::caution Important +:::caution[Important] Make sure to thoroughly test your app if you've enabled Proguard. Proguard often requires configuration specific to each native library you're using. See `app/proguard-rules.pro`. ::: diff --git a/website/versioned_docs/version-0.78/statusbar.md b/website/versioned_docs/version-0.78/statusbar.md index 6345e7bf4ef..93810f7b0e0 100644 --- a/website/versioned_docs/version-0.78/statusbar.md +++ b/website/versioned_docs/version-0.78/statusbar.md @@ -440,7 +440,7 @@ Show or hide the status bar. ### 🗑️ `setNetworkActivityIndicatorVisible()`
iOS
-:::warning Deprecated +:::warning[Deprecated] The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release. ::: diff --git a/website/versioned_docs/version-0.79/the-new-architecture/create-module-library.md b/website/versioned_docs/version-0.78/the-new-architecture/create-module-library.mdx similarity index 97% rename from website/versioned_docs/version-0.79/the-new-architecture/create-module-library.md rename to website/versioned_docs/version-0.78/the-new-architecture/create-module-library.mdx index f081810b85b..9479f3c931c 100644 --- a/website/versioned_docs/version-0.79/the-new-architecture/create-module-library.md +++ b/website/versioned_docs/version-0.78/the-new-architecture/create-module-library.mdx @@ -38,7 +38,11 @@ npx create-react-native-library@latest Once the interactive prompt is done, the tool creates a folder whose structure looks like this in Visual Studio Code: -Folder structure after initializing a new library. +Folder structure after initializing a new library. Feel free to explore the code that has been created for you. However, the most important parts: @@ -70,7 +74,7 @@ Finally, the library contains already all the infrastructure to let the library The rest of the guide assumes that you have a local Turbo Native Module in your app, created following the guidelines shown in the other guides in the website: platform specific Turbo Native Modules, or [cross-platform Turbo Native Modules](./pure-cxx-modules). But it works also for Components and legacy architecture modules and components. You'll have to adapt the files you need to copy and update. - +{/* TODO: add links for Turbo Native Modules */} 1. **[Not required for legacy architecture modules and components]** Move the code you have in the `specs` folder in your app into the `src` folder created by the `create-react-native-library` folder. 2. Update the `index.ts` file to properly export the Turbo Native Module spec so that it is accessible from the library. For example: diff --git a/website/versioned_docs/version-0.78/the-new-architecture/pure-cxx-modules.md b/website/versioned_docs/version-0.78/the-new-architecture/pure-cxx-modules.md index b6d7b2d8310..56821e0984f 100644 --- a/website/versioned_docs/version-0.78/the-new-architecture/pure-cxx-modules.md +++ b/website/versioned_docs/version-0.78/the-new-architecture/pure-cxx-modules.md @@ -71,7 +71,7 @@ export default TurboModuleRegistry.getEnforcing( ## 2. Configure Codegen -The next step is to configure [Codegen](what-is-codegen.md) in your `package.json`. Update the file to include: +The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include: ```json title="package.json" "start": "react-native start", diff --git a/website/versioned_docs/version-0.78/the-new-architecture/using-codegen.md b/website/versioned_docs/version-0.78/the-new-architecture/using-codegen.mdx similarity index 99% rename from website/versioned_docs/version-0.78/the-new-architecture/using-codegen.md rename to website/versioned_docs/version-0.78/the-new-architecture/using-codegen.mdx index fc68d2a7e4d..6fd070f08aa 100644 --- a/website/versioned_docs/version-0.78/the-new-architecture/using-codegen.md +++ b/website/versioned_docs/version-0.78/the-new-architecture/using-codegen.mdx @@ -21,7 +21,7 @@ npx @react-native-community/cli@latest init SampleApp --version 0.76.0 **Codegen** is used to generate the glue-code for your custom modules or components. See the guides for Turbo Native Modules and Fabric Native Components for more details on how to create them. - +{/* TODO: add links */} ## Configuring **Codegen** diff --git a/website/versioned_docs/version-0.79/the-new-architecture/what-is-codegen.md b/website/versioned_docs/version-0.78/the-new-architecture/what-is-codegen.mdx similarity index 97% rename from website/versioned_docs/version-0.79/the-new-architecture/what-is-codegen.md rename to website/versioned_docs/version-0.78/the-new-architecture/what-is-codegen.mdx index d83ff7ef572..382695cf86d 100644 --- a/website/versioned_docs/version-0.79/the-new-architecture/what-is-codegen.md +++ b/website/versioned_docs/version-0.78/the-new-architecture/what-is-codegen.mdx @@ -4,7 +4,7 @@ React Native invokes **Codegen** automatically every time an iOS or Android app is built. Occasionally, you would like to manually run the **Codegen** scripts to know which types and files are actually generated: this is a common scenario when developing Turbo Native Modules and Fabric Native Components. - +{/* TODO: Add links to TM and FC */} ## How does Codegen works diff --git a/website/versioned_docs/version-0.78/transforms.md b/website/versioned_docs/version-0.78/transforms.md index e0576ae8101..d3ed78c59f7 100644 --- a/website/versioned_docs/version-0.78/transforms.md +++ b/website/versioned_docs/version-0.78/transforms.md @@ -268,7 +268,7 @@ Matrix transforms are useful when you need to apply pre-calculated transformatio ### `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY` -:::warning Deprecated +:::warning[Deprecated] Use the [`transform`](transforms#transform) prop instead. ::: diff --git a/website/versioned_docs/version-0.78/turbo-native-modules-android.md b/website/versioned_docs/version-0.78/turbo-native-modules-android.md index 21fbd7703e1..83d922f9918 100644 --- a/website/versioned_docs/version-0.78/turbo-native-modules-android.md +++ b/website/versioned_docs/version-0.78/turbo-native-modules-android.md @@ -206,7 +206,7 @@ Finally, we need to tell the React Native in our main application how to find th In this case, you add it to be returned by the [getPackages](https://github.com/facebook/react-native/blob/8d8b8c343e62115a5509e1aed62047053c2f6e39/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactNativeHost.java#L233) method. :::info -Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.md#publish-the-library-on-npm), which our build tooling will autolink for you. +Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.mdx#publish-the-library-on-npm), which our build tooling will autolink for you. ::: diff --git a/website/versioned_docs/version-0.78/turbo-native-modules.md b/website/versioned_docs/version-0.78/turbo-native-modules.md index 30f1942f5dc..a6a67db2335 100644 --- a/website/versioned_docs/version-0.78/turbo-native-modules.md +++ b/website/versioned_docs/version-0.78/turbo-native-modules.md @@ -34,7 +34,7 @@ To make this work on mobile, we need to use Android and iOS APIs: ### 1. Declare Typed Specification -React Native provides a tool called [Codegen](/the-new-architecture/what-is-codegen.md), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification. +React Native provides a tool called [Codegen](/the-new-architecture/what-is-codegen.mdx), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification. To create a specs file: diff --git a/website/versioned_docs/version-0.79/accessibilityinfo.md b/website/versioned_docs/version-0.79/accessibilityinfo.md index 9629db59870..fab883898c3 100644 --- a/website/versioned_docs/version-0.79/accessibilityinfo.md +++ b/website/versioned_docs/version-0.79/accessibilityinfo.md @@ -254,7 +254,7 @@ Query whether reduce motion and prefer cross-fade transitions settings are curre ### `setAccessibilityFocus()` -:::warning Deprecated +:::warning[Deprecated] Prefer using `sendAccessibilityEvent` with eventType `focus` instead. ::: diff --git a/website/versioned_docs/version-0.78/metro.md b/website/versioned_docs/version-0.79/metro.mdx similarity index 82% rename from website/versioned_docs/version-0.78/metro.md rename to website/versioned_docs/version-0.79/metro.mdx index a61962a5512..dd9d297e77a 100644 --- a/website/versioned_docs/version-0.78/metro.md +++ b/website/versioned_docs/version-0.79/metro.mdx @@ -20,9 +20,12 @@ In React Native, your Metro config should extend either [`@react-native/metro-co Below is the default `metro.config.js` file in a React Native template project: - +{/* prettier-ignore */} ```js -const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); +const { + getDefaultConfig, + mergeConfig, +} = require('@react-native/metro-config'); /** * Metro configuration @@ -45,23 +48,28 @@ Exporting a config function is an opt-in to managing the final config yourself **From `@react-native/metro-config` 0.72.1**, it is no longer necessary to use a config function to access the complete default config. See the **Tip** section below. ::: - +{/* prettier-ignore */} ```js -const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); +const { + getDefaultConfig, + mergeConfig, +} = require('@react-native/metro-config'); module.exports = function (baseConfig) { - const defaultConfig = mergeConfig(baseConfig, getDefaultConfig(__dirname)); - const {resolver: {assetExts, sourceExts}} = defaultConfig; - - return mergeConfig( - defaultConfig, - { - resolver: { - assetExts: assetExts.filter(ext => ext !== 'svg'), - sourceExts: [...sourceExts, 'svg'], - }, - }, + const defaultConfig = mergeConfig( + baseConfig, + getDefaultConfig(__dirname), ); + const { + resolver: {assetExts, sourceExts}, + } = defaultConfig; + + return mergeConfig(defaultConfig, { + resolver: { + assetExts: assetExts.filter(ext => ext !== 'svg'), + sourceExts: [...sourceExts, 'svg'], + }, + }); }; ``` @@ -70,7 +78,7 @@ Using a config function is for advanced use cases. A simpler method than the abo **Alternative** - +{/* prettier-ignore */} ```js const defaultConfig = getDefaultConfig(__dirname); @@ -87,7 +95,7 @@ module.exports = mergeConfig(defaultConfig, config); ✅ **Recommended** - +{/* prettier-ignore */} ```js const config = { resolver: { diff --git a/website/versioned_docs/version-0.79/other-debugging-methods.md b/website/versioned_docs/version-0.79/other-debugging-methods.md index 28b13d1e087..5df989acefc 100644 --- a/website/versioned_docs/version-0.79/other-debugging-methods.md +++ b/website/versioned_docs/version-0.79/other-debugging-methods.md @@ -27,7 +27,7 @@ Every time the app is reloaded, a new JSContext is created. Choosing "Automatica ## Remote JavaScript Debugging (removed) -:::warning Important +:::warning[Important] Remote JavaScript Debugging has been removed as of React Native 0.79. See the original [deprecation announcement](https://github.com/react-native-community/discussions-and-proposals/discussions/734). If you are on an older version of React Native, please go to the docs [for your version](/versions). diff --git a/website/versioned_docs/version-0.79/profiling.md b/website/versioned_docs/version-0.79/profiling.md index f833a4440c2..73cbed73ad1 100644 --- a/website/versioned_docs/version-0.79/profiling.md +++ b/website/versioned_docs/version-0.79/profiling.md @@ -33,13 +33,13 @@ After opening the trace in Android Studio or Perfetto, you should see something ![Example](/docs/assets/SystraceExample.png) -:::note Hint +:::note[Hint] Use the WASD keys to strafe and zoom. ::: The exact UI might be different but the instructions below will apply regardless of the tool you're using. -:::info Enable VSync highlighting +:::info[Enable VSync highlighting] Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries: ![Enable VSync Highlighting](/docs/assets/SystraceHighlightVSync.png) @@ -133,7 +133,7 @@ There isn't a quick way to mitigate this unless you're able to postpone creating If the problem seems to be on the native side, you can use the [CPU hotspot profiler](https://developer.android.com/studio/profile/record-java-kotlin-methods) to get more details on what's happening. Open the Android Studio Profiler panel and select "Find CPU Hotspots (Java/Kotlin Method Recording)". -:::info Choose the Java/Kotlin recording +:::info[Choose the Java/Kotlin recording] Make sure you select "Find CPU Hotspots **(Java/Kotlin Recording)**" rather than "Find CPU Hotspots (Callstack Sample)". They have similar icons but do different things. ::: diff --git a/website/versioned_docs/version-0.79/signed-apk-android.md b/website/versioned_docs/version-0.79/signed-apk-android.md index d51ecd67bbe..c5158f4aab0 100644 --- a/website/versioned_docs/version-0.79/signed-apk-android.md +++ b/website/versioned_docs/version-0.79/signed-apk-android.md @@ -65,11 +65,11 @@ MYAPP_UPLOAD_KEY_PASSWORD=***** These are going to be global Gradle variables, which we can later use in our Gradle config to sign our app. -:::note Note about using git +:::note[Note about using git] Saving the above Gradle variables in `~/.gradle/gradle.properties` instead of `android/gradle.properties` prevents them from being checked in to git. You may have to create the `~/.gradle/gradle.properties` file in your user's home directory before you can add the variables. ::: -:::note Note about security +:::note[Note about security] If you are not keen on storing your passwords in plaintext, and you are running macOS, you can also [store your credentials in the Keychain Access app](https://pilloxa.gitlab.io/posts/safer-passwords-in-gradle/). Then you can skip the two last rows in `~/.gradle/gradle.properties`. ::: @@ -174,7 +174,7 @@ Please note that you will also have to configure distinct version codes, as [sug Proguard is a tool that can slightly reduce the size of the APK. It does this by stripping parts of the React Native Java bytecode (and its dependencies) that your app is not using. -:::caution Important +:::caution[Important] Make sure to thoroughly test your app if you've enabled Proguard. Proguard often requires configuration specific to each native library you're using. See `app/proguard-rules.pro`. ::: diff --git a/website/versioned_docs/version-0.79/statusbar.md b/website/versioned_docs/version-0.79/statusbar.md index 6345e7bf4ef..93810f7b0e0 100644 --- a/website/versioned_docs/version-0.79/statusbar.md +++ b/website/versioned_docs/version-0.79/statusbar.md @@ -440,7 +440,7 @@ Show or hide the status bar. ### 🗑️ `setNetworkActivityIndicatorVisible()`
iOS
-:::warning Deprecated +:::warning[Deprecated] The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release. ::: diff --git a/website/versioned_docs/version-0.78/the-new-architecture/create-module-library.md b/website/versioned_docs/version-0.79/the-new-architecture/create-module-library.mdx similarity index 97% rename from website/versioned_docs/version-0.78/the-new-architecture/create-module-library.md rename to website/versioned_docs/version-0.79/the-new-architecture/create-module-library.mdx index f081810b85b..9479f3c931c 100644 --- a/website/versioned_docs/version-0.78/the-new-architecture/create-module-library.md +++ b/website/versioned_docs/version-0.79/the-new-architecture/create-module-library.mdx @@ -38,7 +38,11 @@ npx create-react-native-library@latest Once the interactive prompt is done, the tool creates a folder whose structure looks like this in Visual Studio Code: -Folder structure after initializing a new library. +Folder structure after initializing a new library. Feel free to explore the code that has been created for you. However, the most important parts: @@ -70,7 +74,7 @@ Finally, the library contains already all the infrastructure to let the library The rest of the guide assumes that you have a local Turbo Native Module in your app, created following the guidelines shown in the other guides in the website: platform specific Turbo Native Modules, or [cross-platform Turbo Native Modules](./pure-cxx-modules). But it works also for Components and legacy architecture modules and components. You'll have to adapt the files you need to copy and update. - +{/* TODO: add links for Turbo Native Modules */} 1. **[Not required for legacy architecture modules and components]** Move the code you have in the `specs` folder in your app into the `src` folder created by the `create-react-native-library` folder. 2. Update the `index.ts` file to properly export the Turbo Native Module spec so that it is accessible from the library. For example: diff --git a/website/versioned_docs/version-0.79/the-new-architecture/pure-cxx-modules.md b/website/versioned_docs/version-0.79/the-new-architecture/pure-cxx-modules.md index 23cc351d132..440dfbe553d 100644 --- a/website/versioned_docs/version-0.79/the-new-architecture/pure-cxx-modules.md +++ b/website/versioned_docs/version-0.79/the-new-architecture/pure-cxx-modules.md @@ -71,7 +71,7 @@ export default TurboModuleRegistry.getEnforcing( ## 2. Configure Codegen -The next step is to configure [Codegen](what-is-codegen.md) in your `package.json`. Update the file to include: +The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include: ```json title="package.json" "start": "react-native start", diff --git a/website/versioned_docs/version-0.79/the-new-architecture/using-codegen.md b/website/versioned_docs/version-0.79/the-new-architecture/using-codegen.mdx similarity index 99% rename from website/versioned_docs/version-0.79/the-new-architecture/using-codegen.md rename to website/versioned_docs/version-0.79/the-new-architecture/using-codegen.mdx index de2a0a12ff8..642282d18eb 100644 --- a/website/versioned_docs/version-0.79/the-new-architecture/using-codegen.md +++ b/website/versioned_docs/version-0.79/the-new-architecture/using-codegen.mdx @@ -21,7 +21,7 @@ npx @react-native-community/cli@latest init SampleApp --version 0.76.0 **Codegen** is used to generate the glue-code for your custom modules or components. See the guides for Turbo Native Modules and Fabric Native Components for more details on how to create them. - +{/* TODO: add links */} ## Configuring **Codegen** diff --git a/website/versioned_docs/version-0.77/the-new-architecture/what-is-codegen.md b/website/versioned_docs/version-0.79/the-new-architecture/what-is-codegen.mdx similarity index 97% rename from website/versioned_docs/version-0.77/the-new-architecture/what-is-codegen.md rename to website/versioned_docs/version-0.79/the-new-architecture/what-is-codegen.mdx index d83ff7ef572..382695cf86d 100644 --- a/website/versioned_docs/version-0.77/the-new-architecture/what-is-codegen.md +++ b/website/versioned_docs/version-0.79/the-new-architecture/what-is-codegen.mdx @@ -4,7 +4,7 @@ React Native invokes **Codegen** automatically every time an iOS or Android app is built. Occasionally, you would like to manually run the **Codegen** scripts to know which types and files are actually generated: this is a common scenario when developing Turbo Native Modules and Fabric Native Components. - +{/* TODO: Add links to TM and FC */} ## How does Codegen works diff --git a/website/versioned_docs/version-0.79/transforms.md b/website/versioned_docs/version-0.79/transforms.md index e0576ae8101..d3ed78c59f7 100644 --- a/website/versioned_docs/version-0.79/transforms.md +++ b/website/versioned_docs/version-0.79/transforms.md @@ -268,7 +268,7 @@ Matrix transforms are useful when you need to apply pre-calculated transformatio ### `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY` -:::warning Deprecated +:::warning[Deprecated] Use the [`transform`](transforms#transform) prop instead. ::: diff --git a/website/versioned_docs/version-0.79/turbo-native-modules-android.md b/website/versioned_docs/version-0.79/turbo-native-modules-android.md index 21fbd7703e1..83d922f9918 100644 --- a/website/versioned_docs/version-0.79/turbo-native-modules-android.md +++ b/website/versioned_docs/version-0.79/turbo-native-modules-android.md @@ -206,7 +206,7 @@ Finally, we need to tell the React Native in our main application how to find th In this case, you add it to be returned by the [getPackages](https://github.com/facebook/react-native/blob/8d8b8c343e62115a5509e1aed62047053c2f6e39/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactNativeHost.java#L233) method. :::info -Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.md#publish-the-library-on-npm), which our build tooling will autolink for you. +Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.mdx#publish-the-library-on-npm), which our build tooling will autolink for you. ::: diff --git a/website/versioned_docs/version-0.79/turbo-native-modules.md b/website/versioned_docs/version-0.79/turbo-native-modules.md index 30f1942f5dc..a6a67db2335 100644 --- a/website/versioned_docs/version-0.79/turbo-native-modules.md +++ b/website/versioned_docs/version-0.79/turbo-native-modules.md @@ -34,7 +34,7 @@ To make this work on mobile, we need to use Android and iOS APIs: ### 1. Declare Typed Specification -React Native provides a tool called [Codegen](/the-new-architecture/what-is-codegen.md), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification. +React Native provides a tool called [Codegen](/the-new-architecture/what-is-codegen.mdx), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification. To create a specs file: diff --git a/website/versioned_docs/version-0.80/accessibilityinfo.md b/website/versioned_docs/version-0.80/accessibilityinfo.md index 9629db59870..fab883898c3 100644 --- a/website/versioned_docs/version-0.80/accessibilityinfo.md +++ b/website/versioned_docs/version-0.80/accessibilityinfo.md @@ -254,7 +254,7 @@ Query whether reduce motion and prefer cross-fade transitions settings are curre ### `setAccessibilityFocus()` -:::warning Deprecated +:::warning[Deprecated] Prefer using `sendAccessibilityEvent` with eventType `focus` instead. ::: diff --git a/website/versioned_docs/version-0.80/interactionmanager.md b/website/versioned_docs/version-0.80/interactionmanager.md index 26e9ed0d69c..f127d4569c8 100644 --- a/website/versioned_docs/version-0.80/interactionmanager.md +++ b/website/versioned_docs/version-0.80/interactionmanager.md @@ -5,7 +5,7 @@ title: 🗑️ InteractionManager import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; -:::warning Deprecated +:::warning[Deprecated] Avoid long-running work and use `requestIdleCallback` instead. ::: diff --git a/website/versioned_docs/version-0.80/metro.md b/website/versioned_docs/version-0.80/metro.md deleted file mode 100644 index a61962a5512..00000000000 --- a/website/versioned_docs/version-0.80/metro.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: metro -title: Metro ---- - -React Native uses [Metro](https://metrobundler.dev/) to build your JavaScript code and assets. - -## Configuring Metro - -Configuration options for Metro can be customized in your project's `metro.config.js` file. This can export either: - -- **An object (recommended)** that will be merged on top of Metro's internal config defaults. -- [**A function**](#advanced-using-a-config-function) that will be called with Metro's internal config defaults and should return a final config object. - -:::tip -Please see [**Configuring Metro**](https://metrobundler.dev/docs/configuration) on the Metro website for documentation on all available config options. -::: - -In React Native, your Metro config should extend either [`@react-native/metro-config`](https://www.npmjs.com/package/@react-native/metro-config) or [`@expo/metro-config`](https://www.npmjs.com/package/@expo/metro-config). These packages contain essential defaults necessary to build and run React Native apps. - -Below is the default `metro.config.js` file in a React Native template project: - - -```js -const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); - -/** - * Metro configuration - * https://metrobundler.dev/docs/configuration - * - * @type {import('metro-config').MetroConfig} - */ -const config = {}; - -module.exports = mergeConfig(getDefaultConfig(__dirname), config); -``` - -Metro options you wish to customize can be done so within the `config` object. - -### Advanced: Using a config function - -Exporting a config function is an opt-in to managing the final config yourself — **Metro will not apply any internal defaults**. This pattern can be useful when needing to read the base default config object from Metro or to set options dynamically. - -:::info -**From `@react-native/metro-config` 0.72.1**, it is no longer necessary to use a config function to access the complete default config. See the **Tip** section below. -::: - - -```js -const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); - -module.exports = function (baseConfig) { - const defaultConfig = mergeConfig(baseConfig, getDefaultConfig(__dirname)); - const {resolver: {assetExts, sourceExts}} = defaultConfig; - - return mergeConfig( - defaultConfig, - { - resolver: { - assetExts: assetExts.filter(ext => ext !== 'svg'), - sourceExts: [...sourceExts, 'svg'], - }, - }, - ); -}; -``` - -:::tip -Using a config function is for advanced use cases. A simpler method than the above, e.g. for customising `sourceExts`, would be to read these defaults from `@react-native/metro-config`. - -**Alternative** - - -```js -const defaultConfig = getDefaultConfig(__dirname); - -const config = { - resolver: { - sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'], - }, -}; - -module.exports = mergeConfig(defaultConfig, config); -``` - -**However!**, we recommend copying and editing when overriding these config values — placing the source of truth in your config file. - -✅ **Recommended** - - -```js -const config = { - resolver: { - sourceExts: ['js', 'ts', 'tsx', 'svg'], - }, -}; -``` - -::: - -## Learn more about Metro - -- [Metro website](https://metrobundler.dev/) -- [Video: "Metro & React Native DevX" talk at App.js 2023](https://www.youtube.com/watch?v=c9D4pg0y9cI) diff --git a/website/versioned_docs/version-0.80/metro.mdx b/website/versioned_docs/version-0.80/metro.mdx new file mode 100644 index 00000000000..dd9d297e77a --- /dev/null +++ b/website/versioned_docs/version-0.80/metro.mdx @@ -0,0 +1,112 @@ +--- +id: metro +title: Metro +--- + +React Native uses [Metro](https://metrobundler.dev/) to build your JavaScript code and assets. + +## Configuring Metro + +Configuration options for Metro can be customized in your project's `metro.config.js` file. This can export either: + +- **An object (recommended)** that will be merged on top of Metro's internal config defaults. +- [**A function**](#advanced-using-a-config-function) that will be called with Metro's internal config defaults and should return a final config object. + +:::tip +Please see [**Configuring Metro**](https://metrobundler.dev/docs/configuration) on the Metro website for documentation on all available config options. +::: + +In React Native, your Metro config should extend either [`@react-native/metro-config`](https://www.npmjs.com/package/@react-native/metro-config) or [`@expo/metro-config`](https://www.npmjs.com/package/@expo/metro-config). These packages contain essential defaults necessary to build and run React Native apps. + +Below is the default `metro.config.js` file in a React Native template project: + +{/* prettier-ignore */} +```js +const { + getDefaultConfig, + mergeConfig, +} = require('@react-native/metro-config'); + +/** + * Metro configuration + * https://metrobundler.dev/docs/configuration + * + * @type {import('metro-config').MetroConfig} + */ +const config = {}; + +module.exports = mergeConfig(getDefaultConfig(__dirname), config); +``` + +Metro options you wish to customize can be done so within the `config` object. + +### Advanced: Using a config function + +Exporting a config function is an opt-in to managing the final config yourself — **Metro will not apply any internal defaults**. This pattern can be useful when needing to read the base default config object from Metro or to set options dynamically. + +:::info +**From `@react-native/metro-config` 0.72.1**, it is no longer necessary to use a config function to access the complete default config. See the **Tip** section below. +::: + +{/* prettier-ignore */} +```js +const { + getDefaultConfig, + mergeConfig, +} = require('@react-native/metro-config'); + +module.exports = function (baseConfig) { + const defaultConfig = mergeConfig( + baseConfig, + getDefaultConfig(__dirname), + ); + const { + resolver: {assetExts, sourceExts}, + } = defaultConfig; + + return mergeConfig(defaultConfig, { + resolver: { + assetExts: assetExts.filter(ext => ext !== 'svg'), + sourceExts: [...sourceExts, 'svg'], + }, + }); +}; +``` + +:::tip +Using a config function is for advanced use cases. A simpler method than the above, e.g. for customising `sourceExts`, would be to read these defaults from `@react-native/metro-config`. + +**Alternative** + +{/* prettier-ignore */} +```js +const defaultConfig = getDefaultConfig(__dirname); + +const config = { + resolver: { + sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'], + }, +}; + +module.exports = mergeConfig(defaultConfig, config); +``` + +**However!**, we recommend copying and editing when overriding these config values — placing the source of truth in your config file. + +✅ **Recommended** + +{/* prettier-ignore */} +```js +const config = { + resolver: { + sourceExts: ['js', 'ts', 'tsx', 'svg'], + }, +}; +``` + +::: + +## Learn more about Metro + +- [Metro website](https://metrobundler.dev/) +- [Video: "Metro & React Native DevX" talk at App.js 2023](https://www.youtube.com/watch?v=c9D4pg0y9cI) diff --git a/website/versioned_docs/version-0.80/other-debugging-methods.md b/website/versioned_docs/version-0.80/other-debugging-methods.md index 28b13d1e087..5df989acefc 100644 --- a/website/versioned_docs/version-0.80/other-debugging-methods.md +++ b/website/versioned_docs/version-0.80/other-debugging-methods.md @@ -27,7 +27,7 @@ Every time the app is reloaded, a new JSContext is created. Choosing "Automatica ## Remote JavaScript Debugging (removed) -:::warning Important +:::warning[Important] Remote JavaScript Debugging has been removed as of React Native 0.79. See the original [deprecation announcement](https://github.com/react-native-community/discussions-and-proposals/discussions/734). If you are on an older version of React Native, please go to the docs [for your version](/versions). diff --git a/website/versioned_docs/version-0.80/profiling.md b/website/versioned_docs/version-0.80/profiling.md index f833a4440c2..73cbed73ad1 100644 --- a/website/versioned_docs/version-0.80/profiling.md +++ b/website/versioned_docs/version-0.80/profiling.md @@ -33,13 +33,13 @@ After opening the trace in Android Studio or Perfetto, you should see something ![Example](/docs/assets/SystraceExample.png) -:::note Hint +:::note[Hint] Use the WASD keys to strafe and zoom. ::: The exact UI might be different but the instructions below will apply regardless of the tool you're using. -:::info Enable VSync highlighting +:::info[Enable VSync highlighting] Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries: ![Enable VSync Highlighting](/docs/assets/SystraceHighlightVSync.png) @@ -133,7 +133,7 @@ There isn't a quick way to mitigate this unless you're able to postpone creating If the problem seems to be on the native side, you can use the [CPU hotspot profiler](https://developer.android.com/studio/profile/record-java-kotlin-methods) to get more details on what's happening. Open the Android Studio Profiler panel and select "Find CPU Hotspots (Java/Kotlin Method Recording)". -:::info Choose the Java/Kotlin recording +:::info[Choose the Java/Kotlin recording] Make sure you select "Find CPU Hotspots **(Java/Kotlin Recording)**" rather than "Find CPU Hotspots (Callstack Sample)". They have similar icons but do different things. ::: diff --git a/website/versioned_docs/version-0.80/signed-apk-android.md b/website/versioned_docs/version-0.80/signed-apk-android.md index d51ecd67bbe..c5158f4aab0 100644 --- a/website/versioned_docs/version-0.80/signed-apk-android.md +++ b/website/versioned_docs/version-0.80/signed-apk-android.md @@ -65,11 +65,11 @@ MYAPP_UPLOAD_KEY_PASSWORD=***** These are going to be global Gradle variables, which we can later use in our Gradle config to sign our app. -:::note Note about using git +:::note[Note about using git] Saving the above Gradle variables in `~/.gradle/gradle.properties` instead of `android/gradle.properties` prevents them from being checked in to git. You may have to create the `~/.gradle/gradle.properties` file in your user's home directory before you can add the variables. ::: -:::note Note about security +:::note[Note about security] If you are not keen on storing your passwords in plaintext, and you are running macOS, you can also [store your credentials in the Keychain Access app](https://pilloxa.gitlab.io/posts/safer-passwords-in-gradle/). Then you can skip the two last rows in `~/.gradle/gradle.properties`. ::: @@ -174,7 +174,7 @@ Please note that you will also have to configure distinct version codes, as [sug Proguard is a tool that can slightly reduce the size of the APK. It does this by stripping parts of the React Native Java bytecode (and its dependencies) that your app is not using. -:::caution Important +:::caution[Important] Make sure to thoroughly test your app if you've enabled Proguard. Proguard often requires configuration specific to each native library you're using. See `app/proguard-rules.pro`. ::: diff --git a/website/versioned_docs/version-0.80/statusbar.md b/website/versioned_docs/version-0.80/statusbar.md index 6345e7bf4ef..93810f7b0e0 100644 --- a/website/versioned_docs/version-0.80/statusbar.md +++ b/website/versioned_docs/version-0.80/statusbar.md @@ -440,7 +440,7 @@ Show or hide the status bar. ### 🗑️ `setNetworkActivityIndicatorVisible()`
iOS
-:::warning Deprecated +:::warning[Deprecated] The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release. ::: diff --git a/website/versioned_docs/version-0.80/strict-typescript-api.md b/website/versioned_docs/version-0.80/strict-typescript-api.md index 4223527eeab..a426511835b 100644 --- a/website/versioned_docs/version-0.80/strict-typescript-api.md +++ b/website/versioned_docs/version-0.80/strict-typescript-api.md @@ -32,7 +32,7 @@ Opting in is a **breaking change**, since some of our new types have updated nam } ``` -:::note Under the hood +:::note[Under the hood] This will instruct TypeScript to resolve `react-native` types from our new [`types_generated/`](https://www.npmjs.com/package/react-native?activeTab=code) dir, instead of the previous [`types/`](https://www.npmjs.com/package/react-native?activeTab=code) dir (manually maintained). No restart of TypeScript or your editor is required. @@ -40,7 +40,7 @@ This will instruct TypeScript to resolve `react-native` types from our new [`typ The Strict TypeScript API follows our [RFC](https://github.com/react-native-community/discussions-and-proposals/pull/894) to remove deep imports from React Native. Therefore, some APIs are no longer exported at root. This is intentional, in order to reduce the overall surface area of React Native's API. -:::tip API feedback +:::tip[API feedback] **Sending feedback**: We will be working with the community to finalize which APIs we export over (at least) the next two React Native releases. Please share your feedback in our [feedback thread](https://github.com/react-native-community/discussions-and-proposals/discussions/893). diff --git a/docs/the-new-architecture/create-module-library.md b/website/versioned_docs/version-0.80/the-new-architecture/create-module-library.mdx similarity index 97% rename from docs/the-new-architecture/create-module-library.md rename to website/versioned_docs/version-0.80/the-new-architecture/create-module-library.mdx index 657ef9441bd..0a5091fab26 100644 --- a/docs/the-new-architecture/create-module-library.md +++ b/website/versioned_docs/version-0.80/the-new-architecture/create-module-library.mdx @@ -38,7 +38,11 @@ npx create-react-native-library@latest Once the interactive prompt is done, the tool creates a folder whose structure looks like this in Visual Studio Code: -Folder structure after initializing a new library. +Folder structure after initializing a new library. Feel free to explore the code that has been created for you. However, the most important parts: @@ -70,7 +74,7 @@ Finally, the library contains already all the infrastructure to let the library The rest of the guide assumes that you have a local Turbo Native Module in your app, created following the guidelines shown in the other guides in the website: platform specific Turbo Native Modules, or [cross-platform Turbo Native Modules](./pure-cxx-modules). But it works also for Components and legacy architecture modules and components. You'll have to adapt the files you need to copy and update. - +{/* TODO: add links for Turbo Native Modules */} 1. **[Not required for legacy architecture modules and components]** Move the code you have in the `specs` folder in your app into the `src` folder created by the `create-react-native-library` folder. 2. Update the `index.ts` file to properly export the Turbo Native Module spec so that it is accessible from the library. For example: diff --git a/website/versioned_docs/version-0.80/the-new-architecture/pure-cxx-modules.md b/website/versioned_docs/version-0.80/the-new-architecture/pure-cxx-modules.md index 23cc351d132..440dfbe553d 100644 --- a/website/versioned_docs/version-0.80/the-new-architecture/pure-cxx-modules.md +++ b/website/versioned_docs/version-0.80/the-new-architecture/pure-cxx-modules.md @@ -71,7 +71,7 @@ export default TurboModuleRegistry.getEnforcing( ## 2. Configure Codegen -The next step is to configure [Codegen](what-is-codegen.md) in your `package.json`. Update the file to include: +The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include: ```json title="package.json" "start": "react-native start", diff --git a/website/versioned_docs/version-0.80/the-new-architecture/using-codegen.md b/website/versioned_docs/version-0.80/the-new-architecture/using-codegen.mdx similarity index 99% rename from website/versioned_docs/version-0.80/the-new-architecture/using-codegen.md rename to website/versioned_docs/version-0.80/the-new-architecture/using-codegen.mdx index 67e143cc344..5ed4bef67cd 100644 --- a/website/versioned_docs/version-0.80/the-new-architecture/using-codegen.md +++ b/website/versioned_docs/version-0.80/the-new-architecture/using-codegen.mdx @@ -21,7 +21,7 @@ npx @react-native-community/cli@latest init SampleApp --version 0.76.0 **Codegen** is used to generate the glue-code for your custom modules or components. See the guides for Turbo Native Modules and Fabric Native Components for more details on how to create them. - +{/* TODO: add links */} ## Configuring **Codegen** diff --git a/website/versioned_docs/version-0.80/the-new-architecture/what-is-codegen.md b/website/versioned_docs/version-0.80/the-new-architecture/what-is-codegen.mdx similarity index 97% rename from website/versioned_docs/version-0.80/the-new-architecture/what-is-codegen.md rename to website/versioned_docs/version-0.80/the-new-architecture/what-is-codegen.mdx index d83ff7ef572..382695cf86d 100644 --- a/website/versioned_docs/version-0.80/the-new-architecture/what-is-codegen.md +++ b/website/versioned_docs/version-0.80/the-new-architecture/what-is-codegen.mdx @@ -4,7 +4,7 @@ React Native invokes **Codegen** automatically every time an iOS or Android app is built. Occasionally, you would like to manually run the **Codegen** scripts to know which types and files are actually generated: this is a common scenario when developing Turbo Native Modules and Fabric Native Components. - +{/* TODO: Add links to TM and FC */} ## How does Codegen works diff --git a/website/versioned_docs/version-0.80/timers.md b/website/versioned_docs/version-0.80/timers.md index bf0041d09b4..87eaf1f3f80 100644 --- a/website/versioned_docs/version-0.80/timers.md +++ b/website/versioned_docs/version-0.80/timers.md @@ -25,7 +25,7 @@ Please correct this by running ``adb shell "date `date +%m%d%H%M%Y.%S%3N`"`` on ## InteractionManager -:::warning Deprecated +:::warning[Deprecated] The `InteractionManager` behavior has been changed to be the same as `setImmediate`, which should be used instead. ::: diff --git a/website/versioned_docs/version-0.80/transforms.md b/website/versioned_docs/version-0.80/transforms.md index e0576ae8101..d3ed78c59f7 100644 --- a/website/versioned_docs/version-0.80/transforms.md +++ b/website/versioned_docs/version-0.80/transforms.md @@ -268,7 +268,7 @@ Matrix transforms are useful when you need to apply pre-calculated transformatio ### `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY` -:::warning Deprecated +:::warning[Deprecated] Use the [`transform`](transforms#transform) prop instead. ::: diff --git a/website/versioned_docs/version-0.80/turbo-native-modules-android.md b/website/versioned_docs/version-0.80/turbo-native-modules-android.md index 21fbd7703e1..83d922f9918 100644 --- a/website/versioned_docs/version-0.80/turbo-native-modules-android.md +++ b/website/versioned_docs/version-0.80/turbo-native-modules-android.md @@ -206,7 +206,7 @@ Finally, we need to tell the React Native in our main application how to find th In this case, you add it to be returned by the [getPackages](https://github.com/facebook/react-native/blob/8d8b8c343e62115a5509e1aed62047053c2f6e39/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactNativeHost.java#L233) method. :::info -Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.md#publish-the-library-on-npm), which our build tooling will autolink for you. +Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.mdx#publish-the-library-on-npm), which our build tooling will autolink for you. ::: diff --git a/website/versioned_docs/version-0.80/turbo-native-modules.md b/website/versioned_docs/version-0.80/turbo-native-modules.md index 30f1942f5dc..a6a67db2335 100644 --- a/website/versioned_docs/version-0.80/turbo-native-modules.md +++ b/website/versioned_docs/version-0.80/turbo-native-modules.md @@ -34,7 +34,7 @@ To make this work on mobile, we need to use Android and iOS APIs: ### 1. Declare Typed Specification -React Native provides a tool called [Codegen](/the-new-architecture/what-is-codegen.md), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification. +React Native provides a tool called [Codegen](/the-new-architecture/what-is-codegen.mdx), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification. To create a specs file: diff --git a/website/versioned_docs/version-0.81/accessibilityinfo.md b/website/versioned_docs/version-0.81/accessibilityinfo.md index 9629db59870..fab883898c3 100644 --- a/website/versioned_docs/version-0.81/accessibilityinfo.md +++ b/website/versioned_docs/version-0.81/accessibilityinfo.md @@ -254,7 +254,7 @@ Query whether reduce motion and prefer cross-fade transitions settings are curre ### `setAccessibilityFocus()` -:::warning Deprecated +:::warning[Deprecated] Prefer using `sendAccessibilityEvent` with eventType `focus` instead. ::: diff --git a/website/versioned_docs/version-0.81/building-for-tv.md b/website/versioned_docs/version-0.81/building-for-tv.md index 71ed7a11f5b..490163a1797 100644 --- a/website/versioned_docs/version-0.81/building-for-tv.md +++ b/website/versioned_docs/version-0.81/building-for-tv.md @@ -6,6 +6,6 @@ hide_table_of_contents: true TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. -:::warning Deprecated +:::warning[Deprecated] TV support has moved to the [React Native for TV](https://github.com/react-native-tvos/react-native-tvos#readme) repository. Please see the **README** there for information on projects for Apple TV or Android TV. ::: diff --git a/website/versioned_docs/version-0.81/integration-with-android-fragment.md b/website/versioned_docs/version-0.81/integration-with-android-fragment.md index 39a3d918f66..4f26b463802 100644 --- a/website/versioned_docs/version-0.81/integration-with-android-fragment.md +++ b/website/versioned_docs/version-0.81/integration-with-android-fragment.md @@ -33,7 +33,7 @@ This is required by React Native to handle the back button press event. Go into your host activity and make sure it implements the `DefaultHardwareBackBtnHandler` interface: -:::warning Deprecated +:::warning[Deprecated] `Activity.onBackPressed()` has been [deprecated]() since API level 33. Android 16 devices with apps targeting API level 36 this will [no longer be called](https://developer.android.com/about/versions/16/behavior-changes-16#predictive-back) and [OnBackPressedDispatcher](https://developer.android.com/reference/androidx/activity/OnBackPressedDispatcher) should be used instead. ::: diff --git a/website/versioned_docs/version-0.81/interactionmanager.md b/website/versioned_docs/version-0.81/interactionmanager.md index 26e9ed0d69c..f127d4569c8 100644 --- a/website/versioned_docs/version-0.81/interactionmanager.md +++ b/website/versioned_docs/version-0.81/interactionmanager.md @@ -5,7 +5,7 @@ title: 🗑️ InteractionManager import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; -:::warning Deprecated +:::warning[Deprecated] Avoid long-running work and use `requestIdleCallback` instead. ::: diff --git a/website/versioned_docs/version-0.81/metro.md b/website/versioned_docs/version-0.81/metro.md deleted file mode 100644 index a61962a5512..00000000000 --- a/website/versioned_docs/version-0.81/metro.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: metro -title: Metro ---- - -React Native uses [Metro](https://metrobundler.dev/) to build your JavaScript code and assets. - -## Configuring Metro - -Configuration options for Metro can be customized in your project's `metro.config.js` file. This can export either: - -- **An object (recommended)** that will be merged on top of Metro's internal config defaults. -- [**A function**](#advanced-using-a-config-function) that will be called with Metro's internal config defaults and should return a final config object. - -:::tip -Please see [**Configuring Metro**](https://metrobundler.dev/docs/configuration) on the Metro website for documentation on all available config options. -::: - -In React Native, your Metro config should extend either [`@react-native/metro-config`](https://www.npmjs.com/package/@react-native/metro-config) or [`@expo/metro-config`](https://www.npmjs.com/package/@expo/metro-config). These packages contain essential defaults necessary to build and run React Native apps. - -Below is the default `metro.config.js` file in a React Native template project: - - -```js -const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); - -/** - * Metro configuration - * https://metrobundler.dev/docs/configuration - * - * @type {import('metro-config').MetroConfig} - */ -const config = {}; - -module.exports = mergeConfig(getDefaultConfig(__dirname), config); -``` - -Metro options you wish to customize can be done so within the `config` object. - -### Advanced: Using a config function - -Exporting a config function is an opt-in to managing the final config yourself — **Metro will not apply any internal defaults**. This pattern can be useful when needing to read the base default config object from Metro or to set options dynamically. - -:::info -**From `@react-native/metro-config` 0.72.1**, it is no longer necessary to use a config function to access the complete default config. See the **Tip** section below. -::: - - -```js -const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); - -module.exports = function (baseConfig) { - const defaultConfig = mergeConfig(baseConfig, getDefaultConfig(__dirname)); - const {resolver: {assetExts, sourceExts}} = defaultConfig; - - return mergeConfig( - defaultConfig, - { - resolver: { - assetExts: assetExts.filter(ext => ext !== 'svg'), - sourceExts: [...sourceExts, 'svg'], - }, - }, - ); -}; -``` - -:::tip -Using a config function is for advanced use cases. A simpler method than the above, e.g. for customising `sourceExts`, would be to read these defaults from `@react-native/metro-config`. - -**Alternative** - - -```js -const defaultConfig = getDefaultConfig(__dirname); - -const config = { - resolver: { - sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'], - }, -}; - -module.exports = mergeConfig(defaultConfig, config); -``` - -**However!**, we recommend copying and editing when overriding these config values — placing the source of truth in your config file. - -✅ **Recommended** - - -```js -const config = { - resolver: { - sourceExts: ['js', 'ts', 'tsx', 'svg'], - }, -}; -``` - -::: - -## Learn more about Metro - -- [Metro website](https://metrobundler.dev/) -- [Video: "Metro & React Native DevX" talk at App.js 2023](https://www.youtube.com/watch?v=c9D4pg0y9cI) diff --git a/website/versioned_docs/version-0.81/metro.mdx b/website/versioned_docs/version-0.81/metro.mdx new file mode 100644 index 00000000000..dd9d297e77a --- /dev/null +++ b/website/versioned_docs/version-0.81/metro.mdx @@ -0,0 +1,112 @@ +--- +id: metro +title: Metro +--- + +React Native uses [Metro](https://metrobundler.dev/) to build your JavaScript code and assets. + +## Configuring Metro + +Configuration options for Metro can be customized in your project's `metro.config.js` file. This can export either: + +- **An object (recommended)** that will be merged on top of Metro's internal config defaults. +- [**A function**](#advanced-using-a-config-function) that will be called with Metro's internal config defaults and should return a final config object. + +:::tip +Please see [**Configuring Metro**](https://metrobundler.dev/docs/configuration) on the Metro website for documentation on all available config options. +::: + +In React Native, your Metro config should extend either [`@react-native/metro-config`](https://www.npmjs.com/package/@react-native/metro-config) or [`@expo/metro-config`](https://www.npmjs.com/package/@expo/metro-config). These packages contain essential defaults necessary to build and run React Native apps. + +Below is the default `metro.config.js` file in a React Native template project: + +{/* prettier-ignore */} +```js +const { + getDefaultConfig, + mergeConfig, +} = require('@react-native/metro-config'); + +/** + * Metro configuration + * https://metrobundler.dev/docs/configuration + * + * @type {import('metro-config').MetroConfig} + */ +const config = {}; + +module.exports = mergeConfig(getDefaultConfig(__dirname), config); +``` + +Metro options you wish to customize can be done so within the `config` object. + +### Advanced: Using a config function + +Exporting a config function is an opt-in to managing the final config yourself — **Metro will not apply any internal defaults**. This pattern can be useful when needing to read the base default config object from Metro or to set options dynamically. + +:::info +**From `@react-native/metro-config` 0.72.1**, it is no longer necessary to use a config function to access the complete default config. See the **Tip** section below. +::: + +{/* prettier-ignore */} +```js +const { + getDefaultConfig, + mergeConfig, +} = require('@react-native/metro-config'); + +module.exports = function (baseConfig) { + const defaultConfig = mergeConfig( + baseConfig, + getDefaultConfig(__dirname), + ); + const { + resolver: {assetExts, sourceExts}, + } = defaultConfig; + + return mergeConfig(defaultConfig, { + resolver: { + assetExts: assetExts.filter(ext => ext !== 'svg'), + sourceExts: [...sourceExts, 'svg'], + }, + }); +}; +``` + +:::tip +Using a config function is for advanced use cases. A simpler method than the above, e.g. for customising `sourceExts`, would be to read these defaults from `@react-native/metro-config`. + +**Alternative** + +{/* prettier-ignore */} +```js +const defaultConfig = getDefaultConfig(__dirname); + +const config = { + resolver: { + sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'], + }, +}; + +module.exports = mergeConfig(defaultConfig, config); +``` + +**However!**, we recommend copying and editing when overriding these config values — placing the source of truth in your config file. + +✅ **Recommended** + +{/* prettier-ignore */} +```js +const config = { + resolver: { + sourceExts: ['js', 'ts', 'tsx', 'svg'], + }, +}; +``` + +::: + +## Learn more about Metro + +- [Metro website](https://metrobundler.dev/) +- [Video: "Metro & React Native DevX" talk at App.js 2023](https://www.youtube.com/watch?v=c9D4pg0y9cI) diff --git a/website/versioned_docs/version-0.81/network.md b/website/versioned_docs/version-0.81/network.md index 160c8e8d56f..e8125fe9046 100644 --- a/website/versioned_docs/version-0.81/network.md +++ b/website/versioned_docs/version-0.81/network.md @@ -211,7 +211,7 @@ request.open('GET', 'https://mywebsite.com/endpoint/'); request.send(); ``` -:::warning Caution +:::warning[Caution] The security model for XMLHttpRequest is different than on web as there is no concept of [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) in native apps. ::: diff --git a/website/versioned_docs/version-0.81/other-debugging-methods.md b/website/versioned_docs/version-0.81/other-debugging-methods.md index 28b13d1e087..5df989acefc 100644 --- a/website/versioned_docs/version-0.81/other-debugging-methods.md +++ b/website/versioned_docs/version-0.81/other-debugging-methods.md @@ -27,7 +27,7 @@ Every time the app is reloaded, a new JSContext is created. Choosing "Automatica ## Remote JavaScript Debugging (removed) -:::warning Important +:::warning[Important] Remote JavaScript Debugging has been removed as of React Native 0.79. See the original [deprecation announcement](https://github.com/react-native-community/discussions-and-proposals/discussions/734). If you are on an older version of React Native, please go to the docs [for your version](/versions). diff --git a/website/versioned_docs/version-0.81/profiling.md b/website/versioned_docs/version-0.81/profiling.md index f833a4440c2..73cbed73ad1 100644 --- a/website/versioned_docs/version-0.81/profiling.md +++ b/website/versioned_docs/version-0.81/profiling.md @@ -33,13 +33,13 @@ After opening the trace in Android Studio or Perfetto, you should see something ![Example](/docs/assets/SystraceExample.png) -:::note Hint +:::note[Hint] Use the WASD keys to strafe and zoom. ::: The exact UI might be different but the instructions below will apply regardless of the tool you're using. -:::info Enable VSync highlighting +:::info[Enable VSync highlighting] Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries: ![Enable VSync Highlighting](/docs/assets/SystraceHighlightVSync.png) @@ -133,7 +133,7 @@ There isn't a quick way to mitigate this unless you're able to postpone creating If the problem seems to be on the native side, you can use the [CPU hotspot profiler](https://developer.android.com/studio/profile/record-java-kotlin-methods) to get more details on what's happening. Open the Android Studio Profiler panel and select "Find CPU Hotspots (Java/Kotlin Method Recording)". -:::info Choose the Java/Kotlin recording +:::info[Choose the Java/Kotlin recording] Make sure you select "Find CPU Hotspots **(Java/Kotlin Recording)**" rather than "Find CPU Hotspots (Callstack Sample)". They have similar icons but do different things. ::: diff --git a/website/versioned_docs/version-0.81/security.md b/website/versioned_docs/version-0.81/security.md index bf8ed1ff5d4..7a6c1bf150e 100644 --- a/website/versioned_docs/version-0.81/security.md +++ b/website/versioned_docs/version-0.81/security.md @@ -68,7 +68,7 @@ In order to use iOS Keychain services or Android Secure Shared Preferences, you - [expo-secure-store](https://docs.expo.dev/versions/latest/sdk/securestore/) - [react-native-keychain](https://github.com/oblador/react-native-keychain) -:::warning Caution +:::warning[Caution] **Be mindful of unintentionally storing or exposing sensitive info.** This could happen accidentally, for example saving sensitive form data in redux state and persisting the whole state tree in Async Storage. Or sending user tokens and personal info to an application monitoring service such as Sentry or Crashlytics. ::: @@ -127,7 +127,7 @@ Using https endpoints could still leave your data vulnerable to interception. Wi **SSL pinning** is a technique that can be used on the client side to avoid this attack. It works by embedding (or pinning) a list of trusted certificates to the client during development, so that only the requests signed with one of the trusted certificates will be accepted, and any self-signed certificates will not be. -:::warning Caution +:::warning[Caution] When using SSL pinning, you should be mindful of certificate expiry. Certificates expire every 1-2 years and when one does, it’ll need to be updated in the app as well as on the server. As soon as the certificate on the server has been updated, any apps with the old certificate embedded in them will cease to work. ::: diff --git a/website/versioned_docs/version-0.81/signed-apk-android.md b/website/versioned_docs/version-0.81/signed-apk-android.md index d51ecd67bbe..c5158f4aab0 100644 --- a/website/versioned_docs/version-0.81/signed-apk-android.md +++ b/website/versioned_docs/version-0.81/signed-apk-android.md @@ -65,11 +65,11 @@ MYAPP_UPLOAD_KEY_PASSWORD=***** These are going to be global Gradle variables, which we can later use in our Gradle config to sign our app. -:::note Note about using git +:::note[Note about using git] Saving the above Gradle variables in `~/.gradle/gradle.properties` instead of `android/gradle.properties` prevents them from being checked in to git. You may have to create the `~/.gradle/gradle.properties` file in your user's home directory before you can add the variables. ::: -:::note Note about security +:::note[Note about security] If you are not keen on storing your passwords in plaintext, and you are running macOS, you can also [store your credentials in the Keychain Access app](https://pilloxa.gitlab.io/posts/safer-passwords-in-gradle/). Then you can skip the two last rows in `~/.gradle/gradle.properties`. ::: @@ -174,7 +174,7 @@ Please note that you will also have to configure distinct version codes, as [sug Proguard is a tool that can slightly reduce the size of the APK. It does this by stripping parts of the React Native Java bytecode (and its dependencies) that your app is not using. -:::caution Important +:::caution[Important] Make sure to thoroughly test your app if you've enabled Proguard. Proguard often requires configuration specific to each native library you're using. See `app/proguard-rules.pro`. ::: diff --git a/website/versioned_docs/version-0.81/statusbar.md b/website/versioned_docs/version-0.81/statusbar.md index 6345e7bf4ef..93810f7b0e0 100644 --- a/website/versioned_docs/version-0.81/statusbar.md +++ b/website/versioned_docs/version-0.81/statusbar.md @@ -440,7 +440,7 @@ Show or hide the status bar. ### 🗑️ `setNetworkActivityIndicatorVisible()`
iOS
-:::warning Deprecated +:::warning[Deprecated] The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release. ::: diff --git a/website/versioned_docs/version-0.81/strict-typescript-api.md b/website/versioned_docs/version-0.81/strict-typescript-api.md index 4223527eeab..a426511835b 100644 --- a/website/versioned_docs/version-0.81/strict-typescript-api.md +++ b/website/versioned_docs/version-0.81/strict-typescript-api.md @@ -32,7 +32,7 @@ Opting in is a **breaking change**, since some of our new types have updated nam } ``` -:::note Under the hood +:::note[Under the hood] This will instruct TypeScript to resolve `react-native` types from our new [`types_generated/`](https://www.npmjs.com/package/react-native?activeTab=code) dir, instead of the previous [`types/`](https://www.npmjs.com/package/react-native?activeTab=code) dir (manually maintained). No restart of TypeScript or your editor is required. @@ -40,7 +40,7 @@ This will instruct TypeScript to resolve `react-native` types from our new [`typ The Strict TypeScript API follows our [RFC](https://github.com/react-native-community/discussions-and-proposals/pull/894) to remove deep imports from React Native. Therefore, some APIs are no longer exported at root. This is intentional, in order to reduce the overall surface area of React Native's API. -:::tip API feedback +:::tip[API feedback] **Sending feedback**: We will be working with the community to finalize which APIs we export over (at least) the next two React Native releases. Please share your feedback in our [feedback thread](https://github.com/react-native-community/discussions-and-proposals/discussions/893). diff --git a/website/versioned_docs/version-0.81/the-new-architecture/create-module-library.md b/website/versioned_docs/version-0.81/the-new-architecture/create-module-library.mdx similarity index 97% rename from website/versioned_docs/version-0.81/the-new-architecture/create-module-library.md rename to website/versioned_docs/version-0.81/the-new-architecture/create-module-library.mdx index 657ef9441bd..0a5091fab26 100644 --- a/website/versioned_docs/version-0.81/the-new-architecture/create-module-library.md +++ b/website/versioned_docs/version-0.81/the-new-architecture/create-module-library.mdx @@ -38,7 +38,11 @@ npx create-react-native-library@latest Once the interactive prompt is done, the tool creates a folder whose structure looks like this in Visual Studio Code: -Folder structure after initializing a new library. +Folder structure after initializing a new library. Feel free to explore the code that has been created for you. However, the most important parts: @@ -70,7 +74,7 @@ Finally, the library contains already all the infrastructure to let the library The rest of the guide assumes that you have a local Turbo Native Module in your app, created following the guidelines shown in the other guides in the website: platform specific Turbo Native Modules, or [cross-platform Turbo Native Modules](./pure-cxx-modules). But it works also for Components and legacy architecture modules and components. You'll have to adapt the files you need to copy and update. - +{/* TODO: add links for Turbo Native Modules */} 1. **[Not required for legacy architecture modules and components]** Move the code you have in the `specs` folder in your app into the `src` folder created by the `create-react-native-library` folder. 2. Update the `index.ts` file to properly export the Turbo Native Module spec so that it is accessible from the library. For example: diff --git a/website/versioned_docs/version-0.81/the-new-architecture/pure-cxx-modules.md b/website/versioned_docs/version-0.81/the-new-architecture/pure-cxx-modules.md index 23cc351d132..440dfbe553d 100644 --- a/website/versioned_docs/version-0.81/the-new-architecture/pure-cxx-modules.md +++ b/website/versioned_docs/version-0.81/the-new-architecture/pure-cxx-modules.md @@ -71,7 +71,7 @@ export default TurboModuleRegistry.getEnforcing( ## 2. Configure Codegen -The next step is to configure [Codegen](what-is-codegen.md) in your `package.json`. Update the file to include: +The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include: ```json title="package.json" "start": "react-native start", diff --git a/website/versioned_docs/version-0.83/the-new-architecture/using-codegen.md b/website/versioned_docs/version-0.81/the-new-architecture/using-codegen.mdx similarity index 99% rename from website/versioned_docs/version-0.83/the-new-architecture/using-codegen.md rename to website/versioned_docs/version-0.81/the-new-architecture/using-codegen.mdx index 56aca7b981c..49df503003f 100644 --- a/website/versioned_docs/version-0.83/the-new-architecture/using-codegen.md +++ b/website/versioned_docs/version-0.81/the-new-architecture/using-codegen.mdx @@ -19,12 +19,12 @@ The **Codegen** process is tightly coupled with the build of the app, and the sc For the sake of this guide, create a project using the React Native CLI as follows: -{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`} + {`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`} **Codegen** is used to generate the glue-code for your custom modules or components. See the guides for Turbo Native Modules and Fabric Native Components for more details on how to create them. - +{/* TODO: add links */} ## Configuring **Codegen** diff --git a/website/versioned_docs/version-0.82/the-new-architecture/what-is-codegen.md b/website/versioned_docs/version-0.81/the-new-architecture/what-is-codegen.mdx similarity index 97% rename from website/versioned_docs/version-0.82/the-new-architecture/what-is-codegen.md rename to website/versioned_docs/version-0.81/the-new-architecture/what-is-codegen.mdx index bc9cc37e7e0..717380c4df8 100644 --- a/website/versioned_docs/version-0.82/the-new-architecture/what-is-codegen.md +++ b/website/versioned_docs/version-0.81/the-new-architecture/what-is-codegen.mdx @@ -4,7 +4,7 @@ React Native invokes Codegen automatically every time an iOS or Android app is built. Occasionally, you would like to manually run the Codegen scripts to know which types and files are actually generated: this is a common scenario when developing [Turbo Native Modules](/docs/turbo-native-modules-introduction) and Fabric Native Components. - +{/* TODO: Add links to TM and FC */} ## How Codegen Works diff --git a/website/versioned_docs/version-0.81/timers.md b/website/versioned_docs/version-0.81/timers.md index bf0041d09b4..87eaf1f3f80 100644 --- a/website/versioned_docs/version-0.81/timers.md +++ b/website/versioned_docs/version-0.81/timers.md @@ -25,7 +25,7 @@ Please correct this by running ``adb shell "date `date +%m%d%H%M%Y.%S%3N`"`` on ## InteractionManager -:::warning Deprecated +:::warning[Deprecated] The `InteractionManager` behavior has been changed to be the same as `setImmediate`, which should be used instead. ::: diff --git a/website/versioned_docs/version-0.81/transforms.md b/website/versioned_docs/version-0.81/transforms.md index e0576ae8101..d3ed78c59f7 100644 --- a/website/versioned_docs/version-0.81/transforms.md +++ b/website/versioned_docs/version-0.81/transforms.md @@ -268,7 +268,7 @@ Matrix transforms are useful when you need to apply pre-calculated transformatio ### `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY` -:::warning Deprecated +:::warning[Deprecated] Use the [`transform`](transforms#transform) prop instead. ::: diff --git a/website/versioned_docs/version-0.81/turbo-native-modules-android.md b/website/versioned_docs/version-0.81/turbo-native-modules-android.md index 21fbd7703e1..83d922f9918 100644 --- a/website/versioned_docs/version-0.81/turbo-native-modules-android.md +++ b/website/versioned_docs/version-0.81/turbo-native-modules-android.md @@ -206,7 +206,7 @@ Finally, we need to tell the React Native in our main application how to find th In this case, you add it to be returned by the [getPackages](https://github.com/facebook/react-native/blob/8d8b8c343e62115a5509e1aed62047053c2f6e39/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactNativeHost.java#L233) method. :::info -Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.md#publish-the-library-on-npm), which our build tooling will autolink for you. +Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.mdx#publish-the-library-on-npm), which our build tooling will autolink for you. ::: diff --git a/website/versioned_docs/version-0.81/turbo-native-modules.md b/website/versioned_docs/version-0.81/turbo-native-modules.md index 04cb5ab3c81..7758172e71d 100644 --- a/website/versioned_docs/version-0.81/turbo-native-modules.md +++ b/website/versioned_docs/version-0.81/turbo-native-modules.md @@ -38,7 +38,7 @@ To make this work on mobile, we need to use Android and iOS APIs: ### 1. Declare Typed Specification -React Native provides a tool called [Codegen](/the-new-architecture/what-is-codegen.md), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification. +React Native provides a tool called [Codegen](/the-new-architecture/what-is-codegen.mdx), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification. To create a specs file: diff --git a/website/versioned_docs/version-0.82/_canary-channel-api-warning.mdx b/website/versioned_docs/version-0.82/_canary-channel-api-warning.mdx index e8b3934b850..2c1ae5cf423 100644 --- a/website/versioned_docs/version-0.82/_canary-channel-api-warning.mdx +++ b/website/versioned_docs/version-0.82/_canary-channel-api-warning.mdx @@ -1,4 +1,4 @@ -:::tip Canary 🧪 +:::tip[Canary 🧪] **This API is currently only available in React Native’s Canary and Experimental channels.** diff --git a/website/versioned_docs/version-0.82/_experimental-channel-api-warning.mdx b/website/versioned_docs/version-0.82/_experimental-channel-api-warning.mdx index 8f290343124..ffcfae347fe 100644 --- a/website/versioned_docs/version-0.82/_experimental-channel-api-warning.mdx +++ b/website/versioned_docs/version-0.82/_experimental-channel-api-warning.mdx @@ -1,4 +1,4 @@ -:::tip Experimental Feature 🧪 +:::tip[Experimental Feature 🧪] **This API is currently only available in React Native’s Experimental channels.** diff --git a/website/versioned_docs/version-0.82/accessibilityinfo.md b/website/versioned_docs/version-0.82/accessibilityinfo.md index 7d8c941da2d..aa41b43570b 100644 --- a/website/versioned_docs/version-0.82/accessibilityinfo.md +++ b/website/versioned_docs/version-0.82/accessibilityinfo.md @@ -256,7 +256,7 @@ Query whether reduce motion and prefer cross-fade transitions settings are curre ### `setAccessibilityFocus()` -:::warning Deprecated +:::warning[Deprecated] Prefer using `sendAccessibilityEvent` with eventType `focus` instead. ::: diff --git a/website/versioned_docs/version-0.82/alertios.md b/website/versioned_docs/version-0.82/alertios.md index 64d298d5e0a..a2d6d4f2610 100644 --- a/website/versioned_docs/version-0.82/alertios.md +++ b/website/versioned_docs/version-0.82/alertios.md @@ -3,6 +3,6 @@ id: alertios title: '❌ AlertIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use [`Alert`](alert) instead. ::: diff --git a/website/versioned_docs/version-0.82/asyncstorage.md b/website/versioned_docs/version-0.82/asyncstorage.md index dfe35feaa3d..e1fb69471fa 100644 --- a/website/versioned_docs/version-0.82/asyncstorage.md +++ b/website/versioned_docs/version-0.82/asyncstorage.md @@ -3,6 +3,6 @@ id: asyncstorage title: '❌ AsyncStorage' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=storage) instead. ::: diff --git a/website/versioned_docs/version-0.82/backhandler.md b/website/versioned_docs/version-0.82/backhandler.md index c3c7c937541..f020f3fc7a5 100644 --- a/website/versioned_docs/version-0.82/backhandler.md +++ b/website/versioned_docs/version-0.82/backhandler.md @@ -10,7 +10,7 @@ The event subscriptions are called in reverse order (i.e. the last registered su - **If one subscription returns true,** then subscriptions registered earlier will not be called. - **If no subscription returns true or none are registered,** it programmatically invokes the default back button functionality to exit the app. -:::warning Warning for modal users +:::warning[Warning for modal users] If your app shows an opened `Modal`, `BackHandler` will not publish any events ([see `Modal` docs](modal#onrequestclose)). ::: diff --git a/website/versioned_docs/version-0.82/building-for-tv.md b/website/versioned_docs/version-0.82/building-for-tv.md index 71ed7a11f5b..490163a1797 100644 --- a/website/versioned_docs/version-0.82/building-for-tv.md +++ b/website/versioned_docs/version-0.82/building-for-tv.md @@ -6,6 +6,6 @@ hide_table_of_contents: true TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. -:::warning Deprecated +:::warning[Deprecated] TV support has moved to the [React Native for TV](https://github.com/react-native-tvos/react-native-tvos#readme) repository. Please see the **README** there for information on projects for Apple TV or Android TV. ::: diff --git a/website/versioned_docs/version-0.82/checkbox.md b/website/versioned_docs/version-0.82/checkbox.md index 0a85111a8ae..e92591defd5 100644 --- a/website/versioned_docs/version-0.82/checkbox.md +++ b/website/versioned_docs/version-0.82/checkbox.md @@ -3,6 +3,6 @@ id: checkbox title: '❌ CheckBox' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=checkbox) instead. ::: diff --git a/website/versioned_docs/version-0.82/clipboard.md b/website/versioned_docs/version-0.82/clipboard.md index 2e67bf9ba5a..bcfbf8714d9 100644 --- a/website/versioned_docs/version-0.82/clipboard.md +++ b/website/versioned_docs/version-0.82/clipboard.md @@ -3,6 +3,6 @@ id: clipboard title: '❌ Clipboard' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=clipboard) instead. ::: diff --git a/website/versioned_docs/version-0.82/datepickerandroid.md b/website/versioned_docs/version-0.82/datepickerandroid.md index d837b48b957..c928fdffee6 100644 --- a/website/versioned_docs/version-0.82/datepickerandroid.md +++ b/website/versioned_docs/version-0.82/datepickerandroid.md @@ -3,6 +3,6 @@ id: datepickerandroid title: '❌ DatePickerAndroid' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead. ::: diff --git a/website/versioned_docs/version-0.82/datepickerios.md b/website/versioned_docs/version-0.82/datepickerios.md index 0e536ffa686..7965ec05c3a 100644 --- a/website/versioned_docs/version-0.82/datepickerios.md +++ b/website/versioned_docs/version-0.82/datepickerios.md @@ -3,6 +3,6 @@ id: datepickerios title: '❌ DatePickerIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead. ::: diff --git a/website/versioned_docs/version-0.82/global-PerformanceEventTiming.md b/website/versioned_docs/version-0.82/global-PerformanceEventTiming.md index 1aff347700a..956ab19611d 100644 --- a/website/versioned_docs/version-0.82/global-PerformanceEventTiming.md +++ b/website/versioned_docs/version-0.82/global-PerformanceEventTiming.md @@ -9,6 +9,6 @@ import CanaryAPIWarning from './\_canary-channel-api-warning.mdx'; The global [`PerformanceEventTiming`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEventTiming) class, as defined in Web specifications. -:::warning Partial support +:::warning[Partial support] The `cancelable` and `target` properties are not supported yet. ::: diff --git a/website/versioned_docs/version-0.82/global-PerformanceLongTaskTiming.md b/website/versioned_docs/version-0.82/global-PerformanceLongTaskTiming.md index ab2804a1a9c..79aec773a6a 100644 --- a/website/versioned_docs/version-0.82/global-PerformanceLongTaskTiming.md +++ b/website/versioned_docs/version-0.82/global-PerformanceLongTaskTiming.md @@ -9,6 +9,6 @@ import CanaryAPIWarning from './\_canary-channel-api-warning.mdx'; The global [`PerformanceLongTaskTiming`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceLongTaskTiming) class, as defined in Web specifications. -:::warning Partial support +:::warning[Partial support] The value for the `attribution` property is always an empty array. ::: diff --git a/website/versioned_docs/version-0.82/global-performance.md b/website/versioned_docs/version-0.82/global-performance.md index bda3d17c991..058f1a281ca 100644 --- a/website/versioned_docs/version-0.82/global-performance.md +++ b/website/versioned_docs/version-0.82/global-performance.md @@ -25,7 +25,7 @@ See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/Perf ### `rnStartupTiming` ⚠️ -:::warning Non-standard +:::warning[Non-standard] This is a React Native specific extension. ::: @@ -45,7 +45,7 @@ The `ReactNativeStartupTiming` interface provides the following fields: ### `timeOrigin` -:::warning Partial support +:::warning[Partial support] Provides the number of milliseconds from the UNIX epoch until system boot, instead of the number of milliseconds from the UNIX epoch until app startup. ::: @@ -83,7 +83,7 @@ See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/Perf ### `now()` -:::warning Partial support +:::warning[Partial support] Provides the number of milliseconds from system boot, instead of the number of milliseconds from app startup. ::: diff --git a/website/versioned_docs/version-0.82/imagepickerios.md b/website/versioned_docs/version-0.82/imagepickerios.md index d4749216253..ca5814e8677 100644 --- a/website/versioned_docs/version-0.82/imagepickerios.md +++ b/website/versioned_docs/version-0.82/imagepickerios.md @@ -3,6 +3,6 @@ id: imagepickerios title: '❌ ImagePickerIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=image+picker) instead. ::: diff --git a/website/versioned_docs/version-0.82/integration-with-android-fragment.md b/website/versioned_docs/version-0.82/integration-with-android-fragment.md index e9c385b3eb1..99e69c2ba8f 100644 --- a/website/versioned_docs/version-0.82/integration-with-android-fragment.md +++ b/website/versioned_docs/version-0.82/integration-with-android-fragment.md @@ -33,7 +33,7 @@ This is required by React Native to handle the back button press event. Go into your host activity and make sure it implements the `DefaultHardwareBackBtnHandler` interface: -:::warning Deprecated +:::warning[Deprecated] `Activity.onBackPressed()` has been [deprecated]() since API level 33. Android 16 devices with apps targeting API level 36 this will [no longer be called](https://developer.android.com/about/versions/16/behavior-changes-16#predictive-back) and [OnBackPressedDispatcher](https://developer.android.com/reference/androidx/activity/OnBackPressedDispatcher) should be used instead. ::: diff --git a/website/versioned_docs/version-0.82/interactionmanager.md b/website/versioned_docs/version-0.82/interactionmanager.md index 8eac16a4b70..f1851c75212 100644 --- a/website/versioned_docs/version-0.82/interactionmanager.md +++ b/website/versioned_docs/version-0.82/interactionmanager.md @@ -5,7 +5,7 @@ title: 🗑️ InteractionManager import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; -:::warning Deprecated +:::warning[Deprecated] Avoid long-running work and use [`requestIdleCallback`](global-requestIdleCallback) instead. ::: diff --git a/website/versioned_docs/version-0.82/legacy/native-modules-ios.md b/website/versioned_docs/version-0.82/legacy/native-modules-ios.md index fb3303985bb..6c33c64ec75 100644 --- a/website/versioned_docs/version-0.82/legacy/native-modules-ios.md +++ b/website/versioned_docs/version-0.82/legacy/native-modules-ios.md @@ -551,7 +551,7 @@ RCT_EXPORT_METHOD(doSomethingExpensive:(NSString *)param callback:(RCTResponseSe ``` -:::info Sharing dispatch queues between modules +:::info[Sharing dispatch queues between modules] The `methodQueue` method will be called once when the module is initialized, and then retained by React Native, so there is no need to keep a reference to the queue yourself, unless you wish to make use of it within your module. However, if you wish to share the same queue between multiple modules then you will need to ensure that you retain and return the same queue instance for each of them. ::: diff --git a/website/versioned_docs/version-0.82/metro.md b/website/versioned_docs/version-0.82/metro.md deleted file mode 100644 index a61962a5512..00000000000 --- a/website/versioned_docs/version-0.82/metro.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: metro -title: Metro ---- - -React Native uses [Metro](https://metrobundler.dev/) to build your JavaScript code and assets. - -## Configuring Metro - -Configuration options for Metro can be customized in your project's `metro.config.js` file. This can export either: - -- **An object (recommended)** that will be merged on top of Metro's internal config defaults. -- [**A function**](#advanced-using-a-config-function) that will be called with Metro's internal config defaults and should return a final config object. - -:::tip -Please see [**Configuring Metro**](https://metrobundler.dev/docs/configuration) on the Metro website for documentation on all available config options. -::: - -In React Native, your Metro config should extend either [`@react-native/metro-config`](https://www.npmjs.com/package/@react-native/metro-config) or [`@expo/metro-config`](https://www.npmjs.com/package/@expo/metro-config). These packages contain essential defaults necessary to build and run React Native apps. - -Below is the default `metro.config.js` file in a React Native template project: - - -```js -const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); - -/** - * Metro configuration - * https://metrobundler.dev/docs/configuration - * - * @type {import('metro-config').MetroConfig} - */ -const config = {}; - -module.exports = mergeConfig(getDefaultConfig(__dirname), config); -``` - -Metro options you wish to customize can be done so within the `config` object. - -### Advanced: Using a config function - -Exporting a config function is an opt-in to managing the final config yourself — **Metro will not apply any internal defaults**. This pattern can be useful when needing to read the base default config object from Metro or to set options dynamically. - -:::info -**From `@react-native/metro-config` 0.72.1**, it is no longer necessary to use a config function to access the complete default config. See the **Tip** section below. -::: - - -```js -const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); - -module.exports = function (baseConfig) { - const defaultConfig = mergeConfig(baseConfig, getDefaultConfig(__dirname)); - const {resolver: {assetExts, sourceExts}} = defaultConfig; - - return mergeConfig( - defaultConfig, - { - resolver: { - assetExts: assetExts.filter(ext => ext !== 'svg'), - sourceExts: [...sourceExts, 'svg'], - }, - }, - ); -}; -``` - -:::tip -Using a config function is for advanced use cases. A simpler method than the above, e.g. for customising `sourceExts`, would be to read these defaults from `@react-native/metro-config`. - -**Alternative** - - -```js -const defaultConfig = getDefaultConfig(__dirname); - -const config = { - resolver: { - sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'], - }, -}; - -module.exports = mergeConfig(defaultConfig, config); -``` - -**However!**, we recommend copying and editing when overriding these config values — placing the source of truth in your config file. - -✅ **Recommended** - - -```js -const config = { - resolver: { - sourceExts: ['js', 'ts', 'tsx', 'svg'], - }, -}; -``` - -::: - -## Learn more about Metro - -- [Metro website](https://metrobundler.dev/) -- [Video: "Metro & React Native DevX" talk at App.js 2023](https://www.youtube.com/watch?v=c9D4pg0y9cI) diff --git a/website/versioned_docs/version-0.82/metro.mdx b/website/versioned_docs/version-0.82/metro.mdx new file mode 100644 index 00000000000..dd9d297e77a --- /dev/null +++ b/website/versioned_docs/version-0.82/metro.mdx @@ -0,0 +1,112 @@ +--- +id: metro +title: Metro +--- + +React Native uses [Metro](https://metrobundler.dev/) to build your JavaScript code and assets. + +## Configuring Metro + +Configuration options for Metro can be customized in your project's `metro.config.js` file. This can export either: + +- **An object (recommended)** that will be merged on top of Metro's internal config defaults. +- [**A function**](#advanced-using-a-config-function) that will be called with Metro's internal config defaults and should return a final config object. + +:::tip +Please see [**Configuring Metro**](https://metrobundler.dev/docs/configuration) on the Metro website for documentation on all available config options. +::: + +In React Native, your Metro config should extend either [`@react-native/metro-config`](https://www.npmjs.com/package/@react-native/metro-config) or [`@expo/metro-config`](https://www.npmjs.com/package/@expo/metro-config). These packages contain essential defaults necessary to build and run React Native apps. + +Below is the default `metro.config.js` file in a React Native template project: + +{/* prettier-ignore */} +```js +const { + getDefaultConfig, + mergeConfig, +} = require('@react-native/metro-config'); + +/** + * Metro configuration + * https://metrobundler.dev/docs/configuration + * + * @type {import('metro-config').MetroConfig} + */ +const config = {}; + +module.exports = mergeConfig(getDefaultConfig(__dirname), config); +``` + +Metro options you wish to customize can be done so within the `config` object. + +### Advanced: Using a config function + +Exporting a config function is an opt-in to managing the final config yourself — **Metro will not apply any internal defaults**. This pattern can be useful when needing to read the base default config object from Metro or to set options dynamically. + +:::info +**From `@react-native/metro-config` 0.72.1**, it is no longer necessary to use a config function to access the complete default config. See the **Tip** section below. +::: + +{/* prettier-ignore */} +```js +const { + getDefaultConfig, + mergeConfig, +} = require('@react-native/metro-config'); + +module.exports = function (baseConfig) { + const defaultConfig = mergeConfig( + baseConfig, + getDefaultConfig(__dirname), + ); + const { + resolver: {assetExts, sourceExts}, + } = defaultConfig; + + return mergeConfig(defaultConfig, { + resolver: { + assetExts: assetExts.filter(ext => ext !== 'svg'), + sourceExts: [...sourceExts, 'svg'], + }, + }); +}; +``` + +:::tip +Using a config function is for advanced use cases. A simpler method than the above, e.g. for customising `sourceExts`, would be to read these defaults from `@react-native/metro-config`. + +**Alternative** + +{/* prettier-ignore */} +```js +const defaultConfig = getDefaultConfig(__dirname); + +const config = { + resolver: { + sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'], + }, +}; + +module.exports = mergeConfig(defaultConfig, config); +``` + +**However!**, we recommend copying and editing when overriding these config values — placing the source of truth in your config file. + +✅ **Recommended** + +{/* prettier-ignore */} +```js +const config = { + resolver: { + sourceExts: ['js', 'ts', 'tsx', 'svg'], + }, +}; +``` + +::: + +## Learn more about Metro + +- [Metro website](https://metrobundler.dev/) +- [Video: "Metro & React Native DevX" talk at App.js 2023](https://www.youtube.com/watch?v=c9D4pg0y9cI) diff --git a/website/versioned_docs/version-0.82/modal.md b/website/versioned_docs/version-0.82/modal.md index 739be7205c3..09e9fc0593f 100644 --- a/website/versioned_docs/version-0.82/modal.md +++ b/website/versioned_docs/version-0.82/modal.md @@ -106,7 +106,7 @@ Inherits [View Props](view.md#props). ### `animated` -:::warning Deprecated +:::warning[Deprecated] Use the [`animationType`](modal.md#animationtype) prop instead. ::: diff --git a/website/versioned_docs/version-0.82/network.md b/website/versioned_docs/version-0.82/network.md index 160c8e8d56f..e8125fe9046 100644 --- a/website/versioned_docs/version-0.82/network.md +++ b/website/versioned_docs/version-0.82/network.md @@ -211,7 +211,7 @@ request.open('GET', 'https://mywebsite.com/endpoint/'); request.send(); ``` -:::warning Caution +:::warning[Caution] The security model for XMLHttpRequest is different than on web as there is no concept of [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) in native apps. ::: diff --git a/website/versioned_docs/version-0.82/other-debugging-methods.md b/website/versioned_docs/version-0.82/other-debugging-methods.md index 28b13d1e087..5df989acefc 100644 --- a/website/versioned_docs/version-0.82/other-debugging-methods.md +++ b/website/versioned_docs/version-0.82/other-debugging-methods.md @@ -27,7 +27,7 @@ Every time the app is reloaded, a new JSContext is created. Choosing "Automatica ## Remote JavaScript Debugging (removed) -:::warning Important +:::warning[Important] Remote JavaScript Debugging has been removed as of React Native 0.79. See the original [deprecation announcement](https://github.com/react-native-community/discussions-and-proposals/discussions/734). If you are on an older version of React Native, please go to the docs [for your version](/versions). diff --git a/website/versioned_docs/version-0.82/profiling.md b/website/versioned_docs/version-0.82/profiling.md index f833a4440c2..73cbed73ad1 100644 --- a/website/versioned_docs/version-0.82/profiling.md +++ b/website/versioned_docs/version-0.82/profiling.md @@ -33,13 +33,13 @@ After opening the trace in Android Studio or Perfetto, you should see something ![Example](/docs/assets/SystraceExample.png) -:::note Hint +:::note[Hint] Use the WASD keys to strafe and zoom. ::: The exact UI might be different but the instructions below will apply regardless of the tool you're using. -:::info Enable VSync highlighting +:::info[Enable VSync highlighting] Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries: ![Enable VSync Highlighting](/docs/assets/SystraceHighlightVSync.png) @@ -133,7 +133,7 @@ There isn't a quick way to mitigate this unless you're able to postpone creating If the problem seems to be on the native side, you can use the [CPU hotspot profiler](https://developer.android.com/studio/profile/record-java-kotlin-methods) to get more details on what's happening. Open the Android Studio Profiler panel and select "Find CPU Hotspots (Java/Kotlin Method Recording)". -:::info Choose the Java/Kotlin recording +:::info[Choose the Java/Kotlin recording] Make sure you select "Find CPU Hotspots **(Java/Kotlin Recording)**" rather than "Find CPU Hotspots (Callstack Sample)". They have similar icons but do different things. ::: diff --git a/website/versioned_docs/version-0.82/progressbarandroid.md b/website/versioned_docs/version-0.82/progressbarandroid.md index 4f165d86c46..d26fb2038d6 100644 --- a/website/versioned_docs/version-0.82/progressbarandroid.md +++ b/website/versioned_docs/version-0.82/progressbarandroid.md @@ -3,7 +3,7 @@ id: progressbarandroid title: '🗑️ ProgressBarAndroid' --- -:::warning Deprecated +:::warning[Deprecated] Use one of the [community packages](https://reactnative.directory/?search=progressbar) instead. ::: diff --git a/website/versioned_docs/version-0.82/pushnotificationios.md b/website/versioned_docs/version-0.82/pushnotificationios.md index 0cdecf3180a..c42d3a28193 100644 --- a/website/versioned_docs/version-0.82/pushnotificationios.md +++ b/website/versioned_docs/version-0.82/pushnotificationios.md @@ -3,7 +3,7 @@ id: pushnotificationios title: '🗑️ PushNotificationIOS' --- -:::warning Deprecated +:::warning[Deprecated] Use one of the [community packages](https://reactnative.directory/?search=notification) instead. ::: diff --git a/website/versioned_docs/version-0.82/safeareaview.md b/website/versioned_docs/version-0.82/safeareaview.md index fd0d2d479c3..8da4485ff12 100644 --- a/website/versioned_docs/version-0.82/safeareaview.md +++ b/website/versioned_docs/version-0.82/safeareaview.md @@ -3,7 +3,7 @@ id: safeareaview title: '🗑️ SafeAreaView' --- -:::warning Deprecated +:::warning[Deprecated] Use [react-native-safe-area-context](https://github.com/AppAndFlow/react-native-safe-area-context) instead. ::: diff --git a/website/versioned_docs/version-0.82/security.md b/website/versioned_docs/version-0.82/security.md index bf8ed1ff5d4..7a6c1bf150e 100644 --- a/website/versioned_docs/version-0.82/security.md +++ b/website/versioned_docs/version-0.82/security.md @@ -68,7 +68,7 @@ In order to use iOS Keychain services or Android Secure Shared Preferences, you - [expo-secure-store](https://docs.expo.dev/versions/latest/sdk/securestore/) - [react-native-keychain](https://github.com/oblador/react-native-keychain) -:::warning Caution +:::warning[Caution] **Be mindful of unintentionally storing or exposing sensitive info.** This could happen accidentally, for example saving sensitive form data in redux state and persisting the whole state tree in Async Storage. Or sending user tokens and personal info to an application monitoring service such as Sentry or Crashlytics. ::: @@ -127,7 +127,7 @@ Using https endpoints could still leave your data vulnerable to interception. Wi **SSL pinning** is a technique that can be used on the client side to avoid this attack. It works by embedding (or pinning) a list of trusted certificates to the client during development, so that only the requests signed with one of the trusted certificates will be accepted, and any self-signed certificates will not be. -:::warning Caution +:::warning[Caution] When using SSL pinning, you should be mindful of certificate expiry. Certificates expire every 1-2 years and when one does, it’ll need to be updated in the app as well as on the server. As soon as the certificate on the server has been updated, any apps with the old certificate embedded in them will cease to work. ::: diff --git a/website/versioned_docs/version-0.82/segmentedcontrolios.md b/website/versioned_docs/version-0.82/segmentedcontrolios.md index bab15ae9ba1..d9ede6e35e8 100644 --- a/website/versioned_docs/version-0.82/segmentedcontrolios.md +++ b/website/versioned_docs/version-0.82/segmentedcontrolios.md @@ -3,7 +3,7 @@ id: segmentedcontrolios title: '❌ SegmentedControlIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=segmentedcontrol) instead. ::: diff --git a/website/versioned_docs/version-0.82/signed-apk-android.md b/website/versioned_docs/version-0.82/signed-apk-android.md index d51ecd67bbe..c5158f4aab0 100644 --- a/website/versioned_docs/version-0.82/signed-apk-android.md +++ b/website/versioned_docs/version-0.82/signed-apk-android.md @@ -65,11 +65,11 @@ MYAPP_UPLOAD_KEY_PASSWORD=***** These are going to be global Gradle variables, which we can later use in our Gradle config to sign our app. -:::note Note about using git +:::note[Note about using git] Saving the above Gradle variables in `~/.gradle/gradle.properties` instead of `android/gradle.properties` prevents them from being checked in to git. You may have to create the `~/.gradle/gradle.properties` file in your user's home directory before you can add the variables. ::: -:::note Note about security +:::note[Note about security] If you are not keen on storing your passwords in plaintext, and you are running macOS, you can also [store your credentials in the Keychain Access app](https://pilloxa.gitlab.io/posts/safer-passwords-in-gradle/). Then you can skip the two last rows in `~/.gradle/gradle.properties`. ::: @@ -174,7 +174,7 @@ Please note that you will also have to configure distinct version codes, as [sug Proguard is a tool that can slightly reduce the size of the APK. It does this by stripping parts of the React Native Java bytecode (and its dependencies) that your app is not using. -:::caution Important +:::caution[Important] Make sure to thoroughly test your app if you've enabled Proguard. Proguard often requires configuration specific to each native library you're using. See `app/proguard-rules.pro`. ::: diff --git a/website/versioned_docs/version-0.82/statusbar.md b/website/versioned_docs/version-0.82/statusbar.md index 6345e7bf4ef..93810f7b0e0 100644 --- a/website/versioned_docs/version-0.82/statusbar.md +++ b/website/versioned_docs/version-0.82/statusbar.md @@ -440,7 +440,7 @@ Show or hide the status bar. ### 🗑️ `setNetworkActivityIndicatorVisible()`
iOS
-:::warning Deprecated +:::warning[Deprecated] The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release. ::: diff --git a/website/versioned_docs/version-0.82/statusbarios.md b/website/versioned_docs/version-0.82/statusbarios.md index 67ae7994778..2b17ba436a2 100644 --- a/website/versioned_docs/version-0.82/statusbarios.md +++ b/website/versioned_docs/version-0.82/statusbarios.md @@ -3,7 +3,7 @@ id: statusbarios title: '❌ StatusBarIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use [`StatusBar`](statusbar.md) for mutating the status bar. ::: diff --git a/website/versioned_docs/version-0.82/strict-typescript-api.md b/website/versioned_docs/version-0.82/strict-typescript-api.md index 4223527eeab..a426511835b 100644 --- a/website/versioned_docs/version-0.82/strict-typescript-api.md +++ b/website/versioned_docs/version-0.82/strict-typescript-api.md @@ -32,7 +32,7 @@ Opting in is a **breaking change**, since some of our new types have updated nam } ``` -:::note Under the hood +:::note[Under the hood] This will instruct TypeScript to resolve `react-native` types from our new [`types_generated/`](https://www.npmjs.com/package/react-native?activeTab=code) dir, instead of the previous [`types/`](https://www.npmjs.com/package/react-native?activeTab=code) dir (manually maintained). No restart of TypeScript or your editor is required. @@ -40,7 +40,7 @@ This will instruct TypeScript to resolve `react-native` types from our new [`typ The Strict TypeScript API follows our [RFC](https://github.com/react-native-community/discussions-and-proposals/pull/894) to remove deep imports from React Native. Therefore, some APIs are no longer exported at root. This is intentional, in order to reduce the overall surface area of React Native's API. -:::tip API feedback +:::tip[API feedback] **Sending feedback**: We will be working with the community to finalize which APIs we export over (at least) the next two React Native releases. Please share your feedback in our [feedback thread](https://github.com/react-native-community/discussions-and-proposals/discussions/893). diff --git a/website/versioned_docs/version-0.82/stylesheet.md b/website/versioned_docs/version-0.82/stylesheet.md index 62f32c8f805..e5e9283bc59 100644 --- a/website/versioned_docs/version-0.82/stylesheet.md +++ b/website/versioned_docs/version-0.82/stylesheet.md @@ -174,7 +174,7 @@ export default App; ### `setStyleAttributePreprocessor()` -:::warning Experimental +:::warning[Experimental] Breaking changes will probably happen a lot and will not be reliably announced. The whole thing might be deleted, who knows? Use at your own risk. ::: diff --git a/website/versioned_docs/version-0.82/textinput.md b/website/versioned_docs/version-0.82/textinput.md index c196ac74557..af80bd7c053 100644 --- a/website/versioned_docs/version-0.82/textinput.md +++ b/website/versioned_docs/version-0.82/textinput.md @@ -238,7 +238,7 @@ If `true`, focuses the input. The default value is `false`. ### `blurOnSubmit` -:::warning Deprecated +:::warning[Deprecated] Note that `submitBehavior` now takes the place of `blurOnSubmit` and will override any behavior defined by `blurOnSubmit`. See [submitBehavior](textinput#submitbehavior). ::: diff --git a/website/versioned_docs/version-0.82/the-new-architecture/create-module-library.md b/website/versioned_docs/version-0.82/the-new-architecture/create-module-library.mdx similarity index 97% rename from website/versioned_docs/version-0.82/the-new-architecture/create-module-library.md rename to website/versioned_docs/version-0.82/the-new-architecture/create-module-library.mdx index 657ef9441bd..0a5091fab26 100644 --- a/website/versioned_docs/version-0.82/the-new-architecture/create-module-library.md +++ b/website/versioned_docs/version-0.82/the-new-architecture/create-module-library.mdx @@ -38,7 +38,11 @@ npx create-react-native-library@latest Once the interactive prompt is done, the tool creates a folder whose structure looks like this in Visual Studio Code: -Folder structure after initializing a new library. +Folder structure after initializing a new library. Feel free to explore the code that has been created for you. However, the most important parts: @@ -70,7 +74,7 @@ Finally, the library contains already all the infrastructure to let the library The rest of the guide assumes that you have a local Turbo Native Module in your app, created following the guidelines shown in the other guides in the website: platform specific Turbo Native Modules, or [cross-platform Turbo Native Modules](./pure-cxx-modules). But it works also for Components and legacy architecture modules and components. You'll have to adapt the files you need to copy and update. - +{/* TODO: add links for Turbo Native Modules */} 1. **[Not required for legacy architecture modules and components]** Move the code you have in the `specs` folder in your app into the `src` folder created by the `create-react-native-library` folder. 2. Update the `index.ts` file to properly export the Turbo Native Module spec so that it is accessible from the library. For example: diff --git a/website/versioned_docs/version-0.82/the-new-architecture/pure-cxx-modules.md b/website/versioned_docs/version-0.82/the-new-architecture/pure-cxx-modules.md index 23cc351d132..440dfbe553d 100644 --- a/website/versioned_docs/version-0.82/the-new-architecture/pure-cxx-modules.md +++ b/website/versioned_docs/version-0.82/the-new-architecture/pure-cxx-modules.md @@ -71,7 +71,7 @@ export default TurboModuleRegistry.getEnforcing( ## 2. Configure Codegen -The next step is to configure [Codegen](what-is-codegen.md) in your `package.json`. Update the file to include: +The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include: ```json title="package.json" "start": "react-native start", diff --git a/docs/the-new-architecture/using-codegen.md b/website/versioned_docs/version-0.82/the-new-architecture/using-codegen.mdx similarity index 99% rename from docs/the-new-architecture/using-codegen.md rename to website/versioned_docs/version-0.82/the-new-architecture/using-codegen.mdx index 56aca7b981c..49df503003f 100644 --- a/docs/the-new-architecture/using-codegen.md +++ b/website/versioned_docs/version-0.82/the-new-architecture/using-codegen.mdx @@ -19,12 +19,12 @@ The **Codegen** process is tightly coupled with the build of the app, and the sc For the sake of this guide, create a project using the React Native CLI as follows: -{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`} + {`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`} **Codegen** is used to generate the glue-code for your custom modules or components. See the guides for Turbo Native Modules and Fabric Native Components for more details on how to create them. - +{/* TODO: add links */} ## Configuring **Codegen** diff --git a/website/versioned_docs/version-0.83/the-new-architecture/what-is-codegen.md b/website/versioned_docs/version-0.82/the-new-architecture/what-is-codegen.mdx similarity index 97% rename from website/versioned_docs/version-0.83/the-new-architecture/what-is-codegen.md rename to website/versioned_docs/version-0.82/the-new-architecture/what-is-codegen.mdx index bc9cc37e7e0..717380c4df8 100644 --- a/website/versioned_docs/version-0.83/the-new-architecture/what-is-codegen.md +++ b/website/versioned_docs/version-0.82/the-new-architecture/what-is-codegen.mdx @@ -4,7 +4,7 @@ React Native invokes Codegen automatically every time an iOS or Android app is built. Occasionally, you would like to manually run the Codegen scripts to know which types and files are actually generated: this is a common scenario when developing [Turbo Native Modules](/docs/turbo-native-modules-introduction) and Fabric Native Components. - +{/* TODO: Add links to TM and FC */} ## How Codegen Works diff --git a/website/versioned_docs/version-0.82/timepickerandroid.md b/website/versioned_docs/version-0.82/timepickerandroid.md index 29bf4573cef..f6c06c1b89e 100644 --- a/website/versioned_docs/version-0.82/timepickerandroid.md +++ b/website/versioned_docs/version-0.82/timepickerandroid.md @@ -3,6 +3,6 @@ id: timepickerandroid title: '❌ TimePickerAndroid' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=timepicker) instead. ::: diff --git a/website/versioned_docs/version-0.82/timers.md b/website/versioned_docs/version-0.82/timers.md index bf0041d09b4..87eaf1f3f80 100644 --- a/website/versioned_docs/version-0.82/timers.md +++ b/website/versioned_docs/version-0.82/timers.md @@ -25,7 +25,7 @@ Please correct this by running ``adb shell "date `date +%m%d%H%M%Y.%S%3N`"`` on ## InteractionManager -:::warning Deprecated +:::warning[Deprecated] The `InteractionManager` behavior has been changed to be the same as `setImmediate`, which should be used instead. ::: diff --git a/website/versioned_docs/version-0.82/transforms.md b/website/versioned_docs/version-0.82/transforms.md index e0576ae8101..d3ed78c59f7 100644 --- a/website/versioned_docs/version-0.82/transforms.md +++ b/website/versioned_docs/version-0.82/transforms.md @@ -268,7 +268,7 @@ Matrix transforms are useful when you need to apply pre-calculated transformatio ### `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY` -:::warning Deprecated +:::warning[Deprecated] Use the [`transform`](transforms#transform) prop instead. ::: diff --git a/website/versioned_docs/version-0.82/turbo-native-modules-android.md b/website/versioned_docs/version-0.82/turbo-native-modules-android.md index 21fbd7703e1..83d922f9918 100644 --- a/website/versioned_docs/version-0.82/turbo-native-modules-android.md +++ b/website/versioned_docs/version-0.82/turbo-native-modules-android.md @@ -206,7 +206,7 @@ Finally, we need to tell the React Native in our main application how to find th In this case, you add it to be returned by the [getPackages](https://github.com/facebook/react-native/blob/8d8b8c343e62115a5509e1aed62047053c2f6e39/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactNativeHost.java#L233) method. :::info -Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.md#publish-the-library-on-npm), which our build tooling will autolink for you. +Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.mdx#publish-the-library-on-npm), which our build tooling will autolink for you. ::: diff --git a/website/versioned_docs/version-0.82/virtualizedlist.md b/website/versioned_docs/version-0.82/virtualizedlist.md index 73e64ff25a6..2e2081210a7 100644 --- a/website/versioned_docs/version-0.82/virtualizedlist.md +++ b/website/versioned_docs/version-0.82/virtualizedlist.md @@ -300,7 +300,7 @@ Styling for internal View for `ListHeaderComponent`. ### `disableVirtualization` -:::warning Deprecated +:::warning[Deprecated] Virtualization provides significant performance and memory optimizations, but fully unmounts react instances that are outside of the render window. You should only need to disable this for debugging purposes. ::: diff --git a/website/versioned_docs/version-0.83/_canary-channel-api-warning.mdx b/website/versioned_docs/version-0.83/_canary-channel-api-warning.mdx index e8b3934b850..2c1ae5cf423 100644 --- a/website/versioned_docs/version-0.83/_canary-channel-api-warning.mdx +++ b/website/versioned_docs/version-0.83/_canary-channel-api-warning.mdx @@ -1,4 +1,4 @@ -:::tip Canary 🧪 +:::tip[Canary 🧪] **This API is currently only available in React Native’s Canary and Experimental channels.** diff --git a/website/versioned_docs/version-0.83/_experimental-channel-api-warning.mdx b/website/versioned_docs/version-0.83/_experimental-channel-api-warning.mdx index 8f290343124..ffcfae347fe 100644 --- a/website/versioned_docs/version-0.83/_experimental-channel-api-warning.mdx +++ b/website/versioned_docs/version-0.83/_experimental-channel-api-warning.mdx @@ -1,4 +1,4 @@ -:::tip Experimental Feature 🧪 +:::tip[Experimental Feature 🧪] **This API is currently only available in React Native’s Experimental channels.** diff --git a/website/versioned_docs/version-0.83/accessibilityinfo.md b/website/versioned_docs/version-0.83/accessibilityinfo.md index af69fbcfec3..c5c580e8c80 100644 --- a/website/versioned_docs/version-0.83/accessibilityinfo.md +++ b/website/versioned_docs/version-0.83/accessibilityinfo.md @@ -256,7 +256,7 @@ Query whether reduce motion and prefer cross-fade transitions settings are curre ### 🗑️ `setAccessibilityFocus()` -:::warning Deprecated +:::warning[Deprecated] Prefer using `sendAccessibilityEvent` with eventType `focus` instead. ::: diff --git a/website/versioned_docs/version-0.83/alertios.md b/website/versioned_docs/version-0.83/alertios.md index 64d298d5e0a..a2d6d4f2610 100644 --- a/website/versioned_docs/version-0.83/alertios.md +++ b/website/versioned_docs/version-0.83/alertios.md @@ -3,6 +3,6 @@ id: alertios title: '❌ AlertIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use [`Alert`](alert) instead. ::: diff --git a/website/versioned_docs/version-0.83/asyncstorage.md b/website/versioned_docs/version-0.83/asyncstorage.md index dfe35feaa3d..e1fb69471fa 100644 --- a/website/versioned_docs/version-0.83/asyncstorage.md +++ b/website/versioned_docs/version-0.83/asyncstorage.md @@ -3,6 +3,6 @@ id: asyncstorage title: '❌ AsyncStorage' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=storage) instead. ::: diff --git a/website/versioned_docs/version-0.83/backhandler.md b/website/versioned_docs/version-0.83/backhandler.md index c3c7c937541..f020f3fc7a5 100644 --- a/website/versioned_docs/version-0.83/backhandler.md +++ b/website/versioned_docs/version-0.83/backhandler.md @@ -10,7 +10,7 @@ The event subscriptions are called in reverse order (i.e. the last registered su - **If one subscription returns true,** then subscriptions registered earlier will not be called. - **If no subscription returns true or none are registered,** it programmatically invokes the default back button functionality to exit the app. -:::warning Warning for modal users +:::warning[Warning for modal users] If your app shows an opened `Modal`, `BackHandler` will not publish any events ([see `Modal` docs](modal#onrequestclose)). ::: diff --git a/website/versioned_docs/version-0.83/building-for-tv.md b/website/versioned_docs/version-0.83/building-for-tv.md index b39f843a481..52430c91f74 100644 --- a/website/versioned_docs/version-0.83/building-for-tv.md +++ b/website/versioned_docs/version-0.83/building-for-tv.md @@ -6,6 +6,6 @@ hide_table_of_contents: true TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. -:::warning Deprecated +:::warning[Deprecated] TV support has moved to the [React Native for TV](https://github.com/react-native-tvos/react-native-tvos#readme) repository. Please see the **README** there for information on projects for Apple TV or Android TV. ::: diff --git a/website/versioned_docs/version-0.83/checkbox.md b/website/versioned_docs/version-0.83/checkbox.md index 0a85111a8ae..e92591defd5 100644 --- a/website/versioned_docs/version-0.83/checkbox.md +++ b/website/versioned_docs/version-0.83/checkbox.md @@ -3,6 +3,6 @@ id: checkbox title: '❌ CheckBox' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=checkbox) instead. ::: diff --git a/website/versioned_docs/version-0.83/clipboard.md b/website/versioned_docs/version-0.83/clipboard.md index 2e67bf9ba5a..bcfbf8714d9 100644 --- a/website/versioned_docs/version-0.83/clipboard.md +++ b/website/versioned_docs/version-0.83/clipboard.md @@ -3,6 +3,6 @@ id: clipboard title: '❌ Clipboard' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=clipboard) instead. ::: diff --git a/website/versioned_docs/version-0.83/datepickerandroid.md b/website/versioned_docs/version-0.83/datepickerandroid.md index d837b48b957..c928fdffee6 100644 --- a/website/versioned_docs/version-0.83/datepickerandroid.md +++ b/website/versioned_docs/version-0.83/datepickerandroid.md @@ -3,6 +3,6 @@ id: datepickerandroid title: '❌ DatePickerAndroid' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead. ::: diff --git a/website/versioned_docs/version-0.83/datepickerios.md b/website/versioned_docs/version-0.83/datepickerios.md index 0e536ffa686..7965ec05c3a 100644 --- a/website/versioned_docs/version-0.83/datepickerios.md +++ b/website/versioned_docs/version-0.83/datepickerios.md @@ -3,6 +3,6 @@ id: datepickerios title: '❌ DatePickerIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead. ::: diff --git a/website/versioned_docs/version-0.83/global-PerformanceEventTiming.md b/website/versioned_docs/version-0.83/global-PerformanceEventTiming.md index e28106b390e..5e30f206cc2 100644 --- a/website/versioned_docs/version-0.83/global-PerformanceEventTiming.md +++ b/website/versioned_docs/version-0.83/global-PerformanceEventTiming.md @@ -5,6 +5,6 @@ title: PerformanceEventTiming The global [`PerformanceEventTiming`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEventTiming) class, as defined in Web specifications. -:::warning Partial support +:::warning[Partial support] The `cancelable` and `target` properties are not supported yet. ::: diff --git a/website/versioned_docs/version-0.83/global-PerformanceLongTaskTiming.md b/website/versioned_docs/version-0.83/global-PerformanceLongTaskTiming.md index c951fcc18f4..9e202636e70 100644 --- a/website/versioned_docs/version-0.83/global-PerformanceLongTaskTiming.md +++ b/website/versioned_docs/version-0.83/global-PerformanceLongTaskTiming.md @@ -5,6 +5,6 @@ title: PerformanceLongTaskTiming The global [`PerformanceLongTaskTiming`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceLongTaskTiming) class, as defined in Web specifications. -:::warning Partial support +:::warning[Partial support] The value for the `attribution` property is always an empty array. ::: diff --git a/website/versioned_docs/version-0.83/global-PerformanceResourceTiming.md b/website/versioned_docs/version-0.83/global-PerformanceResourceTiming.md index 60da4656aeb..6575d928cfe 100644 --- a/website/versioned_docs/version-0.83/global-PerformanceResourceTiming.md +++ b/website/versioned_docs/version-0.83/global-PerformanceResourceTiming.md @@ -5,7 +5,7 @@ title: PerformanceResourceTiming The global [`PerformanceResourceTiming`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming) class, as defined in Web specifications. -:::warning Partial support +:::warning[Partial support] React Native implements the following `PerformanceResourceTiming` properties only: diff --git a/website/versioned_docs/version-0.83/global-intersectionobserver.md b/website/versioned_docs/version-0.83/global-intersectionobserver.md index 24b8672dfd1..afa3dc70053 100644 --- a/website/versioned_docs/version-0.83/global-intersectionobserver.md +++ b/website/versioned_docs/version-0.83/global-intersectionobserver.md @@ -61,7 +61,7 @@ An offset rectangle applied to the root's bounding box when calculating intersec ### `rnRootThresholds` ⚠️ -:::warning Non-standard +:::warning[Non-standard] This is a React Native specific extension. ::: diff --git a/website/versioned_docs/version-0.83/global-intersectionobserverentry.md b/website/versioned_docs/version-0.83/global-intersectionobserverentry.md index 656be66b744..67729c711bb 100644 --- a/website/versioned_docs/version-0.83/global-intersectionobserverentry.md +++ b/website/versioned_docs/version-0.83/global-intersectionobserverentry.md @@ -43,7 +43,7 @@ A Boolean value which is `true` if the target element intersects with the inters ### `rnRootIntersectionRatio` ⚠️ -:::warning Non-standard +:::warning[Non-standard] This is a React Native specific extension. ::: diff --git a/website/versioned_docs/version-0.83/global-performance.md b/website/versioned_docs/version-0.83/global-performance.md index 488f55020ef..073576056e5 100644 --- a/website/versioned_docs/version-0.83/global-performance.md +++ b/website/versioned_docs/version-0.83/global-performance.md @@ -21,7 +21,7 @@ See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/Perf ### `rnStartupTiming` ⚠️ -:::warning Non-standard +:::warning[Non-standard] This is a React Native specific extension. ::: @@ -41,7 +41,7 @@ The `ReactNativeStartupTiming` interface provides the following fields: ### `timeOrigin` -:::warning Partial support +:::warning[Partial support] Provides the number of milliseconds from the UNIX epoch until system boot, instead of the number of milliseconds from the UNIX epoch until app startup. ::: @@ -79,7 +79,7 @@ See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/Perf ### `now()` -:::warning Partial support +:::warning[Partial support] Provides the number of milliseconds from system boot, instead of the number of milliseconds from app startup. ::: diff --git a/website/versioned_docs/version-0.83/imagepickerios.md b/website/versioned_docs/version-0.83/imagepickerios.md index d4749216253..ca5814e8677 100644 --- a/website/versioned_docs/version-0.83/imagepickerios.md +++ b/website/versioned_docs/version-0.83/imagepickerios.md @@ -3,6 +3,6 @@ id: imagepickerios title: '❌ ImagePickerIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=image+picker) instead. ::: diff --git a/website/versioned_docs/version-0.83/integration-with-android-fragment.md b/website/versioned_docs/version-0.83/integration-with-android-fragment.md index e9c385b3eb1..99e69c2ba8f 100644 --- a/website/versioned_docs/version-0.83/integration-with-android-fragment.md +++ b/website/versioned_docs/version-0.83/integration-with-android-fragment.md @@ -33,7 +33,7 @@ This is required by React Native to handle the back button press event. Go into your host activity and make sure it implements the `DefaultHardwareBackBtnHandler` interface: -:::warning Deprecated +:::warning[Deprecated] `Activity.onBackPressed()` has been [deprecated]() since API level 33. Android 16 devices with apps targeting API level 36 this will [no longer be called](https://developer.android.com/about/versions/16/behavior-changes-16#predictive-back) and [OnBackPressedDispatcher](https://developer.android.com/reference/androidx/activity/OnBackPressedDispatcher) should be used instead. ::: diff --git a/website/versioned_docs/version-0.83/interactionmanager.md b/website/versioned_docs/version-0.83/interactionmanager.md index 8eac16a4b70..f1851c75212 100644 --- a/website/versioned_docs/version-0.83/interactionmanager.md +++ b/website/versioned_docs/version-0.83/interactionmanager.md @@ -5,7 +5,7 @@ title: 🗑️ InteractionManager import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; -:::warning Deprecated +:::warning[Deprecated] Avoid long-running work and use [`requestIdleCallback`](global-requestIdleCallback) instead. ::: diff --git a/website/versioned_docs/version-0.83/legacy/native-modules-ios.md b/website/versioned_docs/version-0.83/legacy/native-modules-ios.md index fb3303985bb..6c33c64ec75 100644 --- a/website/versioned_docs/version-0.83/legacy/native-modules-ios.md +++ b/website/versioned_docs/version-0.83/legacy/native-modules-ios.md @@ -551,7 +551,7 @@ RCT_EXPORT_METHOD(doSomethingExpensive:(NSString *)param callback:(RCTResponseSe ``` -:::info Sharing dispatch queues between modules +:::info[Sharing dispatch queues between modules] The `methodQueue` method will be called once when the module is initialized, and then retained by React Native, so there is no need to keep a reference to the queue yourself, unless you wish to make use of it within your module. However, if you wish to share the same queue between multiple modules then you will need to ensure that you retain and return the same queue instance for each of them. ::: diff --git a/website/versioned_docs/version-0.83/metro.md b/website/versioned_docs/version-0.83/metro.md deleted file mode 100644 index a61962a5512..00000000000 --- a/website/versioned_docs/version-0.83/metro.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: metro -title: Metro ---- - -React Native uses [Metro](https://metrobundler.dev/) to build your JavaScript code and assets. - -## Configuring Metro - -Configuration options for Metro can be customized in your project's `metro.config.js` file. This can export either: - -- **An object (recommended)** that will be merged on top of Metro's internal config defaults. -- [**A function**](#advanced-using-a-config-function) that will be called with Metro's internal config defaults and should return a final config object. - -:::tip -Please see [**Configuring Metro**](https://metrobundler.dev/docs/configuration) on the Metro website for documentation on all available config options. -::: - -In React Native, your Metro config should extend either [`@react-native/metro-config`](https://www.npmjs.com/package/@react-native/metro-config) or [`@expo/metro-config`](https://www.npmjs.com/package/@expo/metro-config). These packages contain essential defaults necessary to build and run React Native apps. - -Below is the default `metro.config.js` file in a React Native template project: - - -```js -const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); - -/** - * Metro configuration - * https://metrobundler.dev/docs/configuration - * - * @type {import('metro-config').MetroConfig} - */ -const config = {}; - -module.exports = mergeConfig(getDefaultConfig(__dirname), config); -``` - -Metro options you wish to customize can be done so within the `config` object. - -### Advanced: Using a config function - -Exporting a config function is an opt-in to managing the final config yourself — **Metro will not apply any internal defaults**. This pattern can be useful when needing to read the base default config object from Metro or to set options dynamically. - -:::info -**From `@react-native/metro-config` 0.72.1**, it is no longer necessary to use a config function to access the complete default config. See the **Tip** section below. -::: - - -```js -const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); - -module.exports = function (baseConfig) { - const defaultConfig = mergeConfig(baseConfig, getDefaultConfig(__dirname)); - const {resolver: {assetExts, sourceExts}} = defaultConfig; - - return mergeConfig( - defaultConfig, - { - resolver: { - assetExts: assetExts.filter(ext => ext !== 'svg'), - sourceExts: [...sourceExts, 'svg'], - }, - }, - ); -}; -``` - -:::tip -Using a config function is for advanced use cases. A simpler method than the above, e.g. for customising `sourceExts`, would be to read these defaults from `@react-native/metro-config`. - -**Alternative** - - -```js -const defaultConfig = getDefaultConfig(__dirname); - -const config = { - resolver: { - sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'], - }, -}; - -module.exports = mergeConfig(defaultConfig, config); -``` - -**However!**, we recommend copying and editing when overriding these config values — placing the source of truth in your config file. - -✅ **Recommended** - - -```js -const config = { - resolver: { - sourceExts: ['js', 'ts', 'tsx', 'svg'], - }, -}; -``` - -::: - -## Learn more about Metro - -- [Metro website](https://metrobundler.dev/) -- [Video: "Metro & React Native DevX" talk at App.js 2023](https://www.youtube.com/watch?v=c9D4pg0y9cI) diff --git a/website/versioned_docs/version-0.83/metro.mdx b/website/versioned_docs/version-0.83/metro.mdx new file mode 100644 index 00000000000..dd9d297e77a --- /dev/null +++ b/website/versioned_docs/version-0.83/metro.mdx @@ -0,0 +1,112 @@ +--- +id: metro +title: Metro +--- + +React Native uses [Metro](https://metrobundler.dev/) to build your JavaScript code and assets. + +## Configuring Metro + +Configuration options for Metro can be customized in your project's `metro.config.js` file. This can export either: + +- **An object (recommended)** that will be merged on top of Metro's internal config defaults. +- [**A function**](#advanced-using-a-config-function) that will be called with Metro's internal config defaults and should return a final config object. + +:::tip +Please see [**Configuring Metro**](https://metrobundler.dev/docs/configuration) on the Metro website for documentation on all available config options. +::: + +In React Native, your Metro config should extend either [`@react-native/metro-config`](https://www.npmjs.com/package/@react-native/metro-config) or [`@expo/metro-config`](https://www.npmjs.com/package/@expo/metro-config). These packages contain essential defaults necessary to build and run React Native apps. + +Below is the default `metro.config.js` file in a React Native template project: + +{/* prettier-ignore */} +```js +const { + getDefaultConfig, + mergeConfig, +} = require('@react-native/metro-config'); + +/** + * Metro configuration + * https://metrobundler.dev/docs/configuration + * + * @type {import('metro-config').MetroConfig} + */ +const config = {}; + +module.exports = mergeConfig(getDefaultConfig(__dirname), config); +``` + +Metro options you wish to customize can be done so within the `config` object. + +### Advanced: Using a config function + +Exporting a config function is an opt-in to managing the final config yourself — **Metro will not apply any internal defaults**. This pattern can be useful when needing to read the base default config object from Metro or to set options dynamically. + +:::info +**From `@react-native/metro-config` 0.72.1**, it is no longer necessary to use a config function to access the complete default config. See the **Tip** section below. +::: + +{/* prettier-ignore */} +```js +const { + getDefaultConfig, + mergeConfig, +} = require('@react-native/metro-config'); + +module.exports = function (baseConfig) { + const defaultConfig = mergeConfig( + baseConfig, + getDefaultConfig(__dirname), + ); + const { + resolver: {assetExts, sourceExts}, + } = defaultConfig; + + return mergeConfig(defaultConfig, { + resolver: { + assetExts: assetExts.filter(ext => ext !== 'svg'), + sourceExts: [...sourceExts, 'svg'], + }, + }); +}; +``` + +:::tip +Using a config function is for advanced use cases. A simpler method than the above, e.g. for customising `sourceExts`, would be to read these defaults from `@react-native/metro-config`. + +**Alternative** + +{/* prettier-ignore */} +```js +const defaultConfig = getDefaultConfig(__dirname); + +const config = { + resolver: { + sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'], + }, +}; + +module.exports = mergeConfig(defaultConfig, config); +``` + +**However!**, we recommend copying and editing when overriding these config values — placing the source of truth in your config file. + +✅ **Recommended** + +{/* prettier-ignore */} +```js +const config = { + resolver: { + sourceExts: ['js', 'ts', 'tsx', 'svg'], + }, +}; +``` + +::: + +## Learn more about Metro + +- [Metro website](https://metrobundler.dev/) +- [Video: "Metro & React Native DevX" talk at App.js 2023](https://www.youtube.com/watch?v=c9D4pg0y9cI) diff --git a/website/versioned_docs/version-0.83/modal.md b/website/versioned_docs/version-0.83/modal.md index d4c8fbde55c..ca04a4cdc8a 100644 --- a/website/versioned_docs/version-0.83/modal.md +++ b/website/versioned_docs/version-0.83/modal.md @@ -106,7 +106,7 @@ Inherits [View Props](view.md#props). ### 🗑️ `animated` -:::warning Deprecated +:::warning[Deprecated] Use the [`animationType`](modal.md#animationtype) prop instead. ::: diff --git a/website/versioned_docs/version-0.83/network.md b/website/versioned_docs/version-0.83/network.md index 1a46e514377..c002f9fc9ba 100644 --- a/website/versioned_docs/version-0.83/network.md +++ b/website/versioned_docs/version-0.83/network.md @@ -217,7 +217,7 @@ request.open('GET', 'https://mywebsite.com/endpoint/'); request.send(); ``` -:::warning Caution +:::warning[Caution] The security model for XMLHttpRequest is different than on web as there is no concept of [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) in native apps. ::: diff --git a/website/versioned_docs/version-0.83/other-debugging-methods.md b/website/versioned_docs/version-0.83/other-debugging-methods.md index 28b13d1e087..5df989acefc 100644 --- a/website/versioned_docs/version-0.83/other-debugging-methods.md +++ b/website/versioned_docs/version-0.83/other-debugging-methods.md @@ -27,7 +27,7 @@ Every time the app is reloaded, a new JSContext is created. Choosing "Automatica ## Remote JavaScript Debugging (removed) -:::warning Important +:::warning[Important] Remote JavaScript Debugging has been removed as of React Native 0.79. See the original [deprecation announcement](https://github.com/react-native-community/discussions-and-proposals/discussions/734). If you are on an older version of React Native, please go to the docs [for your version](/versions). diff --git a/website/versioned_docs/version-0.83/profiling.md b/website/versioned_docs/version-0.83/profiling.md index f833a4440c2..73cbed73ad1 100644 --- a/website/versioned_docs/version-0.83/profiling.md +++ b/website/versioned_docs/version-0.83/profiling.md @@ -33,13 +33,13 @@ After opening the trace in Android Studio or Perfetto, you should see something ![Example](/docs/assets/SystraceExample.png) -:::note Hint +:::note[Hint] Use the WASD keys to strafe and zoom. ::: The exact UI might be different but the instructions below will apply regardless of the tool you're using. -:::info Enable VSync highlighting +:::info[Enable VSync highlighting] Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries: ![Enable VSync Highlighting](/docs/assets/SystraceHighlightVSync.png) @@ -133,7 +133,7 @@ There isn't a quick way to mitigate this unless you're able to postpone creating If the problem seems to be on the native side, you can use the [CPU hotspot profiler](https://developer.android.com/studio/profile/record-java-kotlin-methods) to get more details on what's happening. Open the Android Studio Profiler panel and select "Find CPU Hotspots (Java/Kotlin Method Recording)". -:::info Choose the Java/Kotlin recording +:::info[Choose the Java/Kotlin recording] Make sure you select "Find CPU Hotspots **(Java/Kotlin Recording)**" rather than "Find CPU Hotspots (Callstack Sample)". They have similar icons but do different things. ::: diff --git a/website/versioned_docs/version-0.83/progressbarandroid.md b/website/versioned_docs/version-0.83/progressbarandroid.md index 4f165d86c46..d26fb2038d6 100644 --- a/website/versioned_docs/version-0.83/progressbarandroid.md +++ b/website/versioned_docs/version-0.83/progressbarandroid.md @@ -3,7 +3,7 @@ id: progressbarandroid title: '🗑️ ProgressBarAndroid' --- -:::warning Deprecated +:::warning[Deprecated] Use one of the [community packages](https://reactnative.directory/?search=progressbar) instead. ::: diff --git a/website/versioned_docs/version-0.83/pushnotificationios.md b/website/versioned_docs/version-0.83/pushnotificationios.md index 0cdecf3180a..c42d3a28193 100644 --- a/website/versioned_docs/version-0.83/pushnotificationios.md +++ b/website/versioned_docs/version-0.83/pushnotificationios.md @@ -3,7 +3,7 @@ id: pushnotificationios title: '🗑️ PushNotificationIOS' --- -:::warning Deprecated +:::warning[Deprecated] Use one of the [community packages](https://reactnative.directory/?search=notification) instead. ::: diff --git a/website/versioned_docs/version-0.83/safeareaview.md b/website/versioned_docs/version-0.83/safeareaview.md index fd0d2d479c3..8da4485ff12 100644 --- a/website/versioned_docs/version-0.83/safeareaview.md +++ b/website/versioned_docs/version-0.83/safeareaview.md @@ -3,7 +3,7 @@ id: safeareaview title: '🗑️ SafeAreaView' --- -:::warning Deprecated +:::warning[Deprecated] Use [react-native-safe-area-context](https://github.com/AppAndFlow/react-native-safe-area-context) instead. ::: diff --git a/website/versioned_docs/version-0.83/security.md b/website/versioned_docs/version-0.83/security.md index bf8ed1ff5d4..7a6c1bf150e 100644 --- a/website/versioned_docs/version-0.83/security.md +++ b/website/versioned_docs/version-0.83/security.md @@ -68,7 +68,7 @@ In order to use iOS Keychain services or Android Secure Shared Preferences, you - [expo-secure-store](https://docs.expo.dev/versions/latest/sdk/securestore/) - [react-native-keychain](https://github.com/oblador/react-native-keychain) -:::warning Caution +:::warning[Caution] **Be mindful of unintentionally storing or exposing sensitive info.** This could happen accidentally, for example saving sensitive form data in redux state and persisting the whole state tree in Async Storage. Or sending user tokens and personal info to an application monitoring service such as Sentry or Crashlytics. ::: @@ -127,7 +127,7 @@ Using https endpoints could still leave your data vulnerable to interception. Wi **SSL pinning** is a technique that can be used on the client side to avoid this attack. It works by embedding (or pinning) a list of trusted certificates to the client during development, so that only the requests signed with one of the trusted certificates will be accepted, and any self-signed certificates will not be. -:::warning Caution +:::warning[Caution] When using SSL pinning, you should be mindful of certificate expiry. Certificates expire every 1-2 years and when one does, it’ll need to be updated in the app as well as on the server. As soon as the certificate on the server has been updated, any apps with the old certificate embedded in them will cease to work. ::: diff --git a/website/versioned_docs/version-0.83/segmentedcontrolios.md b/website/versioned_docs/version-0.83/segmentedcontrolios.md index bab15ae9ba1..d9ede6e35e8 100644 --- a/website/versioned_docs/version-0.83/segmentedcontrolios.md +++ b/website/versioned_docs/version-0.83/segmentedcontrolios.md @@ -3,7 +3,7 @@ id: segmentedcontrolios title: '❌ SegmentedControlIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=segmentedcontrol) instead. ::: diff --git a/website/versioned_docs/version-0.83/signed-apk-android.md b/website/versioned_docs/version-0.83/signed-apk-android.md index d51ecd67bbe..c5158f4aab0 100644 --- a/website/versioned_docs/version-0.83/signed-apk-android.md +++ b/website/versioned_docs/version-0.83/signed-apk-android.md @@ -65,11 +65,11 @@ MYAPP_UPLOAD_KEY_PASSWORD=***** These are going to be global Gradle variables, which we can later use in our Gradle config to sign our app. -:::note Note about using git +:::note[Note about using git] Saving the above Gradle variables in `~/.gradle/gradle.properties` instead of `android/gradle.properties` prevents them from being checked in to git. You may have to create the `~/.gradle/gradle.properties` file in your user's home directory before you can add the variables. ::: -:::note Note about security +:::note[Note about security] If you are not keen on storing your passwords in plaintext, and you are running macOS, you can also [store your credentials in the Keychain Access app](https://pilloxa.gitlab.io/posts/safer-passwords-in-gradle/). Then you can skip the two last rows in `~/.gradle/gradle.properties`. ::: @@ -174,7 +174,7 @@ Please note that you will also have to configure distinct version codes, as [sug Proguard is a tool that can slightly reduce the size of the APK. It does this by stripping parts of the React Native Java bytecode (and its dependencies) that your app is not using. -:::caution Important +:::caution[Important] Make sure to thoroughly test your app if you've enabled Proguard. Proguard often requires configuration specific to each native library you're using. See `app/proguard-rules.pro`. ::: diff --git a/website/versioned_docs/version-0.83/statusbar.md b/website/versioned_docs/version-0.83/statusbar.md index 6345e7bf4ef..93810f7b0e0 100644 --- a/website/versioned_docs/version-0.83/statusbar.md +++ b/website/versioned_docs/version-0.83/statusbar.md @@ -440,7 +440,7 @@ Show or hide the status bar. ### 🗑️ `setNetworkActivityIndicatorVisible()`
iOS
-:::warning Deprecated +:::warning[Deprecated] The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release. ::: diff --git a/website/versioned_docs/version-0.83/statusbarios.md b/website/versioned_docs/version-0.83/statusbarios.md index 67ae7994778..2b17ba436a2 100644 --- a/website/versioned_docs/version-0.83/statusbarios.md +++ b/website/versioned_docs/version-0.83/statusbarios.md @@ -3,7 +3,7 @@ id: statusbarios title: '❌ StatusBarIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use [`StatusBar`](statusbar.md) for mutating the status bar. ::: diff --git a/website/versioned_docs/version-0.83/strict-typescript-api.md b/website/versioned_docs/version-0.83/strict-typescript-api.md index 4223527eeab..a426511835b 100644 --- a/website/versioned_docs/version-0.83/strict-typescript-api.md +++ b/website/versioned_docs/version-0.83/strict-typescript-api.md @@ -32,7 +32,7 @@ Opting in is a **breaking change**, since some of our new types have updated nam } ``` -:::note Under the hood +:::note[Under the hood] This will instruct TypeScript to resolve `react-native` types from our new [`types_generated/`](https://www.npmjs.com/package/react-native?activeTab=code) dir, instead of the previous [`types/`](https://www.npmjs.com/package/react-native?activeTab=code) dir (manually maintained). No restart of TypeScript or your editor is required. @@ -40,7 +40,7 @@ This will instruct TypeScript to resolve `react-native` types from our new [`typ The Strict TypeScript API follows our [RFC](https://github.com/react-native-community/discussions-and-proposals/pull/894) to remove deep imports from React Native. Therefore, some APIs are no longer exported at root. This is intentional, in order to reduce the overall surface area of React Native's API. -:::tip API feedback +:::tip[API feedback] **Sending feedback**: We will be working with the community to finalize which APIs we export over (at least) the next two React Native releases. Please share your feedback in our [feedback thread](https://github.com/react-native-community/discussions-and-proposals/discussions/893). diff --git a/website/versioned_docs/version-0.83/stylesheet.md b/website/versioned_docs/version-0.83/stylesheet.md index 62f32c8f805..e5e9283bc59 100644 --- a/website/versioned_docs/version-0.83/stylesheet.md +++ b/website/versioned_docs/version-0.83/stylesheet.md @@ -174,7 +174,7 @@ export default App; ### `setStyleAttributePreprocessor()` -:::warning Experimental +:::warning[Experimental] Breaking changes will probably happen a lot and will not be reliably announced. The whole thing might be deleted, who knows? Use at your own risk. ::: diff --git a/website/versioned_docs/version-0.83/textinput.md b/website/versioned_docs/version-0.83/textinput.md index c1d62e96278..e6b91315ff2 100644 --- a/website/versioned_docs/version-0.83/textinput.md +++ b/website/versioned_docs/version-0.83/textinput.md @@ -238,7 +238,7 @@ If `true`, focuses the input. The default value is `false`. ### 🗑️ `blurOnSubmit` -:::warning Deprecated +:::warning[Deprecated] Note that `submitBehavior` now takes the place of `blurOnSubmit` and will override any behavior defined by `blurOnSubmit`. See [submitBehavior](textinput#submitbehavior). ::: diff --git a/website/versioned_docs/version-0.83/the-new-architecture/create-module-library.md b/website/versioned_docs/version-0.83/the-new-architecture/create-module-library.md deleted file mode 100644 index 657ef9441bd..00000000000 --- a/website/versioned_docs/version-0.83/the-new-architecture/create-module-library.md +++ /dev/null @@ -1,192 +0,0 @@ -# Create a Library for Your Module - -React Native has a rich ecosystem of libraries to solve common problems. We collect React Native libraries in the [reactnative.directory](https://reactnative.directory) website, and this is a great resource to bookmark for every React Native developer. - -Sometimes, you might be working on a module that is worth extracting in a separate library for code reuse. This can be a library that you want to reuse in all your apps, a library that you want to distribute to the ecosystem as an open source component, or even a library you'd like to sell. - -In this guide, you'll learn: - -- how to extract a module into a library -- how to distribute the library using NPM - -## Extract the Module into a Library - -You can use the [`create-react-native-library`](https://callstack.github.io/react-native-builder-bob/create) tool to create a new library. This tool sets up a new library with all the boilerplate code that is needed: all the configuration files and all files required by the various platforms. It also comes with a nice interactive menu to guide you through the creation of the library. - -To extract a module into a separate library, you can follow these steps: - -1. Create the new library -2. Move the code from the App to the Library -3. Update the code to reflect the new structure -4. Publish it. - -### 1. Create a Library - -1. Start the creation process by running the command: - -```sh -npx create-react-native-library@latest -``` - -2. Add a name for your module. It must be a valid npm name, so it should be all lowercase. You can use `-` to separate words. -3. Add a description for the package. -4. Continue filling the form until you reach the question _"What type of library do you want to develop?"_ - ![What type of Library](/docs/assets/what-library.png) -5. For the sake of this guide, select the _Turbo module_ option. Notice that you can create libraries for both New Architecture and Legacy Architecture. -6. Then, you can choose whether you want a library that access the platform (Kotlin & Objective-C) or a shared C++ library (C++ for Android and iOS). -7. Finally, select the `Test App` as last option. This option creates the library with a separate app already configured within the library folder. - -Once the interactive prompt is done, the tool creates a folder whose structure looks like this in Visual Studio Code: - -Folder structure after initializing a new library. - -Feel free to explore the code that has been created for you. However, the most important parts: - -- The `android` folder: this is where the Android code lives -- The `cpp` folder: this is where the c++ code lives -- The `ios` folder: this is where the iOS code lives -- The `src` folder: this is where the JS code lives. - -The `package.json` is already configured with all the information that we provided to the `create-react-native-library` tool, including the name and the description of the package. Notice that the `package.json` is also already configured to run Codegen. - -```json - "codegenConfig": { - "name": "RNSpec", - "type": "all", - "jsSrcsDir": "src", - "outputDir": { - "ios": "ios/generated", - "android": "android/generated" - }, - "android": { - "javaPackageName": "com." - } - }, -``` - -Finally, the library contains already all the infrastructure to let the library be linked with iOS and Android. - -### 2. Copy the Code over from Your App - -The rest of the guide assumes that you have a local Turbo Native Module in your app, created following the guidelines shown in the other guides in the website: platform specific Turbo Native Modules, or [cross-platform Turbo Native Modules](./pure-cxx-modules). But it works also for Components and legacy architecture modules and components. You'll have to adapt the files you need to copy and update. - - - -1. **[Not required for legacy architecture modules and components]** Move the code you have in the `specs` folder in your app into the `src` folder created by the `create-react-native-library` folder. -2. Update the `index.ts` file to properly export the Turbo Native Module spec so that it is accessible from the library. For example: - -```ts -import NativeSampleModule from './NativeSampleModule'; - -export default NativeSampleModule; -``` - -3. Copy the native module over: - - Replace the code in the `android/src/main/java/com/` with the code you wrote in the app for your native module, if any. - - Replace the code in the `ios` folder with the code you wrote in your app for your native module, if any. - - Replace the code in the `cpp` folder with the code you wrote in your app for your native module, if any. - -4. **[Not required for legacy architecture modules and components]** Update all the references from the previous spec name to the new spec name, the one that is defined in the `codegenConfig` field of the library's `package.json`. For example, if in the app `package.json` you set `AppSpecs` as `codegenConfig.name` and in the library it is called `RNNativeSampleModuleSpec`, you have to replace every occurrence of `AppSpecs` with `RNNativeSampleModuleSpec`. - -That's it! You have moved all the required code out of your app and in a separate library. - -## Testing your Library - -The `create-react-native-library` comes with a useful example application that is already configured to work properly with the library. This is a great way to test it! - -If you look at the `example` folder, you can find the same structure of a new React Native application that you can create from the [`react-native-community/template`](https://github.com/react-native-community/template). - -To test your library: - -1. Navigate to the `example` folder. -2. Run `yarn install` to install all the dependencies. -3. For iOS only, you need to install CocoaPods: `cd ios && pod install`. -4. Build and run Android with `yarn android` from the `example` folder. -5. Build and run iOS with `yarn ios` from the `example` folder. - -## Use your library as a Local Module - -There are some scenario where you might want to reuse your library as a local module for your applications, without publishing it to NPM. - -In this case, you might end up in a scenario where you have your library sitting as a sibling of your apps. - -```shell -Development -├── App -└── Library -``` - -You can use the library created with `create-react-native-library` also in this case. - -1. add you library to your app by navigating into the `App` folder and running `yarn add ../Library`. -2. For iOS only, navigate in the `App/ios` folder and run `bundle exec pod install` to install your dependencies. -3. Update the `App.tsx` code to import the code in your library. For example: - -```tsx -import NativeSampleModule from '../Library/src/index'; -``` - -If you run your app right now, Metro would not find the JS files that it needs to serve to the app. That's because metro will be running starting from the `App` folder and it would not have access to the JS files located in the `Library` folder. To fix this, let's update the `metro.config.js` file as it follows - -```diff -const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); - -/** - * Metro configuration - * https://reactnative.dev/docs/metro - * - * @type {import('metro-config').MetroConfig} - */ -+ const path = require('path'); - -- const config = {} -+ const config = { -+ // Make Metro able to resolve required external dependencies -+ watchFolders: [ -+ path.resolve(__dirname, '../Library'), -+ ], -+ resolver: { -+ extraNodeModules: { -+ 'react-native': path.resolve(__dirname, 'node_modules/react-native'), -+ }, -+ }, -+}; - -module.exports = mergeConfig(getDefaultConfig(__dirname), config); -``` - -The `watchFolders` configs tells Metro to watch for files and changes in some additional paths, in this case to the `../Library` path, which contains the `src/index` file you need. -The `resolver`property is required to feed to the library the React Native code used by the app. The library might refer and import code from React Native: without the additional resolver, the imports in the library will fail. - -At this point, you can build and run your app as usual: - -- Build and run Android with `yarn android` from the `example` folder. -- Build and run iOS with `yarn ios` from the `example` folder. - -## Publish the Library on NPM - -The setup to publish everything on NPM is already in place, thanks to `create-react-native-library`. - -1. Install the dependencies in your module `yarn install`. -2. Build the library running `yarn prepare`. -3. Release it with `yarn release`. - -After a while, you'll find your library on NPM. To verify that, run: - -```bash -npm view -``` - -where `package.name` is the `name` you set up in the `package.json` file during the initialization of the library. - -Now, you can install the library in your application by running: - -```bash -yarn add -``` - -:::note -For iOS only, whenever you install a new module with some native code, you have to reinstall CocoaPods, by running `bundle exec pod install` (recommended) or `pod install` if you are not using Ruby's Bundler (not recommended). -::: - -Congratulations! You published your first React Native library. diff --git a/website/versioned_docs/version-0.83/the-new-architecture/create-module-library.mdx b/website/versioned_docs/version-0.83/the-new-architecture/create-module-library.mdx new file mode 100644 index 00000000000..0a5091fab26 --- /dev/null +++ b/website/versioned_docs/version-0.83/the-new-architecture/create-module-library.mdx @@ -0,0 +1,196 @@ +# Create a Library for Your Module + +React Native has a rich ecosystem of libraries to solve common problems. We collect React Native libraries in the [reactnative.directory](https://reactnative.directory) website, and this is a great resource to bookmark for every React Native developer. + +Sometimes, you might be working on a module that is worth extracting in a separate library for code reuse. This can be a library that you want to reuse in all your apps, a library that you want to distribute to the ecosystem as an open source component, or even a library you'd like to sell. + +In this guide, you'll learn: + +- how to extract a module into a library +- how to distribute the library using NPM + +## Extract the Module into a Library + +You can use the [`create-react-native-library`](https://callstack.github.io/react-native-builder-bob/create) tool to create a new library. This tool sets up a new library with all the boilerplate code that is needed: all the configuration files and all files required by the various platforms. It also comes with a nice interactive menu to guide you through the creation of the library. + +To extract a module into a separate library, you can follow these steps: + +1. Create the new library +2. Move the code from the App to the Library +3. Update the code to reflect the new structure +4. Publish it. + +### 1. Create a Library + +1. Start the creation process by running the command: + +```sh +npx create-react-native-library@latest +``` + +2. Add a name for your module. It must be a valid npm name, so it should be all lowercase. You can use `-` to separate words. +3. Add a description for the package. +4. Continue filling the form until you reach the question _"What type of library do you want to develop?"_ + ![What type of Library](/docs/assets/what-library.png) +5. For the sake of this guide, select the _Turbo module_ option. Notice that you can create libraries for both New Architecture and Legacy Architecture. +6. Then, you can choose whether you want a library that access the platform (Kotlin & Objective-C) or a shared C++ library (C++ for Android and iOS). +7. Finally, select the `Test App` as last option. This option creates the library with a separate app already configured within the library folder. + +Once the interactive prompt is done, the tool creates a folder whose structure looks like this in Visual Studio Code: + +Folder structure after initializing a new library. + +Feel free to explore the code that has been created for you. However, the most important parts: + +- The `android` folder: this is where the Android code lives +- The `cpp` folder: this is where the c++ code lives +- The `ios` folder: this is where the iOS code lives +- The `src` folder: this is where the JS code lives. + +The `package.json` is already configured with all the information that we provided to the `create-react-native-library` tool, including the name and the description of the package. Notice that the `package.json` is also already configured to run Codegen. + +```json + "codegenConfig": { + "name": "RNSpec", + "type": "all", + "jsSrcsDir": "src", + "outputDir": { + "ios": "ios/generated", + "android": "android/generated" + }, + "android": { + "javaPackageName": "com." + } + }, +``` + +Finally, the library contains already all the infrastructure to let the library be linked with iOS and Android. + +### 2. Copy the Code over from Your App + +The rest of the guide assumes that you have a local Turbo Native Module in your app, created following the guidelines shown in the other guides in the website: platform specific Turbo Native Modules, or [cross-platform Turbo Native Modules](./pure-cxx-modules). But it works also for Components and legacy architecture modules and components. You'll have to adapt the files you need to copy and update. + +{/* TODO: add links for Turbo Native Modules */} + +1. **[Not required for legacy architecture modules and components]** Move the code you have in the `specs` folder in your app into the `src` folder created by the `create-react-native-library` folder. +2. Update the `index.ts` file to properly export the Turbo Native Module spec so that it is accessible from the library. For example: + +```ts +import NativeSampleModule from './NativeSampleModule'; + +export default NativeSampleModule; +``` + +3. Copy the native module over: + - Replace the code in the `android/src/main/java/com/` with the code you wrote in the app for your native module, if any. + - Replace the code in the `ios` folder with the code you wrote in your app for your native module, if any. + - Replace the code in the `cpp` folder with the code you wrote in your app for your native module, if any. + +4. **[Not required for legacy architecture modules and components]** Update all the references from the previous spec name to the new spec name, the one that is defined in the `codegenConfig` field of the library's `package.json`. For example, if in the app `package.json` you set `AppSpecs` as `codegenConfig.name` and in the library it is called `RNNativeSampleModuleSpec`, you have to replace every occurrence of `AppSpecs` with `RNNativeSampleModuleSpec`. + +That's it! You have moved all the required code out of your app and in a separate library. + +## Testing your Library + +The `create-react-native-library` comes with a useful example application that is already configured to work properly with the library. This is a great way to test it! + +If you look at the `example` folder, you can find the same structure of a new React Native application that you can create from the [`react-native-community/template`](https://github.com/react-native-community/template). + +To test your library: + +1. Navigate to the `example` folder. +2. Run `yarn install` to install all the dependencies. +3. For iOS only, you need to install CocoaPods: `cd ios && pod install`. +4. Build and run Android with `yarn android` from the `example` folder. +5. Build and run iOS with `yarn ios` from the `example` folder. + +## Use your library as a Local Module + +There are some scenario where you might want to reuse your library as a local module for your applications, without publishing it to NPM. + +In this case, you might end up in a scenario where you have your library sitting as a sibling of your apps. + +```shell +Development +├── App +└── Library +``` + +You can use the library created with `create-react-native-library` also in this case. + +1. add you library to your app by navigating into the `App` folder and running `yarn add ../Library`. +2. For iOS only, navigate in the `App/ios` folder and run `bundle exec pod install` to install your dependencies. +3. Update the `App.tsx` code to import the code in your library. For example: + +```tsx +import NativeSampleModule from '../Library/src/index'; +``` + +If you run your app right now, Metro would not find the JS files that it needs to serve to the app. That's because metro will be running starting from the `App` folder and it would not have access to the JS files located in the `Library` folder. To fix this, let's update the `metro.config.js` file as it follows + +```diff +const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); + +/** + * Metro configuration + * https://reactnative.dev/docs/metro + * + * @type {import('metro-config').MetroConfig} + */ ++ const path = require('path'); + +- const config = {} ++ const config = { ++ // Make Metro able to resolve required external dependencies ++ watchFolders: [ ++ path.resolve(__dirname, '../Library'), ++ ], ++ resolver: { ++ extraNodeModules: { ++ 'react-native': path.resolve(__dirname, 'node_modules/react-native'), ++ }, ++ }, ++}; + +module.exports = mergeConfig(getDefaultConfig(__dirname), config); +``` + +The `watchFolders` configs tells Metro to watch for files and changes in some additional paths, in this case to the `../Library` path, which contains the `src/index` file you need. +The `resolver`property is required to feed to the library the React Native code used by the app. The library might refer and import code from React Native: without the additional resolver, the imports in the library will fail. + +At this point, you can build and run your app as usual: + +- Build and run Android with `yarn android` from the `example` folder. +- Build and run iOS with `yarn ios` from the `example` folder. + +## Publish the Library on NPM + +The setup to publish everything on NPM is already in place, thanks to `create-react-native-library`. + +1. Install the dependencies in your module `yarn install`. +2. Build the library running `yarn prepare`. +3. Release it with `yarn release`. + +After a while, you'll find your library on NPM. To verify that, run: + +```bash +npm view +``` + +where `package.name` is the `name` you set up in the `package.json` file during the initialization of the library. + +Now, you can install the library in your application by running: + +```bash +yarn add +``` + +:::note +For iOS only, whenever you install a new module with some native code, you have to reinstall CocoaPods, by running `bundle exec pod install` (recommended) or `pod install` if you are not using Ruby's Bundler (not recommended). +::: + +Congratulations! You published your first React Native library. diff --git a/website/versioned_docs/version-0.83/the-new-architecture/pure-cxx-modules.md b/website/versioned_docs/version-0.83/the-new-architecture/pure-cxx-modules.md index 37fa505e53f..b7c08196290 100644 --- a/website/versioned_docs/version-0.83/the-new-architecture/pure-cxx-modules.md +++ b/website/versioned_docs/version-0.83/the-new-architecture/pure-cxx-modules.md @@ -72,7 +72,7 @@ export default TurboModuleRegistry.getEnforcing( ## 2. Configure Codegen -The next step is to configure [Codegen](what-is-codegen.md) in your `package.json`. Update the file to include: +The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include: ```json title="package.json" "start": "react-native start", diff --git a/website/versioned_docs/version-0.82/the-new-architecture/using-codegen.md b/website/versioned_docs/version-0.83/the-new-architecture/using-codegen.mdx similarity index 99% rename from website/versioned_docs/version-0.82/the-new-architecture/using-codegen.md rename to website/versioned_docs/version-0.83/the-new-architecture/using-codegen.mdx index 56aca7b981c..49df503003f 100644 --- a/website/versioned_docs/version-0.82/the-new-architecture/using-codegen.md +++ b/website/versioned_docs/version-0.83/the-new-architecture/using-codegen.mdx @@ -19,12 +19,12 @@ The **Codegen** process is tightly coupled with the build of the app, and the sc For the sake of this guide, create a project using the React Native CLI as follows: -{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`} + {`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`} **Codegen** is used to generate the glue-code for your custom modules or components. See the guides for Turbo Native Modules and Fabric Native Components for more details on how to create them. - +{/* TODO: add links */} ## Configuring **Codegen** diff --git a/docs/the-new-architecture/what-is-codegen.md b/website/versioned_docs/version-0.83/the-new-architecture/what-is-codegen.mdx similarity index 97% rename from docs/the-new-architecture/what-is-codegen.md rename to website/versioned_docs/version-0.83/the-new-architecture/what-is-codegen.mdx index bc9cc37e7e0..717380c4df8 100644 --- a/docs/the-new-architecture/what-is-codegen.md +++ b/website/versioned_docs/version-0.83/the-new-architecture/what-is-codegen.mdx @@ -4,7 +4,7 @@ React Native invokes Codegen automatically every time an iOS or Android app is built. Occasionally, you would like to manually run the Codegen scripts to know which types and files are actually generated: this is a common scenario when developing [Turbo Native Modules](/docs/turbo-native-modules-introduction) and Fabric Native Components. - +{/* TODO: Add links to TM and FC */} ## How Codegen Works diff --git a/website/versioned_docs/version-0.83/timepickerandroid.md b/website/versioned_docs/version-0.83/timepickerandroid.md index 29bf4573cef..f6c06c1b89e 100644 --- a/website/versioned_docs/version-0.83/timepickerandroid.md +++ b/website/versioned_docs/version-0.83/timepickerandroid.md @@ -3,6 +3,6 @@ id: timepickerandroid title: '❌ TimePickerAndroid' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=timepicker) instead. ::: diff --git a/website/versioned_docs/version-0.83/timers.md b/website/versioned_docs/version-0.83/timers.md index bf0041d09b4..87eaf1f3f80 100644 --- a/website/versioned_docs/version-0.83/timers.md +++ b/website/versioned_docs/version-0.83/timers.md @@ -25,7 +25,7 @@ Please correct this by running ``adb shell "date `date +%m%d%H%M%Y.%S%3N`"`` on ## InteractionManager -:::warning Deprecated +:::warning[Deprecated] The `InteractionManager` behavior has been changed to be the same as `setImmediate`, which should be used instead. ::: diff --git a/website/versioned_docs/version-0.83/transforms.md b/website/versioned_docs/version-0.83/transforms.md index 92a75671719..364ba3a6873 100644 --- a/website/versioned_docs/version-0.83/transforms.md +++ b/website/versioned_docs/version-0.83/transforms.md @@ -268,7 +268,7 @@ Matrix transforms are useful when you need to apply pre-calculated transformatio ### 🗑️ `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY` -:::warning Deprecated +:::warning[Deprecated] Use the [`transform`](transforms#transform) prop instead. ::: diff --git a/website/versioned_docs/version-0.83/turbo-native-modules-android.md b/website/versioned_docs/version-0.83/turbo-native-modules-android.md index 21fbd7703e1..83d922f9918 100644 --- a/website/versioned_docs/version-0.83/turbo-native-modules-android.md +++ b/website/versioned_docs/version-0.83/turbo-native-modules-android.md @@ -206,7 +206,7 @@ Finally, we need to tell the React Native in our main application how to find th In this case, you add it to be returned by the [getPackages](https://github.com/facebook/react-native/blob/8d8b8c343e62115a5509e1aed62047053c2f6e39/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactNativeHost.java#L233) method. :::info -Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.md#publish-the-library-on-npm), which our build tooling will autolink for you. +Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.mdx#publish-the-library-on-npm), which our build tooling will autolink for you. ::: diff --git a/website/versioned_docs/version-0.83/virtualizedlist.md b/website/versioned_docs/version-0.83/virtualizedlist.md index e0a31ffb2e2..9f80ad78258 100644 --- a/website/versioned_docs/version-0.83/virtualizedlist.md +++ b/website/versioned_docs/version-0.83/virtualizedlist.md @@ -300,7 +300,7 @@ Styling for internal View for `ListHeaderComponent`. ### 🗑️ `disableVirtualization` -:::warning Deprecated +:::warning[Deprecated] Virtualization provides significant performance and memory optimizations, but fully unmounts react instances that are outside of the render window. You should only need to disable this for debugging purposes. ::: diff --git a/website/versioned_docs/version-0.84/_canary-channel-api-warning.mdx b/website/versioned_docs/version-0.84/_canary-channel-api-warning.mdx index e8b3934b850..2c1ae5cf423 100644 --- a/website/versioned_docs/version-0.84/_canary-channel-api-warning.mdx +++ b/website/versioned_docs/version-0.84/_canary-channel-api-warning.mdx @@ -1,4 +1,4 @@ -:::tip Canary 🧪 +:::tip[Canary 🧪] **This API is currently only available in React Native’s Canary and Experimental channels.** diff --git a/website/versioned_docs/version-0.84/_experimental-channel-api-warning.mdx b/website/versioned_docs/version-0.84/_experimental-channel-api-warning.mdx index 8f290343124..ffcfae347fe 100644 --- a/website/versioned_docs/version-0.84/_experimental-channel-api-warning.mdx +++ b/website/versioned_docs/version-0.84/_experimental-channel-api-warning.mdx @@ -1,4 +1,4 @@ -:::tip Experimental Feature 🧪 +:::tip[Experimental Feature 🧪] **This API is currently only available in React Native’s Experimental channels.** diff --git a/website/versioned_docs/version-0.84/accessibilityinfo.md b/website/versioned_docs/version-0.84/accessibilityinfo.md index af69fbcfec3..c5c580e8c80 100644 --- a/website/versioned_docs/version-0.84/accessibilityinfo.md +++ b/website/versioned_docs/version-0.84/accessibilityinfo.md @@ -256,7 +256,7 @@ Query whether reduce motion and prefer cross-fade transitions settings are curre ### 🗑️ `setAccessibilityFocus()` -:::warning Deprecated +:::warning[Deprecated] Prefer using `sendAccessibilityEvent` with eventType `focus` instead. ::: diff --git a/website/versioned_docs/version-0.84/alertios.md b/website/versioned_docs/version-0.84/alertios.md index 64d298d5e0a..a2d6d4f2610 100644 --- a/website/versioned_docs/version-0.84/alertios.md +++ b/website/versioned_docs/version-0.84/alertios.md @@ -3,6 +3,6 @@ id: alertios title: '❌ AlertIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use [`Alert`](alert) instead. ::: diff --git a/website/versioned_docs/version-0.84/asyncstorage.md b/website/versioned_docs/version-0.84/asyncstorage.md index dfe35feaa3d..e1fb69471fa 100644 --- a/website/versioned_docs/version-0.84/asyncstorage.md +++ b/website/versioned_docs/version-0.84/asyncstorage.md @@ -3,6 +3,6 @@ id: asyncstorage title: '❌ AsyncStorage' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=storage) instead. ::: diff --git a/website/versioned_docs/version-0.84/backhandler.md b/website/versioned_docs/version-0.84/backhandler.md index c3c7c937541..f020f3fc7a5 100644 --- a/website/versioned_docs/version-0.84/backhandler.md +++ b/website/versioned_docs/version-0.84/backhandler.md @@ -10,7 +10,7 @@ The event subscriptions are called in reverse order (i.e. the last registered su - **If one subscription returns true,** then subscriptions registered earlier will not be called. - **If no subscription returns true or none are registered,** it programmatically invokes the default back button functionality to exit the app. -:::warning Warning for modal users +:::warning[Warning for modal users] If your app shows an opened `Modal`, `BackHandler` will not publish any events ([see `Modal` docs](modal#onrequestclose)). ::: diff --git a/website/versioned_docs/version-0.84/building-for-tv.md b/website/versioned_docs/version-0.84/building-for-tv.md index b39f843a481..52430c91f74 100644 --- a/website/versioned_docs/version-0.84/building-for-tv.md +++ b/website/versioned_docs/version-0.84/building-for-tv.md @@ -6,6 +6,6 @@ hide_table_of_contents: true TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. -:::warning Deprecated +:::warning[Deprecated] TV support has moved to the [React Native for TV](https://github.com/react-native-tvos/react-native-tvos#readme) repository. Please see the **README** there for information on projects for Apple TV or Android TV. ::: diff --git a/website/versioned_docs/version-0.84/checkbox.md b/website/versioned_docs/version-0.84/checkbox.md index 0a85111a8ae..e92591defd5 100644 --- a/website/versioned_docs/version-0.84/checkbox.md +++ b/website/versioned_docs/version-0.84/checkbox.md @@ -3,6 +3,6 @@ id: checkbox title: '❌ CheckBox' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=checkbox) instead. ::: diff --git a/website/versioned_docs/version-0.84/clipboard.md b/website/versioned_docs/version-0.84/clipboard.md index 2e67bf9ba5a..bcfbf8714d9 100644 --- a/website/versioned_docs/version-0.84/clipboard.md +++ b/website/versioned_docs/version-0.84/clipboard.md @@ -3,6 +3,6 @@ id: clipboard title: '❌ Clipboard' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=clipboard) instead. ::: diff --git a/website/versioned_docs/version-0.84/datepickerandroid.md b/website/versioned_docs/version-0.84/datepickerandroid.md index d837b48b957..c928fdffee6 100644 --- a/website/versioned_docs/version-0.84/datepickerandroid.md +++ b/website/versioned_docs/version-0.84/datepickerandroid.md @@ -3,6 +3,6 @@ id: datepickerandroid title: '❌ DatePickerAndroid' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead. ::: diff --git a/website/versioned_docs/version-0.84/datepickerios.md b/website/versioned_docs/version-0.84/datepickerios.md index 0e536ffa686..7965ec05c3a 100644 --- a/website/versioned_docs/version-0.84/datepickerios.md +++ b/website/versioned_docs/version-0.84/datepickerios.md @@ -3,6 +3,6 @@ id: datepickerios title: '❌ DatePickerIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead. ::: diff --git a/website/versioned_docs/version-0.84/global-PerformanceEventTiming.md b/website/versioned_docs/version-0.84/global-PerformanceEventTiming.md index e28106b390e..5e30f206cc2 100644 --- a/website/versioned_docs/version-0.84/global-PerformanceEventTiming.md +++ b/website/versioned_docs/version-0.84/global-PerformanceEventTiming.md @@ -5,6 +5,6 @@ title: PerformanceEventTiming The global [`PerformanceEventTiming`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEventTiming) class, as defined in Web specifications. -:::warning Partial support +:::warning[Partial support] The `cancelable` and `target` properties are not supported yet. ::: diff --git a/website/versioned_docs/version-0.84/global-PerformanceLongTaskTiming.md b/website/versioned_docs/version-0.84/global-PerformanceLongTaskTiming.md index c951fcc18f4..9e202636e70 100644 --- a/website/versioned_docs/version-0.84/global-PerformanceLongTaskTiming.md +++ b/website/versioned_docs/version-0.84/global-PerformanceLongTaskTiming.md @@ -5,6 +5,6 @@ title: PerformanceLongTaskTiming The global [`PerformanceLongTaskTiming`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceLongTaskTiming) class, as defined in Web specifications. -:::warning Partial support +:::warning[Partial support] The value for the `attribution` property is always an empty array. ::: diff --git a/website/versioned_docs/version-0.84/global-PerformanceResourceTiming.md b/website/versioned_docs/version-0.84/global-PerformanceResourceTiming.md index 60da4656aeb..6575d928cfe 100644 --- a/website/versioned_docs/version-0.84/global-PerformanceResourceTiming.md +++ b/website/versioned_docs/version-0.84/global-PerformanceResourceTiming.md @@ -5,7 +5,7 @@ title: PerformanceResourceTiming The global [`PerformanceResourceTiming`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming) class, as defined in Web specifications. -:::warning Partial support +:::warning[Partial support] React Native implements the following `PerformanceResourceTiming` properties only: diff --git a/website/versioned_docs/version-0.84/global-intersectionobserver.md b/website/versioned_docs/version-0.84/global-intersectionobserver.md index 24b8672dfd1..afa3dc70053 100644 --- a/website/versioned_docs/version-0.84/global-intersectionobserver.md +++ b/website/versioned_docs/version-0.84/global-intersectionobserver.md @@ -61,7 +61,7 @@ An offset rectangle applied to the root's bounding box when calculating intersec ### `rnRootThresholds` ⚠️ -:::warning Non-standard +:::warning[Non-standard] This is a React Native specific extension. ::: diff --git a/website/versioned_docs/version-0.84/global-intersectionobserverentry.md b/website/versioned_docs/version-0.84/global-intersectionobserverentry.md index 656be66b744..67729c711bb 100644 --- a/website/versioned_docs/version-0.84/global-intersectionobserverentry.md +++ b/website/versioned_docs/version-0.84/global-intersectionobserverentry.md @@ -43,7 +43,7 @@ A Boolean value which is `true` if the target element intersects with the inters ### `rnRootIntersectionRatio` ⚠️ -:::warning Non-standard +:::warning[Non-standard] This is a React Native specific extension. ::: diff --git a/website/versioned_docs/version-0.84/global-performance.md b/website/versioned_docs/version-0.84/global-performance.md index 488f55020ef..073576056e5 100644 --- a/website/versioned_docs/version-0.84/global-performance.md +++ b/website/versioned_docs/version-0.84/global-performance.md @@ -21,7 +21,7 @@ See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/Perf ### `rnStartupTiming` ⚠️ -:::warning Non-standard +:::warning[Non-standard] This is a React Native specific extension. ::: @@ -41,7 +41,7 @@ The `ReactNativeStartupTiming` interface provides the following fields: ### `timeOrigin` -:::warning Partial support +:::warning[Partial support] Provides the number of milliseconds from the UNIX epoch until system boot, instead of the number of milliseconds from the UNIX epoch until app startup. ::: @@ -79,7 +79,7 @@ See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/Perf ### `now()` -:::warning Partial support +:::warning[Partial support] Provides the number of milliseconds from system boot, instead of the number of milliseconds from app startup. ::: diff --git a/website/versioned_docs/version-0.84/imagepickerios.md b/website/versioned_docs/version-0.84/imagepickerios.md index d4749216253..ca5814e8677 100644 --- a/website/versioned_docs/version-0.84/imagepickerios.md +++ b/website/versioned_docs/version-0.84/imagepickerios.md @@ -3,6 +3,6 @@ id: imagepickerios title: '❌ ImagePickerIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=image+picker) instead. ::: diff --git a/website/versioned_docs/version-0.84/integration-with-android-fragment.md b/website/versioned_docs/version-0.84/integration-with-android-fragment.md index e9c385b3eb1..99e69c2ba8f 100644 --- a/website/versioned_docs/version-0.84/integration-with-android-fragment.md +++ b/website/versioned_docs/version-0.84/integration-with-android-fragment.md @@ -33,7 +33,7 @@ This is required by React Native to handle the back button press event. Go into your host activity and make sure it implements the `DefaultHardwareBackBtnHandler` interface: -:::warning Deprecated +:::warning[Deprecated] `Activity.onBackPressed()` has been [deprecated]() since API level 33. Android 16 devices with apps targeting API level 36 this will [no longer be called](https://developer.android.com/about/versions/16/behavior-changes-16#predictive-back) and [OnBackPressedDispatcher](https://developer.android.com/reference/androidx/activity/OnBackPressedDispatcher) should be used instead. ::: diff --git a/website/versioned_docs/version-0.84/interactionmanager.md b/website/versioned_docs/version-0.84/interactionmanager.md index 8eac16a4b70..f1851c75212 100644 --- a/website/versioned_docs/version-0.84/interactionmanager.md +++ b/website/versioned_docs/version-0.84/interactionmanager.md @@ -5,7 +5,7 @@ title: 🗑️ InteractionManager import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; -:::warning Deprecated +:::warning[Deprecated] Avoid long-running work and use [`requestIdleCallback`](global-requestIdleCallback) instead. ::: diff --git a/website/versioned_docs/version-0.84/legacy/native-modules-ios.md b/website/versioned_docs/version-0.84/legacy/native-modules-ios.md index fb3303985bb..6c33c64ec75 100644 --- a/website/versioned_docs/version-0.84/legacy/native-modules-ios.md +++ b/website/versioned_docs/version-0.84/legacy/native-modules-ios.md @@ -551,7 +551,7 @@ RCT_EXPORT_METHOD(doSomethingExpensive:(NSString *)param callback:(RCTResponseSe ``` -:::info Sharing dispatch queues between modules +:::info[Sharing dispatch queues between modules] The `methodQueue` method will be called once when the module is initialized, and then retained by React Native, so there is no need to keep a reference to the queue yourself, unless you wish to make use of it within your module. However, if you wish to share the same queue between multiple modules then you will need to ensure that you retain and return the same queue instance for each of them. ::: diff --git a/website/versioned_docs/version-0.84/metro.md b/website/versioned_docs/version-0.84/metro.md deleted file mode 100644 index a61962a5512..00000000000 --- a/website/versioned_docs/version-0.84/metro.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: metro -title: Metro ---- - -React Native uses [Metro](https://metrobundler.dev/) to build your JavaScript code and assets. - -## Configuring Metro - -Configuration options for Metro can be customized in your project's `metro.config.js` file. This can export either: - -- **An object (recommended)** that will be merged on top of Metro's internal config defaults. -- [**A function**](#advanced-using-a-config-function) that will be called with Metro's internal config defaults and should return a final config object. - -:::tip -Please see [**Configuring Metro**](https://metrobundler.dev/docs/configuration) on the Metro website for documentation on all available config options. -::: - -In React Native, your Metro config should extend either [`@react-native/metro-config`](https://www.npmjs.com/package/@react-native/metro-config) or [`@expo/metro-config`](https://www.npmjs.com/package/@expo/metro-config). These packages contain essential defaults necessary to build and run React Native apps. - -Below is the default `metro.config.js` file in a React Native template project: - - -```js -const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); - -/** - * Metro configuration - * https://metrobundler.dev/docs/configuration - * - * @type {import('metro-config').MetroConfig} - */ -const config = {}; - -module.exports = mergeConfig(getDefaultConfig(__dirname), config); -``` - -Metro options you wish to customize can be done so within the `config` object. - -### Advanced: Using a config function - -Exporting a config function is an opt-in to managing the final config yourself — **Metro will not apply any internal defaults**. This pattern can be useful when needing to read the base default config object from Metro or to set options dynamically. - -:::info -**From `@react-native/metro-config` 0.72.1**, it is no longer necessary to use a config function to access the complete default config. See the **Tip** section below. -::: - - -```js -const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); - -module.exports = function (baseConfig) { - const defaultConfig = mergeConfig(baseConfig, getDefaultConfig(__dirname)); - const {resolver: {assetExts, sourceExts}} = defaultConfig; - - return mergeConfig( - defaultConfig, - { - resolver: { - assetExts: assetExts.filter(ext => ext !== 'svg'), - sourceExts: [...sourceExts, 'svg'], - }, - }, - ); -}; -``` - -:::tip -Using a config function is for advanced use cases. A simpler method than the above, e.g. for customising `sourceExts`, would be to read these defaults from `@react-native/metro-config`. - -**Alternative** - - -```js -const defaultConfig = getDefaultConfig(__dirname); - -const config = { - resolver: { - sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'], - }, -}; - -module.exports = mergeConfig(defaultConfig, config); -``` - -**However!**, we recommend copying and editing when overriding these config values — placing the source of truth in your config file. - -✅ **Recommended** - - -```js -const config = { - resolver: { - sourceExts: ['js', 'ts', 'tsx', 'svg'], - }, -}; -``` - -::: - -## Learn more about Metro - -- [Metro website](https://metrobundler.dev/) -- [Video: "Metro & React Native DevX" talk at App.js 2023](https://www.youtube.com/watch?v=c9D4pg0y9cI) diff --git a/website/versioned_docs/version-0.84/metro.mdx b/website/versioned_docs/version-0.84/metro.mdx new file mode 100644 index 00000000000..dd9d297e77a --- /dev/null +++ b/website/versioned_docs/version-0.84/metro.mdx @@ -0,0 +1,112 @@ +--- +id: metro +title: Metro +--- + +React Native uses [Metro](https://metrobundler.dev/) to build your JavaScript code and assets. + +## Configuring Metro + +Configuration options for Metro can be customized in your project's `metro.config.js` file. This can export either: + +- **An object (recommended)** that will be merged on top of Metro's internal config defaults. +- [**A function**](#advanced-using-a-config-function) that will be called with Metro's internal config defaults and should return a final config object. + +:::tip +Please see [**Configuring Metro**](https://metrobundler.dev/docs/configuration) on the Metro website for documentation on all available config options. +::: + +In React Native, your Metro config should extend either [`@react-native/metro-config`](https://www.npmjs.com/package/@react-native/metro-config) or [`@expo/metro-config`](https://www.npmjs.com/package/@expo/metro-config). These packages contain essential defaults necessary to build and run React Native apps. + +Below is the default `metro.config.js` file in a React Native template project: + +{/* prettier-ignore */} +```js +const { + getDefaultConfig, + mergeConfig, +} = require('@react-native/metro-config'); + +/** + * Metro configuration + * https://metrobundler.dev/docs/configuration + * + * @type {import('metro-config').MetroConfig} + */ +const config = {}; + +module.exports = mergeConfig(getDefaultConfig(__dirname), config); +``` + +Metro options you wish to customize can be done so within the `config` object. + +### Advanced: Using a config function + +Exporting a config function is an opt-in to managing the final config yourself — **Metro will not apply any internal defaults**. This pattern can be useful when needing to read the base default config object from Metro or to set options dynamically. + +:::info +**From `@react-native/metro-config` 0.72.1**, it is no longer necessary to use a config function to access the complete default config. See the **Tip** section below. +::: + +{/* prettier-ignore */} +```js +const { + getDefaultConfig, + mergeConfig, +} = require('@react-native/metro-config'); + +module.exports = function (baseConfig) { + const defaultConfig = mergeConfig( + baseConfig, + getDefaultConfig(__dirname), + ); + const { + resolver: {assetExts, sourceExts}, + } = defaultConfig; + + return mergeConfig(defaultConfig, { + resolver: { + assetExts: assetExts.filter(ext => ext !== 'svg'), + sourceExts: [...sourceExts, 'svg'], + }, + }); +}; +``` + +:::tip +Using a config function is for advanced use cases. A simpler method than the above, e.g. for customising `sourceExts`, would be to read these defaults from `@react-native/metro-config`. + +**Alternative** + +{/* prettier-ignore */} +```js +const defaultConfig = getDefaultConfig(__dirname); + +const config = { + resolver: { + sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'], + }, +}; + +module.exports = mergeConfig(defaultConfig, config); +``` + +**However!**, we recommend copying and editing when overriding these config values — placing the source of truth in your config file. + +✅ **Recommended** + +{/* prettier-ignore */} +```js +const config = { + resolver: { + sourceExts: ['js', 'ts', 'tsx', 'svg'], + }, +}; +``` + +::: + +## Learn more about Metro + +- [Metro website](https://metrobundler.dev/) +- [Video: "Metro & React Native DevX" talk at App.js 2023](https://www.youtube.com/watch?v=c9D4pg0y9cI) diff --git a/website/versioned_docs/version-0.84/modal.md b/website/versioned_docs/version-0.84/modal.md index d4c8fbde55c..ca04a4cdc8a 100644 --- a/website/versioned_docs/version-0.84/modal.md +++ b/website/versioned_docs/version-0.84/modal.md @@ -106,7 +106,7 @@ Inherits [View Props](view.md#props). ### 🗑️ `animated` -:::warning Deprecated +:::warning[Deprecated] Use the [`animationType`](modal.md#animationtype) prop instead. ::: diff --git a/website/versioned_docs/version-0.84/network.md b/website/versioned_docs/version-0.84/network.md index 1a46e514377..c002f9fc9ba 100644 --- a/website/versioned_docs/version-0.84/network.md +++ b/website/versioned_docs/version-0.84/network.md @@ -217,7 +217,7 @@ request.open('GET', 'https://mywebsite.com/endpoint/'); request.send(); ``` -:::warning Caution +:::warning[Caution] The security model for XMLHttpRequest is different than on web as there is no concept of [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) in native apps. ::: diff --git a/website/versioned_docs/version-0.84/other-debugging-methods.md b/website/versioned_docs/version-0.84/other-debugging-methods.md index 28b13d1e087..5df989acefc 100644 --- a/website/versioned_docs/version-0.84/other-debugging-methods.md +++ b/website/versioned_docs/version-0.84/other-debugging-methods.md @@ -27,7 +27,7 @@ Every time the app is reloaded, a new JSContext is created. Choosing "Automatica ## Remote JavaScript Debugging (removed) -:::warning Important +:::warning[Important] Remote JavaScript Debugging has been removed as of React Native 0.79. See the original [deprecation announcement](https://github.com/react-native-community/discussions-and-proposals/discussions/734). If you are on an older version of React Native, please go to the docs [for your version](/versions). diff --git a/website/versioned_docs/version-0.84/profiling.md b/website/versioned_docs/version-0.84/profiling.md index f833a4440c2..73cbed73ad1 100644 --- a/website/versioned_docs/version-0.84/profiling.md +++ b/website/versioned_docs/version-0.84/profiling.md @@ -33,13 +33,13 @@ After opening the trace in Android Studio or Perfetto, you should see something ![Example](/docs/assets/SystraceExample.png) -:::note Hint +:::note[Hint] Use the WASD keys to strafe and zoom. ::: The exact UI might be different but the instructions below will apply regardless of the tool you're using. -:::info Enable VSync highlighting +:::info[Enable VSync highlighting] Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries: ![Enable VSync Highlighting](/docs/assets/SystraceHighlightVSync.png) @@ -133,7 +133,7 @@ There isn't a quick way to mitigate this unless you're able to postpone creating If the problem seems to be on the native side, you can use the [CPU hotspot profiler](https://developer.android.com/studio/profile/record-java-kotlin-methods) to get more details on what's happening. Open the Android Studio Profiler panel and select "Find CPU Hotspots (Java/Kotlin Method Recording)". -:::info Choose the Java/Kotlin recording +:::info[Choose the Java/Kotlin recording] Make sure you select "Find CPU Hotspots **(Java/Kotlin Recording)**" rather than "Find CPU Hotspots (Callstack Sample)". They have similar icons but do different things. ::: diff --git a/website/versioned_docs/version-0.84/progressbarandroid.md b/website/versioned_docs/version-0.84/progressbarandroid.md index 4f165d86c46..d26fb2038d6 100644 --- a/website/versioned_docs/version-0.84/progressbarandroid.md +++ b/website/versioned_docs/version-0.84/progressbarandroid.md @@ -3,7 +3,7 @@ id: progressbarandroid title: '🗑️ ProgressBarAndroid' --- -:::warning Deprecated +:::warning[Deprecated] Use one of the [community packages](https://reactnative.directory/?search=progressbar) instead. ::: diff --git a/website/versioned_docs/version-0.84/pushnotificationios.md b/website/versioned_docs/version-0.84/pushnotificationios.md index 0cdecf3180a..c42d3a28193 100644 --- a/website/versioned_docs/version-0.84/pushnotificationios.md +++ b/website/versioned_docs/version-0.84/pushnotificationios.md @@ -3,7 +3,7 @@ id: pushnotificationios title: '🗑️ PushNotificationIOS' --- -:::warning Deprecated +:::warning[Deprecated] Use one of the [community packages](https://reactnative.directory/?search=notification) instead. ::: diff --git a/website/versioned_docs/version-0.84/safeareaview.md b/website/versioned_docs/version-0.84/safeareaview.md index fd0d2d479c3..8da4485ff12 100644 --- a/website/versioned_docs/version-0.84/safeareaview.md +++ b/website/versioned_docs/version-0.84/safeareaview.md @@ -3,7 +3,7 @@ id: safeareaview title: '🗑️ SafeAreaView' --- -:::warning Deprecated +:::warning[Deprecated] Use [react-native-safe-area-context](https://github.com/AppAndFlow/react-native-safe-area-context) instead. ::: diff --git a/website/versioned_docs/version-0.84/security.md b/website/versioned_docs/version-0.84/security.md index bf8ed1ff5d4..7a6c1bf150e 100644 --- a/website/versioned_docs/version-0.84/security.md +++ b/website/versioned_docs/version-0.84/security.md @@ -68,7 +68,7 @@ In order to use iOS Keychain services or Android Secure Shared Preferences, you - [expo-secure-store](https://docs.expo.dev/versions/latest/sdk/securestore/) - [react-native-keychain](https://github.com/oblador/react-native-keychain) -:::warning Caution +:::warning[Caution] **Be mindful of unintentionally storing or exposing sensitive info.** This could happen accidentally, for example saving sensitive form data in redux state and persisting the whole state tree in Async Storage. Or sending user tokens and personal info to an application monitoring service such as Sentry or Crashlytics. ::: @@ -127,7 +127,7 @@ Using https endpoints could still leave your data vulnerable to interception. Wi **SSL pinning** is a technique that can be used on the client side to avoid this attack. It works by embedding (or pinning) a list of trusted certificates to the client during development, so that only the requests signed with one of the trusted certificates will be accepted, and any self-signed certificates will not be. -:::warning Caution +:::warning[Caution] When using SSL pinning, you should be mindful of certificate expiry. Certificates expire every 1-2 years and when one does, it’ll need to be updated in the app as well as on the server. As soon as the certificate on the server has been updated, any apps with the old certificate embedded in them will cease to work. ::: diff --git a/website/versioned_docs/version-0.84/segmentedcontrolios.md b/website/versioned_docs/version-0.84/segmentedcontrolios.md index bab15ae9ba1..d9ede6e35e8 100644 --- a/website/versioned_docs/version-0.84/segmentedcontrolios.md +++ b/website/versioned_docs/version-0.84/segmentedcontrolios.md @@ -3,7 +3,7 @@ id: segmentedcontrolios title: '❌ SegmentedControlIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=segmentedcontrol) instead. ::: diff --git a/website/versioned_docs/version-0.84/signed-apk-android.md b/website/versioned_docs/version-0.84/signed-apk-android.md index d51ecd67bbe..c5158f4aab0 100644 --- a/website/versioned_docs/version-0.84/signed-apk-android.md +++ b/website/versioned_docs/version-0.84/signed-apk-android.md @@ -65,11 +65,11 @@ MYAPP_UPLOAD_KEY_PASSWORD=***** These are going to be global Gradle variables, which we can later use in our Gradle config to sign our app. -:::note Note about using git +:::note[Note about using git] Saving the above Gradle variables in `~/.gradle/gradle.properties` instead of `android/gradle.properties` prevents them from being checked in to git. You may have to create the `~/.gradle/gradle.properties` file in your user's home directory before you can add the variables. ::: -:::note Note about security +:::note[Note about security] If you are not keen on storing your passwords in plaintext, and you are running macOS, you can also [store your credentials in the Keychain Access app](https://pilloxa.gitlab.io/posts/safer-passwords-in-gradle/). Then you can skip the two last rows in `~/.gradle/gradle.properties`. ::: @@ -174,7 +174,7 @@ Please note that you will also have to configure distinct version codes, as [sug Proguard is a tool that can slightly reduce the size of the APK. It does this by stripping parts of the React Native Java bytecode (and its dependencies) that your app is not using. -:::caution Important +:::caution[Important] Make sure to thoroughly test your app if you've enabled Proguard. Proguard often requires configuration specific to each native library you're using. See `app/proguard-rules.pro`. ::: diff --git a/website/versioned_docs/version-0.84/statusbar.md b/website/versioned_docs/version-0.84/statusbar.md index 6345e7bf4ef..93810f7b0e0 100644 --- a/website/versioned_docs/version-0.84/statusbar.md +++ b/website/versioned_docs/version-0.84/statusbar.md @@ -440,7 +440,7 @@ Show or hide the status bar. ### 🗑️ `setNetworkActivityIndicatorVisible()`
iOS
-:::warning Deprecated +:::warning[Deprecated] The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release. ::: diff --git a/website/versioned_docs/version-0.84/statusbarios.md b/website/versioned_docs/version-0.84/statusbarios.md index 67ae7994778..2b17ba436a2 100644 --- a/website/versioned_docs/version-0.84/statusbarios.md +++ b/website/versioned_docs/version-0.84/statusbarios.md @@ -3,7 +3,7 @@ id: statusbarios title: '❌ StatusBarIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use [`StatusBar`](statusbar.md) for mutating the status bar. ::: diff --git a/website/versioned_docs/version-0.84/strict-typescript-api.md b/website/versioned_docs/version-0.84/strict-typescript-api.md index 4223527eeab..a426511835b 100644 --- a/website/versioned_docs/version-0.84/strict-typescript-api.md +++ b/website/versioned_docs/version-0.84/strict-typescript-api.md @@ -32,7 +32,7 @@ Opting in is a **breaking change**, since some of our new types have updated nam } ``` -:::note Under the hood +:::note[Under the hood] This will instruct TypeScript to resolve `react-native` types from our new [`types_generated/`](https://www.npmjs.com/package/react-native?activeTab=code) dir, instead of the previous [`types/`](https://www.npmjs.com/package/react-native?activeTab=code) dir (manually maintained). No restart of TypeScript or your editor is required. @@ -40,7 +40,7 @@ This will instruct TypeScript to resolve `react-native` types from our new [`typ The Strict TypeScript API follows our [RFC](https://github.com/react-native-community/discussions-and-proposals/pull/894) to remove deep imports from React Native. Therefore, some APIs are no longer exported at root. This is intentional, in order to reduce the overall surface area of React Native's API. -:::tip API feedback +:::tip[API feedback] **Sending feedback**: We will be working with the community to finalize which APIs we export over (at least) the next two React Native releases. Please share your feedback in our [feedback thread](https://github.com/react-native-community/discussions-and-proposals/discussions/893). diff --git a/website/versioned_docs/version-0.84/stylesheet.md b/website/versioned_docs/version-0.84/stylesheet.md index 62f32c8f805..e5e9283bc59 100644 --- a/website/versioned_docs/version-0.84/stylesheet.md +++ b/website/versioned_docs/version-0.84/stylesheet.md @@ -174,7 +174,7 @@ export default App; ### `setStyleAttributePreprocessor()` -:::warning Experimental +:::warning[Experimental] Breaking changes will probably happen a lot and will not be reliably announced. The whole thing might be deleted, who knows? Use at your own risk. ::: diff --git a/website/versioned_docs/version-0.84/textinput.md b/website/versioned_docs/version-0.84/textinput.md index c1d62e96278..e6b91315ff2 100644 --- a/website/versioned_docs/version-0.84/textinput.md +++ b/website/versioned_docs/version-0.84/textinput.md @@ -238,7 +238,7 @@ If `true`, focuses the input. The default value is `false`. ### 🗑️ `blurOnSubmit` -:::warning Deprecated +:::warning[Deprecated] Note that `submitBehavior` now takes the place of `blurOnSubmit` and will override any behavior defined by `blurOnSubmit`. See [submitBehavior](textinput#submitbehavior). ::: diff --git a/website/versioned_docs/version-0.84/the-new-architecture/create-module-library.md b/website/versioned_docs/version-0.84/the-new-architecture/create-module-library.md deleted file mode 100644 index 657ef9441bd..00000000000 --- a/website/versioned_docs/version-0.84/the-new-architecture/create-module-library.md +++ /dev/null @@ -1,192 +0,0 @@ -# Create a Library for Your Module - -React Native has a rich ecosystem of libraries to solve common problems. We collect React Native libraries in the [reactnative.directory](https://reactnative.directory) website, and this is a great resource to bookmark for every React Native developer. - -Sometimes, you might be working on a module that is worth extracting in a separate library for code reuse. This can be a library that you want to reuse in all your apps, a library that you want to distribute to the ecosystem as an open source component, or even a library you'd like to sell. - -In this guide, you'll learn: - -- how to extract a module into a library -- how to distribute the library using NPM - -## Extract the Module into a Library - -You can use the [`create-react-native-library`](https://callstack.github.io/react-native-builder-bob/create) tool to create a new library. This tool sets up a new library with all the boilerplate code that is needed: all the configuration files and all files required by the various platforms. It also comes with a nice interactive menu to guide you through the creation of the library. - -To extract a module into a separate library, you can follow these steps: - -1. Create the new library -2. Move the code from the App to the Library -3. Update the code to reflect the new structure -4. Publish it. - -### 1. Create a Library - -1. Start the creation process by running the command: - -```sh -npx create-react-native-library@latest -``` - -2. Add a name for your module. It must be a valid npm name, so it should be all lowercase. You can use `-` to separate words. -3. Add a description for the package. -4. Continue filling the form until you reach the question _"What type of library do you want to develop?"_ - ![What type of Library](/docs/assets/what-library.png) -5. For the sake of this guide, select the _Turbo module_ option. Notice that you can create libraries for both New Architecture and Legacy Architecture. -6. Then, you can choose whether you want a library that access the platform (Kotlin & Objective-C) or a shared C++ library (C++ for Android and iOS). -7. Finally, select the `Test App` as last option. This option creates the library with a separate app already configured within the library folder. - -Once the interactive prompt is done, the tool creates a folder whose structure looks like this in Visual Studio Code: - -Folder structure after initializing a new library. - -Feel free to explore the code that has been created for you. However, the most important parts: - -- The `android` folder: this is where the Android code lives -- The `cpp` folder: this is where the c++ code lives -- The `ios` folder: this is where the iOS code lives -- The `src` folder: this is where the JS code lives. - -The `package.json` is already configured with all the information that we provided to the `create-react-native-library` tool, including the name and the description of the package. Notice that the `package.json` is also already configured to run Codegen. - -```json - "codegenConfig": { - "name": "RNSpec", - "type": "all", - "jsSrcsDir": "src", - "outputDir": { - "ios": "ios/generated", - "android": "android/generated" - }, - "android": { - "javaPackageName": "com." - } - }, -``` - -Finally, the library contains already all the infrastructure to let the library be linked with iOS and Android. - -### 2. Copy the Code over from Your App - -The rest of the guide assumes that you have a local Turbo Native Module in your app, created following the guidelines shown in the other guides in the website: platform specific Turbo Native Modules, or [cross-platform Turbo Native Modules](./pure-cxx-modules). But it works also for Components and legacy architecture modules and components. You'll have to adapt the files you need to copy and update. - - - -1. **[Not required for legacy architecture modules and components]** Move the code you have in the `specs` folder in your app into the `src` folder created by the `create-react-native-library` folder. -2. Update the `index.ts` file to properly export the Turbo Native Module spec so that it is accessible from the library. For example: - -```ts -import NativeSampleModule from './NativeSampleModule'; - -export default NativeSampleModule; -``` - -3. Copy the native module over: - - Replace the code in the `android/src/main/java/com/` with the code you wrote in the app for your native module, if any. - - Replace the code in the `ios` folder with the code you wrote in your app for your native module, if any. - - Replace the code in the `cpp` folder with the code you wrote in your app for your native module, if any. - -4. **[Not required for legacy architecture modules and components]** Update all the references from the previous spec name to the new spec name, the one that is defined in the `codegenConfig` field of the library's `package.json`. For example, if in the app `package.json` you set `AppSpecs` as `codegenConfig.name` and in the library it is called `RNNativeSampleModuleSpec`, you have to replace every occurrence of `AppSpecs` with `RNNativeSampleModuleSpec`. - -That's it! You have moved all the required code out of your app and in a separate library. - -## Testing your Library - -The `create-react-native-library` comes with a useful example application that is already configured to work properly with the library. This is a great way to test it! - -If you look at the `example` folder, you can find the same structure of a new React Native application that you can create from the [`react-native-community/template`](https://github.com/react-native-community/template). - -To test your library: - -1. Navigate to the `example` folder. -2. Run `yarn install` to install all the dependencies. -3. For iOS only, you need to install CocoaPods: `cd ios && pod install`. -4. Build and run Android with `yarn android` from the `example` folder. -5. Build and run iOS with `yarn ios` from the `example` folder. - -## Use your library as a Local Module - -There are some scenario where you might want to reuse your library as a local module for your applications, without publishing it to NPM. - -In this case, you might end up in a scenario where you have your library sitting as a sibling of your apps. - -```shell -Development -├── App -└── Library -``` - -You can use the library created with `create-react-native-library` also in this case. - -1. add you library to your app by navigating into the `App` folder and running `yarn add ../Library`. -2. For iOS only, navigate in the `App/ios` folder and run `bundle exec pod install` to install your dependencies. -3. Update the `App.tsx` code to import the code in your library. For example: - -```tsx -import NativeSampleModule from '../Library/src/index'; -``` - -If you run your app right now, Metro would not find the JS files that it needs to serve to the app. That's because metro will be running starting from the `App` folder and it would not have access to the JS files located in the `Library` folder. To fix this, let's update the `metro.config.js` file as it follows - -```diff -const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); - -/** - * Metro configuration - * https://reactnative.dev/docs/metro - * - * @type {import('metro-config').MetroConfig} - */ -+ const path = require('path'); - -- const config = {} -+ const config = { -+ // Make Metro able to resolve required external dependencies -+ watchFolders: [ -+ path.resolve(__dirname, '../Library'), -+ ], -+ resolver: { -+ extraNodeModules: { -+ 'react-native': path.resolve(__dirname, 'node_modules/react-native'), -+ }, -+ }, -+}; - -module.exports = mergeConfig(getDefaultConfig(__dirname), config); -``` - -The `watchFolders` configs tells Metro to watch for files and changes in some additional paths, in this case to the `../Library` path, which contains the `src/index` file you need. -The `resolver`property is required to feed to the library the React Native code used by the app. The library might refer and import code from React Native: without the additional resolver, the imports in the library will fail. - -At this point, you can build and run your app as usual: - -- Build and run Android with `yarn android` from the `example` folder. -- Build and run iOS with `yarn ios` from the `example` folder. - -## Publish the Library on NPM - -The setup to publish everything on NPM is already in place, thanks to `create-react-native-library`. - -1. Install the dependencies in your module `yarn install`. -2. Build the library running `yarn prepare`. -3. Release it with `yarn release`. - -After a while, you'll find your library on NPM. To verify that, run: - -```bash -npm view -``` - -where `package.name` is the `name` you set up in the `package.json` file during the initialization of the library. - -Now, you can install the library in your application by running: - -```bash -yarn add -``` - -:::note -For iOS only, whenever you install a new module with some native code, you have to reinstall CocoaPods, by running `bundle exec pod install` (recommended) or `pod install` if you are not using Ruby's Bundler (not recommended). -::: - -Congratulations! You published your first React Native library. diff --git a/website/versioned_docs/version-0.84/the-new-architecture/create-module-library.mdx b/website/versioned_docs/version-0.84/the-new-architecture/create-module-library.mdx new file mode 100644 index 00000000000..0a5091fab26 --- /dev/null +++ b/website/versioned_docs/version-0.84/the-new-architecture/create-module-library.mdx @@ -0,0 +1,196 @@ +# Create a Library for Your Module + +React Native has a rich ecosystem of libraries to solve common problems. We collect React Native libraries in the [reactnative.directory](https://reactnative.directory) website, and this is a great resource to bookmark for every React Native developer. + +Sometimes, you might be working on a module that is worth extracting in a separate library for code reuse. This can be a library that you want to reuse in all your apps, a library that you want to distribute to the ecosystem as an open source component, or even a library you'd like to sell. + +In this guide, you'll learn: + +- how to extract a module into a library +- how to distribute the library using NPM + +## Extract the Module into a Library + +You can use the [`create-react-native-library`](https://callstack.github.io/react-native-builder-bob/create) tool to create a new library. This tool sets up a new library with all the boilerplate code that is needed: all the configuration files and all files required by the various platforms. It also comes with a nice interactive menu to guide you through the creation of the library. + +To extract a module into a separate library, you can follow these steps: + +1. Create the new library +2. Move the code from the App to the Library +3. Update the code to reflect the new structure +4. Publish it. + +### 1. Create a Library + +1. Start the creation process by running the command: + +```sh +npx create-react-native-library@latest +``` + +2. Add a name for your module. It must be a valid npm name, so it should be all lowercase. You can use `-` to separate words. +3. Add a description for the package. +4. Continue filling the form until you reach the question _"What type of library do you want to develop?"_ + ![What type of Library](/docs/assets/what-library.png) +5. For the sake of this guide, select the _Turbo module_ option. Notice that you can create libraries for both New Architecture and Legacy Architecture. +6. Then, you can choose whether you want a library that access the platform (Kotlin & Objective-C) or a shared C++ library (C++ for Android and iOS). +7. Finally, select the `Test App` as last option. This option creates the library with a separate app already configured within the library folder. + +Once the interactive prompt is done, the tool creates a folder whose structure looks like this in Visual Studio Code: + +Folder structure after initializing a new library. + +Feel free to explore the code that has been created for you. However, the most important parts: + +- The `android` folder: this is where the Android code lives +- The `cpp` folder: this is where the c++ code lives +- The `ios` folder: this is where the iOS code lives +- The `src` folder: this is where the JS code lives. + +The `package.json` is already configured with all the information that we provided to the `create-react-native-library` tool, including the name and the description of the package. Notice that the `package.json` is also already configured to run Codegen. + +```json + "codegenConfig": { + "name": "RNSpec", + "type": "all", + "jsSrcsDir": "src", + "outputDir": { + "ios": "ios/generated", + "android": "android/generated" + }, + "android": { + "javaPackageName": "com." + } + }, +``` + +Finally, the library contains already all the infrastructure to let the library be linked with iOS and Android. + +### 2. Copy the Code over from Your App + +The rest of the guide assumes that you have a local Turbo Native Module in your app, created following the guidelines shown in the other guides in the website: platform specific Turbo Native Modules, or [cross-platform Turbo Native Modules](./pure-cxx-modules). But it works also for Components and legacy architecture modules and components. You'll have to adapt the files you need to copy and update. + +{/* TODO: add links for Turbo Native Modules */} + +1. **[Not required for legacy architecture modules and components]** Move the code you have in the `specs` folder in your app into the `src` folder created by the `create-react-native-library` folder. +2. Update the `index.ts` file to properly export the Turbo Native Module spec so that it is accessible from the library. For example: + +```ts +import NativeSampleModule from './NativeSampleModule'; + +export default NativeSampleModule; +``` + +3. Copy the native module over: + - Replace the code in the `android/src/main/java/com/` with the code you wrote in the app for your native module, if any. + - Replace the code in the `ios` folder with the code you wrote in your app for your native module, if any. + - Replace the code in the `cpp` folder with the code you wrote in your app for your native module, if any. + +4. **[Not required for legacy architecture modules and components]** Update all the references from the previous spec name to the new spec name, the one that is defined in the `codegenConfig` field of the library's `package.json`. For example, if in the app `package.json` you set `AppSpecs` as `codegenConfig.name` and in the library it is called `RNNativeSampleModuleSpec`, you have to replace every occurrence of `AppSpecs` with `RNNativeSampleModuleSpec`. + +That's it! You have moved all the required code out of your app and in a separate library. + +## Testing your Library + +The `create-react-native-library` comes with a useful example application that is already configured to work properly with the library. This is a great way to test it! + +If you look at the `example` folder, you can find the same structure of a new React Native application that you can create from the [`react-native-community/template`](https://github.com/react-native-community/template). + +To test your library: + +1. Navigate to the `example` folder. +2. Run `yarn install` to install all the dependencies. +3. For iOS only, you need to install CocoaPods: `cd ios && pod install`. +4. Build and run Android with `yarn android` from the `example` folder. +5. Build and run iOS with `yarn ios` from the `example` folder. + +## Use your library as a Local Module + +There are some scenario where you might want to reuse your library as a local module for your applications, without publishing it to NPM. + +In this case, you might end up in a scenario where you have your library sitting as a sibling of your apps. + +```shell +Development +├── App +└── Library +``` + +You can use the library created with `create-react-native-library` also in this case. + +1. add you library to your app by navigating into the `App` folder and running `yarn add ../Library`. +2. For iOS only, navigate in the `App/ios` folder and run `bundle exec pod install` to install your dependencies. +3. Update the `App.tsx` code to import the code in your library. For example: + +```tsx +import NativeSampleModule from '../Library/src/index'; +``` + +If you run your app right now, Metro would not find the JS files that it needs to serve to the app. That's because metro will be running starting from the `App` folder and it would not have access to the JS files located in the `Library` folder. To fix this, let's update the `metro.config.js` file as it follows + +```diff +const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); + +/** + * Metro configuration + * https://reactnative.dev/docs/metro + * + * @type {import('metro-config').MetroConfig} + */ ++ const path = require('path'); + +- const config = {} ++ const config = { ++ // Make Metro able to resolve required external dependencies ++ watchFolders: [ ++ path.resolve(__dirname, '../Library'), ++ ], ++ resolver: { ++ extraNodeModules: { ++ 'react-native': path.resolve(__dirname, 'node_modules/react-native'), ++ }, ++ }, ++}; + +module.exports = mergeConfig(getDefaultConfig(__dirname), config); +``` + +The `watchFolders` configs tells Metro to watch for files and changes in some additional paths, in this case to the `../Library` path, which contains the `src/index` file you need. +The `resolver`property is required to feed to the library the React Native code used by the app. The library might refer and import code from React Native: without the additional resolver, the imports in the library will fail. + +At this point, you can build and run your app as usual: + +- Build and run Android with `yarn android` from the `example` folder. +- Build and run iOS with `yarn ios` from the `example` folder. + +## Publish the Library on NPM + +The setup to publish everything on NPM is already in place, thanks to `create-react-native-library`. + +1. Install the dependencies in your module `yarn install`. +2. Build the library running `yarn prepare`. +3. Release it with `yarn release`. + +After a while, you'll find your library on NPM. To verify that, run: + +```bash +npm view +``` + +where `package.name` is the `name` you set up in the `package.json` file during the initialization of the library. + +Now, you can install the library in your application by running: + +```bash +yarn add +``` + +:::note +For iOS only, whenever you install a new module with some native code, you have to reinstall CocoaPods, by running `bundle exec pod install` (recommended) or `pod install` if you are not using Ruby's Bundler (not recommended). +::: + +Congratulations! You published your first React Native library. diff --git a/website/versioned_docs/version-0.84/the-new-architecture/pure-cxx-modules.md b/website/versioned_docs/version-0.84/the-new-architecture/pure-cxx-modules.md index 37fa505e53f..b7c08196290 100644 --- a/website/versioned_docs/version-0.84/the-new-architecture/pure-cxx-modules.md +++ b/website/versioned_docs/version-0.84/the-new-architecture/pure-cxx-modules.md @@ -72,7 +72,7 @@ export default TurboModuleRegistry.getEnforcing( ## 2. Configure Codegen -The next step is to configure [Codegen](what-is-codegen.md) in your `package.json`. Update the file to include: +The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include: ```json title="package.json" "start": "react-native start", diff --git a/website/versioned_docs/version-0.84/the-new-architecture/using-codegen.md b/website/versioned_docs/version-0.84/the-new-architecture/using-codegen.md deleted file mode 100644 index 56aca7b981c..00000000000 --- a/website/versioned_docs/version-0.84/the-new-architecture/using-codegen.md +++ /dev/null @@ -1,236 +0,0 @@ -import CodeBlock from '@theme/CodeBlock'; -import {getCurrentVersion} from '@site/src/getCurrentVersion'; - -# Using Codegen - -This guide teaches how to: - -- Configure **Codegen**. -- Invoke it manually for each platform. - -It also describes the generated code. - -## Prerequisites - -You always need a React Native app to generate the code properly, even when invoking the **Codegen** manually. - -The **Codegen** process is tightly coupled with the build of the app, and the scripts are located in the `react-native` NPM package. - -For the sake of this guide, create a project using the React Native CLI as follows: - - -{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`} - - -**Codegen** is used to generate the glue-code for your custom modules or components. See the guides for Turbo Native Modules and Fabric Native Components for more details on how to create them. - - - -## Configuring **Codegen** - -**Codegen** can be configured in your app by modifying the `package.json` file. **Codegen** is controlled by a custom field called `codegenConfig`. - -```json title="package.json" - "codegenConfig": { - "name": "", - "type": "", - "jsSrcsDir": "", - "android": { - "javaPackageName": "" - }, - "ios": { - "modules": { - "TestModule": { - "className": "", - "unstableRequiresMainQueueSetup": false, - "conformsToProtocols": ["RCTImageURLLoader", "RCTURLRequestHandler", "RCTImageDataDecoder"], - } - }, - "components": { - "TestComponent": { - "className": "" - } - } - } - }, -``` - -You can add this snippet to your app and customize the various fields: - -- `name:` Name of the codegen config. This will customize the codegen output: the filenames, and the code. -- `type:` - - `modules:` Only generate code for modules. - - `components:` Only generate code for components. - - `all`: Generate code for everything. -- `jsSrcsDir`: The root folder where all your specs live. -- `android`: Codegen configuration for Android (all optional): - - `.javaPackageName`: Configure the package name of the Android Java codegen output. -- `ios`: Codegen configuration for iOS (all optional): - - `.modules[moduleName]:` - - `.className`: This module's ObjC class. Or, if it's a [C++-only module](/docs/next/the-new-architecture/pure-cxx-modules), its `RCTModuleProvider` class. - - `.unstableRequiresMainQueueSetup`: Initialize this module on the UI Thread, before running any JavaScript. - - `.conformsToProtocols`: Annotate which of these protocols this module conforms to any of the following protocols: [`RCTImageURLLoader`](https://github.com/facebook/react-native/blob/00d5caee9921b6c10be8f7d5b3903c6afe8dbefa/packages/react-native/Libraries/Image/RCTImageURLLoader.h#L26-L81), [`RCTURLRequestHandler`](https://github.com/facebook/react-native/blob/00d5caee9921b6c10be8f7d5b3903c6afe8dbefa/packages/react-native/React/Base/RCTURLRequestHandler.h#L11-L52), [`RCTImageDataDecoder`](https://github.com/facebook/react-native/blob/00d5caee9921b6c10be8f7d5b3903c6afe8dbefa/packages/react-native/Libraries/Image/RCTImageDataDecoder.h#L15-L53). - - `.components[componentName]`: - - `.className`: This component's ObjC class (e.g: `TextInput` -> `RCTTextInput`). - -When **Codegen** runs, it searches among all the dependencies of the app, looking for JS files that respects some specific conventions, and it generates the required code: - -- Turbo Native Modules require that the spec files are prefixed with `Native`. For example, `NativeLocalStorage.ts` is a valid name for a spec file. -- Native Fabric Components require that the spec files are suffixed with `NativeComponent`. For example, `WebViewNativeComponent.ts` is a valid name for a spec file. - -## Running **Codegen** - -The rest of this guide assumes that you have a Native Turbo Module, a Native Fabric Component or both already set up in your project. We also assume that you have valid specification files in the `jsSrcsDir` specified in the `package.json`. - -### Android - -**Codegen** for Android is integrated with the React Native Gradle Plugin (RNGP). The RNGP contains a task that can be invoked that reads the configurations defined in the `package.json` file and execute **Codegen**. To run the gradle task, first navigate inside the `android` folder of your project. Then run: - -```bash -./gradlew generateCodegenArtifactsFromSchema -``` - -This task invokes the `generateCodegenArtifactsFromSchema` command on all the imported projects of the app (the app and all the node modules which are linked to it). It generates the code in the corresponding `node_modules/` folder. For example, if you have a Fabric Native Component whose Node module is called `my-fabric-component`, the generated code is located in the `SampleApp/node_modules/my-fabric-component/android/build/generated/source/codegen` path. For the app, the code is generated in the `android/app/build/generated/source/codegen` folder. - -#### The Generated Code - -After running the gradle command above, you will find the codegen code in the `SampleApp/android/app/build` folder. The structure will look like this: - -``` -build -└── generated - └── source - └── codegen - ├── java - │ └── com - │ ├── facebook - │ │ └── react - │ │ └── viewmanagers - │ │ ├── ManagerDelegate.java - │ │ └── ManagerInterface.java - │ └── sampleapp - │ └── NativeLocalStorageSpec.java - ├── jni - │ ├── -generated.cpp - │ ├── .h - │ ├── CMakeLists.txt - │ └── react - │ └── renderer - │ └── components - │ └── - │ ├── JSI-generated.cpp - │ ├── .h - │ ├── ComponentDescriptors.cpp - │ ├── ComponentDescriptors.h - │ ├── EventEmitters.cpp - │ ├── EventEmitters.h - │ ├── Props.cpp - │ ├── Props.h - │ ├── ShadowNodes.cpp - │ ├── ShadowNodes.h - │ ├── States.cpp - │ └── States.h - └── schema.json -``` - -The generated code is split in two folders: - -- `java` which contains the platform specific code -- `jni` which contains the C++ code required to let JS and Java interact correctly. - -In the `java` folder, you can find the Fabric Native component generated code in the `com/facebook/viewmanagers` subfolder. - -- the `ManagerDelegate.java` contains the methods that the `ViewManager` can call on the custom Native Component -- the `ManagerInterface.java` contains the interface of the `ViewManager`. - -In the folder whose name was set up in the `codegenConfig.android.javaPackageName`, instead, you can find the abstract class that a Turbo Native Module has to implement to carry out its tasks. - -In the `jni` folder, finally, there is all the boilerplate code to connect JS to Android. - -- `.h` this contains the interface of your custom C++ Turbo Native Modules. -- `-generated.cpp` this contains the glue code of your custom C++ Turbo Native Modules. -- `react/renderer/components/`: this folder contains all the glue-code required by your custom component. - -This structure has been generated by using the value `all` for the `codegenConfig.type` field. If you use the value `modules`, expect to see no `react/renderer/components/` folder. If you use the value `components`, expect not to see any of the other files. - -### iOS - -**Codegen** for iOS relies on some Node scripts that are invoked during the build process. The scripts are located in the `SampleApp/node_modules/react-native/scripts/` folder. - -The main script is the `generate-codegen-artifacts.js` script. To invoke the script, you can run this command from the root folder of your app: - -```bash -node node_modules/react-native/scripts/generate-codegen-artifacts.js - -Usage: generate-codegen-artifacts.js -p [path to app] -t [target platform] -o [output path] - -Options: - --help Show help [boolean] - --version Show version number [boolean] - -p, --path Path to the React Native project root. [required] - -t, --targetPlatform Target platform. Supported values: "android", "ios", - "all". [required] - -o, --outputPath Path where generated artifacts will be output to. -``` - -where: - -- `--path` is the path to the root folder of your app. -- `--outputPath` is the destination where **Codegen** will write the generated files. -- `--targetPlatform` is the platform you'd like to generate the code for. - -#### The Generated Code - -Running the script with these arguments: - -```shell -node node_modules/react-native/scripts/generate-codegen-artifacts.js \ - --path . \ - --outputPath ios/ \ - --targetPlatform ios -``` - -Will generate these files in the `ios/build` folder: - -``` -build -└── generated - └── ios - ├── - │ ├── -generated.mm - │ └── .h - ├── JSI-generated.cpp - ├── JSI.h - ├── FBReactNativeSpec - │ ├── FBReactNativeSpec-generated.mm - │ └── FBReactNativeSpec.h - ├── FBReactNativeSpecJSI-generated.cpp - ├── FBReactNativeSpecJSI.h - ├── RCTModulesConformingToProtocolsProvider.h - ├── RCTModulesConformingToProtocolsProvider.mm - └── react - └── renderer - └── components - └── - ├── ComponentDescriptors.cpp - ├── ComponentDescriptors.h - ├── EventEmitters.cpp - ├── EventEmitters.h - ├── Props.cpp - ├── Props.h - ├── RCTComponentViewHelpers.h - ├── ShadowNodes.cpp - ├── ShadowNodes.h - ├── States.cpp - └── States.h -``` - -Part of these generated files are used by React Native in the Core. Then there is a set of files which contains the same name you specified in the package.json `codegenConfig.name` field. - -- `/.h`: this contains the interface of your custom iOS Turbo Native Modules. -- `/-generated.mm`: this contains the glue code of your custom iOS Turbo Native Modules. -- `JSI.h`: this contains the interface of your custom C++ Turbo Native Modules. -- `JSI-generated.h`: this contains the glue code of your custom C++ Turbo Native Modules. -- `react/renderer/components/`: this folder contains all the glue-code required by your custom component. - -This structure has been generated by using the value `all` for the `codegenConfig.type` field. If you use the value `modules`, expect to see no `react/renderer/components/` folder. If you use the value `components`, expect not to see any of the other files. diff --git a/website/versioned_docs/version-0.84/the-new-architecture/using-codegen.mdx b/website/versioned_docs/version-0.84/the-new-architecture/using-codegen.mdx new file mode 100644 index 00000000000..49df503003f --- /dev/null +++ b/website/versioned_docs/version-0.84/the-new-architecture/using-codegen.mdx @@ -0,0 +1,236 @@ +import CodeBlock from '@theme/CodeBlock'; +import {getCurrentVersion} from '@site/src/getCurrentVersion'; + +# Using Codegen + +This guide teaches how to: + +- Configure **Codegen**. +- Invoke it manually for each platform. + +It also describes the generated code. + +## Prerequisites + +You always need a React Native app to generate the code properly, even when invoking the **Codegen** manually. + +The **Codegen** process is tightly coupled with the build of the app, and the scripts are located in the `react-native` NPM package. + +For the sake of this guide, create a project using the React Native CLI as follows: + + + {`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`} + + +**Codegen** is used to generate the glue-code for your custom modules or components. See the guides for Turbo Native Modules and Fabric Native Components for more details on how to create them. + +{/* TODO: add links */} + +## Configuring **Codegen** + +**Codegen** can be configured in your app by modifying the `package.json` file. **Codegen** is controlled by a custom field called `codegenConfig`. + +```json title="package.json" + "codegenConfig": { + "name": "", + "type": "", + "jsSrcsDir": "", + "android": { + "javaPackageName": "" + }, + "ios": { + "modules": { + "TestModule": { + "className": "", + "unstableRequiresMainQueueSetup": false, + "conformsToProtocols": ["RCTImageURLLoader", "RCTURLRequestHandler", "RCTImageDataDecoder"], + } + }, + "components": { + "TestComponent": { + "className": "" + } + } + } + }, +``` + +You can add this snippet to your app and customize the various fields: + +- `name:` Name of the codegen config. This will customize the codegen output: the filenames, and the code. +- `type:` + - `modules:` Only generate code for modules. + - `components:` Only generate code for components. + - `all`: Generate code for everything. +- `jsSrcsDir`: The root folder where all your specs live. +- `android`: Codegen configuration for Android (all optional): + - `.javaPackageName`: Configure the package name of the Android Java codegen output. +- `ios`: Codegen configuration for iOS (all optional): + - `.modules[moduleName]:` + - `.className`: This module's ObjC class. Or, if it's a [C++-only module](/docs/next/the-new-architecture/pure-cxx-modules), its `RCTModuleProvider` class. + - `.unstableRequiresMainQueueSetup`: Initialize this module on the UI Thread, before running any JavaScript. + - `.conformsToProtocols`: Annotate which of these protocols this module conforms to any of the following protocols: [`RCTImageURLLoader`](https://github.com/facebook/react-native/blob/00d5caee9921b6c10be8f7d5b3903c6afe8dbefa/packages/react-native/Libraries/Image/RCTImageURLLoader.h#L26-L81), [`RCTURLRequestHandler`](https://github.com/facebook/react-native/blob/00d5caee9921b6c10be8f7d5b3903c6afe8dbefa/packages/react-native/React/Base/RCTURLRequestHandler.h#L11-L52), [`RCTImageDataDecoder`](https://github.com/facebook/react-native/blob/00d5caee9921b6c10be8f7d5b3903c6afe8dbefa/packages/react-native/Libraries/Image/RCTImageDataDecoder.h#L15-L53). + - `.components[componentName]`: + - `.className`: This component's ObjC class (e.g: `TextInput` -> `RCTTextInput`). + +When **Codegen** runs, it searches among all the dependencies of the app, looking for JS files that respects some specific conventions, and it generates the required code: + +- Turbo Native Modules require that the spec files are prefixed with `Native`. For example, `NativeLocalStorage.ts` is a valid name for a spec file. +- Native Fabric Components require that the spec files are suffixed with `NativeComponent`. For example, `WebViewNativeComponent.ts` is a valid name for a spec file. + +## Running **Codegen** + +The rest of this guide assumes that you have a Native Turbo Module, a Native Fabric Component or both already set up in your project. We also assume that you have valid specification files in the `jsSrcsDir` specified in the `package.json`. + +### Android + +**Codegen** for Android is integrated with the React Native Gradle Plugin (RNGP). The RNGP contains a task that can be invoked that reads the configurations defined in the `package.json` file and execute **Codegen**. To run the gradle task, first navigate inside the `android` folder of your project. Then run: + +```bash +./gradlew generateCodegenArtifactsFromSchema +``` + +This task invokes the `generateCodegenArtifactsFromSchema` command on all the imported projects of the app (the app and all the node modules which are linked to it). It generates the code in the corresponding `node_modules/` folder. For example, if you have a Fabric Native Component whose Node module is called `my-fabric-component`, the generated code is located in the `SampleApp/node_modules/my-fabric-component/android/build/generated/source/codegen` path. For the app, the code is generated in the `android/app/build/generated/source/codegen` folder. + +#### The Generated Code + +After running the gradle command above, you will find the codegen code in the `SampleApp/android/app/build` folder. The structure will look like this: + +``` +build +└── generated + └── source + └── codegen + ├── java + │ └── com + │ ├── facebook + │ │ └── react + │ │ └── viewmanagers + │ │ ├── ManagerDelegate.java + │ │ └── ManagerInterface.java + │ └── sampleapp + │ └── NativeLocalStorageSpec.java + ├── jni + │ ├── -generated.cpp + │ ├── .h + │ ├── CMakeLists.txt + │ └── react + │ └── renderer + │ └── components + │ └── + │ ├── JSI-generated.cpp + │ ├── .h + │ ├── ComponentDescriptors.cpp + │ ├── ComponentDescriptors.h + │ ├── EventEmitters.cpp + │ ├── EventEmitters.h + │ ├── Props.cpp + │ ├── Props.h + │ ├── ShadowNodes.cpp + │ ├── ShadowNodes.h + │ ├── States.cpp + │ └── States.h + └── schema.json +``` + +The generated code is split in two folders: + +- `java` which contains the platform specific code +- `jni` which contains the C++ code required to let JS and Java interact correctly. + +In the `java` folder, you can find the Fabric Native component generated code in the `com/facebook/viewmanagers` subfolder. + +- the `ManagerDelegate.java` contains the methods that the `ViewManager` can call on the custom Native Component +- the `ManagerInterface.java` contains the interface of the `ViewManager`. + +In the folder whose name was set up in the `codegenConfig.android.javaPackageName`, instead, you can find the abstract class that a Turbo Native Module has to implement to carry out its tasks. + +In the `jni` folder, finally, there is all the boilerplate code to connect JS to Android. + +- `.h` this contains the interface of your custom C++ Turbo Native Modules. +- `-generated.cpp` this contains the glue code of your custom C++ Turbo Native Modules. +- `react/renderer/components/`: this folder contains all the glue-code required by your custom component. + +This structure has been generated by using the value `all` for the `codegenConfig.type` field. If you use the value `modules`, expect to see no `react/renderer/components/` folder. If you use the value `components`, expect not to see any of the other files. + +### iOS + +**Codegen** for iOS relies on some Node scripts that are invoked during the build process. The scripts are located in the `SampleApp/node_modules/react-native/scripts/` folder. + +The main script is the `generate-codegen-artifacts.js` script. To invoke the script, you can run this command from the root folder of your app: + +```bash +node node_modules/react-native/scripts/generate-codegen-artifacts.js + +Usage: generate-codegen-artifacts.js -p [path to app] -t [target platform] -o [output path] + +Options: + --help Show help [boolean] + --version Show version number [boolean] + -p, --path Path to the React Native project root. [required] + -t, --targetPlatform Target platform. Supported values: "android", "ios", + "all". [required] + -o, --outputPath Path where generated artifacts will be output to. +``` + +where: + +- `--path` is the path to the root folder of your app. +- `--outputPath` is the destination where **Codegen** will write the generated files. +- `--targetPlatform` is the platform you'd like to generate the code for. + +#### The Generated Code + +Running the script with these arguments: + +```shell +node node_modules/react-native/scripts/generate-codegen-artifacts.js \ + --path . \ + --outputPath ios/ \ + --targetPlatform ios +``` + +Will generate these files in the `ios/build` folder: + +``` +build +└── generated + └── ios + ├── + │ ├── -generated.mm + │ └── .h + ├── JSI-generated.cpp + ├── JSI.h + ├── FBReactNativeSpec + │ ├── FBReactNativeSpec-generated.mm + │ └── FBReactNativeSpec.h + ├── FBReactNativeSpecJSI-generated.cpp + ├── FBReactNativeSpecJSI.h + ├── RCTModulesConformingToProtocolsProvider.h + ├── RCTModulesConformingToProtocolsProvider.mm + └── react + └── renderer + └── components + └── + ├── ComponentDescriptors.cpp + ├── ComponentDescriptors.h + ├── EventEmitters.cpp + ├── EventEmitters.h + ├── Props.cpp + ├── Props.h + ├── RCTComponentViewHelpers.h + ├── ShadowNodes.cpp + ├── ShadowNodes.h + ├── States.cpp + └── States.h +``` + +Part of these generated files are used by React Native in the Core. Then there is a set of files which contains the same name you specified in the package.json `codegenConfig.name` field. + +- `/.h`: this contains the interface of your custom iOS Turbo Native Modules. +- `/-generated.mm`: this contains the glue code of your custom iOS Turbo Native Modules. +- `JSI.h`: this contains the interface of your custom C++ Turbo Native Modules. +- `JSI-generated.h`: this contains the glue code of your custom C++ Turbo Native Modules. +- `react/renderer/components/`: this folder contains all the glue-code required by your custom component. + +This structure has been generated by using the value `all` for the `codegenConfig.type` field. If you use the value `modules`, expect to see no `react/renderer/components/` folder. If you use the value `components`, expect not to see any of the other files. diff --git a/website/versioned_docs/version-0.84/the-new-architecture/what-is-codegen.md b/website/versioned_docs/version-0.84/the-new-architecture/what-is-codegen.md deleted file mode 100644 index bc9cc37e7e0..00000000000 --- a/website/versioned_docs/version-0.84/the-new-architecture/what-is-codegen.md +++ /dev/null @@ -1,15 +0,0 @@ -# What is Codegen? - -**Codegen** is a tool to avoid writing a lot of repetitive code. Using Codegen **is not mandatory**: you can write all the generated code manually. However, Codegen generates scaffolding code that could save you a lot of time. - -React Native invokes Codegen automatically every time an iOS or Android app is built. Occasionally, you would like to manually run the Codegen scripts to know which types and files are actually generated: this is a common scenario when developing [Turbo Native Modules](/docs/turbo-native-modules-introduction) and Fabric Native Components. - - - -## How Codegen Works - -**Codegen** is a process that is tightly coupled with a React Native app. The Codegen scripts live inside the `react-native` NPM package and the apps call those scripts at build time. - -Codegen crawls the folders in your project, starting from a directory you specify in your `package.json`, looking for some specific JS files that contain the specification (or specs) for your custom modules and components. Spec files are JS files written in a typed dialect: React Native currently supports Flow and TypeScript. - -Every time Codegen finds a spec file, it generates boilerplate code associated with it. Codegen generates some C++ glue-code and then it generates platform-specific code, using Java for Android and Objective-C++ for iOS. diff --git a/website/versioned_docs/version-0.84/the-new-architecture/what-is-codegen.mdx b/website/versioned_docs/version-0.84/the-new-architecture/what-is-codegen.mdx new file mode 100644 index 00000000000..717380c4df8 --- /dev/null +++ b/website/versioned_docs/version-0.84/the-new-architecture/what-is-codegen.mdx @@ -0,0 +1,15 @@ +# What is Codegen? + +**Codegen** is a tool to avoid writing a lot of repetitive code. Using Codegen **is not mandatory**: you can write all the generated code manually. However, Codegen generates scaffolding code that could save you a lot of time. + +React Native invokes Codegen automatically every time an iOS or Android app is built. Occasionally, you would like to manually run the Codegen scripts to know which types and files are actually generated: this is a common scenario when developing [Turbo Native Modules](/docs/turbo-native-modules-introduction) and Fabric Native Components. + +{/* TODO: Add links to TM and FC */} + +## How Codegen Works + +**Codegen** is a process that is tightly coupled with a React Native app. The Codegen scripts live inside the `react-native` NPM package and the apps call those scripts at build time. + +Codegen crawls the folders in your project, starting from a directory you specify in your `package.json`, looking for some specific JS files that contain the specification (or specs) for your custom modules and components. Spec files are JS files written in a typed dialect: React Native currently supports Flow and TypeScript. + +Every time Codegen finds a spec file, it generates boilerplate code associated with it. Codegen generates some C++ glue-code and then it generates platform-specific code, using Java for Android and Objective-C++ for iOS. diff --git a/website/versioned_docs/version-0.84/timepickerandroid.md b/website/versioned_docs/version-0.84/timepickerandroid.md index 29bf4573cef..f6c06c1b89e 100644 --- a/website/versioned_docs/version-0.84/timepickerandroid.md +++ b/website/versioned_docs/version-0.84/timepickerandroid.md @@ -3,6 +3,6 @@ id: timepickerandroid title: '❌ TimePickerAndroid' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=timepicker) instead. ::: diff --git a/website/versioned_docs/version-0.84/timers.md b/website/versioned_docs/version-0.84/timers.md index bf0041d09b4..87eaf1f3f80 100644 --- a/website/versioned_docs/version-0.84/timers.md +++ b/website/versioned_docs/version-0.84/timers.md @@ -25,7 +25,7 @@ Please correct this by running ``adb shell "date `date +%m%d%H%M%Y.%S%3N`"`` on ## InteractionManager -:::warning Deprecated +:::warning[Deprecated] The `InteractionManager` behavior has been changed to be the same as `setImmediate`, which should be used instead. ::: diff --git a/website/versioned_docs/version-0.84/transforms.md b/website/versioned_docs/version-0.84/transforms.md index 92a75671719..364ba3a6873 100644 --- a/website/versioned_docs/version-0.84/transforms.md +++ b/website/versioned_docs/version-0.84/transforms.md @@ -268,7 +268,7 @@ Matrix transforms are useful when you need to apply pre-calculated transformatio ### 🗑️ `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY` -:::warning Deprecated +:::warning[Deprecated] Use the [`transform`](transforms#transform) prop instead. ::: diff --git a/website/versioned_docs/version-0.84/turbo-native-modules-android.md b/website/versioned_docs/version-0.84/turbo-native-modules-android.md index 21fbd7703e1..83d922f9918 100644 --- a/website/versioned_docs/version-0.84/turbo-native-modules-android.md +++ b/website/versioned_docs/version-0.84/turbo-native-modules-android.md @@ -206,7 +206,7 @@ Finally, we need to tell the React Native in our main application how to find th In this case, you add it to be returned by the [getPackages](https://github.com/facebook/react-native/blob/8d8b8c343e62115a5509e1aed62047053c2f6e39/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactNativeHost.java#L233) method. :::info -Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.md#publish-the-library-on-npm), which our build tooling will autolink for you. +Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.mdx#publish-the-library-on-npm), which our build tooling will autolink for you. ::: diff --git a/website/versioned_docs/version-0.84/virtualizedlist.md b/website/versioned_docs/version-0.84/virtualizedlist.md index e0a31ffb2e2..9f80ad78258 100644 --- a/website/versioned_docs/version-0.84/virtualizedlist.md +++ b/website/versioned_docs/version-0.84/virtualizedlist.md @@ -300,7 +300,7 @@ Styling for internal View for `ListHeaderComponent`. ### 🗑️ `disableVirtualization` -:::warning Deprecated +:::warning[Deprecated] Virtualization provides significant performance and memory optimizations, but fully unmounts react instances that are outside of the render window. You should only need to disable this for debugging purposes. ::: diff --git a/yarn.lock b/yarn.lock index dd94a18cf29..4a925bc0542 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5,58 +5,6 @@ __metadata: version: 8 cacheKey: 10c0 -"@ai-sdk/gateway@npm:1.0.30": - version: 1.0.30 - resolution: "@ai-sdk/gateway@npm:1.0.30" - dependencies: - "@ai-sdk/provider": "npm:2.0.0" - "@ai-sdk/provider-utils": "npm:3.0.10" - peerDependencies: - zod: ^3.25.76 || ^4.1.8 - checksum: 10c0/e478f7b01291429b8e738f58c0e505a397c1084b39c67812eb26c6d664904fe50ef7d443d3bdffbd30b8d78d9192c9699c2f5a0347775459c355c6195e66ea17 - languageName: node - linkType: hard - -"@ai-sdk/provider-utils@npm:3.0.10": - version: 3.0.10 - resolution: "@ai-sdk/provider-utils@npm:3.0.10" - dependencies: - "@ai-sdk/provider": "npm:2.0.0" - "@standard-schema/spec": "npm:^1.0.0" - eventsource-parser: "npm:^3.0.5" - peerDependencies: - zod: ^3.25.76 || ^4.1.8 - checksum: 10c0/d2c16abdb84ba4ef48c9f56190b5ffde224b9e6ae5147c5c713d2623627732d34b96aa9aef2a2ea4b0c49e1b863cc963c7d7ff964a1dc95f0f036097aaaaaa98 - languageName: node - linkType: hard - -"@ai-sdk/provider@npm:2.0.0": - version: 2.0.0 - resolution: "@ai-sdk/provider@npm:2.0.0" - dependencies: - json-schema: "npm:^0.4.0" - checksum: 10c0/e50e520016c9fc0a8b5009cadd47dae2f1c81ec05c1792b9e312d7d15479f024ca8039525813a33425c884e3449019fed21043b1bfabd6a2626152ca9a388199 - languageName: node - linkType: hard - -"@ai-sdk/react@npm:^2.0.30": - version: 2.0.54 - resolution: "@ai-sdk/react@npm:2.0.54" - dependencies: - "@ai-sdk/provider-utils": "npm:3.0.10" - ai: "npm:5.0.54" - swr: "npm:^2.2.5" - throttleit: "npm:2.1.0" - peerDependencies: - react: ^18 || ^19 || ^19.0.0-rc - zod: ^3.25.76 || ^4.1.8 - peerDependenciesMeta: - zod: - optional: true - checksum: 10c0/e997913c38484efe8dd48f5c2057ea88783642d6a4f50b303fda2c9cfee1e454368828b7e7fb7dbf4043490d334ab3b59081b84d6e40d80c536e6935e0d536be - languageName: node - linkType: hard - "@algolia/abtesting@npm:1.4.0": version: 1.4.0 resolution: "@algolia/abtesting@npm:1.4.0" @@ -79,6 +27,16 @@ __metadata: languageName: node linkType: hard +"@algolia/autocomplete-core@npm:^1.19.2": + version: 1.19.8 + resolution: "@algolia/autocomplete-core@npm:1.19.8" + dependencies: + "@algolia/autocomplete-plugin-algolia-insights": "npm:1.19.8" + "@algolia/autocomplete-shared": "npm:1.19.8" + checksum: 10c0/7cf3a5ba3da36a665f3899fa30108c0f1123ec105e1a707411a63a0871d4b3dcb67874414f8206debb1007f0d4d3bb74dc87d5bf80efaf8d363a7953d8aa5355 + languageName: node + linkType: hard + "@algolia/autocomplete-plugin-algolia-insights@npm:1.19.2": version: 1.19.2 resolution: "@algolia/autocomplete-plugin-algolia-insights@npm:1.19.2" @@ -90,6 +48,17 @@ __metadata: languageName: node linkType: hard +"@algolia/autocomplete-plugin-algolia-insights@npm:1.19.8": + version: 1.19.8 + resolution: "@algolia/autocomplete-plugin-algolia-insights@npm:1.19.8" + dependencies: + "@algolia/autocomplete-shared": "npm:1.19.8" + peerDependencies: + search-insights: ">= 1 < 3" + checksum: 10c0/f187316bf90417628d8c15d107eb9659fcf8020d8457c30af675c2f8acbe5ea027d46faf83c2d1c6dd646f5016e03fcd8acafdd3c961c7d03e450fd8e3f5875e + languageName: node + linkType: hard + "@algolia/autocomplete-shared@npm:1.19.2": version: 1.19.2 resolution: "@algolia/autocomplete-shared@npm:1.19.2" @@ -100,6 +69,16 @@ __metadata: languageName: node linkType: hard +"@algolia/autocomplete-shared@npm:1.19.8": + version: 1.19.8 + resolution: "@algolia/autocomplete-shared@npm:1.19.8" + peerDependencies: + "@algolia/client-search": ">= 4.9.1 < 6" + algoliasearch: ">= 4.9.1 < 6" + checksum: 10c0/235218aefa4dbe8558c699d8888c79ecf611180d8ac6d6ad24c3ee964ece61b1b6e206335d051fa5578fba6cbf900ad6f4a6a19ab2682dc0f3d63617af33f755 + languageName: node + linkType: hard + "@algolia/client-abtesting@npm:5.38.0": version: 5.38.0 resolution: "@algolia/client-abtesting@npm:5.38.0" @@ -1714,16 +1693,6 @@ __metadata: languageName: node linkType: hard -"@babel/runtime-corejs3@npm:^7.25.9": - version: 7.26.10 - resolution: "@babel/runtime-corejs3@npm:7.26.10" - dependencies: - core-js-pure: "npm:^3.30.2" - regenerator-runtime: "npm:^0.14.0" - checksum: 10c0/897b61d84809d6e63e08566d436cd08a3a78f218283641bb53533948d4bcd5524c6a1f83613e20485cf7fa8d054da20dd9039d17e06c92cf282f25d4d4f57250 - languageName: node - linkType: hard - "@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.3, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.25.0, @babel/runtime@npm:^7.25.9, @babel/runtime@npm:^7.28.6": version: 7.28.6 resolution: "@babel/runtime@npm:7.28.6" @@ -2308,24 +2277,38 @@ __metadata: languageName: node linkType: hard -"@docsearch/css@npm:4.1.0": - version: 4.1.0 - resolution: "@docsearch/css@npm:4.1.0" - checksum: 10c0/3e24a65c3de146e98504e61032000431a978ca2387988c371b605e9845a3ef9bcf09ca878d6f8fbda3b21d0e4720f032bef0e82510af86a9d43495788b600aa3 +"@docsearch/core@npm:4.6.2": + version: 4.6.2 + resolution: "@docsearch/core@npm:4.6.2" + peerDependencies: + "@types/react": ">= 16.8.0 < 20.0.0" + react: ">= 16.8.0 < 20.0.0" + react-dom: ">= 16.8.0 < 20.0.0" + peerDependenciesMeta: + "@types/react": + optional: true + react: + optional: true + react-dom: + optional: true + checksum: 10c0/daeda4af110bef09a094853c6e67e13f5183eaeabdc91b3b8ca008e02f34cbe8b16a812d5d0618ba4ff7dca64e0ca7da26cc8dfcba437a61305a6e9e2de7b1b1 languageName: node linkType: hard -"@docsearch/react@npm:^3.9.0 || ^4.1.0": - version: 4.1.0 - resolution: "@docsearch/react@npm:4.1.0" +"@docsearch/css@npm:4.6.2": + version: 4.6.2 + resolution: "@docsearch/css@npm:4.6.2" + checksum: 10c0/2f86dcaa90871eec1b8f71de2ec2a7c3e64fac21167d4ee5b83e25df54706cb9709327dc41ca49cdde441b731bb3024c4afe67b2705736e0e11610e0ae4cdad2 + languageName: node + linkType: hard + +"@docsearch/react@npm:^3.9.0 || ^4.3.2": + version: 4.6.2 + resolution: "@docsearch/react@npm:4.6.2" dependencies: - "@ai-sdk/react": "npm:^2.0.30" "@algolia/autocomplete-core": "npm:1.19.2" - "@docsearch/css": "npm:4.1.0" - ai: "npm:^5.0.30" - algoliasearch: "npm:^5.28.0" - marked: "npm:^16.3.0" - zod: "npm:^4.1.8" + "@docsearch/core": "npm:4.6.2" + "@docsearch/css": "npm:4.6.2" peerDependencies: "@types/react": ">= 16.8.0 < 20.0.0" react: ">= 16.8.0 < 20.0.0" @@ -2340,13 +2323,13 @@ __metadata: optional: true search-insights: optional: true - checksum: 10c0/5a84b29411b91ffd27630c5a70069040ab5c1e53d392d57055fdff8fa0dba0ceda71632c02af5ae21dd12663113d7e075f7f8a5439c3b1bd10568d7ed9a11afb + checksum: 10c0/33f6ddc1d6f648e0b80f86435c80654a59ddff9deb6a9236b863438a9cbc1b0283fa30437819e01d861451c88ea88990f7115e8b669a5d8ae7534decb71b085b languageName: node linkType: hard -"@docusaurus/babel@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/babel@npm:3.9.2" +"@docusaurus/babel@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/babel@npm:3.10.0" dependencies: "@babel/core": "npm:^7.25.9" "@babel/generator": "npm:^7.25.9" @@ -2356,27 +2339,26 @@ __metadata: "@babel/preset-react": "npm:^7.25.9" "@babel/preset-typescript": "npm:^7.25.9" "@babel/runtime": "npm:^7.25.9" - "@babel/runtime-corejs3": "npm:^7.25.9" "@babel/traverse": "npm:^7.25.9" - "@docusaurus/logger": "npm:3.9.2" - "@docusaurus/utils": "npm:3.9.2" + "@docusaurus/logger": "npm:3.10.0" + "@docusaurus/utils": "npm:3.10.0" babel-plugin-dynamic-import-node: "npm:^2.3.3" fs-extra: "npm:^11.1.1" tslib: "npm:^2.6.0" - checksum: 10c0/8147451a8ba79d35405ec8720c1cded7e84643867cb32877827799e5d36932cf56beaefd9fe4b25b9d855b38a9c08bc5397faddf73b63d7c52b05bf24ca99ee8 + checksum: 10c0/d79bd3e8805036e35b09ec4c7ebbf6060b07c1a375b3d27c727cc3122d25c9fddd98d450a22b70eaa9f7f3be0a7c3c5bd36819a7c1abcde4c7b4d3356248a9e3 languageName: node linkType: hard -"@docusaurus/bundler@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/bundler@npm:3.9.2" +"@docusaurus/bundler@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/bundler@npm:3.10.0" dependencies: "@babel/core": "npm:^7.25.9" - "@docusaurus/babel": "npm:3.9.2" - "@docusaurus/cssnano-preset": "npm:3.9.2" - "@docusaurus/logger": "npm:3.9.2" - "@docusaurus/types": "npm:3.9.2" - "@docusaurus/utils": "npm:3.9.2" + "@docusaurus/babel": "npm:3.10.0" + "@docusaurus/cssnano-preset": "npm:3.10.0" + "@docusaurus/logger": "npm:3.10.0" + "@docusaurus/types": "npm:3.10.0" + "@docusaurus/utils": "npm:3.10.0" babel-loader: "npm:^9.2.1" clean-css: "npm:^5.3.3" copy-webpack-plugin: "npm:^11.0.0" @@ -2400,21 +2382,21 @@ __metadata: peerDependenciesMeta: "@docusaurus/faster": optional: true - checksum: 10c0/dcbb7d51eef3fcd57161cb356f63487dbc5a433eea02bc0dfb2a59439884543e76efa3c311ca01c582c2ca33caff19e887303bf72aad04ee374fd013fdcca31f + checksum: 10c0/49af1eba5e45126e972f943148b891c9e167e4510e6f349060ef210c648f28b5ee6344280e1ade0c2e1317bdd165ed3615aa71f95e91bd11e00a7dbb6795a0e3 languageName: node linkType: hard -"@docusaurus/core@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/core@npm:3.9.2" +"@docusaurus/core@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/core@npm:3.10.0" dependencies: - "@docusaurus/babel": "npm:3.9.2" - "@docusaurus/bundler": "npm:3.9.2" - "@docusaurus/logger": "npm:3.9.2" - "@docusaurus/mdx-loader": "npm:3.9.2" - "@docusaurus/utils": "npm:3.9.2" - "@docusaurus/utils-common": "npm:3.9.2" - "@docusaurus/utils-validation": "npm:3.9.2" + "@docusaurus/babel": "npm:3.10.0" + "@docusaurus/bundler": "npm:3.10.0" + "@docusaurus/logger": "npm:3.10.0" + "@docusaurus/mdx-loader": "npm:3.10.0" + "@docusaurus/utils": "npm:3.10.0" + "@docusaurus/utils-common": "npm:3.10.0" + "@docusaurus/utils-validation": "npm:3.10.0" boxen: "npm:^6.2.1" chalk: "npm:^4.1.2" chokidar: "npm:^3.5.3" @@ -2426,7 +2408,7 @@ __metadata: escape-html: "npm:^1.0.3" eta: "npm:^2.2.0" eval: "npm:^0.1.8" - execa: "npm:5.1.1" + execa: "npm:^5.1.1" fs-extra: "npm:^11.1.1" html-tags: "npm:^3.3.1" html-webpack-plugin: "npm:^5.6.0" @@ -2437,12 +2419,12 @@ __metadata: prompts: "npm:^2.4.2" react-helmet-async: "npm:@slorber/react-helmet-async@1.3.0" react-loadable: "npm:@docusaurus/react-loadable@6.0.0" - react-loadable-ssr-addon-v5-slorber: "npm:^1.0.1" + react-loadable-ssr-addon-v5-slorber: "npm:^1.0.3" react-router: "npm:^5.3.4" react-router-config: "npm:^5.1.1" react-router-dom: "npm:^5.3.4" semver: "npm:^7.5.4" - serve-handler: "npm:^6.1.6" + serve-handler: "npm:^6.1.7" tinypool: "npm:^1.0.2" tslib: "npm:^2.6.0" update-notifier: "npm:^6.0.2" @@ -2451,63 +2433,68 @@ __metadata: webpack-dev-server: "npm:^5.2.2" webpack-merge: "npm:^6.0.1" peerDependencies: + "@docusaurus/faster": "*" "@mdx-js/react": ^3.0.0 react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@docusaurus/faster": + optional: true bin: docusaurus: bin/docusaurus.mjs - checksum: 10c0/6058e2ca596ba0225f26f15baaf0c8fa5e91ddf794c3b942161702c44833baaf15be3acb71d42cf6e359a83e80be609485b6c1080802927591fe38bfc915aa11 + checksum: 10c0/2a00cd5f1a22a737d37d127f5e5e6aee3ed51563884136fc76d2fa97cb71a7d577e28959f25ec2065c0e232efc003def1d6db94fcee0533063de87484bb39c86 languageName: node linkType: hard -"@docusaurus/cssnano-preset@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/cssnano-preset@npm:3.9.2" +"@docusaurus/cssnano-preset@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/cssnano-preset@npm:3.10.0" dependencies: cssnano-preset-advanced: "npm:^6.1.2" postcss: "npm:^8.5.4" postcss-sort-media-queries: "npm:^5.2.0" tslib: "npm:^2.6.0" - checksum: 10c0/98ca8939ba9c7c6d45cccdaa4028412cd84ea04c39b641d14e3870ee880d83cef8e04cdb485327b36e40550676ee1d614f1e89c9aa822b78e7d0c7dc0321f8db + checksum: 10c0/635df6b05241f73b333b3d7d451d37ec56d7982a8c430afc2e8e8cf7c9e506b499b64d6bba14ccdf79b8afe84452d159516897741aa2fa838194964574da8881 languageName: node linkType: hard -"@docusaurus/faster@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/faster@npm:3.9.2" +"@docusaurus/faster@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/faster@npm:3.10.0" dependencies: - "@docusaurus/types": "npm:3.9.2" - "@rspack/core": "npm:^1.5.0" + "@docusaurus/types": "npm:3.10.0" + "@rspack/core": "npm:^1.7.10" "@swc/core": "npm:^1.7.39" "@swc/html": "npm:^1.13.5" browserslist: "npm:^4.24.2" lightningcss: "npm:^1.27.0" + semver: "npm:^7.5.4" swc-loader: "npm:^0.2.6" tslib: "npm:^2.6.0" webpack: "npm:^5.95.0" peerDependencies: "@docusaurus/types": "*" - checksum: 10c0/0cd43f0138dfb1da2b39b159e97a7746c58a0bc5bd2c2d66e8541b0f87e75684fe9ea43e133acc99d2dfbd0bb32414a170fd1e0d74f24613dd22f9351997d85b + checksum: 10c0/9e2b1b19a67443c23eceda80606a0e305a586addf991724b923f7756cfdced1a0d6d64426a1790fa81bbc0032ab56041823fe4a694d2392b0ef4ad85dc4089e8 languageName: node linkType: hard -"@docusaurus/logger@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/logger@npm:3.9.2" +"@docusaurus/logger@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/logger@npm:3.10.0" dependencies: chalk: "npm:^4.1.2" tslib: "npm:^2.6.0" - checksum: 10c0/a21e0796873386a9be56f25906092a5d67c9bba5e52abf88e4c3c69d7c1e21467c04b3650c2ff2b9a803507aa4946c4173612791a87f04480d63ed87207b124a + checksum: 10c0/f9bc2b7037fb7dff8a5aba06807e4f9601e422b91d0bb7e462ecdb33d71e1c9ee3d9dfb5c37af66f6f35c43310e461857af0dda96531928af3c22678fa77ec18 languageName: node linkType: hard -"@docusaurus/mdx-loader@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/mdx-loader@npm:3.9.2" +"@docusaurus/mdx-loader@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/mdx-loader@npm:3.10.0" dependencies: - "@docusaurus/logger": "npm:3.9.2" - "@docusaurus/utils": "npm:3.9.2" - "@docusaurus/utils-validation": "npm:3.9.2" + "@docusaurus/logger": "npm:3.10.0" + "@docusaurus/utils": "npm:3.10.0" + "@docusaurus/utils-validation": "npm:3.10.0" "@mdx-js/mdx": "npm:^3.0.0" "@slorber/remark-comment": "npm:^1.0.0" escape-html: "npm:^1.0.3" @@ -2532,15 +2519,15 @@ __metadata: peerDependencies: react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0 - checksum: 10c0/4f3afa817f16fd04dd338a35c04be59fdc0e799a93c6d56dc99b1f42f9a5156691737df62751e14466acbbd65c932e1f77d06a915c9c4ad8f2ad24b2f5479269 + checksum: 10c0/0b94f20398a2fd39e54215895d2607d277d0cf3a80728adbbadcbf2443063e8e1082929242ccdc4ebe393c6c4010a5ccdecf6f2a8478d90b20c74d032940d33a languageName: node linkType: hard -"@docusaurus/module-type-aliases@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/module-type-aliases@npm:3.9.2" +"@docusaurus/module-type-aliases@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/module-type-aliases@npm:3.10.0" dependencies: - "@docusaurus/types": "npm:3.9.2" + "@docusaurus/types": "npm:3.10.0" "@types/history": "npm:^4.7.11" "@types/react": "npm:*" "@types/react-router-config": "npm:*" @@ -2550,23 +2537,24 @@ __metadata: peerDependencies: react: "*" react-dom: "*" - checksum: 10c0/60f163ff9004bb1fcbbad94b18200b6bca967da14576f78f5c533f8535aae0a3a723245cb28e1ca93f9d5881d3f1077e03ebf12bbad59d0e1c6916300d086642 + checksum: 10c0/61952050bef257a0999db849a328655a4141d31b8d4fa4d54828da7ee8f710d7e592081a150c8b9750640bcaf78f3b7ca7165aefbcc0048c328407d582fe21b8 languageName: node linkType: hard -"@docusaurus/plugin-content-blog@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/plugin-content-blog@npm:3.9.2" +"@docusaurus/plugin-content-blog@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/plugin-content-blog@npm:3.10.0" dependencies: - "@docusaurus/core": "npm:3.9.2" - "@docusaurus/logger": "npm:3.9.2" - "@docusaurus/mdx-loader": "npm:3.9.2" - "@docusaurus/theme-common": "npm:3.9.2" - "@docusaurus/types": "npm:3.9.2" - "@docusaurus/utils": "npm:3.9.2" - "@docusaurus/utils-common": "npm:3.9.2" - "@docusaurus/utils-validation": "npm:3.9.2" + "@docusaurus/core": "npm:3.10.0" + "@docusaurus/logger": "npm:3.10.0" + "@docusaurus/mdx-loader": "npm:3.10.0" + "@docusaurus/theme-common": "npm:3.10.0" + "@docusaurus/types": "npm:3.10.0" + "@docusaurus/utils": "npm:3.10.0" + "@docusaurus/utils-common": "npm:3.10.0" + "@docusaurus/utils-validation": "npm:3.10.0" cheerio: "npm:1.0.0-rc.12" + combine-promises: "npm:^1.1.0" feed: "npm:^4.2.2" fs-extra: "npm:^11.1.1" lodash: "npm:^4.17.21" @@ -2580,23 +2568,23 @@ __metadata: "@docusaurus/plugin-content-docs": "*" react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0 - checksum: 10c0/98f82d76d248407a4c53f922f8953a7519a57d18c45f71e41bfb6380d7f801ba063068c9dec2a48b79f10fd4d4f4a909af4c70e4874223db19d9654d651982dd + checksum: 10c0/80295c4d217c45d2685d71e3e898e4e67715ce3ecf684063927e0f9c771a2156af2aefb813b61ed33d8a14bc0dbc820da9cd745b32fe4ef5baa03091165b3542 languageName: node linkType: hard -"@docusaurus/plugin-content-docs@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/plugin-content-docs@npm:3.9.2" +"@docusaurus/plugin-content-docs@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/plugin-content-docs@npm:3.10.0" dependencies: - "@docusaurus/core": "npm:3.9.2" - "@docusaurus/logger": "npm:3.9.2" - "@docusaurus/mdx-loader": "npm:3.9.2" - "@docusaurus/module-type-aliases": "npm:3.9.2" - "@docusaurus/theme-common": "npm:3.9.2" - "@docusaurus/types": "npm:3.9.2" - "@docusaurus/utils": "npm:3.9.2" - "@docusaurus/utils-common": "npm:3.9.2" - "@docusaurus/utils-validation": "npm:3.9.2" + "@docusaurus/core": "npm:3.10.0" + "@docusaurus/logger": "npm:3.10.0" + "@docusaurus/mdx-loader": "npm:3.10.0" + "@docusaurus/module-type-aliases": "npm:3.10.0" + "@docusaurus/theme-common": "npm:3.10.0" + "@docusaurus/types": "npm:3.10.0" + "@docusaurus/utils": "npm:3.10.0" + "@docusaurus/utils-common": "npm:3.10.0" + "@docusaurus/utils-validation": "npm:3.10.0" "@types/react-router-config": "npm:^5.0.7" combine-promises: "npm:^1.1.0" fs-extra: "npm:^11.1.1" @@ -2609,119 +2597,119 @@ __metadata: peerDependencies: react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0 - checksum: 10c0/f2df62f6e03a383a8e7f81b29bea81de9b69e918dfaa668cef15a6f787943d3c148bfd8ba120d89cd96a3bbb23cd3d29ce0658f8dee07380ad612db66e835fa4 + checksum: 10c0/d1d61c85363231216e7f02731806c1519804c14b1a59bab84c386f4dfb45433081ed516cca42d8d891b9855a9ec996d53fe1a7624474a70d64515e7205beb791 languageName: node linkType: hard -"@docusaurus/plugin-content-pages@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/plugin-content-pages@npm:3.9.2" +"@docusaurus/plugin-content-pages@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/plugin-content-pages@npm:3.10.0" dependencies: - "@docusaurus/core": "npm:3.9.2" - "@docusaurus/mdx-loader": "npm:3.9.2" - "@docusaurus/types": "npm:3.9.2" - "@docusaurus/utils": "npm:3.9.2" - "@docusaurus/utils-validation": "npm:3.9.2" + "@docusaurus/core": "npm:3.10.0" + "@docusaurus/mdx-loader": "npm:3.10.0" + "@docusaurus/types": "npm:3.10.0" + "@docusaurus/utils": "npm:3.10.0" + "@docusaurus/utils-validation": "npm:3.10.0" fs-extra: "npm:^11.1.1" tslib: "npm:^2.6.0" webpack: "npm:^5.88.1" peerDependencies: react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0 - checksum: 10c0/294cbd3d127b9a777ab75c13be30e2a559b544bc96798ac6b6d479130f66b95dd6beaf1ca63991f78c279add23ffe16ea14454d3547d558196e747bdb85cb753 + checksum: 10c0/780bf847a37a2bd7732870f2f8e7395aa82c0f9cba61353225fe6c1abfe48b1403b21f2ad67983db0f0712b01be277796e8d4d51d16e082447c269fe5afadb6c languageName: node linkType: hard -"@docusaurus/plugin-css-cascade-layers@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/plugin-css-cascade-layers@npm:3.9.2" +"@docusaurus/plugin-css-cascade-layers@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/plugin-css-cascade-layers@npm:3.10.0" dependencies: - "@docusaurus/core": "npm:3.9.2" - "@docusaurus/types": "npm:3.9.2" - "@docusaurus/utils": "npm:3.9.2" - "@docusaurus/utils-validation": "npm:3.9.2" + "@docusaurus/core": "npm:3.10.0" + "@docusaurus/types": "npm:3.10.0" + "@docusaurus/utils": "npm:3.10.0" + "@docusaurus/utils-validation": "npm:3.10.0" tslib: "npm:^2.6.0" - checksum: 10c0/3a56f6f4eaa3c1ea014ba25b8d16e2a7ffb144ebf5726b5ec531b4df0a9f7bb33ced4de7ca31f9663a65358852d0635c584244c05f07e9d4c9172f80ba21a5ca + checksum: 10c0/ebbfadc70293ff30878f263a166cd0c1e0bea24067acfc8ccb5d45adb9cc653c753fa9a27d874cd5e7855e2f7e5a35f1d337f07b6b28edabc77524f3533f47ea languageName: node linkType: hard -"@docusaurus/plugin-debug@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/plugin-debug@npm:3.9.2" +"@docusaurus/plugin-debug@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/plugin-debug@npm:3.10.0" dependencies: - "@docusaurus/core": "npm:3.9.2" - "@docusaurus/types": "npm:3.9.2" - "@docusaurus/utils": "npm:3.9.2" + "@docusaurus/core": "npm:3.10.0" + "@docusaurus/types": "npm:3.10.0" + "@docusaurus/utils": "npm:3.10.0" fs-extra: "npm:^11.1.1" react-json-view-lite: "npm:^2.3.0" tslib: "npm:^2.6.0" peerDependencies: react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0 - checksum: 10c0/46819f1c22b31b3fbf30243dc5c0439b35a35f8cbbae835becf1e6992ff490ddbd91e4a7448b367ad76aaf20064ed739be07f0e664bb582b4dab39513996d7ba + checksum: 10c0/575c364dcd2595928ebbc8ce6e90113e6bdcc2658ae59f3ddcd0fa2699880a81648765dc7083058bcc957bafd0f7e116c61c62e0cb6b678af97f7e719b5d2db7 languageName: node linkType: hard -"@docusaurus/plugin-google-analytics@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/plugin-google-analytics@npm:3.9.2" +"@docusaurus/plugin-google-analytics@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/plugin-google-analytics@npm:3.10.0" dependencies: - "@docusaurus/core": "npm:3.9.2" - "@docusaurus/types": "npm:3.9.2" - "@docusaurus/utils-validation": "npm:3.9.2" + "@docusaurus/core": "npm:3.10.0" + "@docusaurus/types": "npm:3.10.0" + "@docusaurus/utils-validation": "npm:3.10.0" tslib: "npm:^2.6.0" peerDependencies: react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0 - checksum: 10c0/6fb787132170f731c1ab66c854fcab6d0c4f7919d60c336185942c8f80dc93b286e64e0bfb22f5f770e7d77fd02000fb5a54b35a357258a0cc6a59468778199e + checksum: 10c0/f3814d3ec0c7e2040ac5f3a21a9e1dbb19d58af5a1096fe8376a8661fac92e9e77d3d48742ed7dfb0a1e635360bf1a4e2dd456b5d9d8746e490a250f9b7da097 languageName: node linkType: hard -"@docusaurus/plugin-google-gtag@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/plugin-google-gtag@npm:3.9.2" +"@docusaurus/plugin-google-gtag@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/plugin-google-gtag@npm:3.10.0" dependencies: - "@docusaurus/core": "npm:3.9.2" - "@docusaurus/types": "npm:3.9.2" - "@docusaurus/utils-validation": "npm:3.9.2" - "@types/gtag.js": "npm:^0.0.12" + "@docusaurus/core": "npm:3.10.0" + "@docusaurus/types": "npm:3.10.0" + "@docusaurus/utils-validation": "npm:3.10.0" + "@types/gtag.js": "npm:^0.0.20" tslib: "npm:^2.6.0" peerDependencies: react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0 - checksum: 10c0/34d4b9c6787e3656dc1af42ecb31a41b766735c89f7a719db40c34a8695aa36825e070923a84639ae3dc42b64a41ee656bd4b2728621c1493952c4efa04b3927 + checksum: 10c0/31739d936f9ffa4c500d518816b17ac4f2ba2e75e20e5a6708eb2ed5d488465146b5a632899ab894cf8d8233306d212ac79d89c4c6a26c45f6dd15d31638444d languageName: node linkType: hard -"@docusaurus/plugin-google-tag-manager@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/plugin-google-tag-manager@npm:3.9.2" +"@docusaurus/plugin-google-tag-manager@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/plugin-google-tag-manager@npm:3.10.0" dependencies: - "@docusaurus/core": "npm:3.9.2" - "@docusaurus/types": "npm:3.9.2" - "@docusaurus/utils-validation": "npm:3.9.2" + "@docusaurus/core": "npm:3.10.0" + "@docusaurus/types": "npm:3.10.0" + "@docusaurus/utils-validation": "npm:3.10.0" tslib: "npm:^2.6.0" peerDependencies: react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0 - checksum: 10c0/536cb63dc4a22a456e5b7f1d8b53acf0c45b16ba8fb7474c93d5ab7afec60682feccea65c39685dcbc568fccefd6629264e9b979e0f7069fb4c9dc816048659b + checksum: 10c0/6937bd384653ef938a5b66cf56bce458cc39c33aa35a6ebc43139abb393cfc7cf7865dcf6af60a2dbf65ebb06d40303530430a52e30a119b9c3d7419e53f3a6d languageName: node linkType: hard -"@docusaurus/plugin-pwa@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/plugin-pwa@npm:3.9.2" +"@docusaurus/plugin-pwa@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/plugin-pwa@npm:3.10.0" dependencies: "@babel/core": "npm:^7.25.9" "@babel/preset-env": "npm:^7.25.9" - "@docusaurus/bundler": "npm:3.9.2" - "@docusaurus/core": "npm:3.9.2" - "@docusaurus/logger": "npm:3.9.2" - "@docusaurus/theme-common": "npm:3.9.2" - "@docusaurus/theme-translations": "npm:3.9.2" - "@docusaurus/types": "npm:3.9.2" - "@docusaurus/utils": "npm:3.9.2" - "@docusaurus/utils-validation": "npm:3.9.2" + "@docusaurus/bundler": "npm:3.10.0" + "@docusaurus/core": "npm:3.10.0" + "@docusaurus/logger": "npm:3.10.0" + "@docusaurus/theme-common": "npm:3.10.0" + "@docusaurus/theme-translations": "npm:3.10.0" + "@docusaurus/types": "npm:3.10.0" + "@docusaurus/utils": "npm:3.10.0" + "@docusaurus/utils-validation": "npm:3.10.0" babel-loader: "npm:^9.2.1" clsx: "npm:^2.0.0" core-js: "npm:^3.31.1" @@ -2734,38 +2722,38 @@ __metadata: peerDependencies: react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0 - checksum: 10c0/ee45d336177ff541cf64fdc424884bad2552ad3f1b369c9d62b67a29b0c4659ccafe82fde69eb3f68a21ac301a8534ab4787c6b5430896828969792c70b295e5 + checksum: 10c0/18a8e89ae70f3d7bba8a51e1e812ea8dfb53b30895e77eb9e4437f185fd24293bbc8c71df15d8ed5cbd9260623d22acf5c4c69ceeab839f3688629eb45ba2e26 languageName: node linkType: hard -"@docusaurus/plugin-sitemap@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/plugin-sitemap@npm:3.9.2" +"@docusaurus/plugin-sitemap@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/plugin-sitemap@npm:3.10.0" dependencies: - "@docusaurus/core": "npm:3.9.2" - "@docusaurus/logger": "npm:3.9.2" - "@docusaurus/types": "npm:3.9.2" - "@docusaurus/utils": "npm:3.9.2" - "@docusaurus/utils-common": "npm:3.9.2" - "@docusaurus/utils-validation": "npm:3.9.2" + "@docusaurus/core": "npm:3.10.0" + "@docusaurus/logger": "npm:3.10.0" + "@docusaurus/types": "npm:3.10.0" + "@docusaurus/utils": "npm:3.10.0" + "@docusaurus/utils-common": "npm:3.10.0" + "@docusaurus/utils-validation": "npm:3.10.0" fs-extra: "npm:^11.1.1" sitemap: "npm:^7.1.1" tslib: "npm:^2.6.0" peerDependencies: react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0 - checksum: 10c0/a1bcbb8ab2531eaa810e74a7c5800942d89a11cfaf544d6d72941c7e37c29eaef609dcaff368ee92cf759e03be7c258c6e5e4cfc6046d77e727a63f84e63a045 + checksum: 10c0/a0538da02713caaf844cd3b489a360408bb6868ceefbe3e51e7d02223919e8349b219aac1d111e258a29be5eeaea53d712448abf9d7d860f0af89b12d6652a86 languageName: node linkType: hard -"@docusaurus/plugin-svgr@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/plugin-svgr@npm:3.9.2" +"@docusaurus/plugin-svgr@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/plugin-svgr@npm:3.10.0" dependencies: - "@docusaurus/core": "npm:3.9.2" - "@docusaurus/types": "npm:3.9.2" - "@docusaurus/utils": "npm:3.9.2" - "@docusaurus/utils-validation": "npm:3.9.2" + "@docusaurus/core": "npm:3.10.0" + "@docusaurus/types": "npm:3.10.0" + "@docusaurus/utils": "npm:3.10.0" + "@docusaurus/utils-validation": "npm:3.10.0" "@svgr/core": "npm:8.1.0" "@svgr/webpack": "npm:^8.1.0" tslib: "npm:^2.6.0" @@ -2773,55 +2761,56 @@ __metadata: peerDependencies: react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0 - checksum: 10c0/d6a7a1aa0c05b759d6094969d31d05cb7840ee514a60812f8e841e13c2cf319a46d046c0903417e9072b8bc26a9fd0d63e7e5a75255ed7d6b08a9a0466f6cb1a - languageName: node - linkType: hard - -"@docusaurus/preset-classic@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/preset-classic@npm:3.9.2" - dependencies: - "@docusaurus/core": "npm:3.9.2" - "@docusaurus/plugin-content-blog": "npm:3.9.2" - "@docusaurus/plugin-content-docs": "npm:3.9.2" - "@docusaurus/plugin-content-pages": "npm:3.9.2" - "@docusaurus/plugin-css-cascade-layers": "npm:3.9.2" - "@docusaurus/plugin-debug": "npm:3.9.2" - "@docusaurus/plugin-google-analytics": "npm:3.9.2" - "@docusaurus/plugin-google-gtag": "npm:3.9.2" - "@docusaurus/plugin-google-tag-manager": "npm:3.9.2" - "@docusaurus/plugin-sitemap": "npm:3.9.2" - "@docusaurus/plugin-svgr": "npm:3.9.2" - "@docusaurus/theme-classic": "npm:3.9.2" - "@docusaurus/theme-common": "npm:3.9.2" - "@docusaurus/theme-search-algolia": "npm:3.9.2" - "@docusaurus/types": "npm:3.9.2" + checksum: 10c0/31a049eaf82c80296b0dc4d7d7bd292bda13dbcf9f07943db4cd2b721276185cb95f6058c406ff4602f4ff408f0fb042f3ade8c8e1d009054ecfa55d99960a88 + languageName: node + linkType: hard + +"@docusaurus/preset-classic@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/preset-classic@npm:3.10.0" + dependencies: + "@docusaurus/core": "npm:3.10.0" + "@docusaurus/plugin-content-blog": "npm:3.10.0" + "@docusaurus/plugin-content-docs": "npm:3.10.0" + "@docusaurus/plugin-content-pages": "npm:3.10.0" + "@docusaurus/plugin-css-cascade-layers": "npm:3.10.0" + "@docusaurus/plugin-debug": "npm:3.10.0" + "@docusaurus/plugin-google-analytics": "npm:3.10.0" + "@docusaurus/plugin-google-gtag": "npm:3.10.0" + "@docusaurus/plugin-google-tag-manager": "npm:3.10.0" + "@docusaurus/plugin-sitemap": "npm:3.10.0" + "@docusaurus/plugin-svgr": "npm:3.10.0" + "@docusaurus/theme-classic": "npm:3.10.0" + "@docusaurus/theme-common": "npm:3.10.0" + "@docusaurus/theme-search-algolia": "npm:3.10.0" + "@docusaurus/types": "npm:3.10.0" peerDependencies: react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0 - checksum: 10c0/94e6f3948592209bd68b797591f21daee8543c6c9a4eac5ae498f5c6b8d1c7579b23173f8554a3430d0dff1cce90b953be0d5f2d53b6b4729116000f61e3dab2 - languageName: node - linkType: hard - -"@docusaurus/theme-classic@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/theme-classic@npm:3.9.2" - dependencies: - "@docusaurus/core": "npm:3.9.2" - "@docusaurus/logger": "npm:3.9.2" - "@docusaurus/mdx-loader": "npm:3.9.2" - "@docusaurus/module-type-aliases": "npm:3.9.2" - "@docusaurus/plugin-content-blog": "npm:3.9.2" - "@docusaurus/plugin-content-docs": "npm:3.9.2" - "@docusaurus/plugin-content-pages": "npm:3.9.2" - "@docusaurus/theme-common": "npm:3.9.2" - "@docusaurus/theme-translations": "npm:3.9.2" - "@docusaurus/types": "npm:3.9.2" - "@docusaurus/utils": "npm:3.9.2" - "@docusaurus/utils-common": "npm:3.9.2" - "@docusaurus/utils-validation": "npm:3.9.2" + checksum: 10c0/c7d9ce9b76f309b65a3cdba6702f49adb4c518da3e3c4a4f745c5ad659cab9a9d1bf3841d49817fa4a1e3d226c2f683d6e263bb36d9d9bb6143f9fc4d36add42 + languageName: node + linkType: hard + +"@docusaurus/theme-classic@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/theme-classic@npm:3.10.0" + dependencies: + "@docusaurus/core": "npm:3.10.0" + "@docusaurus/logger": "npm:3.10.0" + "@docusaurus/mdx-loader": "npm:3.10.0" + "@docusaurus/module-type-aliases": "npm:3.10.0" + "@docusaurus/plugin-content-blog": "npm:3.10.0" + "@docusaurus/plugin-content-docs": "npm:3.10.0" + "@docusaurus/plugin-content-pages": "npm:3.10.0" + "@docusaurus/theme-common": "npm:3.10.0" + "@docusaurus/theme-translations": "npm:3.10.0" + "@docusaurus/types": "npm:3.10.0" + "@docusaurus/utils": "npm:3.10.0" + "@docusaurus/utils-common": "npm:3.10.0" + "@docusaurus/utils-validation": "npm:3.10.0" "@mdx-js/react": "npm:^3.0.0" clsx: "npm:^2.0.0" + copy-text-to-clipboard: "npm:^3.2.0" infima: "npm:0.2.0-alpha.45" lodash: "npm:^4.17.21" nprogress: "npm:^0.2.0" @@ -2835,18 +2824,18 @@ __metadata: peerDependencies: react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0 - checksum: 10c0/aa6442ac2e65539f083a0ed1e70030443bf61422d5cca24fc8b91c2c4192bcd4d8abdbf4b71536e2ae6afd413fd3f4be1379f2dc45e224173500577ebfa1c346 + checksum: 10c0/920df8c75701cd462cc414440b446157b6c831432bb2fe0e506268a5a72ef7fefe58568d8fb12bfc61845e8809f5fe6900314f39e9867a0aedabd184cbaa05b9 languageName: node linkType: hard -"@docusaurus/theme-common@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/theme-common@npm:3.9.2" +"@docusaurus/theme-common@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/theme-common@npm:3.10.0" dependencies: - "@docusaurus/mdx-loader": "npm:3.9.2" - "@docusaurus/module-type-aliases": "npm:3.9.2" - "@docusaurus/utils": "npm:3.9.2" - "@docusaurus/utils-common": "npm:3.9.2" + "@docusaurus/mdx-loader": "npm:3.10.0" + "@docusaurus/module-type-aliases": "npm:3.10.0" + "@docusaurus/utils": "npm:3.10.0" + "@docusaurus/utils-common": "npm:3.10.0" "@types/history": "npm:^4.7.11" "@types/react": "npm:*" "@types/react-router-config": "npm:*" @@ -2859,22 +2848,23 @@ __metadata: "@docusaurus/plugin-content-docs": "*" react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0 - checksum: 10c0/4ecb8570e1fee75a6048ddb43065252e7b5b058f075867b541219830fb01bdc4b41b8f5f0251d6e9e7ffbe3704fd23d16ef90f92a3e2511ecc7ff6d9a2d5bfd6 + checksum: 10c0/16cda69e916adfc2cfdeea6940264c01d56e8b87e87fca887d7d28933712333b5b60ce60a64d505ddda8da2c6538b50f3aa4e16351e3d05df9f8e590b407be6e languageName: node linkType: hard -"@docusaurus/theme-search-algolia@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/theme-search-algolia@npm:3.9.2" +"@docusaurus/theme-search-algolia@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/theme-search-algolia@npm:3.10.0" dependencies: - "@docsearch/react": "npm:^3.9.0 || ^4.1.0" - "@docusaurus/core": "npm:3.9.2" - "@docusaurus/logger": "npm:3.9.2" - "@docusaurus/plugin-content-docs": "npm:3.9.2" - "@docusaurus/theme-common": "npm:3.9.2" - "@docusaurus/theme-translations": "npm:3.9.2" - "@docusaurus/utils": "npm:3.9.2" - "@docusaurus/utils-validation": "npm:3.9.2" + "@algolia/autocomplete-core": "npm:^1.19.2" + "@docsearch/react": "npm:^3.9.0 || ^4.3.2" + "@docusaurus/core": "npm:3.10.0" + "@docusaurus/logger": "npm:3.10.0" + "@docusaurus/plugin-content-docs": "npm:3.10.0" + "@docusaurus/theme-common": "npm:3.10.0" + "@docusaurus/theme-translations": "npm:3.10.0" + "@docusaurus/utils": "npm:3.10.0" + "@docusaurus/utils-validation": "npm:3.10.0" algoliasearch: "npm:^5.37.0" algoliasearch-helper: "npm:^3.26.0" clsx: "npm:^2.0.0" @@ -2886,30 +2876,30 @@ __metadata: peerDependencies: react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0 - checksum: 10c0/676206059771d13c2268c4f8a20630288ac043aa1042090c259de434f8f833e1e95c0cf7de304880149ace3d084c901d3d01cfbfea63a48dc71aaa6726166621 + checksum: 10c0/63dd5f7e99457a71f0eb7916e18fa421e3194018975a52e8d8bd197abfdf5f19d85348a8a7e0713bccac413e9d5b1cb54b9c69c28a868e0473c1cf0b806f3faa languageName: node linkType: hard -"@docusaurus/theme-translations@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/theme-translations@npm:3.9.2" +"@docusaurus/theme-translations@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/theme-translations@npm:3.10.0" dependencies: fs-extra: "npm:^11.1.1" tslib: "npm:^2.6.0" - checksum: 10c0/543ee40933a8805357575c14d4fc8f8d504f6464796f5fa27ec13d8b0cec669617961edb206d5b74ba1d776d9486656fefdb1c777e2908cb1752ee6fbe28686c + checksum: 10c0/62fa157763e2ad4d8c7afea0edebce895f85da5384c48222a1f697932716c550eeda34310d473643d037ae6d41720909174abf409971fcddd0eadb63daafced6 languageName: node linkType: hard -"@docusaurus/tsconfig@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/tsconfig@npm:3.9.2" - checksum: 10c0/d46241cb488d60f785710ee24980aad394423eaf5f76b64b0d47158fcbe19dd68a886898db83b1b65de18dfeb6c27d78adc8f8c4451d1ac29cc9da009ed15cd4 +"@docusaurus/tsconfig@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/tsconfig@npm:3.10.0" + checksum: 10c0/052d4deece0deaab9f09dd38fa3c2f3c35ec527371ff8435bbf35d544adccf6949e35e97c5a06726ed548af92b11fff46acd7388b21c1e1d7a0e1cfc9fcd79bd languageName: node linkType: hard -"@docusaurus/types@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/types@npm:3.9.2" +"@docusaurus/types@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/types@npm:3.10.0" dependencies: "@mdx-js/mdx": "npm:^3.0.0" "@types/history": "npm:^4.7.11" @@ -2924,45 +2914,45 @@ __metadata: peerDependencies: react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0 - checksum: 10c0/e50a9931e97944d39375a97a45ded13bc35baf3c9c14fe66d30944ebe1203df7748a7631291f937bef1a7a98db73c23505620cd8f03d109fbbdfa83725fb2857 + checksum: 10c0/0d0f5f57bb82f190385a506192d882a5072e833af55a35cb5fb69048bb4258012eebe51448b8ace9d77d05d69a99d7fd2dcae25bb4babfa205abfbca222de8d5 languageName: node linkType: hard -"@docusaurus/utils-common@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/utils-common@npm:3.9.2" +"@docusaurus/utils-common@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/utils-common@npm:3.10.0" dependencies: - "@docusaurus/types": "npm:3.9.2" + "@docusaurus/types": "npm:3.10.0" tslib: "npm:^2.6.0" - checksum: 10c0/0e34186ca66cf3c537935d998cfb2ce59beaad31ccb9b41c2288618f386d72dc4359e15e8cb012525211d1f1d753fc439d6c7e9701d6ac801e1121cfa3223d69 + checksum: 10c0/12e54b8e29d1d8d78f85598a154fc122f4d93bdd143b55fd7a474c2d9eab431bbf13ac61e008f1c4f34ffce76578fe95b441f6a6469a752d7396f9d9c000f6e4 languageName: node linkType: hard -"@docusaurus/utils-validation@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/utils-validation@npm:3.9.2" +"@docusaurus/utils-validation@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/utils-validation@npm:3.10.0" dependencies: - "@docusaurus/logger": "npm:3.9.2" - "@docusaurus/utils": "npm:3.9.2" - "@docusaurus/utils-common": "npm:3.9.2" + "@docusaurus/logger": "npm:3.10.0" + "@docusaurus/utils": "npm:3.10.0" + "@docusaurus/utils-common": "npm:3.10.0" fs-extra: "npm:^11.2.0" joi: "npm:^17.9.2" js-yaml: "npm:^4.1.0" lodash: "npm:^4.17.21" tslib: "npm:^2.6.0" - checksum: 10c0/681b8c7fe0e2930affa388340f3db596a894affdb390e058277edd230181edca6f5593d37b48fb19c5077bbd5438549d944591f366b9f21ffff81feac1e1ae66 + checksum: 10c0/ab1aee9c9b236d4c5247f33b245c016a2ef501ef154f5f5392a98e706d448ee60c32746b4c58e4954be24393eee6db06cb3192efa8df00343176c558fca33924 languageName: node linkType: hard -"@docusaurus/utils@npm:3.9.2": - version: 3.9.2 - resolution: "@docusaurus/utils@npm:3.9.2" +"@docusaurus/utils@npm:3.10.0": + version: 3.10.0 + resolution: "@docusaurus/utils@npm:3.10.0" dependencies: - "@docusaurus/logger": "npm:3.9.2" - "@docusaurus/types": "npm:3.9.2" - "@docusaurus/utils-common": "npm:3.9.2" + "@docusaurus/logger": "npm:3.10.0" + "@docusaurus/types": "npm:3.10.0" + "@docusaurus/utils-common": "npm:3.10.0" escape-string-regexp: "npm:^4.0.0" - execa: "npm:5.1.1" + execa: "npm:^5.1.1" file-loader: "npm:^6.2.0" fs-extra: "npm:^11.1.1" github-slugger: "npm:^1.5.0" @@ -2979,35 +2969,35 @@ __metadata: url-loader: "npm:^4.1.1" utility-types: "npm:^3.10.0" webpack: "npm:^5.88.1" - checksum: 10c0/9796b2e7bc93e47cb27ce81185264c6390b56cd9e68831f6013e4418af512a736f1baf9b97e5df8d646ef4da0650151512abf598f5d58793a3e6c0833c80e06a + checksum: 10c0/0f3488c38fbc985378f93f6573cf080559207ae367b0052df2ad42d667726ec766900db68184ec1746bcf4c38c9a1289d9f54fbd71a857dc592363996295afff languageName: node linkType: hard -"@emnapi/core@npm:^1.7.1": - version: 1.7.1 - resolution: "@emnapi/core@npm:1.7.1" +"@emnapi/core@npm:^1.5.0, @emnapi/core@npm:^1.7.1": + version: 1.9.2 + resolution: "@emnapi/core@npm:1.9.2" dependencies: - "@emnapi/wasi-threads": "npm:1.1.0" + "@emnapi/wasi-threads": "npm:1.2.1" tslib: "npm:^2.4.0" - checksum: 10c0/f3740be23440b439333e3ae3832163f60c96c4e35337f3220ceba88f36ee89a57a871d27c94eb7a9ff98a09911ed9a2089e477ab549f4d30029f8b907f84a351 + checksum: 10c0/5500393f953951bad0768fafaa9191f2d938956b20c6d6a79e5ab696a613a25ce6ad23422bc18e86e6ce8deb147619d8d0d7d413a69f84adc01a6633cc353cd9 languageName: node linkType: hard -"@emnapi/runtime@npm:^1.7.1": - version: 1.7.1 - resolution: "@emnapi/runtime@npm:1.7.1" +"@emnapi/runtime@npm:^1.5.0, @emnapi/runtime@npm:^1.7.1": + version: 1.9.2 + resolution: "@emnapi/runtime@npm:1.9.2" dependencies: tslib: "npm:^2.4.0" - checksum: 10c0/26b851cd3e93877d8732a985a2ebf5152325bbacc6204ef5336a47359dedcc23faeb08cdfcb8bb389b5401b3e894b882bc1a1e55b4b7c1ed1e67c991a760ddd5 + checksum: 10c0/61c3a59e0c36784558b8d58eb02bd04815aa5fb0dbfbaf84d1b3050a78aa0cc63ea129ae806bd1e48062bfeb7fc36eb0e5431740d62f64ea51bdf426404b8caa languageName: node linkType: hard -"@emnapi/wasi-threads@npm:1.1.0": - version: 1.1.0 - resolution: "@emnapi/wasi-threads@npm:1.1.0" +"@emnapi/wasi-threads@npm:1.2.1": + version: 1.2.1 + resolution: "@emnapi/wasi-threads@npm:1.2.1" dependencies: tslib: "npm:^2.4.0" - checksum: 10c0/e6d54bf2b1e64cdd83d2916411e44e579b6ae35d5def0dea61a3c452d9921373044dff32a8b8473ae60c80692bdc39323e98b96a3f3d87ba6886b24dd0ef7ca1 + checksum: 10c0/32fcfa81ab396533b2ec1f4082b1ff779a05d9c836bbbd3f4398405b0e6814c0d9503b7993130e37bc6941dbc1ded49f55e9700ae9ca4e803bab2b5bc5deb331 languageName: node linkType: hard @@ -3746,62 +3736,73 @@ __metadata: languageName: node linkType: hard -"@module-federation/error-codes@npm:0.18.0": - version: 0.18.0 - resolution: "@module-federation/error-codes@npm:0.18.0" - checksum: 10c0/8cf4049a4ce6b2fbe39c5824960d0c4cec4f0cfd805f0251e44d2eddf2aa2adf3ed0d7de9752444d83d74ab85da2c19b6efd0cd0ce202bcaadd2e1e5e38523b6 +"@module-federation/error-codes@npm:0.22.0": + version: 0.22.0 + resolution: "@module-federation/error-codes@npm:0.22.0" + checksum: 10c0/a9b25e8c930971e146e6352f482f915f1b54965ce54706984e834a87be714d30caebbd3946f9eb408e7821b2cc326b90787eeb2f8306edf1d322d9931543a139 languageName: node linkType: hard -"@module-federation/runtime-core@npm:0.18.0": - version: 0.18.0 - resolution: "@module-federation/runtime-core@npm:0.18.0" +"@module-federation/runtime-core@npm:0.22.0": + version: 0.22.0 + resolution: "@module-federation/runtime-core@npm:0.22.0" dependencies: - "@module-federation/error-codes": "npm:0.18.0" - "@module-federation/sdk": "npm:0.18.0" - checksum: 10c0/99ac5354b50b27e80416f752f7eca6aedb0a659d272215b9db326a93cfb0e3fb772041a78290175c6329275e3a9accf7c9a3407b515ad3c4886f17a4ce6df86b + "@module-federation/error-codes": "npm:0.22.0" + "@module-federation/sdk": "npm:0.22.0" + checksum: 10c0/0406c26b119065dca23a8fb65872b8ab5794984d5d82984ed625c433658693050a8a800cde8c97cc1572b0bc154a7824fa9db5bb05106b7250643e799ba7091d languageName: node linkType: hard -"@module-federation/runtime-tools@npm:0.18.0": - version: 0.18.0 - resolution: "@module-federation/runtime-tools@npm:0.18.0" +"@module-federation/runtime-tools@npm:0.22.0": + version: 0.22.0 + resolution: "@module-federation/runtime-tools@npm:0.22.0" dependencies: - "@module-federation/runtime": "npm:0.18.0" - "@module-federation/webpack-bundler-runtime": "npm:0.18.0" - checksum: 10c0/2c3876378ee763af8f8687996893b55020fd20a617c886bf949cb50f92c9763966f0617956d535d20fa163c264643e56eb3ae60ff5f92153c22f1520064cf3a0 + "@module-federation/runtime": "npm:0.22.0" + "@module-federation/webpack-bundler-runtime": "npm:0.22.0" + checksum: 10c0/fbe76616fb176ce03550e3ce2bb43fa5d44c12d7d0939593f29dab5658accfb559b857df4180f7f681dc601aab928658cd9b49a78daad866089390b820854fbd languageName: node linkType: hard -"@module-federation/runtime@npm:0.18.0": - version: 0.18.0 - resolution: "@module-federation/runtime@npm:0.18.0" +"@module-federation/runtime@npm:0.22.0": + version: 0.22.0 + resolution: "@module-federation/runtime@npm:0.22.0" dependencies: - "@module-federation/error-codes": "npm:0.18.0" - "@module-federation/runtime-core": "npm:0.18.0" - "@module-federation/sdk": "npm:0.18.0" - checksum: 10c0/c0e404d1dfdf05d4828b0b305991580a0f0b3632717e9e8532de386e9d2785f3b91aff7140d06403eff81098c36de16028e97c3387c59b9c5a52e470fc0c604e + "@module-federation/error-codes": "npm:0.22.0" + "@module-federation/runtime-core": "npm:0.22.0" + "@module-federation/sdk": "npm:0.22.0" + checksum: 10c0/f9cfaf7f8599a215195cb612a5d4532d4399cc8eb5a928ced60c4bdf0e7e2028849cdc384fa3f1506f9e7e0e112f74f6c30a5a76136dc56e155012d111ea075b languageName: node linkType: hard -"@module-federation/sdk@npm:0.18.0": - version: 0.18.0 - resolution: "@module-federation/sdk@npm:0.18.0" - checksum: 10c0/5610d5c94f11af420e2c9625cbe7bc233d22491711de2a1d7e8879c6723ad8e403391edf26f50be82aecfb62d76fa4d1660de5515abeceb55d2b645712773f8c +"@module-federation/sdk@npm:0.22.0": + version: 0.22.0 + resolution: "@module-federation/sdk@npm:0.22.0" + checksum: 10c0/c09ba0147368151b67ba33b9174ef451a028e1709d2208aa811cacc1ae4efcae0f1987f02119f9b54754ee6430af3610e357c9b744147f112a25d8f7564f8041 languageName: node linkType: hard -"@module-federation/webpack-bundler-runtime@npm:0.18.0": - version: 0.18.0 - resolution: "@module-federation/webpack-bundler-runtime@npm:0.18.0" +"@module-federation/webpack-bundler-runtime@npm:0.22.0": + version: 0.22.0 + resolution: "@module-federation/webpack-bundler-runtime@npm:0.22.0" dependencies: - "@module-federation/runtime": "npm:0.18.0" - "@module-federation/sdk": "npm:0.18.0" - checksum: 10c0/5186cea303ad485e052315b0495075ec78b4a41f4151559f25905fe7431c54e14edf96a462bc59760aeb8b3cdfe9a09a79ab8ef0d7060694c3acfd97d98778c3 + "@module-federation/runtime": "npm:0.22.0" + "@module-federation/sdk": "npm:0.22.0" + checksum: 10c0/4c1354b881ffc0c1521f1d676c9301db0b0d59186c386dde4dbb6d33f00fdb16bf118e85cfc38e2ffb36084fa87df8390d415a41c0c93b33bd0e5460a9a934f5 languageName: node linkType: hard -"@napi-rs/wasm-runtime@npm:^1.0.5, @napi-rs/wasm-runtime@npm:^1.0.7": +"@napi-rs/wasm-runtime@npm:1.0.7": + version: 1.0.7 + resolution: "@napi-rs/wasm-runtime@npm:1.0.7" + dependencies: + "@emnapi/core": "npm:^1.5.0" + "@emnapi/runtime": "npm:^1.5.0" + "@tybys/wasm-util": "npm:^0.10.1" + checksum: 10c0/2d8635498136abb49d6dbf7395b78c63422292240963bf055f307b77aeafbde57ae2c0ceaaef215601531b36d6eb92a2cdd6f5ba90ed2aa8127c27aff9c4ae55 + languageName: node + linkType: hard + +"@napi-rs/wasm-runtime@npm:^1.0.7": version: 1.1.0 resolution: "@napi-rs/wasm-runtime@npm:1.1.0" dependencies: @@ -3962,13 +3963,6 @@ __metadata: languageName: node linkType: hard -"@opentelemetry/api@npm:1.9.0": - version: 1.9.0 - resolution: "@opentelemetry/api@npm:1.9.0" - checksum: 10c0/9aae2fe6e8a3a3eeb6c1fdef78e1939cf05a0f37f8a4fae4d6bf2e09eb1e06f966ece85805626e01ba5fab48072b94f19b835449e58b6d26720ee19a58298add - languageName: node - linkType: hard - "@ota-meshi/ast-token-store@npm:^0.3.0": version: 0.3.0 resolution: "@ota-meshi/ast-token-store@npm:0.3.0" @@ -4679,92 +4673,92 @@ __metadata: languageName: node linkType: hard -"@rspack/binding-darwin-arm64@npm:1.5.7": - version: 1.5.7 - resolution: "@rspack/binding-darwin-arm64@npm:1.5.7" +"@rspack/binding-darwin-arm64@npm:1.7.11": + version: 1.7.11 + resolution: "@rspack/binding-darwin-arm64@npm:1.7.11" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@rspack/binding-darwin-x64@npm:1.5.7": - version: 1.5.7 - resolution: "@rspack/binding-darwin-x64@npm:1.5.7" +"@rspack/binding-darwin-x64@npm:1.7.11": + version: 1.7.11 + resolution: "@rspack/binding-darwin-x64@npm:1.7.11" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@rspack/binding-linux-arm64-gnu@npm:1.5.7": - version: 1.5.7 - resolution: "@rspack/binding-linux-arm64-gnu@npm:1.5.7" +"@rspack/binding-linux-arm64-gnu@npm:1.7.11": + version: 1.7.11 + resolution: "@rspack/binding-linux-arm64-gnu@npm:1.7.11" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@rspack/binding-linux-arm64-musl@npm:1.5.7": - version: 1.5.7 - resolution: "@rspack/binding-linux-arm64-musl@npm:1.5.7" +"@rspack/binding-linux-arm64-musl@npm:1.7.11": + version: 1.7.11 + resolution: "@rspack/binding-linux-arm64-musl@npm:1.7.11" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@rspack/binding-linux-x64-gnu@npm:1.5.7": - version: 1.5.7 - resolution: "@rspack/binding-linux-x64-gnu@npm:1.5.7" +"@rspack/binding-linux-x64-gnu@npm:1.7.11": + version: 1.7.11 + resolution: "@rspack/binding-linux-x64-gnu@npm:1.7.11" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@rspack/binding-linux-x64-musl@npm:1.5.7": - version: 1.5.7 - resolution: "@rspack/binding-linux-x64-musl@npm:1.5.7" +"@rspack/binding-linux-x64-musl@npm:1.7.11": + version: 1.7.11 + resolution: "@rspack/binding-linux-x64-musl@npm:1.7.11" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@rspack/binding-wasm32-wasi@npm:1.5.7": - version: 1.5.7 - resolution: "@rspack/binding-wasm32-wasi@npm:1.5.7" +"@rspack/binding-wasm32-wasi@npm:1.7.11": + version: 1.7.11 + resolution: "@rspack/binding-wasm32-wasi@npm:1.7.11" dependencies: - "@napi-rs/wasm-runtime": "npm:^1.0.5" + "@napi-rs/wasm-runtime": "npm:1.0.7" conditions: cpu=wasm32 languageName: node linkType: hard -"@rspack/binding-win32-arm64-msvc@npm:1.5.7": - version: 1.5.7 - resolution: "@rspack/binding-win32-arm64-msvc@npm:1.5.7" +"@rspack/binding-win32-arm64-msvc@npm:1.7.11": + version: 1.7.11 + resolution: "@rspack/binding-win32-arm64-msvc@npm:1.7.11" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@rspack/binding-win32-ia32-msvc@npm:1.5.7": - version: 1.5.7 - resolution: "@rspack/binding-win32-ia32-msvc@npm:1.5.7" +"@rspack/binding-win32-ia32-msvc@npm:1.7.11": + version: 1.7.11 + resolution: "@rspack/binding-win32-ia32-msvc@npm:1.7.11" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@rspack/binding-win32-x64-msvc@npm:1.5.7": - version: 1.5.7 - resolution: "@rspack/binding-win32-x64-msvc@npm:1.5.7" +"@rspack/binding-win32-x64-msvc@npm:1.7.11": + version: 1.7.11 + resolution: "@rspack/binding-win32-x64-msvc@npm:1.7.11" conditions: os=win32 & cpu=x64 languageName: node linkType: hard -"@rspack/binding@npm:1.5.7": - version: 1.5.7 - resolution: "@rspack/binding@npm:1.5.7" +"@rspack/binding@npm:1.7.11": + version: 1.7.11 + resolution: "@rspack/binding@npm:1.7.11" dependencies: - "@rspack/binding-darwin-arm64": "npm:1.5.7" - "@rspack/binding-darwin-x64": "npm:1.5.7" - "@rspack/binding-linux-arm64-gnu": "npm:1.5.7" - "@rspack/binding-linux-arm64-musl": "npm:1.5.7" - "@rspack/binding-linux-x64-gnu": "npm:1.5.7" - "@rspack/binding-linux-x64-musl": "npm:1.5.7" - "@rspack/binding-wasm32-wasi": "npm:1.5.7" - "@rspack/binding-win32-arm64-msvc": "npm:1.5.7" - "@rspack/binding-win32-ia32-msvc": "npm:1.5.7" - "@rspack/binding-win32-x64-msvc": "npm:1.5.7" + "@rspack/binding-darwin-arm64": "npm:1.7.11" + "@rspack/binding-darwin-x64": "npm:1.7.11" + "@rspack/binding-linux-arm64-gnu": "npm:1.7.11" + "@rspack/binding-linux-arm64-musl": "npm:1.7.11" + "@rspack/binding-linux-x64-gnu": "npm:1.7.11" + "@rspack/binding-linux-x64-musl": "npm:1.7.11" + "@rspack/binding-wasm32-wasi": "npm:1.7.11" + "@rspack/binding-win32-arm64-msvc": "npm:1.7.11" + "@rspack/binding-win32-ia32-msvc": "npm:1.7.11" + "@rspack/binding-win32-x64-msvc": "npm:1.7.11" dependenciesMeta: "@rspack/binding-darwin-arm64": optional: true @@ -4786,30 +4780,30 @@ __metadata: optional: true "@rspack/binding-win32-x64-msvc": optional: true - checksum: 10c0/7d3c75ceabe8ea6c1bfdd6de08bb5476fbede15931e951d67cd9c12c29c4bf28b0ec5a42c4c5ce7900cc34cab40f02dd6ba0768bcee226dd755687b226f7e8f2 + checksum: 10c0/9f0421dc3b3ab32bc76d2e5f280361be4c24f05a11814b64bf8b5c3ba589f03da3a5d20a54df20e2b73b25cd0d33c5d2016287108190f833977dc2aa99dba0d7 languageName: node linkType: hard -"@rspack/core@npm:^1.5.0": - version: 1.5.7 - resolution: "@rspack/core@npm:1.5.7" +"@rspack/core@npm:^1.7.10": + version: 1.7.11 + resolution: "@rspack/core@npm:1.7.11" dependencies: - "@module-federation/runtime-tools": "npm:0.18.0" - "@rspack/binding": "npm:1.5.7" - "@rspack/lite-tapable": "npm:1.0.1" + "@module-federation/runtime-tools": "npm:0.22.0" + "@rspack/binding": "npm:1.7.11" + "@rspack/lite-tapable": "npm:1.1.0" peerDependencies: "@swc/helpers": ">=0.5.1" peerDependenciesMeta: "@swc/helpers": optional: true - checksum: 10c0/9bf139f4f8a411f976005aec4697dc956675a9f095313288de1a636b5692fbf66c97a8da71c71de84af11b136b290a819a889ea8fc4db2a92ae0b89790e383f6 + checksum: 10c0/a1df355d94a7d7737729aa816f6d0cd3ef481a05dff02486fb4e6f7155b9c76653ed57aed5cfe56dc6c686a1cae4167d4de16c68e71d60d7191c8d2613a171f7 languageName: node linkType: hard -"@rspack/lite-tapable@npm:1.0.1": - version: 1.0.1 - resolution: "@rspack/lite-tapable@npm:1.0.1" - checksum: 10c0/90bb1bc414dc51ea2d0933e09f78d25584f3f50a85f4cb8228930bd29e5931bf55eff4f348a06c51dd3149fc73b8ae3920bf0ae5ae8a0c9fe1d9b404e6ecf5b7 +"@rspack/lite-tapable@npm:1.1.0": + version: 1.1.0 + resolution: "@rspack/lite-tapable@npm:1.1.0" + checksum: 10c0/15059d1da73192b150339ceba3142a2d0073fa298dad9a497cc8c6037c597c3a982ed4c88dc50afa7b70d0757df1b47af7ae407cfe8acd31d333d524b84a7a4b languageName: node linkType: hard @@ -4922,13 +4916,6 @@ __metadata: languageName: node linkType: hard -"@standard-schema/spec@npm:^1.0.0": - version: 1.0.0 - resolution: "@standard-schema/spec@npm:1.0.0" - checksum: 10c0/a1ab9a8bdc09b5b47aa8365d0e0ec40cc2df6437be02853696a0e377321653b0d3ac6f079a8c67d5ddbe9821025584b1fb71d9cc041a6666a96f1fadf2ece15f - languageName: node - linkType: hard - "@surma/rollup-plugin-off-main-thread@npm:^2.2.3": version: 2.2.3 resolution: "@surma/rollup-plugin-off-main-thread@npm:2.2.3" @@ -5570,10 +5557,10 @@ __metadata: languageName: node linkType: hard -"@types/gtag.js@npm:^0.0.12": - version: 0.0.12 - resolution: "@types/gtag.js@npm:0.0.12" - checksum: 10c0/fee8f4c6e627301b89ab616c9e219bd53fa6ea1ffd1d0a8021e21363f0bdb2cf7eb1a5bcda0c6f1502186379bc7784ec29c932e21634f4e07f9e7a8c56887400 +"@types/gtag.js@npm:^0.0.20": + version: 0.0.20 + resolution: "@types/gtag.js@npm:0.0.20" + checksum: 10c0/eb878aa3cfab6b98f5e69ef3383e9788aaea6a4d0611c72078678374dcbb4731f533ff2bf479a865536f1626a57887b1198279ff35a65d223fe4f93d9c76dbdd languageName: node linkType: hard @@ -6388,20 +6375,6 @@ __metadata: languageName: node linkType: hard -"ai@npm:5.0.54, ai@npm:^5.0.30": - version: 5.0.54 - resolution: "ai@npm:5.0.54" - dependencies: - "@ai-sdk/gateway": "npm:1.0.30" - "@ai-sdk/provider": "npm:2.0.0" - "@ai-sdk/provider-utils": "npm:3.0.10" - "@opentelemetry/api": "npm:1.9.0" - peerDependencies: - zod: ^3.25.76 || ^4.1.8 - checksum: 10c0/0c515546da58753008b37c8bbccbfcf8227e65f5a053ed367d805e1c0f758a5a0d68e7da8393901024df3d504c470c46853ad512075b3b8dd0ab939b5f4187f4 - languageName: node - linkType: hard - "ajv-formats@npm:^2.1.1": version: 2.1.1 resolution: "ajv-formats@npm:2.1.1" @@ -6502,7 +6475,7 @@ __metadata: languageName: node linkType: hard -"algoliasearch@npm:^5.28.0, algoliasearch@npm:^5.37.0": +"algoliasearch@npm:^5.37.0": version: 5.38.0 resolution: "algoliasearch@npm:5.38.0" dependencies: @@ -7930,6 +7903,13 @@ __metadata: languageName: node linkType: hard +"copy-text-to-clipboard@npm:^3.2.0": + version: 3.2.2 + resolution: "copy-text-to-clipboard@npm:3.2.2" + checksum: 10c0/451796734a380f7da7b0af27c4d94e449719d3a2f2170e99c7e46eeee54cf3c4b4fdeabc185f6d6e8cbdf932e350831d05e8387c4bae8dcedb7fb961c600ddd4 + languageName: node + linkType: hard + "copy-webpack-plugin@npm:^11.0.0": version: 11.0.0 resolution: "copy-webpack-plugin@npm:11.0.0" @@ -7955,13 +7935,6 @@ __metadata: languageName: node linkType: hard -"core-js-pure@npm:^3.30.2": - version: 3.40.0 - resolution: "core-js-pure@npm:3.40.0" - checksum: 10c0/97590017216e2614e44bacc0b73159061b58e3ac86b61a3ed8cd78fc12bef604c5fb559a7a4d51ae5f2d1bd23ec57760ba6bf2802e802beb42d6bbce136acf52 - languageName: node - linkType: hard - "core-js@npm:^3.31.1": version: 3.40.0 resolution: "core-js@npm:3.40.0" @@ -8561,7 +8534,7 @@ __metadata: languageName: node linkType: hard -"dequal@npm:^2.0.0, dequal@npm:^2.0.3": +"dequal@npm:^2.0.0": version: 2.0.3 resolution: "dequal@npm:2.0.3" checksum: 10c0/f98860cdf58b64991ae10205137c0e97d384c3a4edc7f807603887b7c4b850af1224a33d88012009f150861cbee4fa2d322c4cc04b9313bee312e47f6ecaa888 @@ -9782,14 +9755,7 @@ __metadata: languageName: node linkType: hard -"eventsource-parser@npm:^3.0.5": - version: 3.0.6 - resolution: "eventsource-parser@npm:3.0.6" - checksum: 10c0/70b8ccec7dac767ef2eca43f355e0979e70415701691382a042a2df8d6a68da6c2fca35363669821f3da876d29c02abe9b232964637c1b6635c940df05ada78a - languageName: node - linkType: hard - -"execa@npm:5.1.1, execa@npm:^5.0.0": +"execa@npm:^5.0.0, execa@npm:^5.1.1": version: 5.1.1 resolution: "execa@npm:5.1.1" dependencies: @@ -13571,15 +13537,6 @@ __metadata: languageName: node linkType: hard -"marked@npm:^16.3.0": - version: 16.3.0 - resolution: "marked@npm:16.3.0" - bin: - marked: bin/marked.js - checksum: 10c0/5a3d7da93d7692014c8764c31dc741fa6ee16d8573788a3b28d041c440e79177c46d786ad7c1fc2b3f5e301d6db32e22da45efd4c00ddbc31caf87bd8e9a673b - languageName: node - linkType: hard - "marky@npm:^1.2.2": version: 1.2.5 resolution: "marky@npm:1.2.5" @@ -17941,15 +17898,15 @@ __metadata: languageName: node linkType: hard -"react-loadable-ssr-addon-v5-slorber@npm:^1.0.1": - version: 1.0.1 - resolution: "react-loadable-ssr-addon-v5-slorber@npm:1.0.1" +"react-loadable-ssr-addon-v5-slorber@npm:^1.0.3": + version: 1.0.3 + resolution: "react-loadable-ssr-addon-v5-slorber@npm:1.0.3" dependencies: "@babel/runtime": "npm:^7.10.3" peerDependencies: react-loadable: "*" webpack: ">=4.41.1 || 5.x" - checksum: 10c0/7b0645f66adec56646f985ba8094c66a1c0a4627d96ad80eea32431d773ef1f79aa47d3247a8f21db3b064a0c6091653c5b5d3483b7046722eb64e55bffe635c + checksum: 10c0/6f7af924ad0187c41925dda948587452e30b6d5306465468795daa0382524406e6421dcf5be100a4d285dcb0acc916fcce511a35865eb53ab2d7306ecb525f32 languageName: node linkType: hard @@ -18004,14 +17961,14 @@ __metadata: version: 0.0.0-use.local resolution: "react-native-website@workspace:website" dependencies: - "@docusaurus/core": "npm:3.9.2" - "@docusaurus/faster": "npm:3.9.2" - "@docusaurus/module-type-aliases": "npm:3.9.2" - "@docusaurus/plugin-google-gtag": "npm:3.9.2" - "@docusaurus/plugin-pwa": "npm:3.9.2" - "@docusaurus/preset-classic": "npm:3.9.2" - "@docusaurus/tsconfig": "npm:3.9.2" - "@docusaurus/types": "npm:3.9.2" + "@docusaurus/core": "npm:3.10.0" + "@docusaurus/faster": "npm:3.10.0" + "@docusaurus/module-type-aliases": "npm:3.10.0" + "@docusaurus/plugin-google-gtag": "npm:3.10.0" + "@docusaurus/plugin-pwa": "npm:3.10.0" + "@docusaurus/preset-classic": "npm:3.10.0" + "@docusaurus/tsconfig": "npm:3.10.0" + "@docusaurus/types": "npm:3.10.0" "@prettier/plugin-oxc": "npm:^0.1.3" "@react-native-website/lint-examples": "npm:*" "@signalwire/docusaurus-plugin-llms-txt": "npm:^1.2.2" @@ -18341,13 +18298,6 @@ __metadata: languageName: node linkType: hard -"regenerator-runtime@npm:^0.14.0": - version: 0.14.1 - resolution: "regenerator-runtime@npm:0.14.1" - checksum: 10c0/1b16eb2c4bceb1665c89de70dcb64126a22bc8eb958feef3cd68fe11ac6d2a4899b5cd1b80b0774c7c03591dc57d16631a7f69d2daa2ec98100e2f29f7ec4cc4 - languageName: node - linkType: hard - "regexp.prototype.flags@npm:^1.5.1, regexp.prototype.flags@npm:^1.5.3": version: 1.5.4 resolution: "regexp.prototype.flags@npm:1.5.4" @@ -19246,18 +19196,18 @@ __metadata: languageName: node linkType: hard -"serve-handler@npm:^6.1.6": - version: 6.1.6 - resolution: "serve-handler@npm:6.1.6" +"serve-handler@npm:^6.1.7": + version: 6.1.7 + resolution: "serve-handler@npm:6.1.7" dependencies: bytes: "npm:3.0.0" content-disposition: "npm:0.5.2" mime-types: "npm:2.1.18" - minimatch: "npm:3.1.2" + minimatch: "npm:3.1.5" path-is-inside: "npm:1.0.2" path-to-regexp: "npm:3.3.0" range-parser: "npm:1.2.0" - checksum: 10c0/1e1cb6bbc51ee32bc1505f2e0605bdc2e96605c522277c977b67f83be9d66bd1eec8604388714a4d728e036d86b629bc9aec02120ea030d3d2c3899d44696503 + checksum: 10c0/35afb68d81afd3c38d15792a5bc2451915b739bef2898a47ebd190db6a4e29846530ac00292b8008fe7297a819257c3948be2deaf4ffd32c96689e8947cf0ae9 languageName: node linkType: hard @@ -20152,18 +20102,6 @@ __metadata: languageName: node linkType: hard -"swr@npm:^2.2.5": - version: 2.3.6 - resolution: "swr@npm:2.3.6" - dependencies: - dequal: "npm:^2.0.3" - use-sync-external-store: "npm:^1.4.0" - peerDependencies: - react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - checksum: 10c0/9534f350982e36a3ae0a13da8c0f7da7011fc979e77f306e60c4e5db0f9b84f17172c44f973441ba56bb684b69b0d9838ab40011a6b6b3e32d0cd7f3d5405f99 - languageName: node - linkType: hard - "synckit@npm:^0.11.12, synckit@npm:^0.11.8": version: 0.11.12 resolution: "synckit@npm:0.11.12" @@ -20314,13 +20252,6 @@ __metadata: languageName: node linkType: hard -"throttleit@npm:2.1.0": - version: 2.1.0 - resolution: "throttleit@npm:2.1.0" - checksum: 10c0/1696ae849522cea6ba4f4f3beac1f6655d335e51b42d99215e196a718adced0069e48deaaf77f7e89f526ab31de5b5c91016027da182438e6f9280be2f3d5265 - languageName: node - linkType: hard - "through2@npm:2.0.0": version: 2.0.0 resolution: "through2@npm:2.0.0" @@ -21294,15 +21225,6 @@ __metadata: languageName: node linkType: hard -"use-sync-external-store@npm:^1.4.0": - version: 1.5.0 - resolution: "use-sync-external-store@npm:1.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - checksum: 10c0/1b8663515c0be34fa653feb724fdcce3984037c78dd4a18f68b2c8be55cc1a1084c578d5b75f158d41b5ddffc2bf5600766d1af3c19c8e329bb20af2ec6f52f4 - languageName: node - linkType: hard - "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1": version: 1.0.2 resolution: "util-deprecate@npm:1.0.2" @@ -22339,7 +22261,7 @@ __metadata: languageName: node linkType: hard -"zod@npm:^3.25.0 || ^4.0.0, zod@npm:^4.1.8": +"zod@npm:^3.25.0 || ^4.0.0": version: 4.3.4 resolution: "zod@npm:4.3.4" checksum: 10c0/a096102c8b31ecdb913bacb08d5a0fe8447bbe4f54cff421a0c5830a5552da76aae9fd8a01f2e9fdeaae35da1a73762551bc9d14cfedb13a44056de1ed2eb76f From 359e99870c5ba8ae8c3531564453542c7da6b4e6 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Thu, 9 Apr 2026 11:11:26 +0200 Subject: [PATCH 2/5] update latest blog post and 0.85 docs --- ...ive-0.85.md => 2026-04-07-react-native-0.85.mdx} | 13 ++++++++----- .../version-0.85/_canary-channel-api-warning.mdx | 2 +- .../_experimental-channel-api-warning.mdx | 2 +- .../version-0.85/accessibilityinfo.md | 2 +- website/versioned_docs/version-0.85/alertios.md | 2 +- website/versioned_docs/version-0.85/asyncstorage.md | 2 +- website/versioned_docs/version-0.85/backhandler.md | 2 +- .../versioned_docs/version-0.85/building-for-tv.md | 2 +- website/versioned_docs/version-0.85/checkbox.md | 2 +- website/versioned_docs/version-0.85/clipboard.md | 2 +- .../version-0.85/datepickerandroid.md | 2 +- .../versioned_docs/version-0.85/datepickerios.md | 2 +- .../version-0.85/global-PerformanceEventTiming.md | 2 +- .../global-PerformanceLongTaskTiming.md | 2 +- .../global-PerformanceResourceTiming.md | 2 +- .../version-0.85/global-intersectionobserver.md | 2 +- .../global-intersectionobserverentry.md | 2 +- .../version-0.85/global-performance.md | 6 +++--- .../versioned_docs/version-0.85/imagepickerios.md | 2 +- .../integration-with-android-fragment.md | 2 +- .../version-0.85/interactionmanager.md | 2 +- .../version-0.85/legacy/native-modules-ios.md | 2 +- .../version-0.85/{metro.md => metro.mdx} | 8 ++++---- website/versioned_docs/version-0.85/modal.md | 2 +- website/versioned_docs/version-0.85/network.md | 2 +- .../version-0.85/other-debugging-methods.md | 2 +- website/versioned_docs/version-0.85/profiling.md | 6 +++--- .../version-0.85/progressbarandroid.md | 2 +- .../version-0.85/pushnotificationios.md | 2 +- website/versioned_docs/version-0.85/safeareaview.md | 2 +- website/versioned_docs/version-0.85/security.md | 4 ++-- .../version-0.85/segmentedcontrolios.md | 2 +- .../version-0.85/signed-apk-android.md | 6 +++--- website/versioned_docs/version-0.85/statusbar.md | 2 +- website/versioned_docs/version-0.85/statusbarios.md | 2 +- .../version-0.85/strict-typescript-api.md | 4 ++-- website/versioned_docs/version-0.85/stylesheet.md | 2 +- website/versioned_docs/version-0.85/textinput.md | 2 +- ...-module-library.md => create-module-library.mdx} | 8 ++++++-- .../the-new-architecture/pure-cxx-modules.md | 2 +- .../{using-codegen.md => using-codegen.mdx} | 4 ++-- .../{what-is-codegen.md => what-is-codegen.mdx} | 2 +- .../version-0.85/timepickerandroid.md | 2 +- website/versioned_docs/version-0.85/timers.md | 2 +- website/versioned_docs/version-0.85/transforms.md | 2 +- .../version-0.85/turbo-native-modules-android.md | 2 +- .../versioned_docs/version-0.85/virtualizedlist.md | 2 +- 47 files changed, 71 insertions(+), 64 deletions(-) rename website/blog/{2026-04-07-react-native-0.85.md => 2026-04-07-react-native-0.85.mdx} (97%) rename website/versioned_docs/version-0.85/{metro.md => metro.mdx} (97%) rename website/versioned_docs/version-0.85/the-new-architecture/{create-module-library.md => create-module-library.mdx} (97%) rename website/versioned_docs/version-0.85/the-new-architecture/{using-codegen.md => using-codegen.mdx} (99%) rename website/versioned_docs/version-0.85/the-new-architecture/{what-is-codegen.md => what-is-codegen.mdx} (97%) diff --git a/website/blog/2026-04-07-react-native-0.85.md b/website/blog/2026-04-07-react-native-0.85.mdx similarity index 97% rename from website/blog/2026-04-07-react-native-0.85.md rename to website/blog/2026-04-07-react-native-0.85.mdx index 3e67359cf7a..90525a553e1 100644 --- a/website/blog/2026-04-07-react-native-0.85.md +++ b/website/blog/2026-04-07-react-native-0.85.mdx @@ -34,7 +34,7 @@ This release includes the New Animation Backend, moves the Jest preset to a dedi - [`StyleSheet.absoluteFillObject` Removed](/blog/2026/04/07/react-native-0.85#stylesheetabsolutefillobject-removed) - [Other Breaking Changes](/blog/2026/04/07/react-native-0.85#other-breaking-changes) - +{/* truncate */} ## Highlights @@ -101,7 +101,10 @@ React Native DevTools received several improvements in this release: - **Multiple CDP connections**: React Native now supports multiple simultaneous Chrome DevTools Protocol connections, enabling clients such as React Native DevTools, VS Code, and AI agents to connect at the same time. This unlocks richer, composable tooling workflows without unexpectedly ending sessions. - **Native tabs on macOS**: We've updated the desktop app to compile for macOS 26, and have also enabled system-level tab handling for power users. Access via **Window > Merge All Windows**, when multiple DevTools windows are open. -DevTools native tabs on macOS +DevTools native tabs on macOS - **Request payload previews**: After being disabled due to a regression, request body previews in the Network Panel are now restored on Android. @@ -121,7 +124,7 @@ config.server.tls = { }; ``` - +{/* alex ignore simple */} For local development, [mkcert](https://github.com/FiloSottile/mkcert) is a simple way to generate a locally-trusted certificate without browser warnings. @@ -193,7 +196,7 @@ The deprecated `StyleSheet.absoluteFillObject` API has been removed. Use `StyleS React Native 0.85 contains over 604 commits from 58 contributors. Thanks for all your hard work! - +{/* alex ignore special white */} We want to send a special thank you to those community members that shipped significant contributions in this release. @@ -204,7 +207,7 @@ We want to send a special thank you to those community members that shipped sign Moreover, we also want to thank the additional authors that worked on documenting features in this release post: - +{/* TODO: Add blog post co-authors */} ## Upgrade to 0.85 diff --git a/website/versioned_docs/version-0.85/_canary-channel-api-warning.mdx b/website/versioned_docs/version-0.85/_canary-channel-api-warning.mdx index e8b3934b850..2c1ae5cf423 100644 --- a/website/versioned_docs/version-0.85/_canary-channel-api-warning.mdx +++ b/website/versioned_docs/version-0.85/_canary-channel-api-warning.mdx @@ -1,4 +1,4 @@ -:::tip Canary 🧪 +:::tip[Canary 🧪] **This API is currently only available in React Native’s Canary and Experimental channels.** diff --git a/website/versioned_docs/version-0.85/_experimental-channel-api-warning.mdx b/website/versioned_docs/version-0.85/_experimental-channel-api-warning.mdx index 8f290343124..ffcfae347fe 100644 --- a/website/versioned_docs/version-0.85/_experimental-channel-api-warning.mdx +++ b/website/versioned_docs/version-0.85/_experimental-channel-api-warning.mdx @@ -1,4 +1,4 @@ -:::tip Experimental Feature 🧪 +:::tip[Experimental Feature 🧪] **This API is currently only available in React Native’s Experimental channels.** diff --git a/website/versioned_docs/version-0.85/accessibilityinfo.md b/website/versioned_docs/version-0.85/accessibilityinfo.md index af69fbcfec3..c5c580e8c80 100644 --- a/website/versioned_docs/version-0.85/accessibilityinfo.md +++ b/website/versioned_docs/version-0.85/accessibilityinfo.md @@ -256,7 +256,7 @@ Query whether reduce motion and prefer cross-fade transitions settings are curre ### 🗑️ `setAccessibilityFocus()` -:::warning Deprecated +:::warning[Deprecated] Prefer using `sendAccessibilityEvent` with eventType `focus` instead. ::: diff --git a/website/versioned_docs/version-0.85/alertios.md b/website/versioned_docs/version-0.85/alertios.md index 64d298d5e0a..a2d6d4f2610 100644 --- a/website/versioned_docs/version-0.85/alertios.md +++ b/website/versioned_docs/version-0.85/alertios.md @@ -3,6 +3,6 @@ id: alertios title: '❌ AlertIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use [`Alert`](alert) instead. ::: diff --git a/website/versioned_docs/version-0.85/asyncstorage.md b/website/versioned_docs/version-0.85/asyncstorage.md index dfe35feaa3d..e1fb69471fa 100644 --- a/website/versioned_docs/version-0.85/asyncstorage.md +++ b/website/versioned_docs/version-0.85/asyncstorage.md @@ -3,6 +3,6 @@ id: asyncstorage title: '❌ AsyncStorage' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=storage) instead. ::: diff --git a/website/versioned_docs/version-0.85/backhandler.md b/website/versioned_docs/version-0.85/backhandler.md index c3c7c937541..f020f3fc7a5 100644 --- a/website/versioned_docs/version-0.85/backhandler.md +++ b/website/versioned_docs/version-0.85/backhandler.md @@ -10,7 +10,7 @@ The event subscriptions are called in reverse order (i.e. the last registered su - **If one subscription returns true,** then subscriptions registered earlier will not be called. - **If no subscription returns true or none are registered,** it programmatically invokes the default back button functionality to exit the app. -:::warning Warning for modal users +:::warning[Warning for modal users] If your app shows an opened `Modal`, `BackHandler` will not publish any events ([see `Modal` docs](modal#onrequestclose)). ::: diff --git a/website/versioned_docs/version-0.85/building-for-tv.md b/website/versioned_docs/version-0.85/building-for-tv.md index b39f843a481..52430c91f74 100644 --- a/website/versioned_docs/version-0.85/building-for-tv.md +++ b/website/versioned_docs/version-0.85/building-for-tv.md @@ -6,6 +6,6 @@ hide_table_of_contents: true TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. -:::warning Deprecated +:::warning[Deprecated] TV support has moved to the [React Native for TV](https://github.com/react-native-tvos/react-native-tvos#readme) repository. Please see the **README** there for information on projects for Apple TV or Android TV. ::: diff --git a/website/versioned_docs/version-0.85/checkbox.md b/website/versioned_docs/version-0.85/checkbox.md index 0a85111a8ae..e92591defd5 100644 --- a/website/versioned_docs/version-0.85/checkbox.md +++ b/website/versioned_docs/version-0.85/checkbox.md @@ -3,6 +3,6 @@ id: checkbox title: '❌ CheckBox' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=checkbox) instead. ::: diff --git a/website/versioned_docs/version-0.85/clipboard.md b/website/versioned_docs/version-0.85/clipboard.md index 2e67bf9ba5a..bcfbf8714d9 100644 --- a/website/versioned_docs/version-0.85/clipboard.md +++ b/website/versioned_docs/version-0.85/clipboard.md @@ -3,6 +3,6 @@ id: clipboard title: '❌ Clipboard' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=clipboard) instead. ::: diff --git a/website/versioned_docs/version-0.85/datepickerandroid.md b/website/versioned_docs/version-0.85/datepickerandroid.md index d837b48b957..c928fdffee6 100644 --- a/website/versioned_docs/version-0.85/datepickerandroid.md +++ b/website/versioned_docs/version-0.85/datepickerandroid.md @@ -3,6 +3,6 @@ id: datepickerandroid title: '❌ DatePickerAndroid' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead. ::: diff --git a/website/versioned_docs/version-0.85/datepickerios.md b/website/versioned_docs/version-0.85/datepickerios.md index 0e536ffa686..7965ec05c3a 100644 --- a/website/versioned_docs/version-0.85/datepickerios.md +++ b/website/versioned_docs/version-0.85/datepickerios.md @@ -3,6 +3,6 @@ id: datepickerios title: '❌ DatePickerIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead. ::: diff --git a/website/versioned_docs/version-0.85/global-PerformanceEventTiming.md b/website/versioned_docs/version-0.85/global-PerformanceEventTiming.md index e28106b390e..5e30f206cc2 100644 --- a/website/versioned_docs/version-0.85/global-PerformanceEventTiming.md +++ b/website/versioned_docs/version-0.85/global-PerformanceEventTiming.md @@ -5,6 +5,6 @@ title: PerformanceEventTiming The global [`PerformanceEventTiming`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEventTiming) class, as defined in Web specifications. -:::warning Partial support +:::warning[Partial support] The `cancelable` and `target` properties are not supported yet. ::: diff --git a/website/versioned_docs/version-0.85/global-PerformanceLongTaskTiming.md b/website/versioned_docs/version-0.85/global-PerformanceLongTaskTiming.md index c951fcc18f4..9e202636e70 100644 --- a/website/versioned_docs/version-0.85/global-PerformanceLongTaskTiming.md +++ b/website/versioned_docs/version-0.85/global-PerformanceLongTaskTiming.md @@ -5,6 +5,6 @@ title: PerformanceLongTaskTiming The global [`PerformanceLongTaskTiming`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceLongTaskTiming) class, as defined in Web specifications. -:::warning Partial support +:::warning[Partial support] The value for the `attribution` property is always an empty array. ::: diff --git a/website/versioned_docs/version-0.85/global-PerformanceResourceTiming.md b/website/versioned_docs/version-0.85/global-PerformanceResourceTiming.md index 60da4656aeb..6575d928cfe 100644 --- a/website/versioned_docs/version-0.85/global-PerformanceResourceTiming.md +++ b/website/versioned_docs/version-0.85/global-PerformanceResourceTiming.md @@ -5,7 +5,7 @@ title: PerformanceResourceTiming The global [`PerformanceResourceTiming`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming) class, as defined in Web specifications. -:::warning Partial support +:::warning[Partial support] React Native implements the following `PerformanceResourceTiming` properties only: diff --git a/website/versioned_docs/version-0.85/global-intersectionobserver.md b/website/versioned_docs/version-0.85/global-intersectionobserver.md index 24b8672dfd1..afa3dc70053 100644 --- a/website/versioned_docs/version-0.85/global-intersectionobserver.md +++ b/website/versioned_docs/version-0.85/global-intersectionobserver.md @@ -61,7 +61,7 @@ An offset rectangle applied to the root's bounding box when calculating intersec ### `rnRootThresholds` ⚠️ -:::warning Non-standard +:::warning[Non-standard] This is a React Native specific extension. ::: diff --git a/website/versioned_docs/version-0.85/global-intersectionobserverentry.md b/website/versioned_docs/version-0.85/global-intersectionobserverentry.md index 656be66b744..67729c711bb 100644 --- a/website/versioned_docs/version-0.85/global-intersectionobserverentry.md +++ b/website/versioned_docs/version-0.85/global-intersectionobserverentry.md @@ -43,7 +43,7 @@ A Boolean value which is `true` if the target element intersects with the inters ### `rnRootIntersectionRatio` ⚠️ -:::warning Non-standard +:::warning[Non-standard] This is a React Native specific extension. ::: diff --git a/website/versioned_docs/version-0.85/global-performance.md b/website/versioned_docs/version-0.85/global-performance.md index 488f55020ef..073576056e5 100644 --- a/website/versioned_docs/version-0.85/global-performance.md +++ b/website/versioned_docs/version-0.85/global-performance.md @@ -21,7 +21,7 @@ See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/Perf ### `rnStartupTiming` ⚠️ -:::warning Non-standard +:::warning[Non-standard] This is a React Native specific extension. ::: @@ -41,7 +41,7 @@ The `ReactNativeStartupTiming` interface provides the following fields: ### `timeOrigin` -:::warning Partial support +:::warning[Partial support] Provides the number of milliseconds from the UNIX epoch until system boot, instead of the number of milliseconds from the UNIX epoch until app startup. ::: @@ -79,7 +79,7 @@ See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/Perf ### `now()` -:::warning Partial support +:::warning[Partial support] Provides the number of milliseconds from system boot, instead of the number of milliseconds from app startup. ::: diff --git a/website/versioned_docs/version-0.85/imagepickerios.md b/website/versioned_docs/version-0.85/imagepickerios.md index d4749216253..ca5814e8677 100644 --- a/website/versioned_docs/version-0.85/imagepickerios.md +++ b/website/versioned_docs/version-0.85/imagepickerios.md @@ -3,6 +3,6 @@ id: imagepickerios title: '❌ ImagePickerIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=image+picker) instead. ::: diff --git a/website/versioned_docs/version-0.85/integration-with-android-fragment.md b/website/versioned_docs/version-0.85/integration-with-android-fragment.md index e9c385b3eb1..99e69c2ba8f 100644 --- a/website/versioned_docs/version-0.85/integration-with-android-fragment.md +++ b/website/versioned_docs/version-0.85/integration-with-android-fragment.md @@ -33,7 +33,7 @@ This is required by React Native to handle the back button press event. Go into your host activity and make sure it implements the `DefaultHardwareBackBtnHandler` interface: -:::warning Deprecated +:::warning[Deprecated] `Activity.onBackPressed()` has been [deprecated]() since API level 33. Android 16 devices with apps targeting API level 36 this will [no longer be called](https://developer.android.com/about/versions/16/behavior-changes-16#predictive-back) and [OnBackPressedDispatcher](https://developer.android.com/reference/androidx/activity/OnBackPressedDispatcher) should be used instead. ::: diff --git a/website/versioned_docs/version-0.85/interactionmanager.md b/website/versioned_docs/version-0.85/interactionmanager.md index 8eac16a4b70..f1851c75212 100644 --- a/website/versioned_docs/version-0.85/interactionmanager.md +++ b/website/versioned_docs/version-0.85/interactionmanager.md @@ -5,7 +5,7 @@ title: 🗑️ InteractionManager import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; -:::warning Deprecated +:::warning[Deprecated] Avoid long-running work and use [`requestIdleCallback`](global-requestIdleCallback) instead. ::: diff --git a/website/versioned_docs/version-0.85/legacy/native-modules-ios.md b/website/versioned_docs/version-0.85/legacy/native-modules-ios.md index fb3303985bb..6c33c64ec75 100644 --- a/website/versioned_docs/version-0.85/legacy/native-modules-ios.md +++ b/website/versioned_docs/version-0.85/legacy/native-modules-ios.md @@ -551,7 +551,7 @@ RCT_EXPORT_METHOD(doSomethingExpensive:(NSString *)param callback:(RCTResponseSe ``` -:::info Sharing dispatch queues between modules +:::info[Sharing dispatch queues between modules] The `methodQueue` method will be called once when the module is initialized, and then retained by React Native, so there is no need to keep a reference to the queue yourself, unless you wish to make use of it within your module. However, if you wish to share the same queue between multiple modules then you will need to ensure that you retain and return the same queue instance for each of them. ::: diff --git a/website/versioned_docs/version-0.85/metro.md b/website/versioned_docs/version-0.85/metro.mdx similarity index 97% rename from website/versioned_docs/version-0.85/metro.md rename to website/versioned_docs/version-0.85/metro.mdx index a61962a5512..791f3a9d4f0 100644 --- a/website/versioned_docs/version-0.85/metro.md +++ b/website/versioned_docs/version-0.85/metro.mdx @@ -20,7 +20,7 @@ In React Native, your Metro config should extend either [`@react-native/metro-co Below is the default `metro.config.js` file in a React Native template project: - +{/* prettier-ignore */} ```js const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); @@ -45,7 +45,7 @@ Exporting a config function is an opt-in to managing the final config yourself **From `@react-native/metro-config` 0.72.1**, it is no longer necessary to use a config function to access the complete default config. See the **Tip** section below. ::: - +{/* prettier-ignore */} ```js const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); @@ -70,7 +70,7 @@ Using a config function is for advanced use cases. A simpler method than the abo **Alternative** - +{/* prettier-ignore */} ```js const defaultConfig = getDefaultConfig(__dirname); @@ -87,7 +87,7 @@ module.exports = mergeConfig(defaultConfig, config); ✅ **Recommended** - +{/* prettier-ignore */} ```js const config = { resolver: { diff --git a/website/versioned_docs/version-0.85/modal.md b/website/versioned_docs/version-0.85/modal.md index d4c8fbde55c..ca04a4cdc8a 100644 --- a/website/versioned_docs/version-0.85/modal.md +++ b/website/versioned_docs/version-0.85/modal.md @@ -106,7 +106,7 @@ Inherits [View Props](view.md#props). ### 🗑️ `animated` -:::warning Deprecated +:::warning[Deprecated] Use the [`animationType`](modal.md#animationtype) prop instead. ::: diff --git a/website/versioned_docs/version-0.85/network.md b/website/versioned_docs/version-0.85/network.md index 1a46e514377..c002f9fc9ba 100644 --- a/website/versioned_docs/version-0.85/network.md +++ b/website/versioned_docs/version-0.85/network.md @@ -217,7 +217,7 @@ request.open('GET', 'https://mywebsite.com/endpoint/'); request.send(); ``` -:::warning Caution +:::warning[Caution] The security model for XMLHttpRequest is different than on web as there is no concept of [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) in native apps. ::: diff --git a/website/versioned_docs/version-0.85/other-debugging-methods.md b/website/versioned_docs/version-0.85/other-debugging-methods.md index 28b13d1e087..5df989acefc 100644 --- a/website/versioned_docs/version-0.85/other-debugging-methods.md +++ b/website/versioned_docs/version-0.85/other-debugging-methods.md @@ -27,7 +27,7 @@ Every time the app is reloaded, a new JSContext is created. Choosing "Automatica ## Remote JavaScript Debugging (removed) -:::warning Important +:::warning[Important] Remote JavaScript Debugging has been removed as of React Native 0.79. See the original [deprecation announcement](https://github.com/react-native-community/discussions-and-proposals/discussions/734). If you are on an older version of React Native, please go to the docs [for your version](/versions). diff --git a/website/versioned_docs/version-0.85/profiling.md b/website/versioned_docs/version-0.85/profiling.md index f833a4440c2..73cbed73ad1 100644 --- a/website/versioned_docs/version-0.85/profiling.md +++ b/website/versioned_docs/version-0.85/profiling.md @@ -33,13 +33,13 @@ After opening the trace in Android Studio or Perfetto, you should see something ![Example](/docs/assets/SystraceExample.png) -:::note Hint +:::note[Hint] Use the WASD keys to strafe and zoom. ::: The exact UI might be different but the instructions below will apply regardless of the tool you're using. -:::info Enable VSync highlighting +:::info[Enable VSync highlighting] Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries: ![Enable VSync Highlighting](/docs/assets/SystraceHighlightVSync.png) @@ -133,7 +133,7 @@ There isn't a quick way to mitigate this unless you're able to postpone creating If the problem seems to be on the native side, you can use the [CPU hotspot profiler](https://developer.android.com/studio/profile/record-java-kotlin-methods) to get more details on what's happening. Open the Android Studio Profiler panel and select "Find CPU Hotspots (Java/Kotlin Method Recording)". -:::info Choose the Java/Kotlin recording +:::info[Choose the Java/Kotlin recording] Make sure you select "Find CPU Hotspots **(Java/Kotlin Recording)**" rather than "Find CPU Hotspots (Callstack Sample)". They have similar icons but do different things. ::: diff --git a/website/versioned_docs/version-0.85/progressbarandroid.md b/website/versioned_docs/version-0.85/progressbarandroid.md index 4f165d86c46..d26fb2038d6 100644 --- a/website/versioned_docs/version-0.85/progressbarandroid.md +++ b/website/versioned_docs/version-0.85/progressbarandroid.md @@ -3,7 +3,7 @@ id: progressbarandroid title: '🗑️ ProgressBarAndroid' --- -:::warning Deprecated +:::warning[Deprecated] Use one of the [community packages](https://reactnative.directory/?search=progressbar) instead. ::: diff --git a/website/versioned_docs/version-0.85/pushnotificationios.md b/website/versioned_docs/version-0.85/pushnotificationios.md index 0cdecf3180a..c42d3a28193 100644 --- a/website/versioned_docs/version-0.85/pushnotificationios.md +++ b/website/versioned_docs/version-0.85/pushnotificationios.md @@ -3,7 +3,7 @@ id: pushnotificationios title: '🗑️ PushNotificationIOS' --- -:::warning Deprecated +:::warning[Deprecated] Use one of the [community packages](https://reactnative.directory/?search=notification) instead. ::: diff --git a/website/versioned_docs/version-0.85/safeareaview.md b/website/versioned_docs/version-0.85/safeareaview.md index fd0d2d479c3..8da4485ff12 100644 --- a/website/versioned_docs/version-0.85/safeareaview.md +++ b/website/versioned_docs/version-0.85/safeareaview.md @@ -3,7 +3,7 @@ id: safeareaview title: '🗑️ SafeAreaView' --- -:::warning Deprecated +:::warning[Deprecated] Use [react-native-safe-area-context](https://github.com/AppAndFlow/react-native-safe-area-context) instead. ::: diff --git a/website/versioned_docs/version-0.85/security.md b/website/versioned_docs/version-0.85/security.md index bf8ed1ff5d4..7a6c1bf150e 100644 --- a/website/versioned_docs/version-0.85/security.md +++ b/website/versioned_docs/version-0.85/security.md @@ -68,7 +68,7 @@ In order to use iOS Keychain services or Android Secure Shared Preferences, you - [expo-secure-store](https://docs.expo.dev/versions/latest/sdk/securestore/) - [react-native-keychain](https://github.com/oblador/react-native-keychain) -:::warning Caution +:::warning[Caution] **Be mindful of unintentionally storing or exposing sensitive info.** This could happen accidentally, for example saving sensitive form data in redux state and persisting the whole state tree in Async Storage. Or sending user tokens and personal info to an application monitoring service such as Sentry or Crashlytics. ::: @@ -127,7 +127,7 @@ Using https endpoints could still leave your data vulnerable to interception. Wi **SSL pinning** is a technique that can be used on the client side to avoid this attack. It works by embedding (or pinning) a list of trusted certificates to the client during development, so that only the requests signed with one of the trusted certificates will be accepted, and any self-signed certificates will not be. -:::warning Caution +:::warning[Caution] When using SSL pinning, you should be mindful of certificate expiry. Certificates expire every 1-2 years and when one does, it’ll need to be updated in the app as well as on the server. As soon as the certificate on the server has been updated, any apps with the old certificate embedded in them will cease to work. ::: diff --git a/website/versioned_docs/version-0.85/segmentedcontrolios.md b/website/versioned_docs/version-0.85/segmentedcontrolios.md index bab15ae9ba1..d9ede6e35e8 100644 --- a/website/versioned_docs/version-0.85/segmentedcontrolios.md +++ b/website/versioned_docs/version-0.85/segmentedcontrolios.md @@ -3,7 +3,7 @@ id: segmentedcontrolios title: '❌ SegmentedControlIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=segmentedcontrol) instead. ::: diff --git a/website/versioned_docs/version-0.85/signed-apk-android.md b/website/versioned_docs/version-0.85/signed-apk-android.md index d51ecd67bbe..c5158f4aab0 100644 --- a/website/versioned_docs/version-0.85/signed-apk-android.md +++ b/website/versioned_docs/version-0.85/signed-apk-android.md @@ -65,11 +65,11 @@ MYAPP_UPLOAD_KEY_PASSWORD=***** These are going to be global Gradle variables, which we can later use in our Gradle config to sign our app. -:::note Note about using git +:::note[Note about using git] Saving the above Gradle variables in `~/.gradle/gradle.properties` instead of `android/gradle.properties` prevents them from being checked in to git. You may have to create the `~/.gradle/gradle.properties` file in your user's home directory before you can add the variables. ::: -:::note Note about security +:::note[Note about security] If you are not keen on storing your passwords in plaintext, and you are running macOS, you can also [store your credentials in the Keychain Access app](https://pilloxa.gitlab.io/posts/safer-passwords-in-gradle/). Then you can skip the two last rows in `~/.gradle/gradle.properties`. ::: @@ -174,7 +174,7 @@ Please note that you will also have to configure distinct version codes, as [sug Proguard is a tool that can slightly reduce the size of the APK. It does this by stripping parts of the React Native Java bytecode (and its dependencies) that your app is not using. -:::caution Important +:::caution[Important] Make sure to thoroughly test your app if you've enabled Proguard. Proguard often requires configuration specific to each native library you're using. See `app/proguard-rules.pro`. ::: diff --git a/website/versioned_docs/version-0.85/statusbar.md b/website/versioned_docs/version-0.85/statusbar.md index 6345e7bf4ef..93810f7b0e0 100644 --- a/website/versioned_docs/version-0.85/statusbar.md +++ b/website/versioned_docs/version-0.85/statusbar.md @@ -440,7 +440,7 @@ Show or hide the status bar. ### 🗑️ `setNetworkActivityIndicatorVisible()`
iOS
-:::warning Deprecated +:::warning[Deprecated] The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release. ::: diff --git a/website/versioned_docs/version-0.85/statusbarios.md b/website/versioned_docs/version-0.85/statusbarios.md index 67ae7994778..2b17ba436a2 100644 --- a/website/versioned_docs/version-0.85/statusbarios.md +++ b/website/versioned_docs/version-0.85/statusbarios.md @@ -3,7 +3,7 @@ id: statusbarios title: '❌ StatusBarIOS' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use [`StatusBar`](statusbar.md) for mutating the status bar. ::: diff --git a/website/versioned_docs/version-0.85/strict-typescript-api.md b/website/versioned_docs/version-0.85/strict-typescript-api.md index 4223527eeab..a426511835b 100644 --- a/website/versioned_docs/version-0.85/strict-typescript-api.md +++ b/website/versioned_docs/version-0.85/strict-typescript-api.md @@ -32,7 +32,7 @@ Opting in is a **breaking change**, since some of our new types have updated nam } ``` -:::note Under the hood +:::note[Under the hood] This will instruct TypeScript to resolve `react-native` types from our new [`types_generated/`](https://www.npmjs.com/package/react-native?activeTab=code) dir, instead of the previous [`types/`](https://www.npmjs.com/package/react-native?activeTab=code) dir (manually maintained). No restart of TypeScript or your editor is required. @@ -40,7 +40,7 @@ This will instruct TypeScript to resolve `react-native` types from our new [`typ The Strict TypeScript API follows our [RFC](https://github.com/react-native-community/discussions-and-proposals/pull/894) to remove deep imports from React Native. Therefore, some APIs are no longer exported at root. This is intentional, in order to reduce the overall surface area of React Native's API. -:::tip API feedback +:::tip[API feedback] **Sending feedback**: We will be working with the community to finalize which APIs we export over (at least) the next two React Native releases. Please share your feedback in our [feedback thread](https://github.com/react-native-community/discussions-and-proposals/discussions/893). diff --git a/website/versioned_docs/version-0.85/stylesheet.md b/website/versioned_docs/version-0.85/stylesheet.md index 62f32c8f805..e5e9283bc59 100644 --- a/website/versioned_docs/version-0.85/stylesheet.md +++ b/website/versioned_docs/version-0.85/stylesheet.md @@ -174,7 +174,7 @@ export default App; ### `setStyleAttributePreprocessor()` -:::warning Experimental +:::warning[Experimental] Breaking changes will probably happen a lot and will not be reliably announced. The whole thing might be deleted, who knows? Use at your own risk. ::: diff --git a/website/versioned_docs/version-0.85/textinput.md b/website/versioned_docs/version-0.85/textinput.md index c1d62e96278..e6b91315ff2 100644 --- a/website/versioned_docs/version-0.85/textinput.md +++ b/website/versioned_docs/version-0.85/textinput.md @@ -238,7 +238,7 @@ If `true`, focuses the input. The default value is `false`. ### 🗑️ `blurOnSubmit` -:::warning Deprecated +:::warning[Deprecated] Note that `submitBehavior` now takes the place of `blurOnSubmit` and will override any behavior defined by `blurOnSubmit`. See [submitBehavior](textinput#submitbehavior). ::: diff --git a/website/versioned_docs/version-0.85/the-new-architecture/create-module-library.md b/website/versioned_docs/version-0.85/the-new-architecture/create-module-library.mdx similarity index 97% rename from website/versioned_docs/version-0.85/the-new-architecture/create-module-library.md rename to website/versioned_docs/version-0.85/the-new-architecture/create-module-library.mdx index 657ef9441bd..0a5091fab26 100644 --- a/website/versioned_docs/version-0.85/the-new-architecture/create-module-library.md +++ b/website/versioned_docs/version-0.85/the-new-architecture/create-module-library.mdx @@ -38,7 +38,11 @@ npx create-react-native-library@latest Once the interactive prompt is done, the tool creates a folder whose structure looks like this in Visual Studio Code: -Folder structure after initializing a new library. +Folder structure after initializing a new library. Feel free to explore the code that has been created for you. However, the most important parts: @@ -70,7 +74,7 @@ Finally, the library contains already all the infrastructure to let the library The rest of the guide assumes that you have a local Turbo Native Module in your app, created following the guidelines shown in the other guides in the website: platform specific Turbo Native Modules, or [cross-platform Turbo Native Modules](./pure-cxx-modules). But it works also for Components and legacy architecture modules and components. You'll have to adapt the files you need to copy and update. - +{/* TODO: add links for Turbo Native Modules */} 1. **[Not required for legacy architecture modules and components]** Move the code you have in the `specs` folder in your app into the `src` folder created by the `create-react-native-library` folder. 2. Update the `index.ts` file to properly export the Turbo Native Module spec so that it is accessible from the library. For example: diff --git a/website/versioned_docs/version-0.85/the-new-architecture/pure-cxx-modules.md b/website/versioned_docs/version-0.85/the-new-architecture/pure-cxx-modules.md index 37fa505e53f..b7c08196290 100644 --- a/website/versioned_docs/version-0.85/the-new-architecture/pure-cxx-modules.md +++ b/website/versioned_docs/version-0.85/the-new-architecture/pure-cxx-modules.md @@ -72,7 +72,7 @@ export default TurboModuleRegistry.getEnforcing( ## 2. Configure Codegen -The next step is to configure [Codegen](what-is-codegen.md) in your `package.json`. Update the file to include: +The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include: ```json title="package.json" "start": "react-native start", diff --git a/website/versioned_docs/version-0.85/the-new-architecture/using-codegen.md b/website/versioned_docs/version-0.85/the-new-architecture/using-codegen.mdx similarity index 99% rename from website/versioned_docs/version-0.85/the-new-architecture/using-codegen.md rename to website/versioned_docs/version-0.85/the-new-architecture/using-codegen.mdx index 56aca7b981c..49df503003f 100644 --- a/website/versioned_docs/version-0.85/the-new-architecture/using-codegen.md +++ b/website/versioned_docs/version-0.85/the-new-architecture/using-codegen.mdx @@ -19,12 +19,12 @@ The **Codegen** process is tightly coupled with the build of the app, and the sc For the sake of this guide, create a project using the React Native CLI as follows: -{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`} + {`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`} **Codegen** is used to generate the glue-code for your custom modules or components. See the guides for Turbo Native Modules and Fabric Native Components for more details on how to create them. - +{/* TODO: add links */} ## Configuring **Codegen** diff --git a/website/versioned_docs/version-0.85/the-new-architecture/what-is-codegen.md b/website/versioned_docs/version-0.85/the-new-architecture/what-is-codegen.mdx similarity index 97% rename from website/versioned_docs/version-0.85/the-new-architecture/what-is-codegen.md rename to website/versioned_docs/version-0.85/the-new-architecture/what-is-codegen.mdx index bc9cc37e7e0..717380c4df8 100644 --- a/website/versioned_docs/version-0.85/the-new-architecture/what-is-codegen.md +++ b/website/versioned_docs/version-0.85/the-new-architecture/what-is-codegen.mdx @@ -4,7 +4,7 @@ React Native invokes Codegen automatically every time an iOS or Android app is built. Occasionally, you would like to manually run the Codegen scripts to know which types and files are actually generated: this is a common scenario when developing [Turbo Native Modules](/docs/turbo-native-modules-introduction) and Fabric Native Components. - +{/* TODO: Add links to TM and FC */} ## How Codegen Works diff --git a/website/versioned_docs/version-0.85/timepickerandroid.md b/website/versioned_docs/version-0.85/timepickerandroid.md index 29bf4573cef..f6c06c1b89e 100644 --- a/website/versioned_docs/version-0.85/timepickerandroid.md +++ b/website/versioned_docs/version-0.85/timepickerandroid.md @@ -3,6 +3,6 @@ id: timepickerandroid title: '❌ TimePickerAndroid' --- -:::danger Removed from React Native +:::danger[Removed from React Native] Use one of the [community packages](https://reactnative.directory/?search=timepicker) instead. ::: diff --git a/website/versioned_docs/version-0.85/timers.md b/website/versioned_docs/version-0.85/timers.md index bf0041d09b4..87eaf1f3f80 100644 --- a/website/versioned_docs/version-0.85/timers.md +++ b/website/versioned_docs/version-0.85/timers.md @@ -25,7 +25,7 @@ Please correct this by running ``adb shell "date `date +%m%d%H%M%Y.%S%3N`"`` on ## InteractionManager -:::warning Deprecated +:::warning[Deprecated] The `InteractionManager` behavior has been changed to be the same as `setImmediate`, which should be used instead. ::: diff --git a/website/versioned_docs/version-0.85/transforms.md b/website/versioned_docs/version-0.85/transforms.md index 92a75671719..364ba3a6873 100644 --- a/website/versioned_docs/version-0.85/transforms.md +++ b/website/versioned_docs/version-0.85/transforms.md @@ -268,7 +268,7 @@ Matrix transforms are useful when you need to apply pre-calculated transformatio ### 🗑️ `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY` -:::warning Deprecated +:::warning[Deprecated] Use the [`transform`](transforms#transform) prop instead. ::: diff --git a/website/versioned_docs/version-0.85/turbo-native-modules-android.md b/website/versioned_docs/version-0.85/turbo-native-modules-android.md index 21fbd7703e1..83d922f9918 100644 --- a/website/versioned_docs/version-0.85/turbo-native-modules-android.md +++ b/website/versioned_docs/version-0.85/turbo-native-modules-android.md @@ -206,7 +206,7 @@ Finally, we need to tell the React Native in our main application how to find th In this case, you add it to be returned by the [getPackages](https://github.com/facebook/react-native/blob/8d8b8c343e62115a5509e1aed62047053c2f6e39/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactNativeHost.java#L233) method. :::info -Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.md#publish-the-library-on-npm), which our build tooling will autolink for you. +Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.mdx#publish-the-library-on-npm), which our build tooling will autolink for you. ::: diff --git a/website/versioned_docs/version-0.85/virtualizedlist.md b/website/versioned_docs/version-0.85/virtualizedlist.md index e0a31ffb2e2..9f80ad78258 100644 --- a/website/versioned_docs/version-0.85/virtualizedlist.md +++ b/website/versioned_docs/version-0.85/virtualizedlist.md @@ -300,7 +300,7 @@ Styling for internal View for `ListHeaderComponent`. ### 🗑️ `disableVirtualization` -:::warning Deprecated +:::warning[Deprecated] Virtualization provides significant performance and memory optimizations, but fully unmounts react instances that are outside of the render window. You should only need to disable this for debugging purposes. ::: From 4d1dd6164e3cca94fb374d7f800229ab10894c2a Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Thu, 9 Apr 2026 11:22:10 +0200 Subject: [PATCH 3/5] fix MDX comment syntax in templates --- .../_markdown-GH-release-notes-prerelease.mdx | 6 +++--- .../contributing/_markdown-road-to-release-template.mdx | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/website/contributing/_markdown-GH-release-notes-prerelease.mdx b/website/contributing/_markdown-GH-release-notes-prerelease.mdx index f9443cf352c..26d5954adfc 100644 --- a/website/contributing/_markdown-GH-release-notes-prerelease.mdx +++ b/website/contributing/_markdown-GH-release-notes-prerelease.mdx @@ -1,11 +1,11 @@ ```markdown -- {/_ TODO List out notable picks for this patch _/} +- {/* TODO List out notable picks for this patch */} --- To test it, run: -{/_ TODO Update with your version _/} +{/* TODO Update with your version */} npx react-native init RN069RC0 --version 0.69.0-rc.0 @@ -21,7 +21,7 @@ npx react-native init RN069RC0 --version 0.69.0-rc.0 ### Help us testing 🧪 -{/_ TODO Add the call to action for something specific that we want folks to test _/} +{/* TODO Add the call to action for something specific that we want folks to test */} Let us know how it went by posting a comment in the [working group discussion](https://github.com/reactwg/react-native-releases/discussions)! Please specify with system you tried it on (ex. macos, windows). diff --git a/website/contributing/_markdown-road-to-release-template.mdx b/website/contributing/_markdown-road-to-release-template.mdx index da662ad0cf3..ae9244ad982 100644 --- a/website/contributing/_markdown-road-to-release-template.mdx +++ b/website/contributing/_markdown-road-to-release-template.mdx @@ -1,11 +1,11 @@ ```markdown -{/_ Title: Road to _/} +{/* Title: Road to */} The branch cut has happened. ## Notice -{/_ TODO update the version _/} +{/* TODO update the version */} - [Current release candidate: 0.69.0-rc.0][current-release] - Have an issue with current release candidate? [File an issue][issue-form] and we will triage. @@ -14,7 +14,7 @@ The branch cut has happened. #### Highlighted Changes in this release -{/_ Add stand-out changes in this release, and link to changelog PR. _/} +{/* Add stand-out changes in this release, and link to changelog PR. */} - Checkout this [Changelog PR][changelog-pr] @@ -33,7 +33,7 @@ The branch cut has happened. #### Retrospective Topics -{/_ List out pain points, issues to investigate that are not release-blocking to follow up on _/} +{/* List out pain points, issues to investigate that are not release-blocking to follow up on */} - From e90107ff80cebecb9d2df94b2f9c603b25113fb4 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Thu, 9 Apr 2026 12:41:48 +0200 Subject: [PATCH 4/5] correct fragments code blocks language --- website/contributing/_markdown-GH-release-notes-prerelease.mdx | 2 +- website/contributing/_markdown-road-to-release-template.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/website/contributing/_markdown-GH-release-notes-prerelease.mdx b/website/contributing/_markdown-GH-release-notes-prerelease.mdx index 26d5954adfc..c8829bc954f 100644 --- a/website/contributing/_markdown-GH-release-notes-prerelease.mdx +++ b/website/contributing/_markdown-GH-release-notes-prerelease.mdx @@ -1,4 +1,4 @@ -```markdown +```mdx - {/* TODO List out notable picks for this patch */} --- diff --git a/website/contributing/_markdown-road-to-release-template.mdx b/website/contributing/_markdown-road-to-release-template.mdx index ae9244ad982..a98315775d1 100644 --- a/website/contributing/_markdown-road-to-release-template.mdx +++ b/website/contributing/_markdown-road-to-release-template.mdx @@ -1,4 +1,4 @@ -```markdown +```mdx {/* Title: Road to */} The branch cut has happened. From 454f8d36ae6d479828a666d14040b68f0e5ab674 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Sat, 11 Apr 2026 20:57:23 +0200 Subject: [PATCH 5/5] update lock after yarn classic migration --- yarn.lock | 566 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 291 insertions(+), 275 deletions(-) diff --git a/yarn.lock b/yarn.lock index 79322344deb..93dcabdc316 100644 --- a/yarn.lock +++ b/yarn.lock @@ -20,6 +20,14 @@ "@algolia/autocomplete-plugin-algolia-insights" "1.19.2" "@algolia/autocomplete-shared" "1.19.2" +"@algolia/autocomplete-core@^1.19.2": + version "1.19.8" + resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.19.8.tgz#7c84c771d28643fb00d09026c05013fb97aeea23" + integrity sha512-3YEorYg44niXcm7gkft3nXYItHd44e8tmh4D33CTszPgP0QWkaLEaFywiNyJBo7UL/mqObA/G9RYuU7R8tN1IA== + dependencies: + "@algolia/autocomplete-plugin-algolia-insights" "1.19.8" + "@algolia/autocomplete-shared" "1.19.8" + "@algolia/autocomplete-plugin-algolia-insights@1.19.2": version "1.19.2" resolved "https://registry.yarnpkg.com/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.19.2.tgz#3584b625b9317e333d1ae43664d02358e175c52d" @@ -27,11 +35,23 @@ dependencies: "@algolia/autocomplete-shared" "1.19.2" +"@algolia/autocomplete-plugin-algolia-insights@1.19.8": + version "1.19.8" + resolved "https://registry.yarnpkg.com/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.19.8.tgz#f60d21edbe2a42e6d4e2215430733e3f51641471" + integrity sha512-ZvJWO8ZZJDpc1LNM2TTBdmQsZBLMR4rU5iNR2OYvEeFBiaf/0ESnRSSLQbryarJY4SVxtoz6A2ZtDMNM+iQEAA== + dependencies: + "@algolia/autocomplete-shared" "1.19.8" + "@algolia/autocomplete-shared@1.19.2": version "1.19.2" resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.19.2.tgz#c0b7b8dc30a5c65b70501640e62b009535e4578f" integrity sha512-jEazxZTVD2nLrC+wYlVHQgpBoBB5KPStrJxLzsIFl6Kqd1AlG9sIAGl39V5tECLpIQzB3Qa2T6ZPJ1ChkwMK/w== +"@algolia/autocomplete-shared@1.19.8": + version "1.19.8" + resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.19.8.tgz#5d723d8bdb448efbb1b0e1c7ff94cc18e5b1dc0e" + integrity sha512-h5hf2t8ejF6vlOgvLaZzQbWs5SyH2z4PAWygNAvvD/2RI29hdQ54ldUGwqVuj9Srs+n8XUKTPUqb7fvhBhQrnQ== + "@algolia/client-abtesting@5.50.1": version "5.50.1" resolved "https://registry.yarnpkg.com/@algolia/client-abtesting/-/client-abtesting-5.50.1.tgz#b95230e48458dd89b6c3a65616f4d44fc87f2823" @@ -1170,13 +1190,6 @@ "@babel/plugin-transform-modules-commonjs" "^7.27.1" "@babel/plugin-transform-typescript" "^7.28.5" -"@babel/runtime-corejs3@^7.25.9": - version "7.29.2" - resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.29.2.tgz#cb86ad06e7a1d39224afb12a874301085e071846" - integrity sha512-Lc94FOD5+0aXhdb0Tdg3RUtqT6yWbI/BbFWvlaSJ3gAb9Ks+99nHRDKADVqC37er4eCB0fHyWT+y+K3QOvJKbw== - dependencies: - core-js-pure "^3.48.0" - "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.25.0", "@babel/runtime@^7.25.9", "@babel/runtime@^7.28.6": version "7.29.2" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.29.2.tgz#9a6e2d05f4b6692e1801cd4fb176ad823930ed5e" @@ -1631,7 +1644,7 @@ resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-4.6.2.tgz#986776619dccbf798176c75e858cc22f5e710bb4" integrity sha512-fH/cn8BjEEdM2nJdjNMHIvOVYupG6AIDtFVDgIZrNzdCSj4KXr9kd+hsehqsNGYjpUjObeKYKvgy/IwCb1jZYQ== -"@docsearch/react@^3.9.0 || ^4.1.0": +"@docsearch/react@^3.9.0 || ^4.3.2": version "4.6.2" resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-4.6.2.tgz#e6c65fb87fb943eefaa936debe6d31bb51b25056" integrity sha512-/BbtGFtqVOGwZx0dw/UfhN/0/DmMQYnulY4iv0tPRhC2JCXv0ka/+izwt3Jzo1ZxXS/2eMvv9zHsBJOK1I9f/w== @@ -1640,10 +1653,10 @@ "@docsearch/core" "4.6.2" "@docsearch/css" "4.6.2" -"@docusaurus/babel@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/babel/-/babel-3.9.2.tgz#f956c638baeccf2040e482c71a742bc7e35fdb22" - integrity sha512-GEANdi/SgER+L7Japs25YiGil/AUDnFFHaCGPBbundxoWtCkA2lmy7/tFmgED4y1htAy6Oi4wkJEQdGssnw9MA== +"@docusaurus/babel@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/babel/-/babel-3.10.0.tgz#819819f107233dfcf50b59cd51158f23fb04878a" + integrity sha512-mqCJhCZNZUDg0zgDEaPTM4DnRsisa24HdqTy/qn/MQlbwhTb4WVaZg6ZyX6yIVKqTz8fS1hBMgM+98z+BeJJDg== dependencies: "@babel/core" "^7.25.9" "@babel/generator" "^7.25.9" @@ -1653,25 +1666,24 @@ "@babel/preset-react" "^7.25.9" "@babel/preset-typescript" "^7.25.9" "@babel/runtime" "^7.25.9" - "@babel/runtime-corejs3" "^7.25.9" "@babel/traverse" "^7.25.9" - "@docusaurus/logger" "3.9.2" - "@docusaurus/utils" "3.9.2" + "@docusaurus/logger" "3.10.0" + "@docusaurus/utils" "3.10.0" babel-plugin-dynamic-import-node "^2.3.3" fs-extra "^11.1.1" tslib "^2.6.0" -"@docusaurus/bundler@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/bundler/-/bundler-3.9.2.tgz#0ca82cda4acf13a493e3f66061aea351e9d356cf" - integrity sha512-ZOVi6GYgTcsZcUzjblpzk3wH1Fya2VNpd5jtHoCCFcJlMQ1EYXZetfAnRHLcyiFeBABaI1ltTYbOBtH/gahGVA== +"@docusaurus/bundler@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/bundler/-/bundler-3.10.0.tgz#878c4c46bfa3434671ea37a43da184238a6aae26" + integrity sha512-iONUGZGgp+lAkw/cJZH6irONcF4p8+278IsdRlq8lYhxGjkoNUs0w7F4gVXBYSNChq5KG5/JleTSsdJySShxow== dependencies: "@babel/core" "^7.25.9" - "@docusaurus/babel" "3.9.2" - "@docusaurus/cssnano-preset" "3.9.2" - "@docusaurus/logger" "3.9.2" - "@docusaurus/types" "3.9.2" - "@docusaurus/utils" "3.9.2" + "@docusaurus/babel" "3.10.0" + "@docusaurus/cssnano-preset" "3.10.0" + "@docusaurus/logger" "3.10.0" + "@docusaurus/types" "3.10.0" + "@docusaurus/utils" "3.10.0" babel-loader "^9.2.1" clean-css "^5.3.3" copy-webpack-plugin "^11.0.0" @@ -1691,18 +1703,18 @@ webpack "^5.95.0" webpackbar "^6.0.1" -"@docusaurus/core@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/core/-/core-3.9.2.tgz#cc970f29b85a8926d63c84f8cffdcda43ed266ff" - integrity sha512-HbjwKeC+pHUFBfLMNzuSjqFE/58+rLVKmOU3lxQrpsxLBOGosYco/Q0GduBb0/jEMRiyEqjNT/01rRdOMWq5pw== - dependencies: - "@docusaurus/babel" "3.9.2" - "@docusaurus/bundler" "3.9.2" - "@docusaurus/logger" "3.9.2" - "@docusaurus/mdx-loader" "3.9.2" - "@docusaurus/utils" "3.9.2" - "@docusaurus/utils-common" "3.9.2" - "@docusaurus/utils-validation" "3.9.2" +"@docusaurus/core@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/core/-/core-3.10.0.tgz#642e71a0209d62c3f5ef275ed9d74a881f40df39" + integrity sha512-mgLdQsO8xppnQZc3LPi+Mf+PkPeyxJeIx11AXAq/14fsaMefInQiMEZUUmrc7J+956G/f7MwE7tn8KZgi3iRcA== + dependencies: + "@docusaurus/babel" "3.10.0" + "@docusaurus/bundler" "3.10.0" + "@docusaurus/logger" "3.10.0" + "@docusaurus/mdx-loader" "3.10.0" + "@docusaurus/utils" "3.10.0" + "@docusaurus/utils-common" "3.10.0" + "@docusaurus/utils-validation" "3.10.0" boxen "^6.2.1" chalk "^4.1.2" chokidar "^3.5.3" @@ -1714,7 +1726,7 @@ escape-html "^1.0.3" eta "^2.2.0" eval "^0.1.8" - execa "5.1.1" + execa "^5.1.1" fs-extra "^11.1.1" html-tags "^3.3.1" html-webpack-plugin "^5.6.0" @@ -1725,12 +1737,12 @@ prompts "^2.4.2" react-helmet-async "npm:@slorber/react-helmet-async@1.3.0" react-loadable "npm:@docusaurus/react-loadable@6.0.0" - react-loadable-ssr-addon-v5-slorber "^1.0.1" + react-loadable-ssr-addon-v5-slorber "^1.0.3" react-router "^5.3.4" react-router-config "^5.1.1" react-router-dom "^5.3.4" semver "^7.5.4" - serve-handler "^6.1.6" + serve-handler "^6.1.7" tinypool "^1.0.2" tslib "^2.6.0" update-notifier "^6.0.2" @@ -1739,47 +1751,48 @@ webpack-dev-server "^5.2.2" webpack-merge "^6.0.1" -"@docusaurus/cssnano-preset@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/cssnano-preset/-/cssnano-preset-3.9.2.tgz#523aab65349db3c51a77f2489048d28527759428" - integrity sha512-8gBKup94aGttRduABsj7bpPFTX7kbwu+xh3K9NMCF5K4bWBqTFYW+REKHF6iBVDHRJ4grZdIPbvkiHd/XNKRMQ== +"@docusaurus/cssnano-preset@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/cssnano-preset/-/cssnano-preset-3.10.0.tgz#be1b435c33df09d743473d3fadda67b4568dfae3" + integrity sha512-qzSshTO1DB3TYW+dPUal5KHM7XPc5YQfzF3Kdb2NDACJUyGbNcFtw3tGkCJlYwhNCRKbZcmwraKUS1i5dcHdGg== dependencies: cssnano-preset-advanced "^6.1.2" postcss "^8.5.4" postcss-sort-media-queries "^5.2.0" tslib "^2.6.0" -"@docusaurus/faster@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/faster/-/faster-3.9.2.tgz#47b69f39ed935fdcc8dc03896274fca29056e962" - integrity sha512-DEVIwhbrZZ4ir31X+qQNEQqDWkgCJUV6kiPPAd2MGTY8n5/n0c4B8qA5k1ipF2izwH00JEf0h6Daaut71zzkyw== +"@docusaurus/faster@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/faster/-/faster-3.10.0.tgz#0758a93196f685537aa7700bde62faf926e6c817" + integrity sha512-GNPtVH14ISjHfSwnHu3KiFGf86ICmJSQDeSv/QaanpBgiZGOtgZaslnC5q8WiguxM1EVkwcGxPuD8BXF4eggKw== dependencies: - "@docusaurus/types" "3.9.2" - "@rspack/core" "^1.5.0" + "@docusaurus/types" "3.10.0" + "@rspack/core" "^1.7.10" "@swc/core" "^1.7.39" "@swc/html" "^1.13.5" browserslist "^4.24.2" lightningcss "^1.27.0" + semver "^7.5.4" swc-loader "^0.2.6" tslib "^2.6.0" webpack "^5.95.0" -"@docusaurus/logger@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/logger/-/logger-3.9.2.tgz#6ec6364b90f5a618a438cc9fd01ac7376869f92a" - integrity sha512-/SVCc57ByARzGSU60c50rMyQlBuMIJCjcsJlkphxY6B0GV4UH3tcA1994N8fFfbJ9kX3jIBe/xg3XP5qBtGDbA== +"@docusaurus/logger@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/logger/-/logger-3.10.0.tgz#2bacbd004dd78e3da926dbe8f6fa9a930856575d" + integrity sha512-9jrZzFuBH1LDRlZ7cznAhCLmAZ3HSDqgwdrSSZdGHq9SPUOQgXXu8mnxe2ZRB9NS1PCpMTIOVUqDtZPIhMafZg== dependencies: chalk "^4.1.2" tslib "^2.6.0" -"@docusaurus/mdx-loader@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/mdx-loader/-/mdx-loader-3.9.2.tgz#78d238de6c6203fa811cc2a7e90b9b79e111408c" - integrity sha512-wiYoGwF9gdd6rev62xDU8AAM8JuLI/hlwOtCzMmYcspEkzecKrP8J8X+KpYnTlACBUUtXNJpSoCwFWJhLRevzQ== +"@docusaurus/mdx-loader@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/mdx-loader/-/mdx-loader-3.10.0.tgz#1d4b050d751389ecf38dee48bcb61e53df8ffb82" + integrity sha512-mQQV97080AH4PYNs087l202NMDqRopZA4mg5W76ZZyTFrmWhJ3mHg+8A+drJVENxw5/Q+wHMHLgsx+9z1nEs0A== dependencies: - "@docusaurus/logger" "3.9.2" - "@docusaurus/utils" "3.9.2" - "@docusaurus/utils-validation" "3.9.2" + "@docusaurus/logger" "3.10.0" + "@docusaurus/utils" "3.10.0" + "@docusaurus/utils-validation" "3.10.0" "@mdx-js/mdx" "^3.0.0" "@slorber/remark-comment" "^1.0.0" escape-html "^1.0.3" @@ -1802,12 +1815,12 @@ vfile "^6.0.1" webpack "^5.88.1" -"@docusaurus/module-type-aliases@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/module-type-aliases/-/module-type-aliases-3.9.2.tgz#993c7cb0114363dea5ef6855e989b3ad4b843a34" - integrity sha512-8qVe2QA9hVLzvnxP46ysuofJUIc/yYQ82tvA/rBTrnpXtCjNSFLxEZfd5U8cYZuJIVlkPxamsIgwd5tGZXfvew== +"@docusaurus/module-type-aliases@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/module-type-aliases/-/module-type-aliases-3.10.0.tgz#749928f104d563f11f046bf0c9ab6489a470c7c8" + integrity sha512-/1O0Zg8w3DFrYX/I6Fbss7OJrtZw1QoyjDhegiFNHVi9A9Y0gQ3jUAytVxF6ywpAWpLyLxch8nN8H/V3XfzdJQ== dependencies: - "@docusaurus/types" "3.9.2" + "@docusaurus/types" "3.10.0" "@types/history" "^4.7.11" "@types/react" "*" "@types/react-router-config" "*" @@ -1815,20 +1828,21 @@ react-helmet-async "npm:@slorber/react-helmet-async@1.3.0" react-loadable "npm:@docusaurus/react-loadable@6.0.0" -"@docusaurus/plugin-content-blog@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-blog/-/plugin-content-blog-3.9.2.tgz#d5ce51eb7757bdab0515e2dd26a793ed4e119df9" - integrity sha512-3I2HXy3L1QcjLJLGAoTvoBnpOwa6DPUa3Q0dMK19UTY9mhPkKQg/DYhAGTiBUKcTR0f08iw7kLPqOhIgdV3eVQ== - dependencies: - "@docusaurus/core" "3.9.2" - "@docusaurus/logger" "3.9.2" - "@docusaurus/mdx-loader" "3.9.2" - "@docusaurus/theme-common" "3.9.2" - "@docusaurus/types" "3.9.2" - "@docusaurus/utils" "3.9.2" - "@docusaurus/utils-common" "3.9.2" - "@docusaurus/utils-validation" "3.9.2" +"@docusaurus/plugin-content-blog@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-blog/-/plugin-content-blog-3.10.0.tgz#10095291b637440847854ecb2c8afcd8746debd7" + integrity sha512-RuTz68DhB7CL96QO5UsFbciD7GPYq6QV+YMfF9V0+N4ZgLhJIBgpVAr8GobrKF6NRe5cyWWETU5z5T834piG9g== + dependencies: + "@docusaurus/core" "3.10.0" + "@docusaurus/logger" "3.10.0" + "@docusaurus/mdx-loader" "3.10.0" + "@docusaurus/theme-common" "3.10.0" + "@docusaurus/types" "3.10.0" + "@docusaurus/utils" "3.10.0" + "@docusaurus/utils-common" "3.10.0" + "@docusaurus/utils-validation" "3.10.0" cheerio "1.0.0-rc.12" + combine-promises "^1.1.0" feed "^4.2.2" fs-extra "^11.1.1" lodash "^4.17.21" @@ -1839,20 +1853,20 @@ utility-types "^3.10.0" webpack "^5.88.1" -"@docusaurus/plugin-content-docs@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-docs/-/plugin-content-docs-3.9.2.tgz#cd8f2d1c06e53c3fa3d24bdfcb48d237bf2d6b2e" - integrity sha512-C5wZsGuKTY8jEYsqdxhhFOe1ZDjH0uIYJ9T/jebHwkyxqnr4wW0jTkB72OMqNjsoQRcb0JN3PcSeTwFlVgzCZg== - dependencies: - "@docusaurus/core" "3.9.2" - "@docusaurus/logger" "3.9.2" - "@docusaurus/mdx-loader" "3.9.2" - "@docusaurus/module-type-aliases" "3.9.2" - "@docusaurus/theme-common" "3.9.2" - "@docusaurus/types" "3.9.2" - "@docusaurus/utils" "3.9.2" - "@docusaurus/utils-common" "3.9.2" - "@docusaurus/utils-validation" "3.9.2" +"@docusaurus/plugin-content-docs@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-docs/-/plugin-content-docs-3.10.0.tgz#9c4ea1d5a405340f28c281d2e4586c695a7c65a5" + integrity sha512-9BjHhf15ct8Z7TThTC0xRndKDVvMKmVsAGAN7W9FpNRzfMdScOGcXtLmcCWtJGvAezjOJIm6CxOYCy3Io5+RnQ== + dependencies: + "@docusaurus/core" "3.10.0" + "@docusaurus/logger" "3.10.0" + "@docusaurus/mdx-loader" "3.10.0" + "@docusaurus/module-type-aliases" "3.10.0" + "@docusaurus/theme-common" "3.10.0" + "@docusaurus/types" "3.10.0" + "@docusaurus/utils" "3.10.0" + "@docusaurus/utils-common" "3.10.0" + "@docusaurus/utils-validation" "3.10.0" "@types/react-router-config" "^5.0.7" combine-promises "^1.1.0" fs-extra "^11.1.1" @@ -1863,89 +1877,89 @@ utility-types "^3.10.0" webpack "^5.88.1" -"@docusaurus/plugin-content-pages@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-pages/-/plugin-content-pages-3.9.2.tgz#22db6c88ade91cec0a9e87a00b8089898051b08d" - integrity sha512-s4849w/p4noXUrGpPUF0BPqIAfdAe76BLaRGAGKZ1gTDNiGxGcpsLcwJ9OTi1/V8A+AzvsmI9pkjie2zjIQZKA== - dependencies: - "@docusaurus/core" "3.9.2" - "@docusaurus/mdx-loader" "3.9.2" - "@docusaurus/types" "3.9.2" - "@docusaurus/utils" "3.9.2" - "@docusaurus/utils-validation" "3.9.2" +"@docusaurus/plugin-content-pages@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-pages/-/plugin-content-pages-3.10.0.tgz#7670cbb3c849f434949f542bfdfded1580a13165" + integrity sha512-5amX8kEJI+nIGtuLVjYk59Y5utEJ3CHETFOPEE4cooIRLA4xM4iBsA6zFgu4ljcopeYwvBzFEWf5g2I6Yb9SkA== + dependencies: + "@docusaurus/core" "3.10.0" + "@docusaurus/mdx-loader" "3.10.0" + "@docusaurus/types" "3.10.0" + "@docusaurus/utils" "3.10.0" + "@docusaurus/utils-validation" "3.10.0" fs-extra "^11.1.1" tslib "^2.6.0" webpack "^5.88.1" -"@docusaurus/plugin-css-cascade-layers@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-css-cascade-layers/-/plugin-css-cascade-layers-3.9.2.tgz#358c85f63f1c6a11f611f1b8889d9435c11b22f8" - integrity sha512-w1s3+Ss+eOQbscGM4cfIFBlVg/QKxyYgj26k5AnakuHkKxH6004ZtuLe5awMBotIYF2bbGDoDhpgQ4r/kcj4rQ== +"@docusaurus/plugin-css-cascade-layers@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-css-cascade-layers/-/plugin-css-cascade-layers-3.10.0.tgz#71e318d842be95f92be6c3dca00ceea4971d0edb" + integrity sha512-6q1vtt5FJcg5osgkHeM1euErECNqEZ5Z1j69yiNx2luEBIso+nxCkS9nqj8w+MK5X7rvKEToGhFfOFWncs51pQ== dependencies: - "@docusaurus/core" "3.9.2" - "@docusaurus/types" "3.9.2" - "@docusaurus/utils" "3.9.2" - "@docusaurus/utils-validation" "3.9.2" + "@docusaurus/core" "3.10.0" + "@docusaurus/types" "3.10.0" + "@docusaurus/utils" "3.10.0" + "@docusaurus/utils-validation" "3.10.0" tslib "^2.6.0" -"@docusaurus/plugin-debug@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-debug/-/plugin-debug-3.9.2.tgz#b5df4db115583f5404a252dbf66f379ff933e53c" - integrity sha512-j7a5hWuAFxyQAkilZwhsQ/b3T7FfHZ+0dub6j/GxKNFJp2h9qk/P1Bp7vrGASnvA9KNQBBL1ZXTe7jlh4VdPdA== +"@docusaurus/plugin-debug@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-debug/-/plugin-debug-3.10.0.tgz#e77f924604e1e09d5d90fe0bdf23a3be8ea3307e" + integrity sha512-XcljKN+G+nmmK69uQA1d9BlYU3ZftG3T3zpK8/7Hf/wrOlV7TA4Ampdrdwkg0jElKdKAoSnPhCO0/U3bQGsVQQ== dependencies: - "@docusaurus/core" "3.9.2" - "@docusaurus/types" "3.9.2" - "@docusaurus/utils" "3.9.2" + "@docusaurus/core" "3.10.0" + "@docusaurus/types" "3.10.0" + "@docusaurus/utils" "3.10.0" fs-extra "^11.1.1" react-json-view-lite "^2.3.0" tslib "^2.6.0" -"@docusaurus/plugin-google-analytics@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-3.9.2.tgz#857fe075fdeccdf6959e62954d9efe39769fa247" - integrity sha512-mAwwQJ1Us9jL/lVjXtErXto4p4/iaLlweC54yDUK1a97WfkC6Z2k5/769JsFgwOwOP+n5mUQGACXOEQ0XDuVUw== +"@docusaurus/plugin-google-analytics@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-3.10.0.tgz#22c7e976fe4d970c7cd1c73c9723d9a5786c6e37" + integrity sha512-hTEoodatpBZnUat5nFExbuTGA1lhWGy7vZGuTew5Q3QDtGKFpSJLYmZJhdTjvCFwv1+qQ67hgAVlKdJOB8TXow== dependencies: - "@docusaurus/core" "3.9.2" - "@docusaurus/types" "3.9.2" - "@docusaurus/utils-validation" "3.9.2" + "@docusaurus/core" "3.10.0" + "@docusaurus/types" "3.10.0" + "@docusaurus/utils-validation" "3.10.0" tslib "^2.6.0" -"@docusaurus/plugin-google-gtag@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-3.9.2.tgz#df75b1a90ae9266b0471909ba0265f46d5dcae62" - integrity sha512-YJ4lDCphabBtw19ooSlc1MnxtYGpjFV9rEdzjLsUnBCeis2djUyCozZaFhCg6NGEwOn7HDDyMh0yzcdRpnuIvA== +"@docusaurus/plugin-google-gtag@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-3.10.0.tgz#c38a2ba638257851cc845b934506b80c08d47f96" + integrity sha512-iB/Zzjv/eelJRbdULZqzWCbgMgJ7ht4ONVjXtN3+BI/muil6S87gQ1OJyPwlXD+ELdKkitC7bWv5eJdYOZLhrQ== dependencies: - "@docusaurus/core" "3.9.2" - "@docusaurus/types" "3.9.2" - "@docusaurus/utils-validation" "3.9.2" - "@types/gtag.js" "^0.0.12" + "@docusaurus/core" "3.10.0" + "@docusaurus/types" "3.10.0" + "@docusaurus/utils-validation" "3.10.0" + "@types/gtag.js" "^0.0.20" tslib "^2.6.0" -"@docusaurus/plugin-google-tag-manager@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-tag-manager/-/plugin-google-tag-manager-3.9.2.tgz#d1a3cf935acb7d31b84685e92d70a1d342946677" - integrity sha512-LJtIrkZN/tuHD8NqDAW1Tnw0ekOwRTfobWPsdO15YxcicBo2ykKF0/D6n0vVBfd3srwr9Z6rzrIWYrMzBGrvNw== +"@docusaurus/plugin-google-tag-manager@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-tag-manager/-/plugin-google-tag-manager-3.10.0.tgz#5469c923cc1ad4608399d0b17e5fcacd8e030d56" + integrity sha512-FEjZxqKgLHa+Wez/EgKxRwvArNCWIScfyEQD95rot7jkxp6nonjI5XIbGfO/iYhM5Qinwe8aIEQHP2KZtpqVuA== dependencies: - "@docusaurus/core" "3.9.2" - "@docusaurus/types" "3.9.2" - "@docusaurus/utils-validation" "3.9.2" + "@docusaurus/core" "3.10.0" + "@docusaurus/types" "3.10.0" + "@docusaurus/utils-validation" "3.10.0" tslib "^2.6.0" -"@docusaurus/plugin-pwa@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-pwa/-/plugin-pwa-3.9.2.tgz#44f4ca67f86e961d332ad1a6f6944bf91a8f064e" - integrity sha512-1nSKCCf3xF0W+y8AM7VbXXFXYpmXrNwb6xMQ2Aw5jqzK1qe4js5Db+1bf1neyDyuVgSisQu+gPXARUfb93TlRQ== +"@docusaurus/plugin-pwa@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-pwa/-/plugin-pwa-3.10.0.tgz#9d02589c489859a181c828af254e87d86e4a05e5" + integrity sha512-kJr50iyQcE7qRBbYJol9IKREHny4nvodvJkz88lQl7LvOIE6SIgDMl2gG+nhkHqQvuO15i+WnPNlnPVSRLZUdg== dependencies: "@babel/core" "^7.25.9" "@babel/preset-env" "^7.25.9" - "@docusaurus/bundler" "3.9.2" - "@docusaurus/core" "3.9.2" - "@docusaurus/logger" "3.9.2" - "@docusaurus/theme-common" "3.9.2" - "@docusaurus/theme-translations" "3.9.2" - "@docusaurus/types" "3.9.2" - "@docusaurus/utils" "3.9.2" - "@docusaurus/utils-validation" "3.9.2" + "@docusaurus/bundler" "3.10.0" + "@docusaurus/core" "3.10.0" + "@docusaurus/logger" "3.10.0" + "@docusaurus/theme-common" "3.10.0" + "@docusaurus/theme-translations" "3.10.0" + "@docusaurus/types" "3.10.0" + "@docusaurus/utils" "3.10.0" + "@docusaurus/utils-validation" "3.10.0" babel-loader "^9.2.1" clsx "^2.0.0" core-js "^3.31.1" @@ -1956,76 +1970,77 @@ workbox-precaching "^7.0.0" workbox-window "^7.0.0" -"@docusaurus/plugin-sitemap@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-sitemap/-/plugin-sitemap-3.9.2.tgz#e1d9f7012942562cc0c6543d3cb2cdc4ae713dc4" - integrity sha512-WLh7ymgDXjG8oPoM/T4/zUP7KcSuFYRZAUTl8vR6VzYkfc18GBM4xLhcT+AKOwun6kBivYKUJf+vlqYJkm+RHw== - dependencies: - "@docusaurus/core" "3.9.2" - "@docusaurus/logger" "3.9.2" - "@docusaurus/types" "3.9.2" - "@docusaurus/utils" "3.9.2" - "@docusaurus/utils-common" "3.9.2" - "@docusaurus/utils-validation" "3.9.2" +"@docusaurus/plugin-sitemap@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-sitemap/-/plugin-sitemap-3.10.0.tgz#35d59d46803f279f22aa64fc1bd18c048f12662b" + integrity sha512-DVTSLjB97hIjmayGnGcBfognCeI7ZuUKgEnU7Oz81JYqXtVg94mVTthDjq3QHTylYNeCUbkaW8VF0FDLcc8pPw== + dependencies: + "@docusaurus/core" "3.10.0" + "@docusaurus/logger" "3.10.0" + "@docusaurus/types" "3.10.0" + "@docusaurus/utils" "3.10.0" + "@docusaurus/utils-common" "3.10.0" + "@docusaurus/utils-validation" "3.10.0" fs-extra "^11.1.1" sitemap "^7.1.1" tslib "^2.6.0" -"@docusaurus/plugin-svgr@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-svgr/-/plugin-svgr-3.9.2.tgz#62857ed79d97c0150d25f7e7380fdee65671163a" - integrity sha512-n+1DE+5b3Lnf27TgVU5jM1d4x5tUh2oW5LTsBxJX4PsAPV0JGcmI6p3yLYtEY0LRVEIJh+8RsdQmRE66wSV8mw== +"@docusaurus/plugin-svgr@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-svgr/-/plugin-svgr-3.10.0.tgz#8ada2e6dd8318d20206a9b044fc091a5794ba3f0" + integrity sha512-lNljBESaETZqVBMPqkrGchr+UPT1eZzEPLmJhz8I76BxbjqgsUnRvrq6lQJ9sYjgmgX52KB7kkgczqd2yzoswQ== dependencies: - "@docusaurus/core" "3.9.2" - "@docusaurus/types" "3.9.2" - "@docusaurus/utils" "3.9.2" - "@docusaurus/utils-validation" "3.9.2" + "@docusaurus/core" "3.10.0" + "@docusaurus/types" "3.10.0" + "@docusaurus/utils" "3.10.0" + "@docusaurus/utils-validation" "3.10.0" "@svgr/core" "8.1.0" "@svgr/webpack" "^8.1.0" tslib "^2.6.0" webpack "^5.88.1" -"@docusaurus/preset-classic@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/preset-classic/-/preset-classic-3.9.2.tgz#85cc4f91baf177f8146c9ce896dfa1f0fd377050" - integrity sha512-IgyYO2Gvaigi21LuDIe+nvmN/dfGXAiMcV/murFqcpjnZc7jxFAxW+9LEjdPt61uZLxG4ByW/oUmX/DDK9t/8w== - dependencies: - "@docusaurus/core" "3.9.2" - "@docusaurus/plugin-content-blog" "3.9.2" - "@docusaurus/plugin-content-docs" "3.9.2" - "@docusaurus/plugin-content-pages" "3.9.2" - "@docusaurus/plugin-css-cascade-layers" "3.9.2" - "@docusaurus/plugin-debug" "3.9.2" - "@docusaurus/plugin-google-analytics" "3.9.2" - "@docusaurus/plugin-google-gtag" "3.9.2" - "@docusaurus/plugin-google-tag-manager" "3.9.2" - "@docusaurus/plugin-sitemap" "3.9.2" - "@docusaurus/plugin-svgr" "3.9.2" - "@docusaurus/theme-classic" "3.9.2" - "@docusaurus/theme-common" "3.9.2" - "@docusaurus/theme-search-algolia" "3.9.2" - "@docusaurus/types" "3.9.2" - -"@docusaurus/theme-classic@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/theme-classic/-/theme-classic-3.9.2.tgz#6e514f99a0ff42b80afcf42d5e5d042618311ce0" - integrity sha512-IGUsArG5hhekXd7RDb11v94ycpJpFdJPkLnt10fFQWOVxAtq5/D7hT6lzc2fhyQKaaCE62qVajOMKL7OiAFAIA== - dependencies: - "@docusaurus/core" "3.9.2" - "@docusaurus/logger" "3.9.2" - "@docusaurus/mdx-loader" "3.9.2" - "@docusaurus/module-type-aliases" "3.9.2" - "@docusaurus/plugin-content-blog" "3.9.2" - "@docusaurus/plugin-content-docs" "3.9.2" - "@docusaurus/plugin-content-pages" "3.9.2" - "@docusaurus/theme-common" "3.9.2" - "@docusaurus/theme-translations" "3.9.2" - "@docusaurus/types" "3.9.2" - "@docusaurus/utils" "3.9.2" - "@docusaurus/utils-common" "3.9.2" - "@docusaurus/utils-validation" "3.9.2" +"@docusaurus/preset-classic@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/preset-classic/-/preset-classic-3.10.0.tgz#74b6facdaf568bcd41ec90cae9aebb7ca0ac8619" + integrity sha512-kw/Ye02Hc6xP1OdTswy8yxQEHg0fdPpyWAQRxr5b2x3h7LlG2Zgbb5BDFROnXDDMpUxB7YejlocJIE5HIEfpNA== + dependencies: + "@docusaurus/core" "3.10.0" + "@docusaurus/plugin-content-blog" "3.10.0" + "@docusaurus/plugin-content-docs" "3.10.0" + "@docusaurus/plugin-content-pages" "3.10.0" + "@docusaurus/plugin-css-cascade-layers" "3.10.0" + "@docusaurus/plugin-debug" "3.10.0" + "@docusaurus/plugin-google-analytics" "3.10.0" + "@docusaurus/plugin-google-gtag" "3.10.0" + "@docusaurus/plugin-google-tag-manager" "3.10.0" + "@docusaurus/plugin-sitemap" "3.10.0" + "@docusaurus/plugin-svgr" "3.10.0" + "@docusaurus/theme-classic" "3.10.0" + "@docusaurus/theme-common" "3.10.0" + "@docusaurus/theme-search-algolia" "3.10.0" + "@docusaurus/types" "3.10.0" + +"@docusaurus/theme-classic@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/theme-classic/-/theme-classic-3.10.0.tgz#d937915c691189f27ced649c822994d839ea565b" + integrity sha512-9msCAsRdN+UG+RwPwCFb0uKy4tGoPh5YfBozXeGUtIeAgsMdn6f3G/oY861luZ3t8S2ET8S9Y/1GnpJAGWytww== + dependencies: + "@docusaurus/core" "3.10.0" + "@docusaurus/logger" "3.10.0" + "@docusaurus/mdx-loader" "3.10.0" + "@docusaurus/module-type-aliases" "3.10.0" + "@docusaurus/plugin-content-blog" "3.10.0" + "@docusaurus/plugin-content-docs" "3.10.0" + "@docusaurus/plugin-content-pages" "3.10.0" + "@docusaurus/theme-common" "3.10.0" + "@docusaurus/theme-translations" "3.10.0" + "@docusaurus/types" "3.10.0" + "@docusaurus/utils" "3.10.0" + "@docusaurus/utils-common" "3.10.0" + "@docusaurus/utils-validation" "3.10.0" "@mdx-js/react" "^3.0.0" clsx "^2.0.0" + copy-text-to-clipboard "^3.2.0" infima "0.2.0-alpha.45" lodash "^4.17.21" nprogress "^0.2.0" @@ -2037,15 +2052,15 @@ tslib "^2.6.0" utility-types "^3.10.0" -"@docusaurus/theme-common@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/theme-common/-/theme-common-3.9.2.tgz#487172c6fef9815c2746ef62a71e4f5b326f9ba5" - integrity sha512-6c4DAbR6n6nPbnZhY2V3tzpnKnGL+6aOsLvFL26VRqhlczli9eWG0VDUNoCQEPnGwDMhPS42UhSAnz5pThm5Ag== +"@docusaurus/theme-common@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/theme-common/-/theme-common-3.10.0.tgz#70b419ccfdf62f092299354a72d1692e81be597d" + integrity sha512-Dkp1YXKn16ByCJAdIjbDIOpVb4Z66MsVD694/ilX1vAAHaVEMrVsf/NPd9VgreyFx08rJ9GqV1MtzsbTcU73Kg== dependencies: - "@docusaurus/mdx-loader" "3.9.2" - "@docusaurus/module-type-aliases" "3.9.2" - "@docusaurus/utils" "3.9.2" - "@docusaurus/utils-common" "3.9.2" + "@docusaurus/mdx-loader" "3.10.0" + "@docusaurus/module-type-aliases" "3.10.0" + "@docusaurus/utils" "3.10.0" + "@docusaurus/utils-common" "3.10.0" "@types/history" "^4.7.11" "@types/react" "*" "@types/react-router-config" "*" @@ -2055,19 +2070,20 @@ tslib "^2.6.0" utility-types "^3.10.0" -"@docusaurus/theme-search-algolia@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/theme-search-algolia/-/theme-search-algolia-3.9.2.tgz#420fd5b27fc1673b48151fdc9fe7167ba135ed50" - integrity sha512-GBDSFNwjnh5/LdkxCKQHkgO2pIMX1447BxYUBG2wBiajS21uj64a+gH/qlbQjDLxmGrbrllBrtJkUHxIsiwRnw== - dependencies: - "@docsearch/react" "^3.9.0 || ^4.1.0" - "@docusaurus/core" "3.9.2" - "@docusaurus/logger" "3.9.2" - "@docusaurus/plugin-content-docs" "3.9.2" - "@docusaurus/theme-common" "3.9.2" - "@docusaurus/theme-translations" "3.9.2" - "@docusaurus/utils" "3.9.2" - "@docusaurus/utils-validation" "3.9.2" +"@docusaurus/theme-search-algolia@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/theme-search-algolia/-/theme-search-algolia-3.10.0.tgz#0ff57fe58db6abde8f5ad2877e459cd2fa6e7464" + integrity sha512-f5FPKI08e3JRG63vR/o4qeuUVHUHzFzM0nnF+AkB67soAZgNsKJRf2qmUZvlQkGwlV+QFkKe4D0ANMh1jToU3g== + dependencies: + "@algolia/autocomplete-core" "^1.19.2" + "@docsearch/react" "^3.9.0 || ^4.3.2" + "@docusaurus/core" "3.10.0" + "@docusaurus/logger" "3.10.0" + "@docusaurus/plugin-content-docs" "3.10.0" + "@docusaurus/theme-common" "3.10.0" + "@docusaurus/theme-translations" "3.10.0" + "@docusaurus/utils" "3.10.0" + "@docusaurus/utils-validation" "3.10.0" algoliasearch "^5.37.0" algoliasearch-helper "^3.26.0" clsx "^2.0.0" @@ -2077,23 +2093,23 @@ tslib "^2.6.0" utility-types "^3.10.0" -"@docusaurus/theme-translations@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/theme-translations/-/theme-translations-3.9.2.tgz#238cd69c2da92d612be3d3b4f95944c1d0f1e041" - integrity sha512-vIryvpP18ON9T9rjgMRFLr2xJVDpw1rtagEGf8Ccce4CkTrvM/fRB8N2nyWYOW5u3DdjkwKw5fBa+3tbn9P4PA== +"@docusaurus/theme-translations@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/theme-translations/-/theme-translations-3.10.0.tgz#8fdc23d29bd7f907db49c36cf65e2123d96be300" + integrity sha512-L9IbFLwTc5+XdgH45iQYufLn0SVZd6BUNelDbKIFlH+E4hhjuj/XHWAFMX/w2K59rfy8wak9McOaei7BSUfRPA== dependencies: fs-extra "^11.1.1" tslib "^2.6.0" -"@docusaurus/tsconfig@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/tsconfig/-/tsconfig-3.9.2.tgz#7f440e0ae665b841e1d487749037f26a0275f9c1" - integrity sha512-j6/Fp4Rlpxsc632cnRnl5HpOWeb6ZKssDj6/XzzAzVGXXfm9Eptx3rxCC+fDzySn9fHTS+CWJjPineCR1bB5WQ== +"@docusaurus/tsconfig@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/tsconfig/-/tsconfig-3.10.0.tgz#f40a57248828f0503a5f355cf30aa59941c9baaa" + integrity sha512-TXdC3WXuPrdQAexLvjUJfnYf3YKEgEqAs5nK0Q88pRBCW7t7oN4ILvWYb3A5Z1wlSXyXGWW/mCUmLEhdWsjnDQ== -"@docusaurus/types@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/types/-/types-3.9.2.tgz#e482cf18faea0d1fa5ce0e3f1e28e0f32d2593eb" - integrity sha512-Ux1JUNswg+EfUEmajJjyhIohKceitY/yzjRUpu04WXgvVz+fbhVC0p+R0JhvEu4ytw8zIAys2hrdpQPBHRIa8Q== +"@docusaurus/types@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/types/-/types-3.10.0.tgz#a69232bba74b738fcf4671fd5f0f079366dd3d13" + integrity sha512-F0dOt3FOoO20rRaFK7whGFQZ3ggyrWEdQc/c8/UiRuzhtg4y1w9FspXH5zpCT07uMnJKBPGh+qNazbNlCQqvSw== dependencies: "@mdx-js/mdx" "^3.0.0" "@types/history" "^4.7.11" @@ -2106,38 +2122,38 @@ webpack "^5.95.0" webpack-merge "^5.9.0" -"@docusaurus/utils-common@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/utils-common/-/utils-common-3.9.2.tgz#e89bfcf43d66359f43df45293fcdf22814847460" - integrity sha512-I53UC1QctruA6SWLvbjbhCpAw7+X7PePoe5pYcwTOEXD/PxeP8LnECAhTHHwWCblyUX5bMi4QLRkxvyZ+IT8Aw== +"@docusaurus/utils-common@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/utils-common/-/utils-common-3.10.0.tgz#2a6dc76b312664fca7234d33607c085318ff1ae3" + integrity sha512-JyL7sb9QVDgYvudIS81Dv0lsWm7le0vGZSDwsztxWam1SPBqrnkvBy9UYL/amh6pbybkyYTd3CMTkO24oMlCSw== dependencies: - "@docusaurus/types" "3.9.2" + "@docusaurus/types" "3.10.0" tslib "^2.6.0" -"@docusaurus/utils-validation@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/utils-validation/-/utils-validation-3.9.2.tgz#04aec285604790806e2fc5aa90aa950dc7ba75ae" - integrity sha512-l7yk3X5VnNmATbwijJkexdhulNsQaNDwoagiwujXoxFbWLcxHQqNQ+c/IAlzrfMMOfa/8xSBZ7KEKDesE/2J7A== +"@docusaurus/utils-validation@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/utils-validation/-/utils-validation-3.10.0.tgz#a2418d7f31980d991fd3a1f39c8aad8820b36812" + integrity sha512-c+6n2+ZPOJtWWc8Bb/EYdpSDfjYEScdCu9fB/SNjOmSCf1IdVnGf2T53o0tsz0gDRtCL90tifTL0JE/oMuP1Mw== dependencies: - "@docusaurus/logger" "3.9.2" - "@docusaurus/utils" "3.9.2" - "@docusaurus/utils-common" "3.9.2" + "@docusaurus/logger" "3.10.0" + "@docusaurus/utils" "3.10.0" + "@docusaurus/utils-common" "3.10.0" fs-extra "^11.2.0" joi "^17.9.2" js-yaml "^4.1.0" lodash "^4.17.21" tslib "^2.6.0" -"@docusaurus/utils@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@docusaurus/utils/-/utils-3.9.2.tgz#ffab7922631c7e0febcb54e6d499f648bf8a89eb" - integrity sha512-lBSBiRruFurFKXr5Hbsl2thmGweAPmddhF3jb99U4EMDA5L+e5Y1rAkOS07Nvrup7HUMBDrCV45meaxZnt28nQ== +"@docusaurus/utils@3.10.0": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@docusaurus/utils/-/utils-3.10.0.tgz#ea7d7b0d325b60f728decc00bb3908d00ef86faf" + integrity sha512-T3B0WTigsIthe0D4LQa2k+7bJY+c3WS+Wq2JhcznOSpn1lSN64yNtHQXboCj3QnUs1EuAZszQG1SHKu5w5ZrlA== dependencies: - "@docusaurus/logger" "3.9.2" - "@docusaurus/types" "3.9.2" - "@docusaurus/utils-common" "3.9.2" + "@docusaurus/logger" "3.10.0" + "@docusaurus/types" "3.10.0" + "@docusaurus/utils-common" "3.10.0" escape-string-regexp "^4.0.0" - execa "5.1.1" + execa "^5.1.1" file-loader "^6.2.0" fs-extra "^11.1.1" github-slugger "^1.5.0" @@ -3662,7 +3678,7 @@ "@rspack/binding-win32-ia32-msvc" "1.7.11" "@rspack/binding-win32-x64-msvc" "1.7.11" -"@rspack/core@^1.5.0": +"@rspack/core@^1.7.10": version "1.7.11" resolved "https://registry.yarnpkg.com/@rspack/core/-/core-1.7.11.tgz#8d7d77db3b71332afd22a9c90904fe18a6832e2c" integrity sha512-rsD9b+Khmot5DwCMiB3cqTQo53ioPG3M/A7BySu8+0+RS7GCxKm+Z+mtsjtG/vsu4Tn2tcqCdZtA3pgLoJB+ew== @@ -4230,10 +4246,10 @@ dependencies: "@types/node" "*" -"@types/gtag.js@^0.0.12": - version "0.0.12" - resolved "https://registry.yarnpkg.com/@types/gtag.js/-/gtag.js-0.0.12.tgz#095122edca896689bdfcdd73b057e23064d23572" - integrity sha512-YQV9bUsemkzG81Ea295/nF/5GijnD2Af7QhEofh7xu+kvCN6RdodgNwwGWXB5GMI3NoyvQo0odNctoH/qLMIpg== +"@types/gtag.js@^0.0.20": + version "0.0.20" + resolved "https://registry.yarnpkg.com/@types/gtag.js/-/gtag.js-0.0.20.tgz#e47edabb4ed5ecac90a079275958e6c929d7c08a" + integrity sha512-wwAbk3SA2QeU67unN7zPxjEHmPmlXwZXZvQEpbEUQuMCRGgKyE1m6XDuTUA9b6pCGb/GqJmdfMOY5LuDjJSbbg== "@types/hast@^2.0.0": version "2.3.10" @@ -6017,6 +6033,11 @@ cookie@~0.7.1: resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.2.tgz#556369c472a2ba910f2979891b526b3436237ed7" integrity sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w== +copy-text-to-clipboard@^3.2.0: + version "3.2.2" + resolved "https://registry.yarnpkg.com/copy-text-to-clipboard/-/copy-text-to-clipboard-3.2.2.tgz#99bc79db3f2d355ec33a08d573aff6804491ddb9" + integrity sha512-T6SqyLd1iLuqPA90J5N4cTalrtovCySh58iiZDGJ6FGznbclKh4UI+FGacQSgFzwKG77W7XT5gwbVEbd9cIH1A== + copy-webpack-plugin@^11.0.0: version "11.0.0" resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz#96d4dbdb5f73d02dd72d0528d1958721ab72e04a" @@ -6036,11 +6057,6 @@ core-js-compat@^3.43.0, core-js-compat@^3.48.0: dependencies: browserslist "^4.28.1" -core-js-pure@^3.48.0: - version "3.49.0" - resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.49.0.tgz#ff8436b7251a3832f5fdbbe3e10f7f2e58e51fb1" - integrity sha512-XM4RFka59xATyJv/cS3O3Kml72hQXUeGRuuTmMYFxwzc9/7C8OYTaIR/Ji+Yt8DXzsFLNhat15cE/JP15HrCgw== - core-js@^3.31.1: version "3.49.0" resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.49.0.tgz#8b4d520ac034311fa21aa616f017ada0e0dbbddd" @@ -7378,7 +7394,7 @@ events@^3.2.0: resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400" integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q== -execa@5.1.1, execa@^5.0.0: +execa@^5.0.0, execa@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd" integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg== @@ -13556,7 +13572,7 @@ react-json-view-lite@^2.3.0: resolved "https://registry.yarnpkg.com/react-json-view-lite/-/react-json-view-lite-2.5.0.tgz#c7ff011c7cc80e9900abc7aa4916c6a5c6d6c1c6" integrity sha512-tk7o7QG9oYyELWHL8xiMQ8x4WzjCzbWNyig3uexmkLb54r8jO0yH3WCWx8UZS0c49eSA4QUmG5caiRJ8fAn58g== -react-loadable-ssr-addon-v5-slorber@^1.0.1: +react-loadable-ssr-addon-v5-slorber@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/react-loadable-ssr-addon-v5-slorber/-/react-loadable-ssr-addon-v5-slorber-1.0.3.tgz#bb3791bf481222c63a5bc6b96ee23f68cb5614b9" integrity sha512-GXfh9VLwB5ERaCsU6RULh7tkemeX15aNh6wuMEBtfdyMa7fFG8TXrhXlx1SoEK2Ty/l6XIkzzYIQmyaWW3JgdQ== @@ -14478,7 +14494,7 @@ serialize-javascript@^6.0.0, serialize-javascript@^6.0.1, serialize-javascript@^ resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-7.0.5.tgz#c798cc0552ffbb08981914a42a8756e339d0d5b1" integrity sha512-F4LcB0UqUl1zErq+1nYEEzSHJnIwb3AF2XWB94b+afhrekOUijwooAYqFyRbjYkm2PAKBabx6oYv/xDxNi8IBw== -serve-handler@^6.1.6: +serve-handler@^6.1.7: version "6.1.7" resolved "https://registry.yarnpkg.com/serve-handler/-/serve-handler-6.1.7.tgz#e9bb864e87ee71e8dab874cde44d146b77e3fb78" integrity sha512-CinAq1xWb0vR3twAv9evEU8cNWkXCb9kd5ePAHUKJBkOsUpR1wt/CvGdeca7vqumL1U5cSaeVQ6zZMxiJ3yWsg==