diff --git a/README.md b/README.md index 043f068b37f..b0a1b1c15a8 100644 --- a/README.md +++ b/README.md @@ -121,6 +121,14 @@ Docusaurus keeps track of the list of versions for the site in the `website/vers #### Cutting a new version +##### After RC + +The React Native website lints and typechecks documents in "next". The version of React Native used by the linter should be updated before a release for consistency and to catch any documents/examples where APIs have changed. + +This can be done by updating the `package.json` and configuration files in `script/lint-examples` the same way a React Native application would be updated. The diff of these files can be seen using a tool like [React Native Upgrade Helper](https://react-native-community.github.io/upgrade-helper/?from=0.70.6&to=0.71.0). + +##### After Release + 1. `cd react-native-website` to go into the project root. 1. `cd website` to go into the website portion of the project. 1. Run `yarn version:cut ` where `` is the new version being released. diff --git a/docs/_getting-started-linux-android.md b/docs/_getting-started-linux-android.md index 42041d1dc5b..ec095bc07d3 100644 --- a/docs/_getting-started-linux-android.md +++ b/docs/_getting-started-linux-android.md @@ -9,7 +9,7 @@ While you can use any editor of your choice to develop your app, you will need t

Node

-Follow the [installation instructions for your Linux distribution](https://nodejs.org/en/download/package-manager/) to install Node 16 or newer. +Follow the [installation instructions for your Linux distribution](https://nodejs.org/en/download/package-manager/) to install Node 18 or newer.

Java Development Kit

@@ -39,7 +39,7 @@ Android Studio installs the latest Android SDK by default. Building a React Nati To do that, open Android Studio, click on "Configure" button and select "SDK Manager". -> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +> The SDK Manager can also be found within the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**. Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 13 (Tiramisu)` entry, then make sure the following items are checked: @@ -66,7 +66,7 @@ export PATH=$PATH:$ANDROID_HOME/platform-tools Type `source $HOME/.bash_profile` for `bash` or `source $HOME/.zprofile` to load the config into your current shell. Verify that ANDROID_HOME has been set by running `echo $ANDROID_HOME` and the appropriate directories have been added to your path by running `echo $PATH`. -> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**.

Watchman

diff --git a/docs/_getting-started-macos-android.md b/docs/_getting-started-macos-android.md index c8ca872ff80..fa5f79e1a62 100644 --- a/docs/_getting-started-macos-android.md +++ b/docs/_getting-started-macos-android.md @@ -16,7 +16,7 @@ brew install node brew install watchman ``` -If you have already installed Node on your system, make sure it is Node 16 or newer. +If you have already installed Node on your system, make sure it is Node 18 or newer. [Watchman](https://facebook.github.io/watchman) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance. @@ -64,7 +64,7 @@ To do that, open Android Studio, click on "More Actions" button and select "SDK ![Android Studio Welcome](/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png) -> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +> The SDK Manager can also be found within the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**. Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 13 (Tiramisu)` entry, then make sure the following items are checked: @@ -89,7 +89,7 @@ export PATH=$PATH:$ANDROID_HOME/platform-tools Run `source ~/.zprofile` (or `source ~/.bash_profile` for `bash`) to load the config into your current shell. Verify that ANDROID_HOME has been set by running `echo $ANDROID_HOME` and the appropriate directories have been added to your path by running `echo $PATH`. -> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**.

React Native Command Line Interface

diff --git a/docs/_getting-started-macos-ios.md b/docs/_getting-started-macos-ios.md index 6f374a670b3..60db1ec7acc 100644 --- a/docs/_getting-started-macos-ios.md +++ b/docs/_getting-started-macos-ios.md @@ -16,7 +16,7 @@ brew install node brew install watchman ``` -If you have already installed Node on your system, make sure it is Node 16 or newer. +If you have already installed Node on your system, make sure it is Node 18 or newer. [Watchman](https://facebook.github.io/watchman) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance. @@ -36,6 +36,8 @@ You will also need to install the Xcode Command Line Tools. Open Xcode, then cho To install a simulator, open **Xcode > Settings... (or Preferences...)** and select the **Platforms (or Components)** tab. Select a simulator with the corresponding version of iOS you wish to use. +If you are using Xcode version 14.0 or greater than to install a simulator, open **Xcode > Settings > Platforms** tab, then click "+" icon and select **iOS…** option. + #### CocoaPods [CocoaPods](https://cocoapods.org/) is one of the dependency management system available for iOS. CocoaPods is a Ruby [gem](https://en.wikipedia.org/wiki/RubyGems). You can install CocoaPods using the version of Ruby that ships with the latest version of macOS. diff --git a/docs/_getting-started-windows-android.md b/docs/_getting-started-windows-android.md index 9c36f02f0f7..99231f7bd9e 100644 --- a/docs/_getting-started-windows-android.md +++ b/docs/_getting-started-windows-android.md @@ -21,7 +21,7 @@ Open an Administrator Command Prompt (right click Command Prompt and select "Run choco install -y nodejs-lts microsoft-openjdk17 ``` -If you have already installed Node on your system, make sure it is Node 16 or newer. If you already have a JDK on your system, we recommend JDK17. You may encounter problems using higher JDK versions. +If you have already installed Node on your system, make sure it is Node 18 or newer. If you already have a JDK on your system, we recommend JDK17. You may encounter problems using higher JDK versions. > You can find additional installation options on [Node's Downloads page](https://nodejs.org/en/download/). @@ -54,7 +54,7 @@ To do that, open Android Studio, click on "More Actions" button and select "SDK ![Android Studio Welcome](/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png) -> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +> The SDK Manager can also be found within the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**. Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 13 (Tiramisu)` entry, then make sure the following items are checked: @@ -82,7 +82,7 @@ The SDK is installed, by default, at the following location: %LOCALAPPDATA%\Android\Sdk ``` -You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**. Open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step. diff --git a/docs/debugging-release-builds.md b/docs/debugging-release-builds.md new file mode 100644 index 00000000000..bb7cedc4e8b --- /dev/null +++ b/docs/debugging-release-builds.md @@ -0,0 +1,97 @@ +--- +id: debugging-release-builds +title: Debugging Release Builds +--- + +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; + +## Symbolicating a stack trace + +If a React Native app throws an unhandled exception in a release build, the output may be obfuscated and hard to read. + +```shell +07-15 10:58:25.820 18979 18998 E AndroidRuntime: FATAL EXCEPTION: mqt_native_modules +07-15 10:58:25.820 18979 18998 E AndroidRuntime: Process: com.awesomeproject, PID: 18979 07-15 10:58:25.820 18979 18998 E AndroidRuntime: com.facebook.react.common.JavascriptException: Failed, js engine: hermes, stack: +07-15 10:58:25.820 18979 18998 E AndroidRuntime: p@1:132161 +07-15 10:58:25.820 18979 18998 E AndroidRuntime: p@1:132084 +07-15 10:58:25.820 18979 18998 E AndroidRuntime: f@1:131854 +07-15 10:58:25.820 18979 18998 E AndroidRuntime: anonymous@1:131119 +``` + +In the above stack trace, entries like `p@1:132161` are minified function names and bytecode offsets. To debug these calls, we want to translate these into file, line, and function name, e.g. `AwesomeProject/App.js:54:initializeMap`. This is known as **symbolication.** + +You can symbolicate minified function names and bytecode like the above by passing the stack trace and a generated source map to [`metro-symbolicate`](http://npmjs.com/package/metro-symbolicate). + +### Enabling source maps + +Source maps are required to symbolicate stack traces. Make sure that source maps are enabled within the build config for the target platform. + + + + +:::info +On Android, source maps are **enabled** by default. +::: + +To enable source map generation, ensure the following `hermesFlags` are present in `android/app/build.gradle`. + +```groovy +react { + hermesFlags = ["-O", "-output-source-map"] +} +``` + +If done correctly you should see the output location of the source map during Metro build output. + +```text +Writing bundle output to:, android/app/build/generated/assets/react/release/index.android.bundle +Writing sourcemap output to:, android/app/build/intermediates/sourcemaps/react/release/index.android.bundle.packager.map +``` + + + + +:::info +On iOS, source maps are **disabled** by default. Use the following instructions to enable them. +::: + +To enable source map generation: + +- Open Xcode and edit the build phase "Bundle React Native code and images". +- Above the other exports, add a `SOURCEMAP_FILE` entry with the desired output path. + +```diff ++ SOURCEMAP_FILE="$(pwd)/../main.jsbundle.map"; + WITH_ENVIRONMENT="../node_modules/react-native/scripts/xcode/with-environment.sh" +``` + +If done correctly you should see the output location of the source map during Metro build output. + +```text +Writing bundle output to:, Build/Intermediates.noindex/ArchiveIntermediates/application/BuildProductsPath/Release-iphoneos/main.jsbundle +Writing sourcemap output to:, Build/Intermediates.noindex/ArchiveIntermediates/application/BuildProductsPath/Release-iphoneos/main.jsbundle.map +``` + + + + +### Using `metro-symbolicate` + +With source maps being generated, we can now translate our stack traces. + +```shell +# Print usage instructions +npx metro-symbolicate + +# From a file containing the stack trace +npx metro-symbolicate android/app/build/generated/sourcemaps/react/release/index.android.bundle.map < stacktrace.txt + +# From adb logcat (Android) +adb logcat -d | npx metro-symbolicate android/app/build/generated/sourcemaps/react/release/index.android.bundle.map +``` + +### Notes on source maps + +- Multiple source maps may be generated by the build process. Make sure to use the one in the location shown in the examples. +- Make sure that the source map you use corresponds to the exact commit of the crashing app. Small changes in source code can cause large differences in offsets. +- If `metro-symbolicate` exits immediately with success, make sure the input comes from a pipe or redirection and not from a terminal. diff --git a/docs/debugging.md b/docs/debugging.md index 1ef41381c7d..261050ba74c 100644 --- a/docs/debugging.md +++ b/docs/debugging.md @@ -14,141 +14,135 @@ React Native provides an in-app developer menu which offers several debugging op Alternatively for Android devices and emulators, you can run `adb shell input keyevent 82` in your terminal. -![](/docs/assets/DevMenu.png) +![The React Native Dev Menu](/docs/assets/debugging-dev-menu.jpg) :::note The Dev Menu is disabled in release (production) builds. ::: -## LogBox - -Errors and warnings in development builds are displayed in LogBox inside your app. - -:::note -LogBox is disabled in release (production) builds. -::: +## Opening the Debugger -### Console Errors and Warnings - -Console errors and warnings are displayed as on-screen notifications with a red or yellow badge, and the number of errors or warning in the console respectively. To view a console error or warnings, tap the notification to view the full screen information about the log and to paginate through all of the logs in the console. - -These notifications can be hidden using `LogBox.ignoreAllLogs()`. This is useful when giving product demos, for example. Additionally, notifications can be hidden on a per-log basis via `LogBox.ignoreLogs()`. This is useful when there's a noisy warning that cannot be fixed, like those in a third-party dependency. +The debugger allows you to understand and debug how your JavaScript code is running, similar to a web browser. :::info -Ignore logs as a last resort and create a task to fix any logs that are ignored. +**In Expo projects**, press j in the CLI to directly open the Hermes Debugger. ::: -```tsx -import {LogBox} from 'react-native'; - -// Ignore log notification by message: -LogBox.ignoreLogs(['Warning: ...']); + + -// Ignore all log notifications: -LogBox.ignoreAllLogs(); -``` +Hermes supports the Chrome debugger by implementing the Chrome DevTools Protocol. This means Chrome's tools can be used to directly debug JavaScript running on Hermes, on an emulator or on a physical device. -### Unhandled Errors +1. In a Chrome browser window, navigate to `chrome://inspect`. +2. Use the "Configure..." button to add the dev server address (typically `localhost:8081`). +3. You should now see a "Hermes React Native" target with an **"inspect"** link. Click this to open the debugger. -Unhandled JavaScript errors such as `undefined is not a function` will automatically open a full screen LogBox error with the source of the error. These errors are dismissable and minimizable so that you can see the state of your app when these errors occur, but should always be addressed. +![Overview of Chrome's inspect interface and a connected Hermes debugger window](/docs/assets/debugging-hermes-debugger-instructions.jpg) -### Syntax Errors + + -When syntax error occurs the full screen LogBox error will automatically open with the stack trace and location of the syntax error. This error is not dismissable because it represents invalid JavaScript execution that must be fixed before continuing with your app. To dismiss these errors, fix the syntax error and either save to automatically dismiss (with Fast Refresh enabled) or Cmd ⌘/Ctrl + R to reload (with Fast Refresh disabled). +[Flipper](https://fbflipper.com/) is a native debugging tool which provides JavaScript debugging capabilities for React Native via an embedded Chrome DevTools panel. -## JavaScript debugging +To debug JavaScript code in Flipper, select **"Open Debugger"** from the Dev Menu. Learn more about Flipper [here](https://fbflipper.com/docs/features/react-native/). -### Flipper +:::info +To debug using Flipper, the Flipper app must be [installed on your system](https://fbflipper.com/docs/getting-started/). +::: -To debug JavaScript code in Flipper, select "Open Debugger" from the Dev Menu. This will automatically open the debugger tab inside Flipper. +![The Flipper desktop app opened to the Hermes debugger panel](/docs/assets/debugging-flipper-console.jpg) -To install and get started with Flipper, follow [this guide](https://fbflipper.com/docs/getting-started/). +:::warning +Debugging React Native apps with Flipper is [deprecated in React Native 0.73](https://github.com/react-native-community/discussions-and-proposals/pull/641). We will eventually remove out-of-the box support for JS debugging via Flipper. +::: -### Expo CLI + + -If you're using Expo CLI in a project running with Hermes, you can debug your JavaScript code by starting your project with `npx expo start` and then pressing j to open the debugger in Google Chrome or Microsoft Edge. +:::note +**This is an experimental feature** and several features may not work reliably today. When this feature does launch in future, we intend for it to work more completely than the current debugging methods. +::: -## Chrome Developer Tools +The React Native team is working on a new JavaScript debugger experience, intended to replace Flipper, with a preview available as of React Native 0.73. -:::info -**Starting from version 0.73, Remote Debugging is deprecated.** These Chrome DevTools steps use the _Remote Debugging_ workflow, where JS code is executed in Chrome's V8 engine on the dev machine during debugging, instead of on-device. This method is incompatible with some New Architecture features such as JSI. +The new debugger can be enabled via React Native CLI. This will also enable j to debug. -Please prefer using Flipper or [direct debugging with Safari](#safari-developer-tools). -::: +```sh +npx react-native start --experimental-debugger +``` -
-Re-enabling Remote Debugging in React Native 0.73 +When selecting **"Open Debugger"** in the Dev Menu, this will launch the new debugger using Google Chrome or Microsoft Edge. -If your project still relies on this feature, you can manually enable it manually through the `NativeDevSettings.setIsDebuggingRemotely` function. +![The new debugger frontend opened to the "Welcome" pane](/docs/assets/debugging-debugger-welcome.jpg) -```jsx -import NativeDevSettings from 'react-native/Libraries/NativeModules/specs/NativeDevSettings'; -export default function App() { - useEffect(() => { - NativeDevSettings.setIsDebuggingRemotely(true); - }, []); + + - return ; -} -``` +## React DevTools -
+You can use React DevTools to inspect the React element tree, props, and state. -### Debugging on a physical device +```sh +npx react-devtools +``` -:::info -If you're using Expo CLI, this is configured for you already. -::: +![A React DevTools window](/docs/assets/debugging-react-devtools-blank.jpg) - - +:::tip -On iOS devices, open the file [`RCTWebSocketExecutor.mm`](https://github.com/facebook/react-native/blob/master/packages/react-native/React/CoreModules/RCTWebSocketExecutor.mm) and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Dev Menu. +**Learn how to use React DevTools!** - - +- [React DevTools guide](/docs/next/react-devtools) +- [React Developer Tools on react.dev](https://react.dev/learn/react-developer-tools) -On Android 5.0+ devices connected via USB, you can use the [`adb` command line tool](https://developer.android.com/tools/help/adb.html) to set up port forwarding from the device to your computer: +::: -```sh -adb reverse tcp:8081 tcp:8081 -``` +## LogBox -Alternatively, select "Settings" from the Dev Menu, then update the "Debug server host for device" setting to match the IP address of your computer. +Errors and warnings in development builds are displayed in LogBox inside your app. - - +![A LogBox warning and an expanded LogBox syntax error](/docs/assets/debugging-logbox.jpg) :::note -If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension. +LogBox is disabled in release (production) builds. ::: -
-Advanced: Debugging using a custom JavaScript debugger +### Console Errors and Warnings -To use a custom JavaScript debugger in place of Chrome Developer Tools, set the `REACT_DEBUGGER` environment variable to a command that will start your custom debugger. You can then select "Open Debugger" from the Dev Menu to start debugging. +Console errors and warnings are displayed as on-screen notifications with a red or yellow badge, and a notification count. To see more about an error or warning, tap the notification to see an expanded view and to paginate through other logs. -The debugger will receive a list of all project roots, separated by a space. For example, if you set `REACT_DEBUGGER="node /path/to/launchDebugger.js --port 2345 --type ReactNative"`, then the command `node /path/to/launchDebugger.js --port 2345 --type ReactNative /path/to/reactNative/app` will be used to start your debugger. +LogBox notifications can be disabled using `LogBox.ignoreAllLogs()`. This can be useful when giving product demos, for example. Additionally, notifications can be disabled on a per-log basis via `LogBox.ignoreLogs()`. This can be useful for noisy warnings or those that cannot be fixed, e.g. in a third-party dependency. -:::note -Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output. +:::info +Ignore logs as a last resort and create a task to fix any logs that are ignored. ::: -
+```js +import {LogBox} from 'react-native'; -## Safari Developer Tools +// Ignore log notification by message +LogBox.ignoreLogs([ + // Exact message + 'Warning: componentWillReceiveProps has been renamed', -You can use Safari to debug the iOS version of your app when using JSC. + // Substring or regex match + /GraphQL error: .*/, +]); -- On a physical device go to: `Settings → Safari → Advanced → Make sure "Web Inspector" is turned on` (This step is not needed on the Simulator) -- On your Mac enable Develop menu in Safari: `Settings... (or Preferences...) → Advanced → Select "Show Develop menu in menu bar"` -- Select your app's JSContext: `Develop → Simulator (or other device) → JSContext` -- Safari's Web Inspector should open which has a Console and a Debugger +// Ignore all log notifications +LogBox.ignoreAllLogs(); +``` -While sourcemaps may not be enabled by default, you can follow [this guide](https://blog.nparashuram.com/2019/10/debugging-react-native-ios-apps-with.html) or [video](https://www.youtube.com/watch?v=GrGqIIz51k4) to enable them and set break points at the right places in the source code. +### Syntax Errors -However, every time the app is reloaded (using live reload, or by manually reloading), a new JSContext is created. Choosing "Automatically Show Web Inspectors for JSContexts" saves you from having to select the latest JSContext manually. +When a JavaScript syntax error occurs, LogBox will open with the location of the error. In this state, LogBox is not dismissable since your code cannot be executed. LogBox will automatically dismiss once the syntax error is fixed — either via Fast Refresh or after a manual reload. ## Performance Monitor -You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Dev Menu. +On Android and iOS, an in-app performance overlay can be toggled during development by selecting **"Perf Monitor"** in the Dev Menu. Learn more about this feature [here](/docs/performance). + +![The Performance Monitor overlay on iOS and Android](/docs/assets/debugging-performance-monitor.jpg) + +:::info +The Performance Monitor runs in-app and is a guide. We recommend investigating the native tooling under Android Studio and Xcode for accurate performance measurements. +::: diff --git a/docs/native-debugging.md b/docs/native-debugging.md index 5bcdc7b3b66..36638ef3d7a 100644 --- a/docs/native-debugging.md +++ b/docs/native-debugging.md @@ -32,3 +32,13 @@ If you're using Expo CLI, console logs already appear in the same terminal outpu ## Debugging native code When working with native code, such as when writing native modules, you can launch the app from Android Studio or Xcode and take advantage of the native debugging features (setting up breakpoints, etc.) as you would in case of building a standard native app. + +Another option is to run your application using the React Native CLI and attach the native debugger of the native IDE (Android Studio or Xcode) to the process. + +### Android Studio + +On Android Studio you can do this by going on the "Run" option on the menu bar, clicking on "Attach to Process..." and selecting the running React Native app. + +### Xcode + +On Xcode click on "Debug" on the top menu bar, select the "Attach to process" option, and select the application in the list of "Likely Targets". diff --git a/docs/network.md b/docs/network.md index fca64e0c497..b7137fcaae7 100644 --- a/docs/network.md +++ b/docs/network.md @@ -250,7 +250,7 @@ The following options are currently not working with `fetch` ## Configuring NSURLSession on iOS -For some applications it may be appropriate to provide a custom `NSURLSessionConfiguration` for the underlying `NSURLSession` that is used for network requests in a React Native application running on iOS. For instance, one may need to set a custom user agent string for all network requests coming from the app or supply `NSURLSession` with an emphemeral `NSURLSessionConfiguration`. The function `RCTSetCustomNSURLSessionConfigurationProvider` allows for such customization. Remember to add the following import to the file in which `RCTSetCustomNSURLSessionConfigurationProvider` will be called: +For some applications it may be appropriate to provide a custom `NSURLSessionConfiguration` for the underlying `NSURLSession` that is used for network requests in a React Native application running on iOS. For instance, one may need to set a custom user agent string for all network requests coming from the app or supply `NSURLSession` with an ephemeral `NSURLSessionConfiguration`. The function `RCTSetCustomNSURLSessionConfigurationProvider` allows for such customization. Remember to add the following import to the file in which `RCTSetCustomNSURLSessionConfigurationProvider` will be called: ```objectivec #import diff --git a/docs/other-debugging-methods.md b/docs/other-debugging-methods.md new file mode 100644 index 00000000000..1691b3a9678 --- /dev/null +++ b/docs/other-debugging-methods.md @@ -0,0 +1,95 @@ +--- +id: other-debugging-methods +title: Other Debugging Methods +--- + +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; + +This page covers other JavaScript debugging methods besides what is described in [Opening the Debugger](./debugging#opening-the-debugger). If you are using a newly created React Native or Expo app, we recommend starting there. + +## Safari Developer Tools (direct JSC debugging) + +You can use Safari to debug the iOS version of your app when using [JavaScriptCore](https://trac.webkit.org/wiki/JavaScriptCore) (JSC) as your app's runtime. + +1. **Physical devices only**: Open the Settings app, and navigate to Safari > Advanced, and make sure "Web Inspector" is turned on. +2. On your Mac, open Safari and enable the Develop menu. This can be found under Safari > Settings..., then the Advanced tab, then selecting "Show features for web developers". +3. Find your device under the Develop menu, and select the "JSContext" item from the submenu. This will open Safari's Web Inspector, which includes Console and Sources panels similar to Chrome DevTools. + +![Opening Safari Web Inspector](/docs/assets/debugging-safari-developer-tools.jpg) + +:::tip +While source maps may not be enabled by default, you can follow [this guide](https://blog.nparashuram.com/2019/10/debugging-react-native-ios-apps-with.html) or [video](https://www.youtube.com/watch?v=GrGqIIz51k4) to enable them and set break points at the right places in the source code. +::: + +:::tip +Every time the app is reloaded, a new JSContext is created. Choosing "Automatically Show Web Inspectors for JSContexts" saves you from having to select the latest JSContext manually. +::: + +## Remote JavaScript Debugging (deprecated) + +:::warning +Remote JavaScript Debugging is deprecated in React Native 0.73 and will be removed in a future release. +::: + +Remote JavaScript Debugging connects an external web browser (Chrome) to your app and runs your JavaScript code inside a web page. This allows you to use Chrome's debugger as you would with any web app. Note that the browser environment can be very different, and not all React Native modules will work when debugging this way. + +### Setup + +Since React Native 0.73, Remote JavaScript Debugging must be **manually enabled** using the `NativeDevSettings` module. + +```js +import NativeDevSettings from 'react-native/Libraries/NativeModules/specs/NativeDevSettings'; + +function MyApp() { + // Assign this to a dev-only button or useEffect call + const connectToRemoteDebugger = () => { + NativeDevSettings.setIsDebuggingRemotely(true); + }; +} +``` + +When `NativeDevSettings.setIsDebuggingRemotely(true)` is invoked, this will open a new tab at [http://localhost:8081/debugger-ui](http://localhost:8081/debugger-ui). + +From this page, open Chrome DevTools via: + +- View > Developer > Developer Tools +- ⌥ Option + Cmd ⌘ + I (macOS) / Ctrl + Shift + I (Windows and Linux). + +The Console and Sources panels will allow you to inspect your React Native code. + +![The remote debugger window in Chrome](/docs/assets/debugging-chrome-remote-debugger.jpg) + +:::info +Under Remote JavaScript Debugging, the web version of React DevTools in Chrome will not work with React Native. See the [React DevTools](./react-devtools) guide to learn how to use the standalone version of React DevTools. +::: + +:::note +On Android, if the times between the debugger and device have drifted, things such as animations and event behavior might not work properly. This can be fixed by running `` adb shell "date `date +%m%d%H%M%Y.%S%3N`" ``. Root access is required if using a physical device. +::: + +### Debugging on a physical device + +:::info +If you're using Expo CLI, this is configured for you already. +::: + + + + +On iOS devices, open the file [`RCTWebSocketExecutor.mm`](https://github.com/facebook/react-native/blob/master/packages/react-native/React/CoreModules/RCTWebSocketExecutor.mm) and change "localhost" to the IP address of your computer. + + + + +On Android 5.0+ devices connected via USB, you can use the [`adb` command line tool](http://developer.android.com/tools/help/adb.html) to set up port forwarding from the device to your computer: + +```sh +adb reverse tcp:8081 tcp:8081 +``` + + + + +:::note +If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension. +::: diff --git a/docs/out-of-tree-platforms.md b/docs/out-of-tree-platforms.md index 8b1ef41df17..cf5aca2c0ae 100644 --- a/docs/out-of-tree-platforms.md +++ b/docs/out-of-tree-platforms.md @@ -12,10 +12,8 @@ React Native is not only for Android and iOS devices - our partners and the comm **From Community** -- [alita](https://github.com/areslabs/alita) - An experimental, comprehensive port of React Native to mini-program (微信小程序). - [React Native tvOS](https://github.com/react-native-tvos/react-native-tvos) - React Native for Apple TV and Android TV devices. - [React Native Web](https://github.com/necolas/react-native-web) - React Native on the web using React DOM. -- [Valence Native](https://github.com/valence-native/valence-native) - A wrapper for React Native, using Qt to target Linux, macOS, and Windows. Forked from [Proton Native](https://github.com/kusti8/proton-native) which is no longer maintained. - [React Native Skia](https://github.com/react-native-skia/react-native-skia) - React Native using [Skia](https://skia.org/) as a renderer. Currently supports Linux and macOS. ## Creating your own React Native platform diff --git a/docs/profile-hermes.md b/docs/profile-hermes.md index ed5e119dd49..0a0c78dfdeb 100644 --- a/docs/profile-hermes.md +++ b/docs/profile-hermes.md @@ -43,7 +43,7 @@ npx react-native profile-hermes [destinationDir] ### Enabling source map :::info -You may read about source maps on the [source maps](sourcemaps.md) page. +You may read about source maps on the [Debugging Release Builds](debugging-release-builds.md) page. ::: ### Common errors diff --git a/docs/publishing-to-app-store.md b/docs/publishing-to-app-store.md index 2be23b3d645..5b1b65764e5 100644 --- a/docs/publishing-to-app-store.md +++ b/docs/publishing-to-app-store.md @@ -13,7 +13,21 @@ If you are using Expo, read the Expo guide for [Deploying to App Stores](https:/ App Transport Security is a security feature introduced in iOS 9 that rejects all HTTP requests that are not sent over HTTPS. This can result in HTTP traffic being blocked, including the developer React Native server. ATS is disabled for `localhost` by default in React Native projects in order to make development easier. -You should re-enable ATS prior to building your app for production by removing the `localhost` entry from the `NSExceptionDomains` dictionary and setting `NSAllowsArbitraryLoads` to `false` in your `Info.plist` file in the `ios/` folder. You can also re-enable ATS from within Xcode by opening your target properties under the Info pane and editing the App Transport Security Settings entry. +You should re-enable ATS prior to building your app for production by opening your `ios/App/Info.plist` file and removing the `localhost` entry from the `NSExceptionDomains` dictionary and setting `NSAllowsArbitraryLoads` to `false` in the `NSAppTransportSecurity` dict. You can also re-enable ATS from within Xcode by opening your target properties under the Info pane and editing the App Transport Security Settings entry. + +![](/docs/assets/XCodeEnableATS.png) + +If you are editing Info.plist via plaintext rather than the XCode UI, the below is how the `NSAppTransportSecurity` entry would look like without an any domain exceptions. + +```xml +NSAppTransportSecurity + + NSAllowsArbitraryLoads + + NSExceptionDomains + + +``` :::note If your application needs to access HTTP resources on production, learn how to configure ATS on your project. diff --git a/docs/react-devtools.md b/docs/react-devtools.md index 2999d9d24a2..ced5c6589a2 100644 --- a/docs/react-devtools.md +++ b/docs/react-devtools.md @@ -1,16 +1,29 @@ --- id: react-devtools -title: React Developer Tools +title: React DevTools --- import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; -You can use [the standalone version of React Developer Tools](https://github.com/facebook/react/tree/main/packages/react-devtools) to debug the React component hierarchy. To use it, install the `react-devtools` package globally: +[React DevTools](https://github.com/facebook/react/tree/main/packages/react-devtools) can be used to debug the React component hierarchy within your app. + +The standalone version of React DevTools allows connecting to React Native apps. To use it, install or run the `react-devtools` package. It should connect to your simulator within a few seconds. + +```sh +npx react-devtools +``` + +![The React DevTools interface](/docs/assets/debugging-react-devtools-detail.jpg) + +
+💡 Installing React DevTools globally + +We recommend running `react-devtools` via `npx`, but you can also install a given version globally. -```shell +```sh npm install -g react-devtools ``` @@ -24,48 +37,51 @@ yarn global add react-devtools -Now run `react-devtools` from the terminal to launch the standalone DevTools app. It should connect to your simulator within a few seconds. +Then, run the global `react-devtools` command: -```shell +```sh react-devtools ``` -![React DevTools](/docs/assets/ReactDevTools.png) +
-:::info -If connecting to the emulator proves troublesome (especially Android 12), try running `adb reverse tcp:8097 tcp:8097` in a new terminal. -::: +
+💡 Adding React DevTools as a project dependency -:::info If you prefer to avoid global installations, you can add `react-devtools` as a project dependency. Add the `react-devtools` package to your project using `npm install --save-dev react-devtools`, then add `"react-devtools": "react-devtools"` to the `scripts` section in your `package.json`, and then run `npm run react-devtools` from your project folder to open the DevTools. -::: -## Integration with React Native Inspector +
-Open the Dev Menu and choose "Toggle Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it: +:::tip +Learn more about using DevTools in the [React Developer Tools guide on react.dev](https://react.dev/learn/react-developer-tools). +::: -![React Native Inspector](/docs/assets/Inspector.gif) +## Integration with the Element Inspector -However, when `react-devtools` is running, Inspector will enter a collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools: +React Native provides an Element Inspector, available under the Dev Menu as "Show Element Inspector". The inspector lets you tap on any UI element and see information about it. -![React DevTools Inspector Integration](/docs/assets/ReactDevToolsInspector.gif) +![Video of the Element Inspector interface](/docs/assets/debugging-element-inspector.gif) -You can choose "Toggle Inspector" in the same menu to exit this mode. +When React DevTools is connected, the Element Inspector will enter a **collapsed mode**, and instead use DevTools as the primary UI. In this mode, clicking on something in the simulator will navigate to the relevant component in DevTools. -## Inspecting Component Instances +You can select "Hide Element Inspector" in the same menu to exit this mode. -When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console. +![React DevTools Element Inspector integration](/docs/assets/debugging-element-inspector-react-devtools.gif) -First, follow the instructions for debugging in Chrome to open the Chrome console. +## Debugging application state -Make sure that the dropdown in the top left corner of the Chrome console says `debuggerWorker.js`. **This step is essential.** +[Reactotron](https://github.com/infinitered/reactotron) is an open-source desktop app that allows you to inspect Redux or MobX-State-Tree application state as well as view custom logs, run custom commands such as resetting state, store and restore state snapshots, and other helpful debugging features for React Native apps. -Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as `$r` in the Chrome console, letting you inspect its props, state, and instance properties. +You can view installation instructions [in the README](https://github.com/infinitered/reactotron). If you're using Expo, here is an article detailing [how to install on Expo](https://shift.infinite.red/start-using-reactotron-in-your-expo-project-today-in-3-easy-steps-a03d11032a7a). -![React DevTools Chrome Console Integration](/docs/assets/ReactDevToolsDollarR.gif) +## Troubleshooting -## Debugging application state +:::tip +Once you have React DevTools running, follow the instructions. If you had your application running prior to opening React DevTools, you may need to [open the Dev Menu](./debugging#accessing-the-dev-menu) to connect it. -[Reactotron](https://github.com/infinitered/reactotron) is an open-source desktop app that allows you to inspect Redux or MobX-State-Tree application state as well as view custom logs, run custom commands such as resetting state, store and restore state snapshots, and other helpful debugging features for React Native apps. +![React DevTools connection flow](/docs/assets/debugging-react-devtools-connection.gif) +::: -You can view installation instructions [in the README](https://github.com/infinitered/reactotron). If you're using Expo, here is an article detailing [how to install on Expo](https://shift.infinite.red/start-using-reactotron-in-your-expo-project-today-in-3-easy-steps-a03d11032a7a). +:::info +If connecting to an Android emulator proves troublesome, try running `adb reverse tcp:8097 tcp:8097` in a new terminal. +::: diff --git a/docs/sourcemaps.md b/docs/sourcemaps.md deleted file mode 100644 index 9ccd6c4c0cc..00000000000 --- a/docs/sourcemaps.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: sourcemaps -title: Source Maps ---- - -Source maps allow you to map a transformed file back to the original source file. The main purpose of source maps is to aid debugging and help with investigating issues from release builds. - -Without the source maps, when running into an error in the release build you will see a stacktrace like: - -```text -TypeError: Cannot read property 'data' of undefined - at anonymous(app:///index.android.bundle:1:4277021) - at call(native) - at p(app:///index.android.bundle:1:227785) -``` - -With source maps generated, a stacktrace will include path, file name, and line number of the original source file: - -```text -TypeError: Cannot read property 'data' of undefined - at anonymous(src/modules/notifications/Permission.js:15:requestNotificationPermission) - at call(native) - at p(node_modules/regenerator-runtime/runtime.js:64:Generator) -``` - -This allows you to triage release issues using a decipherable stacktrace. - -Follow the instructions below to get started with source maps. - -## Enable source maps on Android - -### Hermes - -:::info -Source maps are built in Release mode by default, unless `hermesFlagsRelease` is set. In that case source maps will have to be enabled. -::: - -To do so, ensure the following is set in your app's `android/app/build.gradle` file. - -```groovy -project.ext.react = [ - enableHermes: true, - hermesFlagsRelease: ["-O", "-output-source-map"], // plus whichever flag was required to set this away from default -] -``` - -If done correctly you should see the output location of the source map during Metro build output. - -```text -Writing bundle output to:, android/app/build/generated/assets/react/release/index.android.bundle -Writing sourcemap output to:, android/app/build/intermediates/sourcemaps/react/release/index.android.bundle.packager.map -``` - -Development builds do not produce a bundle and thus already have symbols, but if the development build is bundled you may use `hermesFlagsDebug` like above to enable source maps. - -## Enable source maps on iOS - -Source maps are disabled by default. To enable them one has to define a `SOURCEMAP_FILE` environment variable. - -In order to do so, within Xcode head to the Build Phase - "Bundle React Native code and images". - -At the top of the file near the other exports, add an entry for `SOURCEMAP_FILE` to the preferred location and name. Like below: - -``` -export SOURCEMAP_FILE="$(pwd)/../main.jsbundle.map"; - -export NODE_BINARY=node -../node_modules/react-native/scripts/react-native-xcode.sh -``` - -If done correctly you should see the output location of the source map during Metro build output. - -```text -Writing bundle output to:, Build/Intermediates.noindex/ArchiveIntermediates/application/BuildProductsPath/Release-iphoneos/main.jsbundle -Writing sourcemap output to:, Build/Intermediates.noindex/ArchiveIntermediates/application/BuildProductsPath/Release-iphoneos/main.jsbundle.map -``` - -## Manual Symbolication - -:::info -You may read about manual symbolication of a stack trace on the [symbolication](symbolication.md) page. -::: diff --git a/docs/symbolication.md b/docs/symbolication.md deleted file mode 100644 index 25847c0ce2c..00000000000 --- a/docs/symbolication.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: symbolication -title: Symbolicating a stack trace ---- - -If a React Native app throws an unhandled exception in a release build, the output may be obfuscated and hard to read: - -```shell -07-15 10:58:25.820 18979 18998 E AndroidRuntime: FATAL EXCEPTION: mqt_native_modules -07-15 10:58:25.820 18979 18998 E AndroidRuntime: Process: com.awesomeproject, PID: 18979 07-15 10:58:25.820 18979 18998 E AndroidRuntime: com.facebook.react.common.JavascriptException: Failed, js engine: hermes, stack: -07-15 10:58:25.820 18979 18998 E AndroidRuntime: p@1:132161 -07-15 10:58:25.820 18979 18998 E AndroidRuntime: p@1:132084 -07-15 10:58:25.820 18979 18998 E AndroidRuntime: f@1:131854 -07-15 10:58:25.820 18979 18998 E AndroidRuntime: anonymous@1:131119 -``` - -The sections like `p@1:132161` are minified function names and bytecode offsets. To debug the problem, you would instead want to translate it into file, line and function name: `AwesomeProject/App.js:54:initializeMap`. This is known as **symbolication.** You can symbolicate minified function names and bytecode like the above by passing `metro-symbolicate` a generated source map and the stack trace. - -> The `metro-symbolicate` package is installed by default in the React Native template project from [setting up your development environment](environment-setup). - -From a file containing the stacktrace: - -```shell -npx metro-symbolicate android/app/build/generated/sourcemaps/react/release/index.android.bundle.map < stacktrace.txt -``` - -From `adb logcat`directly: - -```shell -adb logcat -d | npx metro-symbolicate android/app/build/generated/sourcemaps/react/release/index.android.bundle.map -``` - -This will turn each minified function name and offset like `p@1:132161` into the actual file- and function name `AwesomeProject/App.js:54:initializeMap`. - -## Notes on Sourcemaps - -- Multiple source maps may be generated by the build process. Make sure to use the one in the location shown in the examples. -- Make sure that the source map you use corresponds to the exact commit of the crashing app. Small changes in source code can cause large differences in offsets. -- If `metro-symbolicate` exits immediately with success, make sure the input comes from a pipe or redirection and not from a terminal. diff --git a/docs/textinput.md b/docs/textinput.md index 6a40c78ee77..cd9881c9a7d 100644 --- a/docs/textinput.md +++ b/docs/textinput.md @@ -960,7 +960,7 @@ see [Issue#7070](https://github.com/facebook/react-native/issues/7070) for more ### `textBreakStrategy`
Android
-Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `simple`. +Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `highQuality`. | Type | | ----------------------------------------- | diff --git a/docs/the-new-architecture/pillars-turbomodule.md b/docs/the-new-architecture/pillars-turbomodule.md index 7b126ceef66..d9bb6144d2d 100644 --- a/docs/the-new-architecture/pillars-turbomodule.md +++ b/docs/the-new-architecture/pillars-turbomodule.md @@ -759,7 +759,7 @@ TurboModulesGuide │ ├── RTNCalculator.h │ └── RTNCalculator.mm ├── js - │ └── NativeCalculator.js + │ └── NativeCalculator.ts ├── package.json └── rtn-calculator.podspec ``` diff --git a/plugins/remark-snackplayer/package.json b/plugins/remark-snackplayer/package.json index e948a5e47ce..a2d50cb0690 100644 --- a/plugins/remark-snackplayer/package.json +++ b/plugins/remark-snackplayer/package.json @@ -24,7 +24,7 @@ "unist-util-visit-parents": "^3.1.1" }, "devDependencies": { - "remark": "^12.0.1", - "tape": "^5.0.1" + "remark": "^14.0.3", + "tape": "^5.7.0" } } diff --git a/plugins/remark-snackplayer/src/index.js b/plugins/remark-snackplayer/src/index.js index 70b25d7f2d3..3ed910b1d52 100644 --- a/plugins/remark-snackplayer/src/index.js +++ b/plugins/remark-snackplayer/src/index.js @@ -52,8 +52,6 @@ async function toJsxNode(node) { const theme = params.theme || 'light'; const preview = params.preview || 'true'; const loading = params.loading || 'lazy'; - const deviceAndroid = params.deviceAndroid || 'pixel4'; - const deviceIos = params.deviceIos || 'iphone12'; // Need help constructing this AST node? // Use the MDX Playground and explore what your output mdast should look like @@ -72,8 +70,7 @@ async function toJsxNode(node) { attr('data-snack-theme', theme), attr('data-snack-preview', preview), attr('data-snack-loading', loading), - attr('data-snack-device-android', deviceAndroid), - attr('data-snack-device-ios', deviceIos), + attr('data-snack-device-frame', 'false'), ], children: [], }; diff --git a/plugins/remark-snackplayer/tests/index.js b/plugins/remark-snackplayer/tests/index.js index 57626fa18a6..fd874e4c849 100644 --- a/plugins/remark-snackplayer/tests/index.js +++ b/plugins/remark-snackplayer/tests/index.js @@ -8,13 +8,13 @@ const path = require('path'); const fs = require('fs'); const test = require('tape'); -const remark = require('remark'); const snackplayer = require('../'); const read = name => fs.readFileSync(path.join(__dirname, name), 'utf8'); const normalizeLineEndings = str => str.replace(/\r\n/g, '\n'); test('remark-snackplayer', async t => { + const {remark} = await import('remark'); const processor = remark().use(snackplayer); processor.process(read('markdown/test1.md'), (err, file) => { diff --git a/plugins/remark-snackplayer/tests/output/output1.html b/plugins/remark-snackplayer/tests/output/output1.html index 3ad544343c1..0b1c9d2b2ed 100644 --- a/plugins/remark-snackplayer/tests/output/output1.html +++ b/plugins/remark-snackplayer/tests/output/output1.html @@ -9,4 +9,5 @@ data-snack-theme="light" data-snack-preview="true" data-snack-loading="lazy" + data-snack-device-frame="false" > diff --git a/plugins/remark-snackplayer/tests/output/output2.html b/plugins/remark-snackplayer/tests/output/output2.html index d5c7b39c380..ba715f1a402 100644 --- a/plugins/remark-snackplayer/tests/output/output2.html +++ b/plugins/remark-snackplayer/tests/output/output2.html @@ -9,6 +9,7 @@ data-snack-theme="light" data-snack-preview="true" data-snack-loading="lazy" + data-snack-device-frame="false" >
diff --git a/website/blog/2022-07-08-hermes-as-the-default.md b/website/blog/2022-07-08-hermes-as-the-default.md index be3574bdc84..c257892afea 100644 --- a/website/blog/2022-07-08-hermes-as-the-default.md +++ b/website/blog/2022-07-08-hermes-as-the-default.md @@ -6,7 +6,7 @@ tags: [announcement, release] # Hermes As the Default Blogpost -Last October, we [announced](https://engineering.fb.com/2019/07/12/android/hermes/) that we had started work towards **making** **Hermes the default engine for all React Native apps**. +Last October, we [announced](blog/2021/10/26/toward-hermes-being-the-default) that we had started work towards **making** **Hermes the default engine for all React Native apps**. Hermes has provided a lot of value to React Native inside of Meta, and we believe the open-source community will benefit as well. Hermes is designed for resource constrained devices and optimizes for start up, app size, and memory consumption. One key difference between Hermes and other JS engines is its ability to compile JavaScript source code to bytecode ahead of time. This precompiled bytecode is bundled inside the binary, and saves the interpreter from having to perform this expensive step during app startup. diff --git a/website/contributing/release-testing.md b/website/contributing/release-testing.md index f979be3c9f8..b5bac8ac776 100644 --- a/website/contributing/release-testing.md +++ b/website/contributing/release-testing.md @@ -133,28 +133,27 @@ During the Release Candidate (RC) phase of a release cycle, we ask for the commu To help provide the relevant information, we have prepared this template they can use as blueprint for what is important to test - they can copy/pasted it in a comment and fill it accordingly. ```markdown -| Link to branch: | | -| ---------------------------- | :---------------------- | -| **Project info** | | -| Name | | -| Starting RN version | | -| Hermes on iOS | yes/no | -| Hermes on Android | yes/no | -| **Tested - iOS** | | -| Fast Refresh | ✅/🚨/🙅‍♂️ | -| Debug/dev build on Simulator | ✅/🚨/🙅‍♂️ | -| Debug/dev build on Device | ✅/🚨/🙅‍♂️ | -| Production build | ✅/🚨/🙅‍♂️ | -| Chrome remote debugger | ✅/🚨/🙅‍♂️ | -| Hermes debugger | ✅/🚨/🙅‍♂️ | -| Flipper debugger | ✅/🚨/🙅‍♂️ | -| Deploy to TestFlight | ✅/🚨/🙅‍♂️ | -| **Tested - Android** | | -| Fast Refresh | ✅/🚨/🙅‍♂️ | -| Debug/dev build on Emulator | ✅/🚨/🙅‍♂️ | -| Debug/dev build on Device | ✅/🚨/🙅‍♂️ | -| Production build | ✅/🚨/🙅‍♂️ | -| Chrome remote debugger | ✅/🚨/🙅‍♂️ | -| Hermes debugger | ✅/🚨/🙅‍♂️ | -| Flipper debugger | ✅/🚨/🙅‍♂️ | +| Link to branch: | | +| ----------------------------------- | :---------------------- | +| **Project info** | | +| Name | | +| Starting RN version | | +| Hermes on iOS | yes/no | +| Hermes on Android | yes/no | +| **Tested - iOS** | | +| Fast Refresh | ✅/🚨/🙅‍♂️ | +| Debug/dev build on Simulator | ✅/🚨/🙅‍♂️ | +| Debug/dev build on Device | ✅/🚨/🙅‍♂️ | +| Production build | ✅/🚨/🙅‍♂️ | +| Debugger (Hermes) | ✅/🚨/🙅‍♂️ | +| Deploy to TestFlight | ✅/🚨/🙅‍♂️ | +| **Tested - Android** | | +| Fast Refresh | ✅/🚨/🙅‍♂️ | +| Debug/dev build on Emulator | ✅/🚨/🙅‍♂️ | +| Debug/dev build on Device | ✅/🚨/🙅‍♂️ | +| Production build | ✅/🚨/🙅‍♂️ | +| Debugger (Hermes) | ✅/🚨/🙅‍♂️ | +| **Optional - Deprecated in 0.73** | | +| Chrome remote debugger (Android/iOS) | ✅/🚨/🙅‍♂️ | +| Flipper debugger (Android/iOS) | ✅/🚨/🙅‍♂️ | ``` diff --git a/website/core/TabsConstants.js b/website/core/TabsConstants.js index f7536a86b3a..5709d26317e 100644 --- a/website/core/TabsConstants.js +++ b/website/core/TabsConstants.js @@ -44,6 +44,13 @@ const snackLanguages = [ ]; const defaultSnackLanguage = 'typescript'; +const jsDebuggers = [ + {label: 'Hermes Debugger / Expo', value: 'hermes'}, + {label: 'Flipper', value: 'flipper'}, + {label: 'New Debugger (Experimental)', value: 'new-debugger'}, +]; +const defaultJsDebugger = 'flipper'; + const guides = [ {label: 'Expo Go Quickstart', value: 'quickstart'}, {label: 'React Native CLI Quickstart', value: 'native'}, @@ -73,6 +80,7 @@ const getDevNotesTabs = (tabs = ['android', 'ios', 'web', 'windows']) => export default { defaultGuide, + defaultJsDebugger, defaultOs, defaultPackageManager, defaultPlatform, @@ -87,6 +95,7 @@ export default { syntax, androidLanguages, javaScriptSpecLanguages, + jsDebuggers, snackLanguages, defaultSnackLanguage, }; diff --git a/website/modules/snackPlayerInitializer.js b/website/modules/snackPlayerInitializer.js index 3e623d59ec2..65469b7d97e 100644 --- a/website/modules/snackPlayerInitializer.js +++ b/website/modules/snackPlayerInitializer.js @@ -20,18 +20,15 @@ export default (() => { }; const initSnackPlayers = () => { - // console.log('initSnackPlayers'); updateSnacksTheme(); window.ExpoSnack && window.ExpoSnack.initialize(); }; const setupTabPanelsMutationObservers = () => { const tabPanels = document.querySelectorAll('[role=tabpanel]'); - // console.log('setupTabPanelsMutationObservers', {tabPanels}); tabPanels.forEach(tabPanel => { - new MutationObserver((mutations, observer) => { + new MutationObserver(() => { initSnackPlayers(); - // console.log('tabPanel MutationObserver triggered', {tabPanels}); }).observe(tabPanel, {childList: true}); }); }; @@ -52,7 +49,7 @@ export default (() => { // Hacky, but no better solution for now // see https://github.com/expo/snack/blob/main/website/src/client/components/EmbedCode.tsx#L61 const setupThemeSynchronization = () => { - new MutationObserver((mutations, observer) => { + new MutationObserver(() => { if ('ExpoSnack' in window) { document.querySelectorAll('.snack-player').forEach(container => { updateSnacksTheme(); @@ -73,9 +70,7 @@ export default (() => { setupThemeSynchronization(); return { - onRouteDidUpdate({location}) { - // console.log('onRouteDidUpdate', {location}); - + onRouteDidUpdate() { initSnackPlayers(); setupTabPanelsMutationObservers(); }, diff --git a/website/package.json b/website/package.json index 8a09bfab8ed..8ad2f278147 100644 --- a/website/package.json +++ b/website/package.json @@ -48,19 +48,19 @@ ] }, "dependencies": { - "@docusaurus/core": "0.0.0-5658", - "@docusaurus/plugin-google-gtag": "0.0.0-5658", - "@docusaurus/plugin-pwa": "0.0.0-5658", - "@docusaurus/preset-classic": "0.0.0-5658", - "docusaurus-plugin-sass": "^0.2.2", - "esbuild-loader": "^2.19.0", + "@docusaurus/core": "3.0.0-beta.0", + "@docusaurus/plugin-google-gtag": "3.0.0-beta.0", + "@docusaurus/plugin-pwa": "3.0.0-beta.0", + "@docusaurus/preset-classic": "3.0.0-beta.0", + "docusaurus-plugin-sass": "^0.2.5", + "esbuild-loader": "^2.21.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-github-btn": "^1.3.0", - "sass": "^1.53.0" + "sass": "^1.68.0" }, "devDependencies": { - "@docusaurus/types": "0.0.0-5658", + "@docusaurus/types": "3.0.0-beta.0", "@react-native-website/lint-examples": "0.0.0", "@react-native-website/update-redirects": "0.0.0", "alex": "^10.0.0", diff --git a/website/sidebars.json b/website/sidebars.json index 45cc7e83d10..a42e3ceff40 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -22,28 +22,11 @@ "running-on-device", "fast-refresh", "metro", - { - "type": "category", - "label": "Debugging", - "collapsible": false, - "collapsed": false, - "items": ["debugging", "react-devtools", "native-debugging"] - }, - "symbolication", - "sourcemaps", - "testing-overview", "libraries", "typescript", - "upgrading", - { - "type": "category", - "label": "Connectivity", - "collapsible": false, - "collapsed": false, - "items": ["network", "security"] - } + "upgrading" ], - "Design": [ + "UI & Interaction": [ "style", "height-and-width", "flexbox", @@ -61,6 +44,13 @@ "gesture-responder-system" ] }, + { + "type": "category", + "label": "Connectivity", + "collapsible": false, + "collapsed": false, + "items": ["network", "security"] + }, { "type": "category", "label": "Inclusion", @@ -69,6 +59,16 @@ "items": ["accessibility"] } ], + "Debugging": [ + "debugging", + "react-devtools", + "native-debugging", + "debugging-release-builds", + "other-debugging-methods" + ], + "Testing": [ + "testing-overview" + ], "Performance": [ "performance", "build-speed", diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss index 0286bcaccb6..fe4cab9f0eb 100644 --- a/website/src/css/customTheme.scss +++ b/website/src/css/customTheme.scss @@ -1714,7 +1714,7 @@ html[data-theme="dark"] .docsRating { /* Snack Player */ .snack-player { - height: 544px; + height: 635px; width: 100%; overflow: hidden; margin-bottom: 24px; diff --git a/website/src/css/versions.scss b/website/src/css/versions.scss index ba96c25acb9..681d8e62649 100644 --- a/website/src/css/versions.scss +++ b/website/src/css/versions.scss @@ -8,7 +8,7 @@ @import "shared"; .versions-page { - max-width: 960px; + max-width: 1400px !important; padding: 28px; h1 { @@ -16,7 +16,8 @@ } h2 { - font-size: 2rem; + font-size: 1.66rem; + margin-top: 12px; } code { diff --git a/website/src/pages/versions.js b/website/src/pages/versions.js index bfdfece266d..6e5030cc990 100644 --- a/website/src/pages/versions.js +++ b/website/src/pages/versions.js @@ -13,7 +13,7 @@ const versions = require('../../versions.json'); const versionsArchived = require('../../versionsArchived.json'); const VersionItem = ({version, archivedDocumentationUrl, currentVersion}) => { - const versionName = version === 'next' ? 'Master' : version; + const versionName = version === 'next' ? 'main' : version; const isCurrentVersion = currentVersion === version; const isNext = version === 'next'; @@ -125,6 +125,10 @@ const Versions = () => {

Archived versions

+

+ The documentation for unmaintained versions can be found on website + archive snapshots, hosted as separate sites. +

{Object.entries(versionsArchived).map( diff --git a/website/static/_redirects b/website/static/_redirects index d9cb677b1aa..c60a39047b2 100644 --- a/website/static/_redirects +++ b/website/static/_redirects @@ -5,6 +5,8 @@ /docs/building-for-apple-tv /docs/building-for-tv /docs/building-from-source /contributing/how-to-build-from-source /docs/contributing /contributing/overview +/docs/next/sourcemaps /docs/next/debugging-release-builds +/docs/next/symbolication /docs/next/debugging-release-builds /docs/publishing-forks /contributing/how-to-build-from-source#publish-your-own-version-of-react-native /docs/testing /contributing/how-to-run-and-write-tests /docs/understanding-cli https://github.com/react-native-community/cli#react-native-cli diff --git a/website/static/docs/assets/ReactDevTools.png b/website/static/docs/assets/ReactDevTools.png index 28be4e6a67a..c6d4c3a6719 100644 Binary files a/website/static/docs/assets/ReactDevTools.png and b/website/static/docs/assets/ReactDevTools.png differ diff --git a/website/static/docs/assets/ReactDevToolsConnection.gif b/website/static/docs/assets/ReactDevToolsConnection.gif new file mode 100644 index 00000000000..55947bddacc Binary files /dev/null and b/website/static/docs/assets/ReactDevToolsConnection.gif differ diff --git a/website/static/docs/assets/ReactDevToolsInspector.gif b/website/static/docs/assets/ReactDevToolsInspector.gif index c6c8895980b..b4b9144a6e7 100644 Binary files a/website/static/docs/assets/ReactDevToolsInspector.gif and b/website/static/docs/assets/ReactDevToolsInspector.gif differ diff --git a/website/static/docs/assets/XCodeEnableATS.png b/website/static/docs/assets/XCodeEnableATS.png new file mode 100644 index 00000000000..a363c7c8ccd Binary files /dev/null and b/website/static/docs/assets/XCodeEnableATS.png differ diff --git a/website/static/docs/assets/debugging-chrome-remote-debugger.jpg b/website/static/docs/assets/debugging-chrome-remote-debugger.jpg new file mode 100644 index 00000000000..4717565ab7e Binary files /dev/null and b/website/static/docs/assets/debugging-chrome-remote-debugger.jpg differ diff --git a/website/static/docs/assets/debugging-debugger-welcome.jpg b/website/static/docs/assets/debugging-debugger-welcome.jpg new file mode 100644 index 00000000000..5cc6394e5bb Binary files /dev/null and b/website/static/docs/assets/debugging-debugger-welcome.jpg differ diff --git a/website/static/docs/assets/debugging-dev-menu.jpg b/website/static/docs/assets/debugging-dev-menu.jpg new file mode 100644 index 00000000000..d0f96e283e5 Binary files /dev/null and b/website/static/docs/assets/debugging-dev-menu.jpg differ diff --git a/website/static/docs/assets/debugging-element-inspector-react-devtools.gif b/website/static/docs/assets/debugging-element-inspector-react-devtools.gif new file mode 100644 index 00000000000..666dfc62b61 Binary files /dev/null and b/website/static/docs/assets/debugging-element-inspector-react-devtools.gif differ diff --git a/website/static/docs/assets/debugging-element-inspector.gif b/website/static/docs/assets/debugging-element-inspector.gif new file mode 100644 index 00000000000..86939626c86 Binary files /dev/null and b/website/static/docs/assets/debugging-element-inspector.gif differ diff --git a/website/static/docs/assets/debugging-flipper-console.jpg b/website/static/docs/assets/debugging-flipper-console.jpg new file mode 100644 index 00000000000..765cc912430 Binary files /dev/null and b/website/static/docs/assets/debugging-flipper-console.jpg differ diff --git a/website/static/docs/assets/debugging-hermes-debugger-instructions.jpg b/website/static/docs/assets/debugging-hermes-debugger-instructions.jpg new file mode 100644 index 00000000000..2758cbdffbc Binary files /dev/null and b/website/static/docs/assets/debugging-hermes-debugger-instructions.jpg differ diff --git a/website/static/docs/assets/debugging-logbox.jpg b/website/static/docs/assets/debugging-logbox.jpg new file mode 100644 index 00000000000..ed29588d6bc Binary files /dev/null and b/website/static/docs/assets/debugging-logbox.jpg differ diff --git a/website/static/docs/assets/debugging-performance-monitor.jpg b/website/static/docs/assets/debugging-performance-monitor.jpg new file mode 100644 index 00000000000..fe37e705705 Binary files /dev/null and b/website/static/docs/assets/debugging-performance-monitor.jpg differ diff --git a/website/static/docs/assets/debugging-react-devtools-blank.jpg b/website/static/docs/assets/debugging-react-devtools-blank.jpg new file mode 100644 index 00000000000..bc70d3af4ea Binary files /dev/null and b/website/static/docs/assets/debugging-react-devtools-blank.jpg differ diff --git a/website/static/docs/assets/debugging-react-devtools-connection.gif b/website/static/docs/assets/debugging-react-devtools-connection.gif new file mode 100644 index 00000000000..031fc58cbbb Binary files /dev/null and b/website/static/docs/assets/debugging-react-devtools-connection.gif differ diff --git a/website/static/docs/assets/debugging-react-devtools-detail.jpg b/website/static/docs/assets/debugging-react-devtools-detail.jpg new file mode 100644 index 00000000000..98bbc91b158 Binary files /dev/null and b/website/static/docs/assets/debugging-react-devtools-detail.jpg differ diff --git a/website/static/docs/assets/debugging-safari-developer-tools.jpg b/website/static/docs/assets/debugging-safari-developer-tools.jpg new file mode 100644 index 00000000000..d4efb44cae1 Binary files /dev/null and b/website/static/docs/assets/debugging-safari-developer-tools.jpg differ 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 94d0bd79055..949bd6c6f6a 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 @@ -38,7 +38,7 @@ Android Studio installs the latest Android SDK by default. Building a React Nati To do that, open Android Studio, click on "Configure" button and select "SDK Manager". -> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +> The SDK Manager can also be found within the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**. Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 12 (S)` entry, then make sure the following items are checked: @@ -65,7 +65,7 @@ export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools Type `source $HOME/.bash_profile` for `bash` or `source $HOME/.zprofile` to load the config into your current shell. Verify that ANDROID_SDK_ROOT has been set by running `echo $ANDROID_SDK_ROOT` and the appropriate directories have been added to your path by running `echo $PATH`. -> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**.

Watchman

diff --git a/website/versioned_docs/version-0.70/_getting-started-macos-android.md b/website/versioned_docs/version-0.70/_getting-started-macos-android.md index 11ef5bdea6f..f2475a5a759 100644 --- a/website/versioned_docs/version-0.70/_getting-started-macos-android.md +++ b/website/versioned_docs/version-0.70/_getting-started-macos-android.md @@ -63,7 +63,7 @@ To do that, open Android Studio, click on "More Actions" button and select "SDK ![Android Studio Welcome](/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png) -> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +> The SDK Manager can also be found within the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**. Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 12 (S)` entry, then make sure the following items are checked: @@ -90,7 +90,7 @@ export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools Type `source $HOME/.bash_profile` for `bash` or `source $HOME/.zprofile` to load the config into your current shell. Verify that ANDROID_SDK_ROOT has been set by running `echo $ANDROID_SDK_ROOT` and the appropriate directories have been added to your path by running `echo $PATH`. -> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**.

React Native Command Line Interface

diff --git a/website/versioned_docs/version-0.70/_getting-started-windows-android.md b/website/versioned_docs/version-0.70/_getting-started-windows-android.md index 89c1eb9e688..372d3fd249f 100644 --- a/website/versioned_docs/version-0.70/_getting-started-windows-android.md +++ b/website/versioned_docs/version-0.70/_getting-started-windows-android.md @@ -53,7 +53,7 @@ To do that, open Android Studio, click on "More Actions" button and select "SDK ![Android Studio Welcome](/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png) -> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +> The SDK Manager can also be found within the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**. Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 12 (S)` entry, then make sure the following items are checked: @@ -81,7 +81,7 @@ The SDK is installed, by default, at the following location: %LOCALAPPDATA%\Android\Sdk ``` -You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**. Open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step. diff --git a/website/versioned_docs/version-0.70/textinput.md b/website/versioned_docs/version-0.70/textinput.md index 813629463ab..94d3474d655 100644 --- a/website/versioned_docs/version-0.70/textinput.md +++ b/website/versioned_docs/version-0.70/textinput.md @@ -854,7 +854,7 @@ see [Issue#7070](https://github.com/facebook/react-native/issues/7070) for more ### `textBreakStrategy`
Android
-Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `simple`. +Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `highQuality`. | Type | | ----------------------------------------- | 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 968bfd8c004..69dd55b6fca 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 @@ -38,7 +38,7 @@ Android Studio installs the latest Android SDK by default. Building a React Nati To do that, open Android Studio, click on "Configure" button and select "SDK Manager". -> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +> The SDK Manager can also be found within the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**. Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 13 (Tiramisu)` entry, then make sure the following items are checked: @@ -65,7 +65,7 @@ export PATH=$PATH:$ANDROID_HOME/platform-tools Type `source $HOME/.bash_profile` for `bash` or `source $HOME/.zprofile` to load the config into your current shell. Verify that ANDROID_HOME has been set by running `echo $ANDROID_HOME` and the appropriate directories have been added to your path by running `echo $PATH`. -> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**.

Watchman

diff --git a/website/versioned_docs/version-0.71/_getting-started-macos-android.md b/website/versioned_docs/version-0.71/_getting-started-macos-android.md index 8d2726960fa..7fd3cc55df3 100644 --- a/website/versioned_docs/version-0.71/_getting-started-macos-android.md +++ b/website/versioned_docs/version-0.71/_getting-started-macos-android.md @@ -63,7 +63,7 @@ To do that, open Android Studio, click on "More Actions" button and select "SDK ![Android Studio Welcome](/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png) -> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +> The SDK Manager can also be found within the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**. Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 13 (Tiramisu)` entry, then make sure the following items are checked: @@ -88,7 +88,7 @@ export PATH=$PATH:$ANDROID_HOME/platform-tools Run `source ~/.zprofile` (or `source ~/.bash_profile` for `bash`) to load the config into your current shell. Verify that ANDROID_HOME has been set by running `echo $ANDROID_HOME` and the appropriate directories have been added to your path by running `echo $PATH`. -> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**.

React Native Command Line Interface

diff --git a/website/versioned_docs/version-0.71/_getting-started-macos-ios.md b/website/versioned_docs/version-0.71/_getting-started-macos-ios.md index 2bd36a2399e..19554dcb664 100644 --- a/website/versioned_docs/version-0.71/_getting-started-macos-ios.md +++ b/website/versioned_docs/version-0.71/_getting-started-macos-ios.md @@ -64,6 +64,8 @@ You will also need to install the Xcode Command Line Tools. Open Xcode, then cho To install a simulator, open Xcode > Preferences... and select the Components tab. Select a simulator with the corresponding version of iOS you wish to use. +If you are using Xcode version 14.0 or greater than to install a simulator, open **Xcode > Settings > Platforms** tab, then click "+" icon and select **iOS…** option. + #### CocoaPods [CocoaPods](https://cocoapods.org/) is one of the dependency management system available for iOS. It is built with Ruby and you can install it using the version of Ruby you configured with in the previous steps. diff --git a/website/versioned_docs/version-0.71/_getting-started-windows-android.md b/website/versioned_docs/version-0.71/_getting-started-windows-android.md index dc76e8cc853..7b03649f336 100644 --- a/website/versioned_docs/version-0.71/_getting-started-windows-android.md +++ b/website/versioned_docs/version-0.71/_getting-started-windows-android.md @@ -53,7 +53,7 @@ To do that, open Android Studio, click on "More Actions" button and select "SDK ![Android Studio Welcome](/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png) -> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +> The SDK Manager can also be found within the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**. Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 13 (Tiramisu)` entry, then make sure the following items are checked: @@ -81,7 +81,7 @@ The SDK is installed, by default, at the following location: %LOCALAPPDATA%\Android\Sdk ``` -You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**. Open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step. diff --git a/website/versioned_docs/version-0.71/out-of-tree-platforms.md b/website/versioned_docs/version-0.71/out-of-tree-platforms.md index e1aeee7d6ae..c6ea6cba3f0 100644 --- a/website/versioned_docs/version-0.71/out-of-tree-platforms.md +++ b/website/versioned_docs/version-0.71/out-of-tree-platforms.md @@ -12,10 +12,8 @@ React Native is not only for Android and iOS devices - our partners and the comm **From Community** -- [alita](https://github.com/areslabs/alita) - An experimental, comprehensive port of React Native to mini-program (微信小程序). - [React Native tvOS](https://github.com/react-native-tvos/react-native-tvos) - React Native for Apple TV and Android TV devices. - [React Native Web](https://github.com/necolas/react-native-web) - React Native on the web using React DOM. -- [Valence Native](https://github.com/valence-native/valence-native) - A wrapper for React Native, using Qt to target Linux, macOS, and Windows. Forked from [Proton Native](https://github.com/kusti8/proton-native) which is no longer maintained. ## Creating your own React Native platform diff --git a/website/versioned_docs/version-0.71/textinput.md b/website/versioned_docs/version-0.71/textinput.md index e3932bd0a46..1fed80d2909 100644 --- a/website/versioned_docs/version-0.71/textinput.md +++ b/website/versioned_docs/version-0.71/textinput.md @@ -946,7 +946,7 @@ see [Issue#7070](https://github.com/facebook/react-native/issues/7070) for more ### `textBreakStrategy`
Android
-Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `simple`. +Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `highQuality`. | Type | | ----------------------------------------- | diff --git a/website/versioned_docs/version-0.71/the-new-architecture/pillars-turbomodule.md b/website/versioned_docs/version-0.71/the-new-architecture/pillars-turbomodule.md index 46fd0b573e7..2ae5595a7d1 100644 --- a/website/versioned_docs/version-0.71/the-new-architecture/pillars-turbomodule.md +++ b/website/versioned_docs/version-0.71/the-new-architecture/pillars-turbomodule.md @@ -759,7 +759,7 @@ TurboModulesGuide │ ├── RTNCalculator.h │ └── RTNCalculator.mm ├── js - │ └── NativeCalculator.js + │ └── NativeCalculator.ts ├── package.json └── rtn-calculator.podspec ``` 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 e4acdb68896..49979dbb8dc 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 @@ -39,7 +39,7 @@ Android Studio installs the latest Android SDK by default. Building a React Nati To do that, open Android Studio, click on "Configure" button and select "SDK Manager". -> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +> The SDK Manager can also be found within the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**. Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 13 (Tiramisu)` entry, then make sure the following items are checked: @@ -66,7 +66,7 @@ export PATH=$PATH:$ANDROID_HOME/platform-tools Type `source $HOME/.bash_profile` for `bash` or `source $HOME/.zprofile` to load the config into your current shell. Verify that ANDROID_HOME has been set by running `echo $ANDROID_HOME` and the appropriate directories have been added to your path by running `echo $PATH`. -> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**.

Watchman

diff --git a/website/versioned_docs/version-0.72/_getting-started-macos-android.md b/website/versioned_docs/version-0.72/_getting-started-macos-android.md index 63c4745095f..6947d173070 100644 --- a/website/versioned_docs/version-0.72/_getting-started-macos-android.md +++ b/website/versioned_docs/version-0.72/_getting-started-macos-android.md @@ -64,7 +64,7 @@ To do that, open Android Studio, click on "More Actions" button and select "SDK ![Android Studio Welcome](/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png) -> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +> The SDK Manager can also be found within the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**. Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 13 (Tiramisu)` entry, then make sure the following items are checked: @@ -89,7 +89,7 @@ export PATH=$PATH:$ANDROID_HOME/platform-tools Run `source ~/.zprofile` (or `source ~/.bash_profile` for `bash`) to load the config into your current shell. Verify that ANDROID_HOME has been set by running `echo $ANDROID_HOME` and the appropriate directories have been added to your path by running `echo $PATH`. -> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**.

React Native Command Line Interface

diff --git a/website/versioned_docs/version-0.72/_getting-started-windows-android.md b/website/versioned_docs/version-0.72/_getting-started-windows-android.md index efb304be7f1..527c9ac42a1 100644 --- a/website/versioned_docs/version-0.72/_getting-started-windows-android.md +++ b/website/versioned_docs/version-0.72/_getting-started-windows-android.md @@ -54,7 +54,7 @@ To do that, open Android Studio, click on "More Actions" button and select "SDK ![Android Studio Welcome](/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png) -> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +> The SDK Manager can also be found within the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**. Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 13 (Tiramisu)` entry, then make sure the following items are checked: @@ -82,7 +82,7 @@ The SDK is installed, by default, at the following location: %LOCALAPPDATA%\Android\Sdk ``` -You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. +You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**. Open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step. diff --git a/website/versioned_docs/version-0.72/debugging.md b/website/versioned_docs/version-0.72/debugging.md index 609bcc41581..2c857cd7fff 100644 --- a/website/versioned_docs/version-0.72/debugging.md +++ b/website/versioned_docs/version-0.72/debugging.md @@ -66,7 +66,7 @@ From here, select `More Tools → Developer Tools` from the Chrome menu to open - You may want to enable [Pause on Caught Exceptions](https://developer.chrome.com/docs/devtools/javascript/breakpoints/#exceptions) for a better debugging experience. :::info -The React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read [this section](debugging.md#react-developer-tools) to learn how. +The React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read [this section](react-devtools) to learn how. ::: :::note diff --git a/website/versioned_docs/version-0.72/native-debugging.md b/website/versioned_docs/version-0.72/native-debugging.md index 5bcdc7b3b66..36638ef3d7a 100644 --- a/website/versioned_docs/version-0.72/native-debugging.md +++ b/website/versioned_docs/version-0.72/native-debugging.md @@ -32,3 +32,13 @@ If you're using Expo CLI, console logs already appear in the same terminal outpu ## Debugging native code When working with native code, such as when writing native modules, you can launch the app from Android Studio or Xcode and take advantage of the native debugging features (setting up breakpoints, etc.) as you would in case of building a standard native app. + +Another option is to run your application using the React Native CLI and attach the native debugger of the native IDE (Android Studio or Xcode) to the process. + +### Android Studio + +On Android Studio you can do this by going on the "Run" option on the menu bar, clicking on "Attach to Process..." and selecting the running React Native app. + +### Xcode + +On Xcode click on "Debug" on the top menu bar, select the "Attach to process" option, and select the application in the list of "Likely Targets". diff --git a/website/versioned_docs/version-0.72/navigation.md b/website/versioned_docs/version-0.72/navigation.md index ceb52632825..1f23e62e76f 100644 --- a/website/versioned_docs/version-0.72/navigation.md +++ b/website/versioned_docs/version-0.72/navigation.md @@ -5,7 +5,7 @@ title: Navigating Between Screens Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator. -This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use [React Navigation](navigation.md#react-navigation). React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both Android and iOS. +This guide points to the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use [React Navigation](https://github.com/react-navigation). React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both Android and iOS. If you're integrating React Native into an app that already manages navigation natively, or looking for an alternative to React Navigation, the following library provides native navigation on both platforms: [react-native-navigation](https://github.com/wix/react-native-navigation). @@ -13,110 +13,11 @@ If you're integrating React Native into an app that already manages navigation n The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code. -### Installation and setup - -First, you need to install them in your project: - -```shell -npm install @react-navigation/native @react-navigation/native-stack -``` - -Next, install the required peer dependencies. You need to run different commands depending on whether your project is an Expo managed project or a bare React Native project. - -- If you have an Expo managed project, install the dependencies with `expo`: - - ```shell - npx expo install react-native-screens react-native-safe-area-context - ``` - -- If you have a bare React Native project, install the dependencies with `npm`: - - ```shell - 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: - - ```shell - cd ios - pod install - cd .. - ``` - -:::note -You might get warnings related to peer dependencies after installation. They are usually caused by incorrect version ranges specified in some packages. You can safely ignore most warnings as long as your app builds. -::: - -Now, you need to wrap the whole app in `NavigationContainer`. Usually you'd do this in your entry file, such as `index.js` or `App.js`: - -```tsx -import * as React from 'react'; -import {NavigationContainer} from '@react-navigation/native'; - -const App = () => { - return ( - - {/* Rest of your app code */} - - ); -}; - -export default App; -``` - -Now you are ready to build and run your app on the device/simulator. - -### Usage - -Now you can create an app with a home screen and a profile screen: - -```tsx -import * as React from 'react'; -import {NavigationContainer} from '@react-navigation/native'; -import {createNativeStackNavigator} from '@react-navigation/native-stack'; - -const Stack = createNativeStackNavigator(); - -const MyStack = () => { - return ( - - - - - - - ); -}; -``` - -In this example, there are 2 screens (`Home` and `Profile`) defined using the `Stack.Screen` component. Similarly, you can define as many screens as you like. - -You can set options such as the screen title for each screen in the `options` prop of `Stack.Screen`. - -Each screen takes a `component` prop that is a React component. Those components receive a prop called `navigation` which has various methods to link to other screens. For example, you can use `navigation.navigate` to go to the `Profile` screen: - -```tsx -const HomeScreen = ({navigation}) => { - return ( -