Fix frozen unknown device ID for new accounts (#11449)

src/analytics/identifiers/device.ts

@@ -1,3 +1,4 @@
+import {useSyncExternalStore} from 'react'
 import uuid from 'react-native-uuid'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 
@@ -24,3 +25,23 @@ export function getDeviceIdOrThrow() {
   }
   return id
 }
+
+function subscribeToDeviceId(onChange: () => void) {
+  const sub = device.addOnValueChangedListener(['deviceId'], onChange)
+  return () => sub.remove()
+}
+
+/**
+ * Reads the device ID for use during render. The app awaits
+ * `getAndMigrateDeviceId` before booting (see `setupDeviceId` in
+ * `analytics/index.tsx`), so this is normally set on first read.
+ *
+ * Subscribing rather than reading storage directly means a late write - a
+ * caller that mounts before the migration resolves - still propagates, instead
+ * of leaving consumers pinned to `undefined` for the lifetime of the component.
+ * `useSyncExternalStore` re-evaluates the snapshot every render, so there's no
+ * gap between the initial read and the subscription.
+ */
+export function useDeviceId() {
+  return useSyncExternalStore(subscribeToDeviceId, getDeviceId)
+}

src/analytics/index.tsx

@@ -20,6 +20,7 @@ import {
   getAndMigrateDeviceId,
   getDeviceId,
   getInitialSessionId,
+  useDeviceId,
   useSessionId,
 } from '#/analytics/identifiers'
 import {
@@ -178,6 +179,7 @@ export function AnalyticsContext({
       )
     }
   }
+  const deviceId = useDeviceId() ?? 'unknown'
   const sessionId = useSessionId()
   const geolocation = useGeolocationServiceResponse()
   const parentContext = useContext(Context)
@@ -197,6 +199,7 @@ export function AnalyticsContext({
       ...metadata,
       base: {
         ...parentContext.metadata.base,
+        deviceId,
         sessionId,
         isBetaUser,
       },
@@ -217,7 +220,7 @@ export function AnalyticsContext({
       },
     }
     return context
-  }, [parentContext, metadata, sessionId, isBetaUser, geolocation])
+  }, [parentContext, metadata, deviceId, sessionId, isBetaUser, geolocation])
   return <Context.Provider value={childContext}>{children}</Context.Provider>
 }