Update docs for RN SDK v5

src/platform-includes/getting-started-install/react-native.mdx

@@ -1,3 +1,9 @@
+<Note>
+
+If you wish to install Sentry's React Native SDK v4, read the steps [here](/platforms/react-native/troubleshooting#setup-skd-v4-with-react-native-069-and-higher).
+
+</Note>
+
 Add the `@sentry/react-native` dependency:
 
 ```npm
@@ -8,49 +14,39 @@ npm install --save @sentry/react-native
 yarn add @sentry/react-native
 ```
 
-### Expo
-
-If you are using Expo, see [How to Add Sentry to Your Expo Project](https://docs.expo.io/guides/using-sentry/). This SDK works for both managed and bare projects.
+Run `@sentry/wizard`:
 
-<Note>
-
-Make sure that the version of `@sentry/react-native` matches what `sentry-expo` depends on, [read more in Expo documentation](https://docs.expo.io/guides/using-sentry/).
-
-</Note>
+```bash
+npx @sentry/wizard -i reactNative -p ios android
 
-### Linking
+cd ios
+pod install
+```
 
 <Note>
 
-If you are running a project with `react-native` prior to 0.60, you still need to call `react-native link`, otherwise you can skip this step as `react-native` version 0.60 and above does this automatically.
+For React Native 0.68 and older, you'll have to manually patch the Xcode project. Read more on the [Manual Configuration](/platforms/react-native/manual-setup/manual-setup/) page.
 
 </Note>
 
-Link the SDK to your native projects to enable native crash reporting.
+[Sentry Wizard](https://github.com/getsentry/sentry-wizard) will patch your project accordingly, though you can [set up manually](/platforms/react-native/manual-setup/manual-setup/) if you prefer. You only need to patch the project once. Then you can add the patched files to your version control system.
+The following tasks will be performed by the Sentry Wizard:
 
-```bash
-react-native link @sentry/react-native
-```
+- Enable the Sentry React Native Gradle build step for Android to auto-upload generated source maps and debug symbols.
+- Wrap the _Bundle React Native code and images_ Xcode project build phase script to upload generated source maps and collect bundled node modules.
+- Add _Upload Debug Symbols to Sentry_ Xcode project build phase.
+- Store build credentials in _*ios/sentry.properties*_ and _*android/sentry.properties*_.
+- Configure Sentry for the supplied DSN in your _*App.tsx*_ file.
 
-### Run the Sentry Wizard
-
-```bash
-npx @sentry/wizard -i reactNative -p ios android
+### Expo
 
-cd ios
-pod install
-```
+If you're using Expo, read about [How to Add Sentry to Your Expo Project](https://docs.expo.io/guides/using-sentry/). This SDK works for both managed and bare projects.
 
-The call to the [Sentry Wizard](https://github.com/getsentry/sentry-wizard) will patch your project accordingly, though you can [link manually](/platforms/react-native/manual-setup/manual-setup/) if you prefer. You need to do this only once, then the created files can go into your version control system.
+<Note>
 
-The following changes will be performed by Sentry Wizard:
+Make sure that the version of `@sentry/react-native` matches what `sentry-expo` depends on, [read more in Expo documentation](https://docs.expo.io/guides/using-sentry/).
 
-- add the `sentry-android` package for native crash reporting on Android
-- add the `sentry-cocoa` package for native crash reporting on iOS
-- enable the Sentry Gradle build step for Android
-- patch _*MainApplication.java*_ for Android
-- configure Sentry for the supplied DSN in your _*index.js/App.js*_ files
-- store build credentials in _*ios/sentry.properties*_ and _*android/sentry.properties*_.
+</Note>
 
 ### iOS Specifics
 

src/platforms/react-native/manual-setup/manual-setup.mdx

@@ -6,22 +6,19 @@ redirect_from:
 description: "Learn about manual configuration for iOS and Android."
 ---
 
-If you can’t (or prefer not to) run the [linking step](/platforms/react-native/#linking), you can use the instructions below to configure your application.
+If you can’t (or prefer not to) run the [automatic setup](/platforms/react-native), use the instructions below to configure your application.
 
 <Alert level="info" title="Prerequisite">
 
-Before you begin, you need to have already created a `sentry.properties` file at the root of your React Native project. An example of this properties file can be found in
-[Sentry's GitHub](https://github.com/getsentry/examples/blob/master/react-native/sentry.properties).
+Before you can begin, you need to created a `sentry.properties` file at the root of your React Native _android_ and _ios_ project directories. Check out these examples of property files for [iOS](https://github.com/getsentry/examples/blob/master/react-native/AwesomeProject/ios/sentry.properties) and [Android](https://github.com/getsentry/examples/blob/master/react-native/AwesomeProject/android/sentry.properties).
 
 </Alert>
 
 ## iOS
 
 ### Linking the Native Library via CocoaPods
 
-You must link to the native module in your Podfile. In React Native versions 0.60 and above the podspec should be automatically linked. In earlier versions calling `react-native link @sentry/react-native` will add the podspec for you.
-
-Otherwise, you can manually link the native module by adding the `RNSentry.podspec` to your podfile like below:
+To link the Native library via CocoaPods, link to the Native module in your Podfile. In React Native versions 0.60 and above, the podspec should be automatically linked, if that's not the case, you can link to the native module manually by adding the `RNSentry.podspec` to your Podfile. See below:
 
 ```rb
 pod 'RNSentry', :path => '../node_modules/@sentry/react-native/RNSentry.podspec'
@@ -36,24 +33,34 @@ pod 'RNSentry', :path => '../node_modules/@sentry/react-native/RNSentry.podspec'
 We modify the React Native build phase (“Bundle React Native code and images”) slightly from this:
 
 ```bash
-export NODE_BINARY=node
-../node_modules/react-native/packager/react-native-xcode.sh
+set -e
+
+WITH_ENVIRONMENT="../node_modules/react-native/scripts/xcode/with-environment.sh"
+REACT_NATIVE_XCODE="../node_modules/react-native/scripts/react-native-xcode.sh"
+
+/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
 ```
 
 To this:
 
 ```bash
-export NODE_BINARY=node
-export EXTRA_PACKAGER_ARGS="--sourcemap-output $DERIVED_FILE_DIR/main.jsbundle.map"
 export SENTRY_PROPERTIES=../sentry.properties
+export EXTRA_PACKAGER_ARGS="--sourcemap-output $DERIVED_FILE_DIR/main.jsbundle.map"
+set -e
 
-# If you are using RN 0.46+
-../node_modules/@sentry/cli/bin/sentry-cli react-native xcode \
- ../node_modules/react-native/scripts/react-native-xcode.sh
+# RN 0.69+
+WITH_ENVIRONMENT="../node_modules/react-native/scripts/xcode/with-environment.sh"
+REACT_NATIVE_XCODE="../node_modules/react-native/scripts/react-native-xcode.sh"
+SENTRY_CLI="../node_modules/@sentry/cli/bin/sentry-cli"
 
-# For RN < 0.46
-../node_modules/@sentry/cli/bin/sentry-cli react-native xcode \
- ../node_modules/react-native/packager/react-native-xcode.sh
+/bin/sh -c "$WITH_ENVIRONMENT \"$SENTRY_CLI react-native xcode $REACT_NATIVE_XCODE\""
+
+# RN 0.46 – 0.68
+# ../node_modules/@sentry/cli/bin/sentry-cli react-native xcode \
+# ../node_modules/react-native/scripts/react-native-xcode.sh
+
+# All versions
+/bin/sh ../node_modules/@sentry/react-native/scripts/collect-modules.sh
 ```
 
 Additionally, we add a build script named “Upload Debug Symbols to Sentry” to upload debug symbols to Sentry.
@@ -63,9 +70,11 @@ Additionally, we add a build script named “Upload Debug Symbols to Sentry” t
 To upload source maps and symbols to Sentry, create a new Run Script build phase using the following script:
 
 ```bash
-export SENTRY_PROPERTIES=../sentry.properties
+export SENTRY_PROPERTIES=sentry.properties
 
-../node_modules/@sentry/cli/bin/sentry-cli upload-dif "$DWARF_DSYM_FOLDER_PATH"
+[[ $SENTRY_INCLUDE_NATIVE_SOURCES == "true" ]] && INCLUDE_SOURCES_FLAG="--include-sources" || INCLUDE_SOURCES_FLAG=""
+SENTRY_CLI="../node_modules/@sentry/cli/bin/sentry-cli"
+$SENTRY_CLI debug-files upload "$INCLUDE_SOURCES_FLAG"
 ```
 
 For bitcode enabled builds via iTunes Connect, additional steps are required.
@@ -79,11 +88,11 @@ If you are using nvm or notion, Xcode has trouble locating the default node bina
 
 ## Android
 
-For Android, we hook into Gradle for the source map build process. When you run `react-native link` or `yarn sentry-wizard -i reactNative -p ios android` (if react-native `> 0.60`), the Gradle files are automatically updated.
+For Android, we hook into Gradle for the source map build process. When you run `npx @sentry/wizard -i reactNative -p ios android`, the Gradle files are automatically updated. If you can't or don't want to do that, you can follow the steps below to update the files.
 
 ### Enable Gradle Integration
 
-We enable the Gradle integration in your `android/app/build.gradle` file by adding the following line after the `react.gradle` line:
+We enable the Gradle integration in your `android/app/build.gradle` file by adding the following line before the `android` options:
 
 ```groovy {filename:android/app/build.gradle}
 apply from: "../../node_modules/@sentry/react-native/sentry.gradle"
@@ -123,34 +132,30 @@ dependencies {
 }
 ```
 
-### `MainApplication.java` for React Native < 0.60
-
-For React Native versions < 0.60, make sure your `MainApplication.java` is similar to:
+If you're linking manually, make sure your `MainApplication.java` is similar to:
 
 ```java
 import io.sentry.react.RNSentryPackage;
 
 public class MainApplication extends Application implements ReactApplication {
 
- @Override
- protected List<ReactPackage> getPackages() {
- return Arrays.<ReactPackage>asList(
- new MainReactPackage(),
- new RNSentryPackage()
- );
- }
+ @Override
+ protected List<ReactPackage> getPackages() {
+ List<ReactPackage> packages = new PackageList(this).getPackages();
+ packages.add(new RNSentryPackage());
+ return packages;
+ }
 }
 ```
 
 ```kotlin
 import io.sentry.react.RNSentryPackage
 
 class MainApplication() : Application(), ReactApplication {
- override fun getPackages(): List<ReactPackage> {
- return listOf(
- MainReactPackage(),
- RNSentryPackage()
- )
+ override fun getPackages():List<ReactPackage> {
+ val packages = new PackageList(this).getPackages();
+ packages.add(new RNSentryPackage());
+ return packages;
  }
 }
 ```

src/platforms/react-native/migration.mdx

@@ -4,6 +4,49 @@ sidebar_order: 100
 description: "Learn about migrating from 1.x to 2.x to enable release health tracking and native stack traces by default."
 ---
 
+## From 4.x to 5.x
+
+The React Native SDK version 5 supports both Legacy (from RN 0.65 and above) and New Architecture (from RN 0.69 and above) as well as the new React Native Gradle Plugin (introduced in RN 0.71).
+
+### Naming and behavior changes
+
+Rename the following `Sentry.init` options:
+- `enableAutoPerformanceTracking` to `enableAutoPerformanceTracing`
+- `enableOutOfMemoryTracking` to `enableWatchdogTerminationTracking`
+- `ReactNativeTracingOptions.idleTimeout` to `ReactNativeTracingOptions.idleTimeoutMs`
+- `ReactNativeTracingOptions.maxTransactionDuration` to `ReactNativeTracingOptions.finalTimeoutMs`
+
+If you are using `TouchEventBoundary` and `accessibilityLabel` set the following:
+```javascript
+Sentry.wrap(App, { touchEventBoundaryProps: { labelName: 'accessibilityLabel' } })
+```
+
+Current stack trace for `Sentry.captureMessage` has been moved from `event.exception` to `event.threads`.
+
+Default `breadcrumb.level` is `info`, value `critical` has been removed and `log` is transformed to `debug` on iOS and Android.
+
+Bundled `sentry-cli` version has been bumped to [v2.10.0](https://github.com/getsentry/sentry-cli/releases/tag/2.10.0).
+
+### iOS specific changes
+
+The following metadata are synchronized from `sentry-cocoa` to `react-native`:
+- `tags`
+- `extra`
+- `fingerprint`
+- `level`
+- `environment`
+- `breadcrumbs`
+
+The synchronized `fingerprint` might affect grouping of issues in Sentry. React Native `event.fingerprint` is merged with iOS `fingerprint` without duplicates with RN items being first in the order.
+
+`sentry-cocoa` has been bumped to v8.0.0, please follow the related migration [here](/platforms/apple/migration/#migrating-from-7x-to-8x).
+
+`sentry-wizard` doesn't patch iOS projects for React Native 0.65 to 0.68. These versions have to be [patched manually](/platforms/react-native/manual-setup/manual-setup/#bundle-react-native-code-and-images).
+
+### Changes to Minimum Supported Versions
+
+The minimum supported iOS version has been bumped iOS 11. The minimum Android API has been bumped to 21. The minimum supported React Native version is 0.65.0.
+
 ## From 4.8.x to 4.9.x
 
 A new feature that enables sending runtime JavaScript dependencies in events for React Native apps was added in release `4.9.0`. No manual steps are required to enable this on Android builds. For iOS, you need to patch the `shellScript` in the `ios/$projectName.xcodeproj/project.pbxproj` file, where `$projectName` is likely your project's name. To do this, search for the `Bundle React Native code and images` phase and patch the `shellScript`.

src/platforms/react-native/troubleshooting.mdx

@@ -154,15 +154,14 @@ If the context is missing on Android NDK events such as breadcrumbs, user, and s
 
 ## Using node with nvm or Volta
 
-If you are using nvm or notion, Xcode has trouble locating the default node binary, which can look similar to this example:
+Xcode has trouble locating the default node binary if you're using nvm or notion. To troubleshoot this, add `node` binary path to the _Bundle React Native code and images_ build phase like this:
 
 ```bash
-dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.62.dylib
- Referenced from: /usr/local/bin/node
- Reason: image not found
+export NODE_BINARY=path/to/your/node
+# ... rest of the script
 ```
 
-In this case, type `ln -s $(which node) /usr/local/bin/node`, which tells your env to use your node binary.
+Or execute this `ln -s $(which node) /usr/local/bin/node` in your terminal.
 
 ## NavigationContainer reset the ref each render
 
@@ -172,11 +171,37 @@ If you're using `React Navigation 5` and you're not receiving transactions anymo
 
 If you experience mismatched line numbers on [sentry.io](https://sentry.io) when using RAM Bundles, this is due to a [bug](https://github.com/facebook/metro/issues/399) on the Metro tooling.
 
-## React Native 0.69 and Higher
+## Set Up SKD v4 With React Native 0.69 or Higher
 
-If you're using React Native v0.69 or higher, the auto-linking has changed and we're working on a fix. Follow the [issue](https://github.com/getsentry/sentry-react-native/issues/2267).
+To install an older version of the `@sentry/react-native`, you'll need to specify it in the install command. Similarly, you'll need to use a compatible `@sentry/wizard`, as shown in the script below.
 
-As a workaround, for now, update Sentry's `react-native.config.js` file, located in `node_modules/@sentry/react-native/react-native.config.js`.
+```bash
+yarn add @sentry/react-native@4
+npx @sentry/wizard@1 -i reactNative -p ios android
+npx pod-install
+```
+
+Before building the app check that the `android/app/build.gradle` was patched with the following Gradle integration:
+
+```groovy
+apply from: "../../node_modules/@sentry/react-native/sentry.gradle"
+```
+
+While this should work on Android, it will still fail in the `Bundle React Native code and images` build step phase on iOS. To fix this, revert the patched `shellScript` in the `ios/$projectName.xcodeproj/project.pbxproj` file, (where `$projectName` is likely your project's name). Then search for the build step phase `Bundle React Native code and images` and patch the `shellScript`.
+
+_Old_:
+
+```bash
+shellScript = "set -e\n\nWITH_ENVIRONMENT=\"../node_modules/react-native/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"../node_modules/react-native/scripts/react-native-xcode.sh\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT $REACT_NATIVE_XCODE\"\n";
+```
+
+_New_:
+
+```bash
+shellScript = "set -e\nexport SENTRY_PROPERTIES=sentry.properties\nexport EXTRA_PACKAGER_ARGS=\"--sourcemap-output $DERIVED_FILE_DIR/main.jsbundle.map\"\nWITH_ENVIRONMENT=\"../node_modules/react-native/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"../node_modules/react-native/scripts/react-native-xcode.sh\"\nSENTRY_CLI_PATH=\"../node_modules/@sentry/cli/bin/sentry-cli\"\n/bin/sh -c \"$WITH_ENVIRONMENT \\\"$SENTRY_CLI_PATH react-native xcode $REACT_NATIVE_XCODE\\\"\"";
+```
+
+If your build is failing because of outdated fields in the `react-native.config.js`, update the config file, located in `node_modules/@sentry/react-native/react-native.config.js`. This is required for React Native, v0.69. For now, newer versions only show a warning.
 
 _Old_:
 
@@ -216,21 +241,6 @@ module.exports = {
 };
 ```
 
-This should work on Android, however, on iOS, it will still fail in the `Bundle React Native code and images` build step phase and for that, you have to revert the patched `shellScript` in the `ios/$projectName.xcodeproj/project.pbxproj` file, where `$projectName` is likely your project's name.
-Search for the build step phase `Bundle React Native code and images` and patch the `shellScript`.
-
-_Old_:
-
-```bash
-shellScript = "set -e\n\nWITH_ENVIRONMENT=\"../node_modules/react-native/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"../node_modules/react-native/scripts/react-native-xcode.sh\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT $REACT_NATIVE_XCODE\"\n";
-```
-
-_New_:
-
-```bash
-shellScript = "set -e\nexport SENTRY_PROPERTIES=sentry.properties\nexport EXTRA_PACKAGER_ARGS=\"--sourcemap-output $DERIVED_FILE_DIR/main.jsbundle.map\"\nWITH_ENVIRONMENT=\"../node_modules/react-native/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"../node_modules/react-native/scripts/react-native-xcode.sh\"\nSENTRY_CLI_PATH=\"../node_modules/@sentry/cli/bin/sentry-cli\"\n/bin/sh -c \"$WITH_ENVIRONMENT \\\"$SENTRY_CLI_PATH react-native xcode $REACT_NATIVE_XCODE\\\"\"";
-```
-
 ## React Native 0.60.3 Failing Build
 
 React Native 0.60.3 tooling was unexpectedly moving source maps files, which caused the Sentry Gradle plugin to fail. This was fixed in version 0.60.4. For more detailed information, follow the [issue](https://github.com/getsentry/sentry-react-native/issues/2442).