TRON-10: Async Storage not Required (#1464)

## Please verify the following:

- [x] `yarn build-and-test:local` passes
- [ ] I have added tests for any new features, if relevant
- [ ] `README.md` (or relevant documentation) has been updated with your
changes

## Describe your PR
When an application does not have Async Storage or other persistent
storage mechanism configured, Reactotron will create a new connection
and device each time the application is reloaded.

### Reproduce Behavior
Use the example application inside of the project and comment out line
8:
```
// import AsyncStorage from "@react-native-async-storage/async-storage"
```

and line 36:
```
// reactotron.setAsyncStorageHandler?.(AsyncStorage)
```

This will deactivate Async Storage and no longer persist the generated
unique `clientId` coming from the websocket server.

### Research & Constraints
* Reactotron currently works with Expo Go. In order to maintain that
support, we cannot use packages like `react-native-device-info` as it
has native components that would need to be installed.
* `expo-device` did not provide any additional functionality on top of
what we already had access to.
* Websocks do have a unique key, but we'd have to store that key on the
device...
* Device orientation should not change `clientId`. (thanks @frankcalise)
* Switching applications on the same simulator should not mingle their
timelines.

### Solution
When Async Storage or the like is not configured, generate a device
fingerprint as a _best effort_ to keep the connected devices stable.
This seems like a good enough solution as there are no additional
dependencies and working with information that we already had.
| Before | After |
|--------|--------|
| <video
src="https://github.com/infinitered/reactotron/assets/151139/5c18642b-121f-41cf-9864-e32a1019dc1a"
/> | <video
src="https://github.com/infinitered/reactotron/assets/151139/264eedfd-65e8-4781-9d5d-d55006138b53"
/> |


## Additional Notes
Do we have documentation in Reactotron for configuring MMKV or Expo
SecureStore?

Author: morganick

lib/reactotron-core-client/src/client-options.ts

@@ -85,7 +85,7 @@ export interface ClientOptions<Client> extends LifeCycleMethods {
   /**
    * Get the client id provided by the server
    */
-  getClientId?: () => Promise<string>
+  getClientId?: (name: string) => Promise<string>
 
   proxyHack?: boolean
 }

lib/reactotron-core-client/src/reactotron-core-client.ts

@@ -282,7 +282,7 @@ export class ReactotronImpl implements ReactotronCore {
 
       const getClientIdPromise = getClientId || emptyPromise
 
-      getClientIdPromise().then((clientId) => {
+      getClientIdPromise(name).then((clientId) => {
         this.isReady = true
         // introduce ourselves
         this.send("client.intro", {

lib/reactotron-react-native/src/reactotron-react-native.ts

@@ -65,11 +65,29 @@ const DEFAULTS: ClientOptions<ReactotronReactNative> = {
     ...getReactNativeDimensions(),
   },
   /* eslint-disable @typescript-eslint/no-use-before-define */
-  getClientId: async () => {
+  getClientId: async (name: string = "") => {
     if (reactotron.asyncStorageHandler) {
       return reactotron.asyncStorageHandler.getItem(REACTOTRON_ASYNC_CLIENT_ID)
     }
 
+    // Generate clientId based on the device info
+    const { screenWidth, screenHeight, screenScale } = getReactNativeDimensions()
+
+    // Accounting for screen rotation
+    const dimensions = [screenWidth, screenHeight].sort().join("-")
+
+    tempClientId = [
+      name,
+      Platform.OS,
+      Platform.Version,
+      constants.systemName,
+      constants.Model,
+      dimensions,
+      screenScale,
+    ]
+      .filter(Boolean)
+      .join("-")
+
     return tempClientId
   },
   setClientId: async (clientId: string) => {