From 63009842f6898cc669d29f10e6e9adcf3853cd56 Mon Sep 17 00:00:00 2001 From: Simek Date: Fri, 18 Aug 2023 17:03:30 +0200 Subject: [PATCH 1/2] correct broken links, update Case Police, fix warings --- docs/_getting-started-linux-android.md | 2 +- docs/_getting-started-macos-android.md | 2 +- docs/_getting-started-macos-ios.md | 2 +- docs/_getting-started-windows-android.md | 2 +- docs/communication-ios.md | 2 +- docs/custom-webview-android.md | 2 +- docs/navigation.md | 2 +- docs/platform-specific-code.md | 2 +- .../backward-compatibility-fabric-components.md | 2 +- .../backward-compatibility-turbomodules.md | 2 +- docs/the-new-architecture/pillars-fabric-components.md | 2 +- docs/the-new-architecture/pillars-turbomodule.md | 2 +- package.json | 2 +- website/blog/2016-03-24-introducing-hot-reloading.md | 10 +++++----- website/blog/2017-06-21-react-native-monthly-1.md | 2 +- website/blog/2017-11-06-react-native-monthly-5.md | 2 +- website/package.json | 4 ++-- .../version-0.70/custom-webview-android.md | 6 +++--- .../versioned_docs/version-0.70/custom-webview-ios.md | 2 +- website/versioned_docs/version-0.70/getting-started.md | 4 ++-- .../version-0.70/javascript-environment.md | 2 +- .../version-0.70/platform-specific-code.md | 2 +- .../version-0.71/custom-webview-android.md | 6 +++--- .../versioned_docs/version-0.71/custom-webview-ios.md | 2 +- website/versioned_docs/version-0.71/getting-started.md | 4 ++-- .../version-0.71/javascript-environment.md | 2 +- .../version-0.71/platform-specific-code.md | 2 +- .../versioned_docs/version-0.72/communication-ios.md | 2 +- .../version-0.72/custom-webview-android.md | 6 +++--- .../versioned_docs/version-0.72/custom-webview-ios.md | 2 +- website/versioned_docs/version-0.72/getting-started.md | 4 ++-- .../version-0.72/javascript-environment.md | 2 +- website/versioned_docs/version-0.72/navigation.md | 2 +- .../version-0.72/platform-specific-code.md | 2 +- .../backward-compatibility-fabric-components.md | 2 +- .../backward-compatibility-turbomodules.md | 2 +- .../the-new-architecture/pillars-fabric-components.md | 2 +- .../the-new-architecture/pillars-turbomodule.md | 2 +- yarn.lock | 8 ++++---- 39 files changed, 56 insertions(+), 56 deletions(-) diff --git a/docs/_getting-started-linux-android.md b/docs/_getting-started-linux-android.md index 5816574984c..614e9cfcddb 100644 --- a/docs/_getting-started-linux-android.md +++ b/docs/_getting-started-linux-android.md @@ -146,7 +146,7 @@ yarn start :::note -If you're familiar with web development, Metro is similar to bundlers such as Vite and Webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. +If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. :::

Step 2: Start your application

diff --git a/docs/_getting-started-macos-android.md b/docs/_getting-started-macos-android.md index cb546bee6a6..c8ca872ff80 100644 --- a/docs/_getting-started-macos-android.md +++ b/docs/_getting-started-macos-android.md @@ -161,7 +161,7 @@ yarn start :::note -If you're familiar with web development, Metro is similar to bundlers such as Vite and Webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. +If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. :::

Step 2: Start your application

diff --git a/docs/_getting-started-macos-ios.md b/docs/_getting-started-macos-ios.md index 6197de42ba5..6f374a670b3 100644 --- a/docs/_getting-started-macos-ios.md +++ b/docs/_getting-started-macos-ios.md @@ -124,7 +124,7 @@ yarn start :::note -If you're familiar with web development, Metro is similar to bundlers such as Vite and Webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. +If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. ::: ### Step 2: Start your application diff --git a/docs/_getting-started-windows-android.md b/docs/_getting-started-windows-android.md index 49ba9dbf50e..9c36f02f0f7 100644 --- a/docs/_getting-started-windows-android.md +++ b/docs/_getting-started-windows-android.md @@ -177,7 +177,7 @@ yarn start :::note -If you're familiar with web development, Metro is similar to bundlers such as Vite and Webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. +If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. :::

Step 2: Start your application

diff --git a/docs/communication-ios.md b/docs/communication-ios.md index 957c0a59c6d..030cddd00f4 100644 --- a/docs/communication-ios.md +++ b/docs/communication-ios.md @@ -189,7 +189,7 @@ Let's look at an example. In the example we have a `FlexibleSizeExampleView` view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility to `RCTRootViewSizeFlexibilityHeight`, which means that `rootViewDidChangeIntrinsicSize:` method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent. -You can checkout full source code of the example [here](https://github.com/facebook/react-native/blob/main/packages/rn-tester/RNTester/NativeExampleViews/FlexibleSizeExampleView.m). +You can checkout full source code of the example [here](https://github.com/facebook/react-native/blob/main/packages/rn-tester/RNTester/NativeExampleViews/FlexibleSizeExampleView.mm). It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate `rootViewDidChangeIntrinsicSize:` method will be called once the content size is known. diff --git a/docs/custom-webview-android.md b/docs/custom-webview-android.md index 5140095872d..47cd36c8d89 100644 --- a/docs/custom-webview-android.md +++ b/docs/custom-webview-android.md @@ -9,7 +9,7 @@ While the built-in web view has a lot of features, it is not possible to handle :::info The React Native WebView component has been extracted to [`react-native-webview`](https://github.com/react-native-webview/react-native-webview) package as part of the [Lean Core effort](https://github.com/facebook/react-native/issues/23313). -That is the recommended way to use WebView in React Native as of today. You should not use the [WebView](https://reactnative.dev/docs/0.61/webview) component as that was deprecated and removed from React Native. +That is the recommended way to use WebView in React Native as of today. You should not use the [WebView](https://reactnative-archive-august-2023.netlify.app/docs/0.61/webview) component as that was deprecated and removed from React Native. ::: Before you do this, you should be familiar with the concepts in [native UI components](native-components-android). You should also familiarise yourself with the [native code for web views](https://github.com/react-native-webview/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. diff --git a/docs/navigation.md b/docs/navigation.md index 101acb85779..ceb52632825 100644 --- a/docs/navigation.md +++ b/docs/navigation.md @@ -35,7 +35,7 @@ Next, install the required peer dependencies. You need to run different commands npm install react-native-screens react-native-safe-area-context ``` - For iOS with bare React Native project, make sure you have [Cocoapods](https://cocoapods.org/) installed. Then install the pods to complete the installation: + For iOS with bare React Native project, make sure you have [CocoaPods](https://cocoapods.org/) installed. Then install the pods to complete the installation: ```shell cd ios diff --git a/docs/platform-specific-code.md b/docs/platform-specific-code.md index 317e2cd500c..758c6b86202 100644 --- a/docs/platform-specific-code.md +++ b/docs/platform-specific-code.md @@ -125,7 +125,7 @@ You can also use the `.native.js` extension when a module needs to be shared bet For example, say you have the following files in your project: ```shell -Container.js # picked up by Webpack, Rollup or any other Web bundler +Container.js # picked up by webpack, Rollup or any other Web bundler Container.native.js # picked up by the React Native bundler for both Android and iOS (Metro) ``` diff --git a/docs/the-new-architecture/backward-compatibility-fabric-components.md b/docs/the-new-architecture/backward-compatibility-fabric-components.md index ccd83bde29b..3c4116dee24 100644 --- a/docs/the-new-architecture/backward-compatibility-fabric-components.md +++ b/docs/the-new-architecture/backward-compatibility-fabric-components.md @@ -40,7 +40,7 @@ While the last step is the same for all the platforms, the first two steps are d ### iOS -The Apple platform installs Fabric Native Components using [Cocoapods](https://cocoapods.org) as a dependency manager. +The Apple platform installs Fabric Native Components using [CocoaPods](https://cocoapods.org) as a dependency manager. If you are already using the [`install_module_dependencies`](https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L198) function, then **there is nothing to do**. The function already takes care of installing the proper dependencies when the New Architecture is enabled and avoiding them when it is not enabled. diff --git a/docs/the-new-architecture/backward-compatibility-turbomodules.md b/docs/the-new-architecture/backward-compatibility-turbomodules.md index d4a75281c29..d4f906ad443 100644 --- a/docs/the-new-architecture/backward-compatibility-turbomodules.md +++ b/docs/the-new-architecture/backward-compatibility-turbomodules.md @@ -40,7 +40,7 @@ While the last step is the same for all the platforms, the first two steps are d ### iOS -The Apple platform installs Turbo Native Modules using [Cocoapods](https://cocoapods.org) as a dependency manager. +The Apple platform installs Turbo Native Modules using [CocoaPods](https://cocoapods.org) as a dependency manager. If you are already using the [`install_module_dependencies`](https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L198) function, then **there is nothing to do**. The function already takes care of installing the proper dependencies when the New Architecture is enabled and avoids them when it is not enabled. diff --git a/docs/the-new-architecture/pillars-fabric-components.md b/docs/the-new-architecture/pillars-fabric-components.md index e5631b6ebbc..5cae0200fa8 100644 --- a/docs/the-new-architecture/pillars-fabric-components.md +++ b/docs/the-new-architecture/pillars-fabric-components.md @@ -969,7 +969,7 @@ cd ios RCT_NEW_ARCH_ENABLED=1 bundle exec pod install ``` -This command installs the iOS dependencies for the project. The `RCT_NEW_ARCH_ENABLED=1` flag instructs **Cocoapods** that it has to execute some additional operations to run **Codegen**. +This command installs the iOS dependencies for the project. The `RCT_NEW_ARCH_ENABLED=1` flag instructs **CocoaPods** that it has to execute some additional operations to run **Codegen**. :::note You may have to run `bundle install` once before you can use `RCT_NEW_ARCH_ENABLED=1 bundle exec pod install`. You won't need to run `bundle install` anymore, unless you need to change the ruby dependencies. diff --git a/docs/the-new-architecture/pillars-turbomodule.md b/docs/the-new-architecture/pillars-turbomodule.md index 45443f6fc42..7b126ceef66 100644 --- a/docs/the-new-architecture/pillars-turbomodule.md +++ b/docs/the-new-architecture/pillars-turbomodule.md @@ -788,7 +788,7 @@ cd ios RCT_NEW_ARCH_ENABLED=1 bundle exec pod install ``` -This command will look for all the dependencies of the project and it will install the iOS ones. The `RCT_NEW_ARCH_ENABLED=1` instruct **Cocoapods** that it has to run some additional operations to run **Codegen**. +This command will look for all the dependencies of the project and it will install the iOS ones. The `RCT_NEW_ARCH_ENABLED=1` instruct **CocoaPods** that it has to run some additional operations to run **Codegen**. :::note You may have to run `bundle install` once before you can use `RCT_NEW_ARCH_ENABLED=1 bundle exec pod install`. You won't need to run `bundle install` anymore, unless you need to change the Ruby dependencies. diff --git a/package.json b/package.json index 268a86ff69c..8303bfffa27 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ }, "dependencies": { "babel-eslint": "^10.1.0", - "case-police": "^0.5.6", + "case-police": "^0.6.1", "eslint": "^8.20.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-mdx": "^1.16.0", diff --git a/website/blog/2016-03-24-introducing-hot-reloading.md b/website/blog/2016-03-24-introducing-hot-reloading.md index 4c2b56576bc..ed6988114ed 100644 --- a/website/blog/2016-03-24-introducing-hot-reloading.md +++ b/website/blog/2016-03-24-introducing-hot-reloading.md @@ -44,7 +44,7 @@ Hot reloading is available as of 0.22, you can enable it: Now that we've seen why we want it and how to use it, the fun part begins: how it actually works. -Hot Reloading is built on top of a feature [Hot Module Replacement](https://webpack.js.org/guides/hot-module-replacement/), or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app. +Hot Reloading is built on top of a feature [Hot Module Replacement](https://webpack.js.org/guides/hot-module-replacement/), or HMR. It was first introduced by webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app. In a nutshell, the HMR update contains the new code of the JS modules that changed. When the runtime receives them, it replaces the old modules' code with the new one: @@ -120,7 +120,7 @@ For `log` to pick up `time` changes, we'll need to clear its cached exports beca ## HMR API -HMR in React Native extends the module system by introducing the `hot` object. This API is based on [Webpack](https://webpack.github.io/hot-module-replacement.md)'s one. The `hot` object exposes a function called `accept` which allows you to define a callback that will be executed when the module needs to be hot swapped. For instance, if we would change `time`'s code as follows, every time we save time, we'll see “time changed” in the console: +HMR in React Native extends the module system by introducing the `hot` object. This API is based on [webpack](https://webpack.github.io/hot-module-replacement.md)'s one. The `hot` object exposes a function called `accept` which allows you to define a callback that will be executed when the module needs to be hot swapped. For instance, if we would change `time`'s code as follows, every time we save time, we'll see “time changed” in the console: ``` // time.js @@ -167,17 +167,17 @@ In order to walk the dependency tree, the runtime receives the inverse dependenc ## React Components -React components are a bit harder to get to work with Hot Reloading. The problem is that we can't simply replace the old code with the new one as we'd loose the component's state. For React web applications, [Dan Abramov](https://twitter.com/dan_abramov) implemented a babel [transform](https://gaearon.github.io/react-hot-loader/) that uses Webpack's HMR API to solve this issue. In a nutshell, his solution works by creating a proxy for every single React component on _transform time_. The proxies hold the component's state and delegate the lifecycle methods to the actual components, which are the ones we hot reload: +React components are a bit harder to get to work with Hot Reloading. The problem is that we can't simply replace the old code with the new one as we'd loose the component's state. For React web applications, [Dan Abramov](https://twitter.com/dan_abramov) implemented a babel [transform](https://gaearon.github.io/react-hot-loader/) that uses webpack's HMR API to solve this issue. In a nutshell, his solution works by creating a proxy for every single React component on _transform time_. The proxies hold the component's state and delegate the lifecycle methods to the actual components, which are the ones we hot reload: ![](/blog/assets/hmr-proxy.png) Besides creating the proxy component, the transform also defines the `accept` function with a piece of code to force React to re-render the component. This way, we can hot reload rendering code without losing any of the app's state. -The default [transformer](https://github.com/facebook/react-native/blob/master/packager/transformer.js#L92-L95) that comes with React Native uses the `babel-preset-react-native`, which is [configured](https://github.com/facebook/react-native/blob/master/babel-preset/configs/hmr.js#L24-L31) to use `react-transform` the same way you'd use it on a React web project that uses Webpack. +The default [transformer](https://github.com/facebook/react-native/blob/master/packager/transformer.js#L92-L95) that comes with React Native uses the `babel-preset-react-native`, which is [configured](https://github.com/facebook/react-native/blob/master/babel-preset/configs/hmr.js#L24-L31) to use `react-transform` the same way you'd use it on a React web project that uses webpack. ## Redux Stores -To enable Hot Reloading on [Redux](https://redux.js.org/) stores you will just need to use the HMR API similarly to what you'd do on a web project that uses Webpack: +To enable Hot Reloading on [Redux](https://redux.js.org/) stores you will just need to use the HMR API similarly to what you'd do on a web project that uses webpack: ``` // configureStore.js diff --git a/website/blog/2017-06-21-react-native-monthly-1.md b/website/blog/2017-06-21-react-native-monthly-1.md index 2f6898bfefd..72145b15b33 100644 --- a/website/blog/2017-06-21-react-native-monthly-1.md +++ b/website/blog/2017-06-21-react-native-monthly-1.md @@ -44,7 +44,7 @@ As teams' plans might be of interest to a broader audience, we'll be sharing the - Looking into improving the release process by using [Detox](https://github.com/wix/detox) for E2E testing. Pull request should land soon. - Blob pull request they have been working on has been merged, subsequent pull requests coming up. -- Increasing [Haul](https://github.com/callstack-io/haul) adoption across internal projects to see how it performs compared to [Metro Bundler](https://github.com/facebook/metro-bundler). Working on better multi-threaded performance with the Webpack team. +- Increasing [Haul](https://github.com/callstack-io/haul) adoption across internal projects to see how it performs compared to [Metro Bundler](https://github.com/facebook/metro-bundler). Working on better multi-threaded performance with the webpack team. - Internally, they have implemented a better infrastructure to manage open source projects. Plans to be getting more stuff out in upcoming weeks. - The React Native Europe conference is coming along, nothing interesting yet, but y'all invited! - Stepped back from [react-navigation](https://github.com/react-community/react-navigation) for a while to investigate alternatives (especially native navigations). diff --git a/website/blog/2017-11-06-react-native-monthly-5.md b/website/blog/2017-11-06-react-native-monthly-5.md index 97c6b8c9e41..8df8e41e66d 100644 --- a/website/blog/2017-11-06-react-native-monthly-5.md +++ b/website/blog/2017-11-06-react-native-monthly-5.md @@ -14,7 +14,7 @@ The React Native monthly meeting continues! Let's see what our teams are up to. - We’ve been working on React Native CI. Most importantly, we have migrated from Travis to Circle, leaving React Native with a single, unified CI pipeline. - We’ve organised [Hacktoberfest - React Native edition](https://blog.callstack.io/announcing-hacktoberfest-7313ea5ccf4f) where, together with attendees, we tried to submit many pull requests to open source projects. -- We keep working on [Haul](https://github.com/callstack/haul). Last month, we have submitted two new releases, including Webpack 3 support. We plan to add [CRNA](https://github.com/react-community/create-react-native-app) and [Expo](https://github.com/expo/expo) support as well as work on better HMR. Our roadmap is public on the issue tracker. If you would like to suggest improvements or give feedback, let us know! +- We keep working on [Haul](https://github.com/callstack/haul). Last month, we have submitted two new releases, including webpack 3 support. We plan to add [CRNA](https://github.com/react-community/create-react-native-app) and [Expo](https://github.com/expo/expo) support as well as work on better HMR. Our roadmap is public on the issue tracker. If you would like to suggest improvements or give feedback, let us know! ### Expo diff --git a/website/package.json b/website/package.json index b9ff98d2a62..90db8ecd6ec 100644 --- a/website/package.json +++ b/website/package.json @@ -29,8 +29,8 @@ "lint:examples": "eslint-examples-js && eslint-examples-tsx && tsc-examples", "lint:versioned": "eslint versioned_docs/**", "lint:markdown": "remark ../docs --quiet -r .remarkrc.mjs", - "language:lint": "cd ../ && alex && case-police 'docs/*.md' -p brands,general,products,softwares -d ./website/react-native-dict.json", - "language:lint:versioned": "cd ../ && alex . && case-police '**/*.md' -p brands,general,products,softwares -d ./website/react-native-dict.json", + "language:lint": "cd ../ && alex && case-police 'docs/*.md' -p brands,general,products,softwares -d ./website/react-native-dict.json --disable uri,sdk", + "language:lint:versioned": "cd ../ && alex . && case-police '**/*.md' -p brands,general,products,softwares -d ./website/react-native-dict.json -disable uri,sdk", "ci:lint": "yarn lint && yarn lint:examples && yarn lint:versioned && yarn language:lint:versioned && yarn lint:markdown", "pwa:generate": "npx pwa-asset-generator ./static/img/header_logo.svg ./static/img/pwa --padding '40px' --background 'rgb(32, 35, 42)' --icon-only --opaque true" }, diff --git a/website/versioned_docs/version-0.70/custom-webview-android.md b/website/versioned_docs/version-0.70/custom-webview-android.md index 6384a1585d1..54ab31b7e2b 100644 --- a/website/versioned_docs/version-0.70/custom-webview-android.md +++ b/website/versioned_docs/version-0.70/custom-webview-android.md @@ -9,10 +9,10 @@ While the built-in web view has a lot of features, it is not possible to handle :::info The React Native WebView component has been extracted to [`react-native-webview`](https://github.com/react-native-webview/react-native-webview) package as part of the [Lean Core effort](https://github.com/facebook/react-native/issues/23313). -That is the recommended way to use WebView in React Native as of today. You should not use the [WebView](https://reactnative.dev/docs/0.61/webview) component as that was deprecated and removed from React Native. +That is the recommended way to use WebView in React Native as of today. You should not use the [WebView](https://reactnative-archive-august-2023.netlify.app/docs/0.61/webview) component as that was deprecated and removed from React Native. ::: -Before you do this, you should be familiar with the concepts in [native UI components](native-components-android). You should also familiarise yourself with the [native code for web views](https://github.com/react-native-webview/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. +Before you do this, you should be familiar with the concepts in [native UI components](native-components-android). You should also familiarise yourself with the [native code for web views](https://github.com/react-native-webview/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManagerImpl.kt), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. ## Native Code @@ -196,7 +196,7 @@ class NavigationCompletedEvent(viewTag: Int, val params: WritableMap) : You can trigger the event in your web view client. You can hook existing handlers if your events are based on them. -You should refer to [RNCWebViewManager.java](https://github.com/react-native-webview/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java) in the React Native WebView codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. +You should refer to [RNCWebViewManagerImpl.kt](https://github.com/react-native-webview/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManagerImpl.kt) in the React Native WebView codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. diff --git a/website/versioned_docs/version-0.70/custom-webview-ios.md b/website/versioned_docs/version-0.70/custom-webview-ios.md index 97b4e89e647..8c7b7a908f2 100644 --- a/website/versioned_docs/version-0.70/custom-webview-ios.md +++ b/website/versioned_docs/version-0.70/custom-webview-ios.md @@ -5,7 +5,7 @@ title: Custom WebView While the built-in web view has a lot of features, it is not possible to handle every use-case in React Native. You can, however, extend the web view with native code without forking React Native or duplicating all the existing web view code. -Before you do this, you should be familiar with the concepts in [native UI components](native-components-ios). You should also familiarise yourself with the [native code for web views](https://github.com/react-native-webview/react-native-webview/blob/master/apple/RNCWebViewManager.m), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. +Before you do this, you should be familiar with the concepts in [native UI components](native-components-ios). You should also familiarise yourself with the [native code for web views](https://github.com/react-native-webview/react-native-webview/blob/master/apple/RNCWebViewManager.mm), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. ## Native Code diff --git a/website/versioned_docs/version-0.70/getting-started.md b/website/versioned_docs/version-0.70/getting-started.md index 09041eda1bc..8a59846d1ca 100644 --- a/website/versioned_docs/version-0.70/getting-started.md +++ b/website/versioned_docs/version-0.70/getting-started.md @@ -76,11 +76,11 @@ Once you've set these up, you can launch your app on an Android Virtual Device b The Expo Go app is a great tool to get started — it exists to help developers quickly get projects off the ground, to experiment with ideas (such as on [Snack](https://snack.expo.dev/)) and share their work with minimal friction. Expo Go makes this possible by including a feature-rich native runtime made up of every module in the [Expo SDK](https://docs.expo.dev/versions/latest/), so all you need to do to use a module is install the package with `npx expo install` and reload your app. -The tradeoff is that the Expo Go app does not allow you to add custom native code — you can only use native modules built into the Expo SDK. There are many great libraries available outside of the Expo SDK, and you may even want to build your own native library. You can leverage these libraries with [development builds](https://docs.expo.dev/development/introduction/), or by using ["prebuild"](https://docs.expo.dev/workflow/prebuild/) to generate the native projects, or both. [Learn more about adding native code to projects created with `create-expo-app`](https://docs.expo.dev/workflow/customizing/). +The tradeoff is that the Expo Go app does not allow you to add custom native code — you can only use native modules built into the Expo SDK. There are many great libraries available outside of the Expo SDK, and you may even want to build your own native library. You can leverage these libraries with [development builds](https://docs.expo.dev/develop/development-builds/introduction/), or by using ["prebuild"](https://docs.expo.dev/workflow/prebuild/) to generate the native projects, or both. [Learn more about adding native code to projects created with `create-expo-app`](https://docs.expo.dev/workflow/customizing/). `create-expo-app` configures your project to use the most recent React Native version that is supported by the Expo SDK. The Expo Go app usually gains support for a given React Native version with new SDK versions (released quarterly). You can check [this document](https://docs.expo.dev/versions/latest/#each-expo-sdk-version-depends-on-a) to find out what versions are supported. -If you're integrating React Native into an existing project, [you can use the Expo SDK](https://docs.expo.dev/bare/installing-expo-modules/) and [development builds](https://docs.expo.dev/development/introduction/), but you will need to set up a native development environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native. +If you're integrating React Native into an existing project, [you can use the Expo SDK](https://docs.expo.dev/bare/installing-expo-modules/) and [development builds](https://docs.expo.dev/develop/development-builds/introduction/), but you will need to set up a native development environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native. diff --git a/website/versioned_docs/version-0.70/javascript-environment.md b/website/versioned_docs/version-0.70/javascript-environment.md index 57898efd0b6..54311c90a12 100644 --- a/website/versioned_docs/version-0.70/javascript-environment.md +++ b/website/versioned_docs/version-0.70/javascript-environment.md @@ -21,7 +21,7 @@ Syntax transformers make writing code more enjoyable by allowing you to use new React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check [Babel documentation](https://babeljs.io/docs/plugins/#transform-plugins) on its supported transformations for more details. -A full list of React Native's enabled transformations can be found in [metro-react-native-babel-preset](https://github.com/facebook/metro/tree/master/packages/metro-react-native-babel-preset). +A full list of React Native's enabled transformations can be found in [@react-native/babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset). diff --git a/website/versioned_docs/version-0.70/platform-specific-code.md b/website/versioned_docs/version-0.70/platform-specific-code.md index 844a885ee92..d6c11b11c50 100644 --- a/website/versioned_docs/version-0.70/platform-specific-code.md +++ b/website/versioned_docs/version-0.70/platform-specific-code.md @@ -125,7 +125,7 @@ You can also use the `.native.js` extension when a module needs to be shared bet For example, say you have the following files in your project: ```shell -Container.js # picked up by Webpack, Rollup or any other Web bundler +Container.js # picked up by webpack, Rollup or any other Web bundler Container.native.js # picked up by the React Native bundler for both Android and iOS (Metro) ``` diff --git a/website/versioned_docs/version-0.71/custom-webview-android.md b/website/versioned_docs/version-0.71/custom-webview-android.md index 5140095872d..50ae8d4d92f 100644 --- a/website/versioned_docs/version-0.71/custom-webview-android.md +++ b/website/versioned_docs/version-0.71/custom-webview-android.md @@ -9,10 +9,10 @@ While the built-in web view has a lot of features, it is not possible to handle :::info The React Native WebView component has been extracted to [`react-native-webview`](https://github.com/react-native-webview/react-native-webview) package as part of the [Lean Core effort](https://github.com/facebook/react-native/issues/23313). -That is the recommended way to use WebView in React Native as of today. You should not use the [WebView](https://reactnative.dev/docs/0.61/webview) component as that was deprecated and removed from React Native. +That is the recommended way to use WebView in React Native as of today. You should not use the [WebView](https://reactnative-archive-august-2023.netlify.app/docs/0.61/webview) component as that was deprecated and removed from React Native. ::: -Before you do this, you should be familiar with the concepts in [native UI components](native-components-android). You should also familiarise yourself with the [native code for web views](https://github.com/react-native-webview/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. +Before you do this, you should be familiar with the concepts in [native UI components](native-components-android). You should also familiarise yourself with the [native code for web views](https://github.com/react-native-webview/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManagerImpl.kt), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. ## Native Code @@ -196,7 +196,7 @@ class NavigationCompletedEvent(viewTag: Int, val params: WritableMap) : You can trigger the event in your web view client. You can hook existing handlers if your events are based on them. -You should refer to [RNCWebViewManager.java](https://github.com/react-native-webview/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java) in the React Native WebView codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. +You should refer to [RNCWebViewManagerImpl.kt](https://github.com/react-native-webview/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManagerImpl.kt) in the React Native WebView codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. diff --git a/website/versioned_docs/version-0.71/custom-webview-ios.md b/website/versioned_docs/version-0.71/custom-webview-ios.md index 97b4e89e647..8c7b7a908f2 100644 --- a/website/versioned_docs/version-0.71/custom-webview-ios.md +++ b/website/versioned_docs/version-0.71/custom-webview-ios.md @@ -5,7 +5,7 @@ title: Custom WebView While the built-in web view has a lot of features, it is not possible to handle every use-case in React Native. You can, however, extend the web view with native code without forking React Native or duplicating all the existing web view code. -Before you do this, you should be familiar with the concepts in [native UI components](native-components-ios). You should also familiarise yourself with the [native code for web views](https://github.com/react-native-webview/react-native-webview/blob/master/apple/RNCWebViewManager.m), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. +Before you do this, you should be familiar with the concepts in [native UI components](native-components-ios). You should also familiarise yourself with the [native code for web views](https://github.com/react-native-webview/react-native-webview/blob/master/apple/RNCWebViewManager.mm), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. ## Native Code diff --git a/website/versioned_docs/version-0.71/getting-started.md b/website/versioned_docs/version-0.71/getting-started.md index 8f81855cfd9..07fad84c79a 100644 --- a/website/versioned_docs/version-0.71/getting-started.md +++ b/website/versioned_docs/version-0.71/getting-started.md @@ -76,11 +76,11 @@ Once you've set these up, you can launch your app on an Android Virtual Device b The Expo Go app is a great tool to get started — it exists to help developers quickly get projects off the ground, to experiment with ideas (such as on [Snack](https://snack.expo.dev/)) and share their work with minimal friction. Expo Go makes this possible by including a feature-rich native runtime made up of every module in the [Expo SDK](https://docs.expo.dev/versions/latest/), so all you need to do to use a module is install the package with `npx expo install` and reload your app. -The tradeoff is that the Expo Go app does not allow you to add custom native code — you can only use native modules built into the Expo SDK. There are many great libraries available outside of the Expo SDK, and you may even want to build your own native library. You can leverage these libraries with [development builds](https://docs.expo.dev/development/introduction/), or by using ["prebuild"](https://docs.expo.dev/workflow/prebuild/) to generate the native projects, or both. [Learn more about adding native code to projects created with `create-expo-app`](https://docs.expo.dev/workflow/customizing/). +The tradeoff is that the Expo Go app does not allow you to add custom native code — you can only use native modules built into the Expo SDK. There are many great libraries available outside of the Expo SDK, and you may even want to build your own native library. You can leverage these libraries with [development builds](https://docs.expo.dev/develop/development-builds/introduction/), or by using ["prebuild"](https://docs.expo.dev/workflow/prebuild/) to generate the native projects, or both. [Learn more about adding native code to projects created with `create-expo-app`](https://docs.expo.dev/workflow/customizing/). `create-expo-app` configures your project to use the most recent React Native version that is supported by the Expo SDK. The Expo Go app usually gains support for a given React Native version with new SDK versions (released quarterly). You can check [this document](https://docs.expo.dev/versions/latest/#each-expo-sdk-version-depends-on-a) to find out what versions are supported. -If you're integrating React Native into an existing project, [you can use the Expo SDK](https://docs.expo.dev/bare/installing-expo-modules/) and [development builds](https://docs.expo.dev/development/introduction/), but you will need to set up a native development environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native. +If you're integrating React Native into an existing project, [you can use the Expo SDK](https://docs.expo.dev/bare/installing-expo-modules/) and [development builds](https://docs.expo.dev/develop/development-builds/introduction/), but you will need to set up a native development environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native. diff --git a/website/versioned_docs/version-0.71/javascript-environment.md b/website/versioned_docs/version-0.71/javascript-environment.md index 7b3adc05a6d..10eafe765aa 100644 --- a/website/versioned_docs/version-0.71/javascript-environment.md +++ b/website/versioned_docs/version-0.71/javascript-environment.md @@ -21,7 +21,7 @@ Syntax transformers make writing code more enjoyable by allowing you to use new React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check [Babel documentation](https://babeljs.io/docs/plugins/#transform-plugins) on its supported transformations for more details. -A full list of React Native's enabled transformations can be found in [metro-react-native-babel-preset](https://github.com/facebook/metro/tree/master/packages/metro-react-native-babel-preset). +A full list of React Native's enabled transformations can be found in [@react-native/babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset).
diff --git a/website/versioned_docs/version-0.71/platform-specific-code.md b/website/versioned_docs/version-0.71/platform-specific-code.md index d82b573a295..344e05cf4ad 100644 --- a/website/versioned_docs/version-0.71/platform-specific-code.md +++ b/website/versioned_docs/version-0.71/platform-specific-code.md @@ -125,7 +125,7 @@ You can also use the `.native.js` extension when a module needs to be shared bet For example, say you have the following files in your project: ```shell -Container.js # picked up by Webpack, Rollup or any other Web bundler +Container.js # picked up by webpack, Rollup or any other Web bundler Container.native.js # picked up by the React Native bundler for both Android and iOS (Metro) ``` diff --git a/website/versioned_docs/version-0.72/communication-ios.md b/website/versioned_docs/version-0.72/communication-ios.md index 2d2539350e2..b23cbb1254b 100644 --- a/website/versioned_docs/version-0.72/communication-ios.md +++ b/website/versioned_docs/version-0.72/communication-ios.md @@ -189,7 +189,7 @@ Let's look at an example. In the example we have a `FlexibleSizeExampleView` view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility to `RCTRootViewSizeFlexibilityHeight`, which means that `rootViewDidChangeIntrinsicSize:` method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent. -You can checkout full source code of the example [here](https://github.com/facebook/react-native/blob/main/packages/rn-tester/RNTester/NativeExampleViews/FlexibleSizeExampleView.m). +You can checkout full source code of the example [here](https://github.com/facebook/react-native/blob/main/packages/rn-tester/RNTester/NativeExampleViews/FlexibleSizeExampleView.mm). It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate `rootViewDidChangeIntrinsicSize:` method will be called once the content size is known. diff --git a/website/versioned_docs/version-0.72/custom-webview-android.md b/website/versioned_docs/version-0.72/custom-webview-android.md index 5140095872d..50ae8d4d92f 100644 --- a/website/versioned_docs/version-0.72/custom-webview-android.md +++ b/website/versioned_docs/version-0.72/custom-webview-android.md @@ -9,10 +9,10 @@ While the built-in web view has a lot of features, it is not possible to handle :::info The React Native WebView component has been extracted to [`react-native-webview`](https://github.com/react-native-webview/react-native-webview) package as part of the [Lean Core effort](https://github.com/facebook/react-native/issues/23313). -That is the recommended way to use WebView in React Native as of today. You should not use the [WebView](https://reactnative.dev/docs/0.61/webview) component as that was deprecated and removed from React Native. +That is the recommended way to use WebView in React Native as of today. You should not use the [WebView](https://reactnative-archive-august-2023.netlify.app/docs/0.61/webview) component as that was deprecated and removed from React Native. ::: -Before you do this, you should be familiar with the concepts in [native UI components](native-components-android). You should also familiarise yourself with the [native code for web views](https://github.com/react-native-webview/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. +Before you do this, you should be familiar with the concepts in [native UI components](native-components-android). You should also familiarise yourself with the [native code for web views](https://github.com/react-native-webview/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManagerImpl.kt), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. ## Native Code @@ -196,7 +196,7 @@ class NavigationCompletedEvent(viewTag: Int, val params: WritableMap) : You can trigger the event in your web view client. You can hook existing handlers if your events are based on them. -You should refer to [RNCWebViewManager.java](https://github.com/react-native-webview/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java) in the React Native WebView codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. +You should refer to [RNCWebViewManagerImpl.kt](https://github.com/react-native-webview/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManagerImpl.kt) in the React Native WebView codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. diff --git a/website/versioned_docs/version-0.72/custom-webview-ios.md b/website/versioned_docs/version-0.72/custom-webview-ios.md index 97b4e89e647..8c7b7a908f2 100644 --- a/website/versioned_docs/version-0.72/custom-webview-ios.md +++ b/website/versioned_docs/version-0.72/custom-webview-ios.md @@ -5,7 +5,7 @@ title: Custom WebView While the built-in web view has a lot of features, it is not possible to handle every use-case in React Native. You can, however, extend the web view with native code without forking React Native or duplicating all the existing web view code. -Before you do this, you should be familiar with the concepts in [native UI components](native-components-ios). You should also familiarise yourself with the [native code for web views](https://github.com/react-native-webview/react-native-webview/blob/master/apple/RNCWebViewManager.m), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. +Before you do this, you should be familiar with the concepts in [native UI components](native-components-ios). You should also familiarise yourself with the [native code for web views](https://github.com/react-native-webview/react-native-webview/blob/master/apple/RNCWebViewManager.mm), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. ## Native Code diff --git a/website/versioned_docs/version-0.72/getting-started.md b/website/versioned_docs/version-0.72/getting-started.md index 8f81855cfd9..07fad84c79a 100644 --- a/website/versioned_docs/version-0.72/getting-started.md +++ b/website/versioned_docs/version-0.72/getting-started.md @@ -76,11 +76,11 @@ Once you've set these up, you can launch your app on an Android Virtual Device b The Expo Go app is a great tool to get started — it exists to help developers quickly get projects off the ground, to experiment with ideas (such as on [Snack](https://snack.expo.dev/)) and share their work with minimal friction. Expo Go makes this possible by including a feature-rich native runtime made up of every module in the [Expo SDK](https://docs.expo.dev/versions/latest/), so all you need to do to use a module is install the package with `npx expo install` and reload your app. -The tradeoff is that the Expo Go app does not allow you to add custom native code — you can only use native modules built into the Expo SDK. There are many great libraries available outside of the Expo SDK, and you may even want to build your own native library. You can leverage these libraries with [development builds](https://docs.expo.dev/development/introduction/), or by using ["prebuild"](https://docs.expo.dev/workflow/prebuild/) to generate the native projects, or both. [Learn more about adding native code to projects created with `create-expo-app`](https://docs.expo.dev/workflow/customizing/). +The tradeoff is that the Expo Go app does not allow you to add custom native code — you can only use native modules built into the Expo SDK. There are many great libraries available outside of the Expo SDK, and you may even want to build your own native library. You can leverage these libraries with [development builds](https://docs.expo.dev/develop/development-builds/introduction/), or by using ["prebuild"](https://docs.expo.dev/workflow/prebuild/) to generate the native projects, or both. [Learn more about adding native code to projects created with `create-expo-app`](https://docs.expo.dev/workflow/customizing/). `create-expo-app` configures your project to use the most recent React Native version that is supported by the Expo SDK. The Expo Go app usually gains support for a given React Native version with new SDK versions (released quarterly). You can check [this document](https://docs.expo.dev/versions/latest/#each-expo-sdk-version-depends-on-a) to find out what versions are supported. -If you're integrating React Native into an existing project, [you can use the Expo SDK](https://docs.expo.dev/bare/installing-expo-modules/) and [development builds](https://docs.expo.dev/development/introduction/), but you will need to set up a native development environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native. +If you're integrating React Native into an existing project, [you can use the Expo SDK](https://docs.expo.dev/bare/installing-expo-modules/) and [development builds](https://docs.expo.dev/develop/development-builds/introduction/), but you will need to set up a native development environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native. diff --git a/website/versioned_docs/version-0.72/javascript-environment.md b/website/versioned_docs/version-0.72/javascript-environment.md index 7b3adc05a6d..10eafe765aa 100644 --- a/website/versioned_docs/version-0.72/javascript-environment.md +++ b/website/versioned_docs/version-0.72/javascript-environment.md @@ -21,7 +21,7 @@ Syntax transformers make writing code more enjoyable by allowing you to use new React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check [Babel documentation](https://babeljs.io/docs/plugins/#transform-plugins) on its supported transformations for more details. -A full list of React Native's enabled transformations can be found in [metro-react-native-babel-preset](https://github.com/facebook/metro/tree/master/packages/metro-react-native-babel-preset). +A full list of React Native's enabled transformations can be found in [@react-native/babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset).
diff --git a/website/versioned_docs/version-0.72/navigation.md b/website/versioned_docs/version-0.72/navigation.md index 101acb85779..ceb52632825 100644 --- a/website/versioned_docs/version-0.72/navigation.md +++ b/website/versioned_docs/version-0.72/navigation.md @@ -35,7 +35,7 @@ Next, install the required peer dependencies. You need to run different commands npm install react-native-screens react-native-safe-area-context ``` - For iOS with bare React Native project, make sure you have [Cocoapods](https://cocoapods.org/) installed. Then install the pods to complete the installation: + For iOS with bare React Native project, make sure you have [CocoaPods](https://cocoapods.org/) installed. Then install the pods to complete the installation: ```shell cd ios diff --git a/website/versioned_docs/version-0.72/platform-specific-code.md b/website/versioned_docs/version-0.72/platform-specific-code.md index 317e2cd500c..758c6b86202 100644 --- a/website/versioned_docs/version-0.72/platform-specific-code.md +++ b/website/versioned_docs/version-0.72/platform-specific-code.md @@ -125,7 +125,7 @@ You can also use the `.native.js` extension when a module needs to be shared bet For example, say you have the following files in your project: ```shell -Container.js # picked up by Webpack, Rollup or any other Web bundler +Container.js # picked up by webpack, Rollup or any other Web bundler Container.native.js # picked up by the React Native bundler for both Android and iOS (Metro) ``` diff --git a/website/versioned_docs/version-0.72/the-new-architecture/backward-compatibility-fabric-components.md b/website/versioned_docs/version-0.72/the-new-architecture/backward-compatibility-fabric-components.md index 99f8d8b35c9..e83c03f48ec 100644 --- a/website/versioned_docs/version-0.72/the-new-architecture/backward-compatibility-fabric-components.md +++ b/website/versioned_docs/version-0.72/the-new-architecture/backward-compatibility-fabric-components.md @@ -40,7 +40,7 @@ While the last step is the same for all the platforms, the first two steps are d ### iOS -The Apple platform installs Fabric Native Components using [Cocoapods](https://cocoapods.org) as a dependency manager. +The Apple platform installs Fabric Native Components using [CocoaPods](https://cocoapods.org) as a dependency manager. If you are already using the [`install_module_dependencies`](https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L198) function, then **there is nothing to do**. The function already takes care of installing the proper dependencies when the New Architecture is enabled and avoiding them when it is not enabled. diff --git a/website/versioned_docs/version-0.72/the-new-architecture/backward-compatibility-turbomodules.md b/website/versioned_docs/version-0.72/the-new-architecture/backward-compatibility-turbomodules.md index d4a75281c29..d4f906ad443 100644 --- a/website/versioned_docs/version-0.72/the-new-architecture/backward-compatibility-turbomodules.md +++ b/website/versioned_docs/version-0.72/the-new-architecture/backward-compatibility-turbomodules.md @@ -40,7 +40,7 @@ While the last step is the same for all the platforms, the first two steps are d ### iOS -The Apple platform installs Turbo Native Modules using [Cocoapods](https://cocoapods.org) as a dependency manager. +The Apple platform installs Turbo Native Modules using [CocoaPods](https://cocoapods.org) as a dependency manager. If you are already using the [`install_module_dependencies`](https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L198) function, then **there is nothing to do**. The function already takes care of installing the proper dependencies when the New Architecture is enabled and avoids them when it is not enabled. diff --git a/website/versioned_docs/version-0.72/the-new-architecture/pillars-fabric-components.md b/website/versioned_docs/version-0.72/the-new-architecture/pillars-fabric-components.md index e5631b6ebbc..5cae0200fa8 100644 --- a/website/versioned_docs/version-0.72/the-new-architecture/pillars-fabric-components.md +++ b/website/versioned_docs/version-0.72/the-new-architecture/pillars-fabric-components.md @@ -969,7 +969,7 @@ cd ios RCT_NEW_ARCH_ENABLED=1 bundle exec pod install ``` -This command installs the iOS dependencies for the project. The `RCT_NEW_ARCH_ENABLED=1` flag instructs **Cocoapods** that it has to execute some additional operations to run **Codegen**. +This command installs the iOS dependencies for the project. The `RCT_NEW_ARCH_ENABLED=1` flag instructs **CocoaPods** that it has to execute some additional operations to run **Codegen**. :::note You may have to run `bundle install` once before you can use `RCT_NEW_ARCH_ENABLED=1 bundle exec pod install`. You won't need to run `bundle install` anymore, unless you need to change the ruby dependencies. diff --git a/website/versioned_docs/version-0.72/the-new-architecture/pillars-turbomodule.md b/website/versioned_docs/version-0.72/the-new-architecture/pillars-turbomodule.md index 2a7ab81402b..70847981297 100644 --- a/website/versioned_docs/version-0.72/the-new-architecture/pillars-turbomodule.md +++ b/website/versioned_docs/version-0.72/the-new-architecture/pillars-turbomodule.md @@ -788,7 +788,7 @@ cd ios RCT_NEW_ARCH_ENABLED=1 bundle exec pod install ``` -This command will look for all the dependencies of the project and it will install the iOS ones. The `RCT_NEW_ARCH_ENABLED=1` instruct **Cocoapods** that it has to run some additional operations to run **Codegen**. +This command will look for all the dependencies of the project and it will install the iOS ones. The `RCT_NEW_ARCH_ENABLED=1` instruct **CocoaPods** that it has to run some additional operations to run **Codegen**. :::note You may have to run `bundle install` once before you can use `RCT_NEW_ARCH_ENABLED=1 bundle exec pod install`. You won't need to run `bundle install` anymore, unless you need to change the Ruby dependencies. diff --git a/yarn.lock b/yarn.lock index b629ebff021..925e0947a3c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4206,10 +4206,10 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001335, caniuse-lite@^1.0.30001400: resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz#e7c59bd1bc518fae03a4656be442ce6c4887a795" integrity sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ== -case-police@^0.5.6: - version "0.5.6" - resolved "https://registry.yarnpkg.com/case-police/-/case-police-0.5.6.tgz#17f6020222347864d3eae3d5c365c21c3de7191e" - integrity sha512-v86wtpyGSi75rsOiyJ+WFLksc/yN4c1uKvJKmkqlE+nKl7lIeaiCi1Z1RAR9PCjqbIq287tXlIDIiiTiJGvBlQ== +case-police@^0.6.1: + version "0.6.1" + resolved "https://registry.yarnpkg.com/case-police/-/case-police-0.6.1.tgz#d62a0a93392a54ee03832af06fe43ea0f8bf370c" + integrity sha512-tOgkG3HhtzNVHU+HVHqbpVJ3CICPDihtlgoM2C4dx0RLeo6qcNVeBgiYJN5Bln+stxKrnKrw89CFgqYQDqwZQg== ccount@^1.0.0: version "1.1.0" From 32c7e78a867d6e68c16c27b639168b7605ddcef6 Mon Sep 17 00:00:00 2001 From: Simek Date: Thu, 24 Aug 2023 10:39:41 +0200 Subject: [PATCH 2/2] fix more links, add versioned docs link check script variation --- docs/_getting-started-linux-android.md | 4 ++-- docs/custom-webview-android.md | 4 ++-- docs/custom-webview-ios.md | 4 ++-- docs/getting-started.md | 4 ++-- docs/javascript-environment.md | 2 +- website/blog/2021-10-26-toward-hermes-being-the-default.md | 2 +- website/package.json | 5 +++-- .../version-0.70/_getting-started-linux-android.md | 4 ++-- .../version-0.71/_getting-started-linux-android.md | 4 ++-- .../version-0.72/_getting-started-linux-android.md | 4 ++-- 10 files changed, 19 insertions(+), 18 deletions(-) diff --git a/docs/_getting-started-linux-android.md b/docs/_getting-started-linux-android.md index 614e9cfcddb..42041d1dc5b 100644 --- a/docs/_getting-started-linux-android.md +++ b/docs/_getting-started-linux-android.md @@ -70,9 +70,9 @@ Type `source $HOME/.bash_profile` for `bash` or `source $HOME/.zprofile` to load

Watchman

-Follow the [Watchman installation guide](https://facebook.github.io/watchman/docs/install/#buildinstall) to compile and install Watchman from source. +Follow the [Watchman installation guide](https://facebook.github.io/watchman/docs/install#buildinstall) to compile and install Watchman from source. -> [Watchman](https://facebook.github.io/watchman/docs/install/) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance and increased compatibility in certain edge cases (translation: you may be able to get by without installing this, but your mileage may vary; installing this now may save you from a headache later). +> [Watchman](https://facebook.github.io/watchman/docs/install) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance and increased compatibility in certain edge cases (translation: you may be able to get by without installing this, but your mileage may vary; installing this now may save you from a headache later).

React Native Command Line Interface

diff --git a/docs/custom-webview-android.md b/docs/custom-webview-android.md index 47cd36c8d89..50ae8d4d92f 100644 --- a/docs/custom-webview-android.md +++ b/docs/custom-webview-android.md @@ -12,7 +12,7 @@ The React Native WebView component has been extracted to [`react-native-webview` That is the recommended way to use WebView in React Native as of today. You should not use the [WebView](https://reactnative-archive-august-2023.netlify.app/docs/0.61/webview) component as that was deprecated and removed from React Native. ::: -Before you do this, you should be familiar with the concepts in [native UI components](native-components-android). You should also familiarise yourself with the [native code for web views](https://github.com/react-native-webview/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. +Before you do this, you should be familiar with the concepts in [native UI components](native-components-android). You should also familiarise yourself with the [native code for web views](https://github.com/react-native-webview/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManagerImpl.kt), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. ## Native Code @@ -196,7 +196,7 @@ class NavigationCompletedEvent(viewTag: Int, val params: WritableMap) : You can trigger the event in your web view client. You can hook existing handlers if your events are based on them. -You should refer to [RNCWebViewManager.java](https://github.com/react-native-webview/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java) in the React Native WebView codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. +You should refer to [RNCWebViewManagerImpl.kt](https://github.com/react-native-webview/react-native-webview/blob/master/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManagerImpl.kt) in the React Native WebView codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. diff --git a/docs/custom-webview-ios.md b/docs/custom-webview-ios.md index 97b4e89e647..61d84b06bc1 100644 --- a/docs/custom-webview-ios.md +++ b/docs/custom-webview-ios.md @@ -5,7 +5,7 @@ title: Custom WebView While the built-in web view has a lot of features, it is not possible to handle every use-case in React Native. You can, however, extend the web view with native code without forking React Native or duplicating all the existing web view code. -Before you do this, you should be familiar with the concepts in [native UI components](native-components-ios). You should also familiarise yourself with the [native code for web views](https://github.com/react-native-webview/react-native-webview/blob/master/apple/RNCWebViewManager.m), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. +Before you do this, you should be familiar with the concepts in [native UI components](native-components-ios). You should also familiarise yourself with the [native code for web views](https://github.com/react-native-webview/react-native-webview/blob/master/apple/RNCWebViewManager.mm), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. ## Native Code @@ -94,7 +94,7 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, NSString) ### Extending Existing Events -You should refer to [RCTWebView.m](https://github.com/react-native-webview/react-native-webview/blob/master/apple/RNCWebView.m) in the React Native WebView codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. +You should refer to [RCTWebView.mm](https://github.com/react-native-webview/react-native-webview/blob/master/apple/RNCWebView.mm) in the React Native WebView codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. By default, most methods aren't exposed from RCTWebView. If you need to expose them, you need to create an [Objective C category](https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/CustomizingExistingClasses/CustomizingExistingClasses.html), and then expose all the methods you need to use. diff --git a/docs/getting-started.md b/docs/getting-started.md index 8f81855cfd9..07fad84c79a 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -76,11 +76,11 @@ Once you've set these up, you can launch your app on an Android Virtual Device b The Expo Go app is a great tool to get started — it exists to help developers quickly get projects off the ground, to experiment with ideas (such as on [Snack](https://snack.expo.dev/)) and share their work with minimal friction. Expo Go makes this possible by including a feature-rich native runtime made up of every module in the [Expo SDK](https://docs.expo.dev/versions/latest/), so all you need to do to use a module is install the package with `npx expo install` and reload your app. -The tradeoff is that the Expo Go app does not allow you to add custom native code — you can only use native modules built into the Expo SDK. There are many great libraries available outside of the Expo SDK, and you may even want to build your own native library. You can leverage these libraries with [development builds](https://docs.expo.dev/development/introduction/), or by using ["prebuild"](https://docs.expo.dev/workflow/prebuild/) to generate the native projects, or both. [Learn more about adding native code to projects created with `create-expo-app`](https://docs.expo.dev/workflow/customizing/). +The tradeoff is that the Expo Go app does not allow you to add custom native code — you can only use native modules built into the Expo SDK. There are many great libraries available outside of the Expo SDK, and you may even want to build your own native library. You can leverage these libraries with [development builds](https://docs.expo.dev/develop/development-builds/introduction/), or by using ["prebuild"](https://docs.expo.dev/workflow/prebuild/) to generate the native projects, or both. [Learn more about adding native code to projects created with `create-expo-app`](https://docs.expo.dev/workflow/customizing/). `create-expo-app` configures your project to use the most recent React Native version that is supported by the Expo SDK. The Expo Go app usually gains support for a given React Native version with new SDK versions (released quarterly). You can check [this document](https://docs.expo.dev/versions/latest/#each-expo-sdk-version-depends-on-a) to find out what versions are supported. -If you're integrating React Native into an existing project, [you can use the Expo SDK](https://docs.expo.dev/bare/installing-expo-modules/) and [development builds](https://docs.expo.dev/development/introduction/), but you will need to set up a native development environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native. +If you're integrating React Native into an existing project, [you can use the Expo SDK](https://docs.expo.dev/bare/installing-expo-modules/) and [development builds](https://docs.expo.dev/develop/development-builds/introduction/), but you will need to set up a native development environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native. diff --git a/docs/javascript-environment.md b/docs/javascript-environment.md index ab7db5144e0..acce6f8bc69 100644 --- a/docs/javascript-environment.md +++ b/docs/javascript-environment.md @@ -21,7 +21,7 @@ Syntax transformers make writing code more enjoyable by allowing you to use new React Native ships with the [Babel JavaScript compiler](https://babeljs.io). Check [Babel documentation](https://babeljs.io/docs/plugins/#transform-plugins) on its supported transformations for more details. -A full list of React Native's enabled transformations can be found in [metro-react-native-babel-preset](https://github.com/facebook/metro/tree/master/packages/metro-react-native-babel-preset). +A full list of React Native's enabled transformations can be found in [@react-native/babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset).
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.md index 381044f086a..ad6d0ed9de1 100644 --- a/website/blog/2021-10-26-toward-hermes-being-the-default.md +++ b/website/blog/2021-10-26-toward-hermes-being-the-default.md @@ -24,7 +24,7 @@ In order to mitigate this, we implemented a brand new _mostly concurrent_ GC nam ### Striking on Performance Pain Points -Startup time of applications is critical to the success of many apps, and we are continuously pushing the boundary for React Native. For any new JavaScript feature we implement in Hermes, we carefully monitor their impact on production performance and ensure that they don’t regress metrics. At Facebook, we are currently experimenting with a [dedicated Babel transform profile for Hermes in Metro](https://github.com/facebook/metro/blob/c9a6fd75937c56645ab9e4d88fa820e63e057cd6/packages/metro-react-native-babel-preset/src/configs/main.js#L42) to replace a dozen Babel transforms with Hermes’s native ESNext implementations. We were able to observe **18-25% TTI improvements** on many surfaces and **overall bytecode size decreases** and we expect to see similar results for OSS. +Startup time of applications is critical to the success of many apps, and we are continuously pushing the boundary for React Native. For any new JavaScript feature we implement in Hermes, we carefully monitor their impact on production performance and ensure that they don’t regress metrics. At Facebook, we are currently experimenting with a [dedicated Babel transform profile for Hermes in Metro](https://github.com/facebook/react-native/blob/main/packages/react-native-babel-preset/src/configs/main.js#L41) to replace a dozen Babel transforms with Hermes’s native ESNext implementations. We were able to observe **18-25% TTI improvements** on many surfaces and **overall bytecode size decreases** and we expect to see similar results for OSS. In addition to startup performance, we identified memory footprint as an opportunity for improvement in React Native apps especially for [virtual reality.](https://reactnative.dev/blog/2021/08/26/many-platform-vision#expanding-to-new-platforms) Thanks to the low-level control we have as a JavaScript engine, we were able to deliver rounds of memory optimizations by squeezing bits and bytes out: diff --git a/website/package.json b/website/package.json index 90db8ecd6ec..c71dd5e12a5 100644 --- a/website/package.json +++ b/website/package.json @@ -29,8 +29,9 @@ "lint:examples": "eslint-examples-js && eslint-examples-tsx && tsc-examples", "lint:versioned": "eslint versioned_docs/**", "lint:markdown": "remark ../docs --quiet -r .remarkrc.mjs", - "language:lint": "cd ../ && alex && case-police 'docs/*.md' -p brands,general,products,softwares -d ./website/react-native-dict.json --disable uri,sdk", - "language:lint:versioned": "cd ../ && alex . && case-police '**/*.md' -p brands,general,products,softwares -d ./website/react-native-dict.json -disable uri,sdk", + "lint:markdown:versioned": "remark ./versioned_docs --quiet -r .remarkrc.mjs", + "language:lint": "cd ../ && alex && case-police 'docs/*.md' -p brands,general,products,softwares -d ./website/react-native-dict.json", + "language:lint:versioned": "cd ../ && alex . && case-police '**/*.md' -p brands,general,products,softwares -d ./website/react-native-dict.json", "ci:lint": "yarn lint && yarn lint:examples && yarn lint:versioned && yarn language:lint:versioned && yarn lint:markdown", "pwa:generate": "npx pwa-asset-generator ./static/img/header_logo.svg ./static/img/pwa --padding '40px' --background 'rgb(32, 35, 42)' --icon-only --opaque true" }, diff --git a/website/versioned_docs/version-0.70/_getting-started-linux-android.md b/website/versioned_docs/version-0.70/_getting-started-linux-android.md index 9abd1866d5f..94d0bd79055 100644 --- a/website/versioned_docs/version-0.70/_getting-started-linux-android.md +++ b/website/versioned_docs/version-0.70/_getting-started-linux-android.md @@ -69,9 +69,9 @@ Type `source $HOME/.bash_profile` for `bash` or `source $HOME/.zprofile` to load

Watchman

-Follow the [Watchman installation guide](https://facebook.github.io/watchman/docs/install/#buildinstall) to compile and install Watchman from source. +Follow the [Watchman installation guide](https://facebook.github.io/watchman/docs/install#buildinstall) to compile and install Watchman from source. -> [Watchman](https://facebook.github.io/watchman/docs/install/) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance and increased compatibility in certain edge cases (translation: you may be able to get by without installing this, but your mileage may vary; installing this now may save you from a headache later). +> [Watchman](https://facebook.github.io/watchman/docs/install) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance and increased compatibility in certain edge cases (translation: you may be able to get by without installing this, but your mileage may vary; installing this now may save you from a headache later).

React Native Command Line Interface

diff --git a/website/versioned_docs/version-0.71/_getting-started-linux-android.md b/website/versioned_docs/version-0.71/_getting-started-linux-android.md index 90a84dd8d22..968bfd8c004 100644 --- a/website/versioned_docs/version-0.71/_getting-started-linux-android.md +++ b/website/versioned_docs/version-0.71/_getting-started-linux-android.md @@ -69,9 +69,9 @@ Type `source $HOME/.bash_profile` for `bash` or `source $HOME/.zprofile` to load

Watchman

-Follow the [Watchman installation guide](https://facebook.github.io/watchman/docs/install/#buildinstall) to compile and install Watchman from source. +Follow the [Watchman installation guide](https://facebook.github.io/watchman/docs/install#buildinstall) to compile and install Watchman from source. -> [Watchman](https://facebook.github.io/watchman/docs/install/) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance and increased compatibility in certain edge cases (translation: you may be able to get by without installing this, but your mileage may vary; installing this now may save you from a headache later). +> [Watchman](https://facebook.github.io/watchman/docs/install) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance and increased compatibility in certain edge cases (translation: you may be able to get by without installing this, but your mileage may vary; installing this now may save you from a headache later).

React Native Command Line Interface

diff --git a/website/versioned_docs/version-0.72/_getting-started-linux-android.md b/website/versioned_docs/version-0.72/_getting-started-linux-android.md index 2cfb56a450d..e4acdb68896 100644 --- a/website/versioned_docs/version-0.72/_getting-started-linux-android.md +++ b/website/versioned_docs/version-0.72/_getting-started-linux-android.md @@ -70,9 +70,9 @@ Type `source $HOME/.bash_profile` for `bash` or `source $HOME/.zprofile` to load

Watchman

-Follow the [Watchman installation guide](https://facebook.github.io/watchman/docs/install/#buildinstall) to compile and install Watchman from source. +Follow the [Watchman installation guide](https://facebook.github.io/watchman/docs/install#buildinstall) to compile and install Watchman from source. -> [Watchman](https://facebook.github.io/watchman/docs/install/) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance and increased compatibility in certain edge cases (translation: you may be able to get by without installing this, but your mileage may vary; installing this now may save you from a headache later). +> [Watchman](https://facebook.github.io/watchman/docs/install) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance and increased compatibility in certain edge cases (translation: you may be able to get by without installing this, but your mileage may vary; installing this now may save you from a headache later).

React Native Command Line Interface