docs(react-native): Bugsee React Native SDK 7.x (beta) documentation

cspell.json

@@ -2,6 +2,16 @@
     "version": "0.2",
     "language": "en",
     "words": [
+        "consteval",
+        "prebuild",
+        "destroot",
+        "rootproject",
+        "Slurper",
+        "libreactnative",
+        "libhermesvm",
+        "libc",
+        "hermesc",
+        "udpsocket",
         "DCIM",
         "backgrounding",
         "debuggerd",
@@ -72,6 +82,8 @@
         "androidx",
         "Bugsee",
         "bugsee",
+        "creditcard",
+        "cardnumber",
         "symbolicate",
         "symbolication",
         "symbolicated",
@@ -231,6 +243,18 @@
         "sandboxing",
         "libil",
         "unbreak",
-        "Podspec"
+        "Podspec",
+        "javascriptcore",
+        "reactnative",
+        "slashy",
+        "avplayer",
+        "ABRT",
+        "SEGV",
+        "oslog",
+        "swipeable",
+        "collapsable",
+        "RGBA",
+        "RRGGBB",
+        "RRGGBBAA"
     ]
 }

docs/index.md

@@ -12,7 +12,7 @@ Using Bugsee on mobile devices requires installation of Bugsee lightweight SDK:
 * [Installing iOS SDK](/sdk/ios/installation/)
 * [Installing Android SDK](/sdk/android/installation/)
 * [Installing Cordova SDK](/sdk/cordova/installation/)
-* [Installing React Native SDK](/sdk/react_native/installation/)
+* [Installing React Native SDK](/sdk/react_native/v6/installation/)
 * [Installing Flutter SDK](/sdk/flutter/installation/)
 * [Installing Unity SDK](/sdk/unity/installation/)
 * [Installing KMP SDK (Beta)](/sdk/kmp/installation/)
@@ -111,7 +111,7 @@ Bugsee has a very rich feature set, yet on some platforms we managed to achieve
   		<td><svg width="12" height="12"><path d="M1 4 L5 8 L11 1" fill="none" stroke="currentColor" stroke-width="3" /></svg></td>
   		<td><a href="/sdk/android/network/">View</a></td>
   		<td><svg width="12" height="12"><path d="M1 4 L5 8 L11 1" fill="none" stroke="currentColor" stroke-width="3" /></svg></td>
-  		<td><a href="/sdk/react_native/network/">View</a></td>
+  		<td><a href="/sdk/react_native/v6/network/">View</a></td>
 		<td><svg width="12" height="12"><path d="M1 4 L5 8 L11 1" fill="none" stroke="currentColor" stroke-width="3" /></svg></td>
   		<td><svg width="12" height="12"><path d="M1 4 L5 8 L11 1" fill="none" stroke="currentColor" stroke-width="3" /></svg></td>
   		<td><a href="/sdk/dotnet/network/">View</a></td>
@@ -133,7 +133,7 @@ Bugsee has a very rich feature set, yet on some platforms we managed to achieve
   		<td><a href="/sdk/ios/privacy/video/">View</a></td>
   		<td><a href="/sdk/android/privacy/video/">View</a></td>
   		<td><a href="/sdk/cordova/privacy/video/">View</a></td>
-  		<td><a href="/sdk/react_native/privacy/video/">View</a></td>
+  		<td><a href="/sdk/react_native/v6/privacy/video/">View</a></td>
 		<td><a href="/sdk/flutter/privacy/video/">View</a></td>
   		<td><a href="/sdk/unity/privacy/video/">View</a></td>
 		<td><a href="/sdk/dotnet/privacy/video/">View</a></td>
@@ -144,7 +144,7 @@ Bugsee has a very rich feature set, yet on some platforms we managed to achieve
   		<td><a href="/sdk/ios/symbolication/">View</a></td>
   		<td><a href="/sdk/android/issue-detection/crashes/">View</a></td>
   		<td><svg width="12" height="12"><path d="M1 4 L5 8 L11 1" fill="none" stroke="currentColor" stroke-width="3" /></svg></td>
-  		<td><a href="/sdk/react_native/crashes/">View</a></td>
+  		<td><a href="/sdk/react_native/v6/crashes/">View</a></td>
 		<td><a href="/sdk/flutter/symbolication/">View</a></td>
 		<td><a href="/sdk/unity/crashes/">View</a></td>
 		<td><a href="/sdk/dotnet/symbolication/">View</a></td>
@@ -155,7 +155,7 @@ Bugsee has a very rich feature set, yet on some platforms we managed to achieve
 		<td><a href="/sdk/ios/logs/">View</a></td>
 		<td><a href="/sdk/android/logs/">View</a></td>
 		<td><a href="/sdk/cordova/logs/">View</a></td>
-		<td><a href="/sdk/react_native/logs/">View</a></td>
+		<td><a href="/sdk/react_native/v6/logs/">View</a></td>
 		<td><a href="/sdk/flutter/logs/">View</a></td>
 		<td><a href="/sdk/unity/logs/">View</a></td>
 		<td><a href="/sdk/dotnet/logs/">View</a></td>
@@ -166,7 +166,7 @@ Bugsee has a very rich feature set, yet on some platforms we managed to achieve
 		<td><a href="/sdk/ios/custom/">View</a></td>
 		<td><a href="/sdk/android/events-and-traces#custom-events">View</a></td>
 		<td><a href="/sdk/cordova/custom/">View</a></td>
-		<td><a href="/sdk/react_native/custom/#custom-events">View</a></td>
+		<td><a href="/sdk/react_native/v6/custom/#custom-events">View</a></td>
 		<td><a href="/sdk/flutter/custom/#custom-events">View</a></td>
 		<td><a href="/sdk/unity/custom/#custom-events">View</a></td>
 		<td><a href="/sdk/dotnet/custom/#custom-events">View</a></td>
@@ -177,7 +177,7 @@ Bugsee has a very rich feature set, yet on some platforms we managed to achieve
 		<td><a href="/sdk/ios/custom/">View</a></td>
 		<td><a href="/sdk/android/events-and-traces#custom-traces">View</a></td>
 		<td><a href="/sdk/cordova/custom/">View</a></td>
-		<td><a href="/sdk/react_native/custom/#custom-traces">View</a></td>
+		<td><a href="/sdk/react_native/v6/custom/#custom-traces">View</a></td>
 		<td><a href="/sdk/flutter/custom/#custom-traces">View</a></td>
 		<td><a href="/sdk/unity/custom/#custom-traces">View</a></td>
 		<td><a href="/sdk/dotnet/custom/#custom-traces">View</a></td>
@@ -188,7 +188,7 @@ Bugsee has a very rich feature set, yet on some platforms we managed to achieve
 		<td><a href="/sdk/ios/custom/">View</a></td>
 		<td><a href="/sdk/android/user-session-data#user-and-session-attributes">View</a></td>
 		<td><a href="/sdk/cordova/custom/#usersession-attributes">View</a></td>
-		<td><a href="/sdk/react_native/custom/#usersession-attributes">View</a></td>
+		<td><a href="/sdk/react_native/v6/custom/#usersession-attributes">View</a></td>
 		<td><a href="/sdk/flutter/custom/#usersession-attributes">View</a></td>
 		<td><a href="/sdk/unity/custom/#usersession-attributes">View</a></td>
 		<td><a href="/sdk/dotnet/custom/#usersession-attributes">View</a></td>
@@ -199,7 +199,7 @@ Bugsee has a very rich feature set, yet on some platforms we managed to achieve
 		<td><a href="/sdk/ios/custom/">View</a></td>
 		<td><a href="/sdk/android/report-handler#attachments">View</a></td>
 		<td><a href="/sdk/cordova/custom/">View</a></td>
-		<td><a href="/sdk/react_native/custom/#file-attachments">View</a></td>
+		<td><a href="/sdk/react_native/v6/custom/#file-attachments">View</a></td>
 		<td><a href="/sdk/flutter/custom/#file-attachments">View</a></td>
 		<td><a href="/sdk/unity/custom/#file-attachments">View</a></td>
 		<td><a href="/sdk/dotnet/custom/">View</a></td>

docs/sdk/ios/release-notes.md

@@ -627,7 +627,7 @@ It is controlled by sanitizeNetworkData/BugseeSanitizeNetworkDataKey option (def
 - Feature: Refactor logging capturing system to produce cleaner logs
 - Feature: Better handling of multi-window hierarchies, lower cpu load.
 - Feature: Auto-hide CC text fields in common payment libraries (Stripe, Braintree, card.io)
-- Feature: Add React native custom logger [read more](/sdk/react_native/logs/)
+- Feature: Add React native custom logger [read more](/sdk/react_native/v6/logs/)
 - Bug fix: Incorrect addresses in C++ exceptions in some cases
 
 

docs/sdk/react_native/appearance.md

@@ -0,0 +1,101 @@
+---
+title: "Appearance"
+description: "Customizing the colors of the Bugsee report dialog in React Native SDK 7.x with Bugsee.appearance: the color properties on each platform, reading them back, and errors."
+sidebar_position: 20
+slug: "/sdk/react_native/appearance"
+---
+
+:::warning[Beta]
+This page documents Bugsee React Native SDK **7.x**, which is in beta and can change between betas. The stable release is **6.x**: see the [6.x documentation](/sdk/react_native/v6/installation). Upgrading? See [Migrating from 6.x to 7.x](/sdk/react_native/migration).
+:::
+
+`Bugsee.appearance` sets the colors of the bug report dialog, so that it matches your app. It is one surface for both platforms: each property sets one color of the report dialog, on Android, on iOS, or on both.
+
+The colors of the feedback chat are set on the feedback package's own `appearance`; see [Feedback](/sdk/react_native/feedback#appearance).
+
+## Setting colors
+
+Assign a hex color string to a property:
+
+```ts
+import { Platform } from 'react-native';
+import Bugsee from '@bugsee/react-native';
+
+Bugsee.appearance.backgroundColor = '#101828';
+Bugsee.appearance.textColor = '#ffffff';
+Bugsee.appearance.versionColor = '#98a2b3';
+
+if (Platform.OS === 'android') {
+  Bugsee.appearance.actionBarColor = '#1d2939';
+  Bugsee.appearance.actionBarTextColor = '#ffffff';
+} else {
+  Bugsee.appearance.navigationBarColor = '#1d2939';
+  Bugsee.appearance.cellBackgroundColor = '#1d2939';
+}
+```
+
+- Colors are CSS hex strings: `#RGB`, `#RGBA`, `#RRGGBB` or `#RRGGBBAA`, with alpha last. The `#` is optional, and `#RRGGBB` is opaque.
+- The color is applied during the assignment, synchronously.
+- Set the colors in your startup code, before a report dialog can open. You can set them before or after `Bugsee.launch`. Colors are kept in memory only, on both platforms, so set them at every app start.
+
+## Color properties
+
+Each property exists on Android, on iOS, or on both:
+
+| Property | Android | iOS |
+| --- | --- | --- |
+| `backgroundColor` | `ReportAppearance.BackgroundColor`: the dialog's background. | `reportBackgroundColor` |
+| `textColor` | `ReportAppearance.TextColor`: text and input text. | `reportTextColor`: label text. |
+| `versionColor` | `ReportAppearance.VersionColor`: the version label. | `reportVersionColor`: the version label. |
+| `actionBarColor` | `ReportAppearance.ActionBarColor`: the action bar's background. | |
+| `actionBarTextColor` | `ReportAppearance.ActionBarTextColor`: the action bar's button text. | |
+| `actionBarButtonBackgroundClickedColor` | `ReportAppearance.ActionBarButtonBackgroundClickedColor`: an action bar button's background while pressed. | |
+| `editTextBackgroundColor` | `ReportAppearance.EditTextBackgroundColor`: the input fields' background. | |
+| `hintColor` | `ReportAppearance.HintColor`: the input fields' hint text. | |
+| `severityLabelActiveColor` | `ReportAppearance.SeverityLabelActiveColor`: the selected severity label. | |
+| `cellBackgroundColor` | | `reportCellBackgroundColor`: the background of the table cells. |
+| `navigationBarColor` | | `reportNavigationBarColor` |
+| `placeholderColor` | | `reportPlaceholderColor`: the input fields' placeholder text. |
+| `sendButtonColor` | | `reportSendButtonColor`. **Not applied** in iOS SDK 7.0.0-beta7, whose report screen uses the system Done button. |
+| `closeButtonColor` | | `reportCloseButtonColor`. **Not applied** in iOS SDK 7.0.0-beta7, whose report screen uses the system Cancel button. |
+
+Check `Platform.OS` before setting a property that exists on one platform only: setting it on the other throws.
+
+The report dialog has more appearance settings than these colors. The field placeholder texts (`ReportAppearance.SummaryPlaceholder` and the others on Android, `reportSummaryPlaceholder` and the others on iOS), the title of the Android notification, and the iOS theme `style` are not available from JavaScript in this beta.
+
+## Reading colors
+
+Reading a property returns the color in effect, as a lowercase `#rrggbbaa` string, alpha last:
+
+```ts
+import Bugsee from '@bugsee/react-native';
+
+const background = Bugsee.appearance.backgroundColor; // for example '#101828ff', or undefined
+```
+
+| Platform | A color you have not set |
+| --- | --- |
+| Android | `undefined`: only the colors you set are stored. |
+| iOS | The iOS theme's default for that color. |
+
+Reading a property that does not exist on the running platform returns `undefined`.
+
+## Errors
+
+An assignment that is rejected throws, and changes nothing:
+
+| Assignment | Thrown |
+| --- | --- |
+| A value that is not a string | `TypeError` |
+| A string that is not a hex color | `RangeError` |
+| A property that does not exist on the running platform | `RangeError` |
+| A name that is not one of the properties above (a typo, for example) | `RangeError` |
+| A color that could not be applied | `Error` (`… was not applied`) |
+
+Error messages name the property, never the value you assigned.
+
+## Related pages
+
+- [Feedback](/sdk/react_native/feedback#appearance): the feedback chat's colors.
+- [Bug reporting](/sdk/react_native/manual/bug-reporting): the report dialog and its fields.
+- Native SDK reference: [Android appearance](/sdk/android/appearance#reportappearance) and [iOS appearance](/sdk/ios/appearance).