feat: windows support (#1 by @frankcalise and @SeanBarker182)

* fix: git attrs for prettier not to bark on windows about line endings

* chore: add react-native-windows dependency

* feat(windows): initial template

* fix(app): temporarily disable native module font list

need to implement it for windows

* fix(app): windows fontFamily support

* Feature/windows modules (#16)

* stub modules

* native module linking

* import from react native

* Stub out keyboard module

* remove react native config

* gitignore generated file

* set up codegen

* Comment out tabs for now

* Remove &const

* Import from react native

* Early return in windows until we can figure out the event listener system

* Remove &const;

* Use useState until we can find a new storage system for windows

* Simplify

* ignore codegen

* include cpp & h files from app

* switch to .windows

* generate windows files

* ignore claude local changes

* Add module files

* updated lock

* document

* add back tabs

* Dont include macos

* Lint fix

* add back overrides

* implement clipboard functionality

* generated

* fix time issue

* fix imports

* updated lock

* Add system requirements section to README

* lint fix

---------

Co-authored-by: Sean Barker <theseanbarker@gmail.com>
Co-authored-by: Sean Barker <43788519+SeanBarker182@users.noreply.github.com>

Author: frankcalise

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.gitignore

@@ -49,3 +49,7 @@ DerivedData
 ios/.xcode.env.local
 
 macos/.xcode.env.local
+
+msbuild.binlog
+
+.claude/*

IRNativeModules.podspec

@@ -17,8 +17,10 @@ Pod::Spec.new do |s|
     "macos/build/generated/colocated/**/*.{h,m,mm,c,cpp,swift}"
   ]
 
-  # Exclude problematic files if needed
-  # s.exclude_files = []
+  # Exclude Windows-specific sources from macOS build
+  s.exclude_files = [
+    "app/**/*.windows.{h,cpp}"
+  ]
 
   s.dependency 'React-Core'
   s.dependency 'ReactCodegen'

NuGet.config

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+  <packageSources>
+    <clear />
+    <add key="react-native" value="https://pkgs.dev.azure.com/ms/react-native/_packaging/react-native-public/nuget/v3/index.json" />
+    <add key="Nuget.org" value="https://api.nuget.org/v3/index.json" />
+  </packageSources>
+  <disabledPackageSources>
+    <clear />
+  </disabledPackageSources>  
+</configuration>

README.md

@@ -24,7 +24,9 @@ And, best of all, Reactotron is completely open source and free to use!
 
 ## Getting Started
 
-Currently, you can only run Reactotron macOS by cloning the repo and running it locally.
+Currently, you can only run Reactotron by cloning the repo and running it locally.
+
+### macOS Development
 
 ```sh
 git clone https://github.com/infinitered/reactotron-macos.git
@@ -37,6 +39,36 @@ npm run macos
 npm run macos-release
 ```
 
+### Windows Development  
+
+#### System Requirements
+
+First, install the system requirements for React Native Windows: https://microsoft.github.io/react-native-windows/docs/rnw-dependencies
+
+**Alternative**: If you experience issues with the official `rnw-dependencies.ps1` script, consider using Josh Yoes' improved setup process: https://github.com/joshuayoes/ReactNativeWindowsSandbox
+
+#### Running the App
+
+```sh
+git clone https://github.com/infinitered/reactotron-macos.git
+cd reactotron-macos
+npm install
+npm run windows-link
+npm run start
+npm run windows
+# for release builds
+npm run windows-release
+```
+
+### Cross-Platform Native Development
+
+Both platforms use unified commands for native module development:
+
+- **macOS**: `npm run pod` - Links native modules using CocoaPods
+- **Windows**: `npm run windows-link` - Links native modules using MSBuild
+
+See [Making a TurboModule](./docs/Making-a-TurboModule.md) for detailed native development instructions.
+
 ## Enabling Reactotron in your app
 
 > [!NOTE]

app/components/DetailPanel.tsx

@@ -5,6 +5,7 @@ import { TreeView } from "./TreeView"
 import ActionButton from "./ActionButton"
 import IRClipboard from "../native/IRClipboard/NativeIRClipboard"
 import { $flex } from "../theme/basics"
+import { formatTime } from "../utils/formatTime"
 
 type DetailPanelProps = {
   selectedItem: TimelineItem | null
@@ -41,7 +42,7 @@ export function DetailPanel({ selectedItem, onClose }: DetailPanelProps) {
             </Text>
           </View>
           <View style={$headerInfo()}>
-            <Text style={$headerInfoText()}>{new Date(selectedItem.date).toLocaleString()}</Text>
+            <Text style={$headerInfoText()}>{formatTime(new Date(selectedItem.date))}</Text>
             {!!selectedItem.deltaTime && (
               <Text style={$headerInfoText()}>+{selectedItem.deltaTime}ms</Text>
             )}

app/components/Icon.tsx

@@ -1,6 +1,6 @@
 import { Image, ImageStyle, StyleProp, View, ViewProps, ViewStyle } from "react-native"
 
-import { useTheme, useThemeName } from "../theme/theme"
+import { useTheme } from "../theme/theme"
 
 export type IconTypes = keyof typeof iconRegistry
 

app/components/Separator.tsx

@@ -1,5 +1,5 @@
 import { themed } from "../theme/theme"
-import { View, ViewStyle } from "react-native-macos"
+import { View, ViewStyle } from "react-native"
 
 /**
  * A simple separator component that is used to separate items in a list.

app/components/Sidebar/AnimatedReactotronLogo.tsx

@@ -1,5 +1,5 @@
-import { themed, useThemeName, withTheme } from "../../theme/theme"
-import { Animated, ImageStyle, View, ViewStyle } from "react-native-macos"
+import { themed, useThemeName } from "../../theme/theme"
+import { Animated, ImageStyle, View, ViewStyle } from "react-native"
 
 type AnimatedReactotronLogoProps = {
   progress: Animated.Value // 0 = collapsed, 1 = expanded (animated in the sidebar)

app/components/Sidebar/Sidebar.tsx

@@ -1,6 +1,5 @@
-import React from "react"
 import { Animated, View, ViewStyle, StyleSheet } from "react-native"
-import { themed, useTheme, useThemeName, withTheme } from "../../theme/theme"
+import { themed } from "../../theme/theme"
 import { AnimatedReactotronLogo } from "./AnimatedReactotronLogo"
 import { useSidebarAnimationProgress } from "./useSidebarAnimationProgress"
 import { SidebarMenu } from "./SidebarMenu"
@@ -12,7 +11,6 @@ const EXPANDED_WIDTH = 250
 const COLLAPSED_WIDTH = 60
 
 export const Sidebar = () => {
-  const theme = useTheme()
   const { progress, mounted } = useSidebarAnimationProgress()
 
   const animatedWidth = progress.interpolate({
@@ -21,7 +19,7 @@ export const Sidebar = () => {
   })
 
   return (
-    <Animated.View style={{ width: animatedWidth, overflow: "hidden" }}>
+    <Animated.View style={[{ width: animatedWidth }, $overflowHidden]}>
       <View style={$container()}>
         <View style={$content()}>
           <AnimatedReactotronLogo progress={progress} mounted={mounted} />
@@ -32,6 +30,10 @@ export const Sidebar = () => {
   )
 }
 
+const $overflowHidden: ViewStyle = {
+  overflow: "hidden",
+}
+
 const $container = themed<ViewStyle>((theme) => ({
   flex: 1,
   overflow: "hidden",