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/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..50ae8d4d92f 100644 --- a/docs/custom-webview-android.md +++ b/docs/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/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 b9ff98d2a62..c71dd5e12a5 100644 --- a/website/package.json +++ b/website/package.json @@ -29,6 +29,7 @@ "lint:examples": "eslint-examples-js && eslint-examples-tsx && tsc-examples", "lint:versioned": "eslint versioned_docs/**", "lint:markdown": "remark ../docs --quiet -r .remarkrc.mjs", + "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", 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.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.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.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.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

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).