feat: Add About Reactotron modal and surface app ID

app/app.tsx

@@ -7,7 +7,7 @@
 import { DevSettings, NativeModules, StatusBar, View, type ViewStyle } from "react-native"
 import { connectToServer } from "./state/connectToServer"
 import { useTheme, themed } from "./theme/theme"
-import { useEffect, useMemo } from "react"
+import { useEffect, useMemo, useState } from "react"
 import { TimelineScreen } from "./screens/TimelineScreen"
 import { useMenuItem } from "./utils/useMenuItem"
 import { Titlebar } from "./components/Titlebar/Titlebar"
@@ -19,6 +19,7 @@ import { HelpScreen } from "./screens/HelpScreen"
 import { TimelineItem } from "./types"
 import { PortalHost } from "./components/Portal"
 import { StateScreen } from "./screens/StateScreen"
+import { AboutModal } from "./components/AboutModal"
 
 if (__DEV__) {
   // This is for debugging Reactotron with ... Reactotron!
@@ -31,11 +32,19 @@ function App(): React.JSX.Element {
   const { toggleSidebar } = useSidebar()
   const [activeItem, setActiveItem] = useGlobal<MenuItemId>("sidebar-active-item", "logs")
   const [, setTimelineItems] = withGlobal<TimelineItem[]>("timelineItems", [])
+  const [aboutVisible, setAboutVisible] = useState(false)
 
   const menuConfig = useMemo(
     () => ({
-      remove: ["File", "Edit", "Format"],
+      remove: ["File", "Edit", "Format", "Reactotron > About Reactotron"],
       items: {
+        Reactotron: [
+          {
+            label: "About Reactotron",
+            position: 0,
+            action: () => setAboutVisible(true),
+          },
+        ],
         View: [
           {
             label: "Toggle Sidebar",
@@ -93,7 +102,7 @@ function App(): React.JSX.Element {
         ],
       },
     }),
-    [toggleSidebar],
+    [toggleSidebar, setActiveItem],
   )
 
   useMenuItem(menuConfig)
@@ -131,6 +140,7 @@ function App(): React.JSX.Element {
         <View style={$contentContainer}>{renderActiveItem()}</View>
       </View>
       <PortalHost />
+      <AboutModal visible={aboutVisible} onClose={() => setAboutVisible(false)} />
     </View>
   )
 }

app/components/AboutModal.tsx

@@ -0,0 +1,154 @@
+import {
+  Image,
+  NativeModules,
+  Pressable,
+  Text,
+  View,
+  type ImageStyle,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native"
+import { themed } from "../theme/theme"
+import { Portal } from "./Portal"
+import { getReactotronAppId } from "../state/connectToServer"
+import Clipboard from "../native/IRClipboard/NativeIRClipboard"
+import { useState } from "react"
+
+interface AboutModalProps {
+  visible: boolean
+  onClose: () => void
+}
+
+export function AboutModal({ visible, onClose }: AboutModalProps) {
+  const [copied, setCopied] = useState(false)
+  if (!visible) return null
+
+  const copyToClipboard = () => {
+    Clipboard.setString(reactotronAppId)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 3000)
+  }
+
+  const reactotronAppId = getReactotronAppId()
+  const appVersion: string = require("../../package.json").version
+  const appBuild: string =
+    (NativeModules as any)?.PlatformConstants?.appBuildVersion ??
+    (NativeModules as any)?.PlatformConstants?.CFBundleVersion ??
+    ""
+
+  return (
+    <Portal name="about-modal">
+      <View style={$backdrop()}>
+        <Pressable style={$backdropTouchable} onPress={onClose} />
+
+        <View style={$card()}>
+          <View style={$header()}>
+            <Image
+              source={require("../../assets/images/reactotronLogo.png")}
+              style={$logo()}
+              resizeMode="contain"
+            />
+            <Text style={$title()}>Reactotron</Text>
+            <Text style={$bodyText()}>Copyright © 2025 Infinite Red, Inc.</Text>
+            <Text style={$bodyText()}>{`Version ${appVersion}${
+              appBuild ? ` (${appBuild})` : ""
+            }`}</Text>
+            <Pressable
+              style={[$uuidButton(), $button(), $linkContainer()]}
+              onPress={copyToClipboard}
+            >
+              <Text style={$bodyText()}>{copied ? "Copied!" : `UUID: ${reactotronAppId}`}</Text>
+            </Pressable>
+          </View>
+
+          <View style={$footer()}>
+            <Pressable style={[$button(), $linkContainer()]} onPress={onClose}>
+              <Text style={$buttonText()}>Close</Text>
+            </Pressable>
+          </View>
+        </View>
+      </View>
+    </Portal>
+  )
+}
+
+const $backdrop = themed<ViewStyle>(({ colors }) => ({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: colors.background,
+  alignItems: "center",
+  justifyContent: "center",
+}))
+
+const $backdropTouchable: ViewStyle = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  cursor: "default",
+}
+
+const $card = themed<ViewStyle>(({ colors, spacing }) => ({
+  width: 520,
+  maxWidth: "90%",
+  backgroundColor: colors.cardBackground,
+  borderColor: colors.border,
+  borderWidth: 1,
+  borderRadius: spacing.sm,
+  overflow: "hidden",
+}))
+
+const $header = themed<ViewStyle>(({ spacing }) => ({
+  alignItems: "center",
+  padding: spacing.lg,
+  gap: spacing.sm,
+}))
+
+const $logo = themed<ImageStyle>(() => ({
+  width: 64,
+  height: 64,
+}))
+
+const $title = themed<TextStyle>(({ typography, colors }) => ({
+  fontSize: typography.heading,
+  color: colors.mainText,
+}))
+
+const $bodyText = themed<TextStyle>(({ colors }) => ({
+  color: colors.mainText,
+}))
+
+const $footer = themed<ViewStyle>(({ spacing, colors }) => ({
+  borderTopColor: colors.border,
+  borderTopWidth: 1,
+  padding: spacing.md,
+  alignItems: "flex-end",
+}))
+
+const $button = themed<ViewStyle>(({ colors, spacing }) => ({
+  backgroundColor: colors.background,
+  borderColor: colors.border,
+  borderWidth: 1,
+  paddingHorizontal: spacing.md,
+  paddingVertical: spacing.xs,
+  borderRadius: spacing.xs,
+}))
+
+const $buttonText = themed<TextStyle>(({ colors }) => ({
+  color: colors.mainText,
+}))
+
+const $linkContainer = themed<ViewStyle>(() => ({
+  cursor: "pointer",
+}))
+
+const $uuidButton = themed<ViewStyle>(({ spacing }) => ({
+  marginTop: spacing.lg,
+  alignItems: "center",
+  justifyContent: "center",
+  width: "90%",
+}))

app/components/Portal.tsx

@@ -46,7 +46,9 @@ export function PortalHost() {
     // Listen for portal changes and force re-render when they occur
     const listener = () => forceUpdate({})
     listeners.add(listener)
-    return () => listeners.delete(listener)
+    return () => {
+      listeners.delete(listener)
+    }
   }, [])
 
   return (

app/components/Sidebar/Sidebar.tsx

@@ -20,7 +20,6 @@ export const Sidebar = () => {
     inputRange: [0, 1],
     outputRange: [COLLAPSED_WIDTH, EXPANDED_WIDTH],
   })
-  console.log("progress", progress)
 
   return (
     <Animated.View style={[{ width: animatedWidth }, $overflowHidden]}>