0
# Reactotron React Native
1

2
Reactotron React Native is a development tool that provides debugging, inspection, and diagnostic capabilities specifically for React Native applications. It offers powerful plugins for tracking network requests, AsyncStorage operations, global errors, and more, with a real-time connection to the Reactotron desktop app.
3

4
## Package Information
5

6
- **Package Name**: reactotron-react-native
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install reactotron-react-native`
10

11
## Core Imports
12

13
```typescript
14
import Reactotron from "reactotron-react-native";
15
```
16

17
For specific plugins:
18

19
```typescript
20
import { 
21
  asyncStorage, 
22
  networking, 
23
  trackGlobalErrors, 
24
  trackGlobalLogs,
25
  overlay,
26
  openInEditor,
27
  storybook,
28
  devTools
29
} from "reactotron-react-native";
30
```
31

32
## Basic Usage
33

34
```typescript
35
import Reactotron from "reactotron-react-native";
36
import AsyncStorage from "@react-native-async-storage/async-storage";
37

38
// Configure and start Reactotron
39
const reactotron = Reactotron
40
  .setAsyncStorageHandler(AsyncStorage)
41
  .configure({ name: "MyApp" })
42
  .useReactNative({
43
    asyncStorage: true,
44
    networking: true,
45
    errors: true,
46
    overlay: true,
47
  })
48
  .connect();
49

50
// Use in your app
51
reactotron.log("App started");
52
```
53

54
## Architecture
55

56
Reactotron React Native is built around several key components:
57

58
- **Core Client**: Based on reactotron-core-client with React Native specific defaults
59
- **Plugin System**: Modular plugins that can be enabled/disabled individually
60
- **WebSocket Connection**: Real-time communication with Reactotron desktop app
61
- **AsyncStorage Integration**: Optional AsyncStorage tracking and client ID persistence
62
- **React Native Hooks**: Deep integration with React Native internals for debugging
63

64
## Capabilities
65

66
### Core Client Interface
67

68
Main Reactotron client interface with all essential methods for configuration, connection, and logging.
69

70
```typescript { .api }
71
interface ReactotronReactNative extends ReactotronCore {
72
  configure(options: ClientOptions<this>): this;
73
  connect(): this;
74
  use<P extends PluginCreator<this>>(pluginCreator: P): this;
75
  send<Type extends string, Payload>(type: Type, payload?: Payload, important?: boolean): void;
76
  display(config: DisplayConfig): void;
77
  startTimer(): () => number;
78
  close(): void;
79
  
80
  // Logging methods (from logger plugin)
81
  log(...args: any[]): void;
82
  logImportant(...args: any[]): void;
83
  debug(...args: any[]): void;
84
  warn(...args: any[]): void;
85
  error(message: string, stack?: string): void;
86
  
87
  // Benchmarking methods
88
  benchmark(title?: string): void;
89
  
90
  // State methods
91
  reportError(error: any): void;
92
  
93
  // React Native specific methods
94
  useReactNative(options?: UseReactNativeOptions): this;
95
  setAsyncStorageHandler(asyncStorage: AsyncStorageStatic): this;
96
  asyncStorageHandler?: AsyncStorageStatic;
97
}
98

99
interface DisplayConfig {
100
  name: string;
101
  value?: object | string | number | boolean | null | undefined;
102
  preview?: string;
103
  image?: string | { uri: string };
104
  important?: boolean;
105
}
106
```
107

108
### Core Configuration
109

110
Main client interface for configuring Reactotron with React Native specific settings and plugin management.
111

112
```typescript { .api }
113
interface ReactotronReactNative extends ReactotronCore {
114
  useReactNative(options?: UseReactNativeOptions): this;
115
  setAsyncStorageHandler(asyncStorage: AsyncStorageStatic): this;
116
  asyncStorageHandler?: AsyncStorageStatic;
117
}
118

119
interface UseReactNativeOptions {
120
  errors?: TrackGlobalErrorsOptions | boolean;
121
  log?: boolean;
122
  editor?: OpenInEditorOptions | boolean;
123
  overlay?: boolean;
124
  asyncStorage?: AsyncStorageOptions | boolean;
125
  networking?: NetworkingOptions | boolean;
126
  storybook?: boolean;
127
  devTools?: boolean;
128
}
129

130
const reactNativeCorePlugins: PluginCreator<ReactotronCore>[];
131
```
132

133
### Constants
134

135
```typescript { .api }
136
const REACTOTRON_ASYNC_CLIENT_ID: string;
137
```
138

139
[Core Configuration](./core-configuration.md)
140

141
### AsyncStorage Tracking
142

143
Monitors and logs AsyncStorage operations including set, get, remove, and multi-operations with configurable ignore patterns.
144

145
```typescript { .api }
146
function asyncStorage(options?: AsyncStorageOptions): PluginCreator;
147

148
interface AsyncStorageOptions {
149
  ignore?: string[];
150
}
151
```
152

153
[AsyncStorage Tracking](./async-storage.md)
154

155
### Network Monitoring
156

157
Intercepts and logs HTTP requests and responses with support for content type filtering and URL pattern exclusion.
158

159
```typescript { .api }
160
function networking(options?: NetworkingOptions): PluginCreator;
161

162
interface NetworkingOptions {
163
  ignoreContentTypes?: RegExp;
164
  ignoreUrls?: RegExp;
165
}
166
```
167

168
[Network Monitoring](./networking.md)
169

170
### Error Tracking
171

172
Captures global JavaScript errors and reports them with symbolicated stack traces and customizable filtering.
173

174
```typescript { .api }
175
function trackGlobalErrors(options?: TrackGlobalErrorsOptions): PluginCreator;
176

177
interface TrackGlobalErrorsOptions {
178
  veto?: (frame: ErrorStackFrame) => boolean;
179
}
180

181
interface ErrorStackFrame {
182
  fileName: string;
183
  functionName: string;
184
  lineNumber: number;
185
  columnNumber?: number | null;
186
}
187
```
188

189
[Error Tracking](./error-tracking.md)
190

191
### Development Tools
192

193
Provides React Native dev menu integration for reloading and showing development tools from Reactotron desktop.
194

195
```typescript { .api }
196
function devTools(): PluginCreator;
197
```
198

199
[Development Tools](./dev-tools.md)
200

201
### Debug Overlay
202

203
Creates an overlay system for displaying debugging information directly in your React Native app interface.
204

205
```typescript { .api }
206
function overlay(): PluginCreator;
207
```
208

209
[Debug Overlay](./overlay.md)
210

211
### Global Logging
212

213
Intercepts console.log, console.warn, and console.debug calls to forward them to Reactotron.
214

215
```typescript { .api }
216
function trackGlobalLogs(): PluginCreator;
217
```
218

219
[Global Logging](./global-logging.md)
220

221
### Editor Integration
222

223
Opens files in your editor directly from Reactotron stack traces and error reports.
224

225
```typescript { .api }
226
function openInEditor(options?: OpenInEditorOptions): PluginCreator;
227

228
interface OpenInEditorOptions {
229
  url?: string;
230
}
231
```
232

233
[Editor Integration](./editor-integration.md)
234

235
### Storybook Integration
236

237
Provides Storybook switcher component for toggling between your app and Storybook interface.
238

239
```typescript { .api }
240
function storybook(): PluginCreator;
241
```
242

243
[Storybook Integration](./storybook.md)
244

245
### Plugin Exports
246

247
Individual plugin creator functions that can be used independently or through useReactNative options.
248

249
```typescript { .api }
250
function asyncStorage(options?: AsyncStorageOptions): PluginCreator;
251
function trackGlobalErrors(options?: TrackGlobalErrorsOptions): PluginCreator;
252
function trackGlobalLogs(): PluginCreator;
253
function openInEditor(options?: OpenInEditorOptions): PluginCreator;
254
function overlay(): PluginCreator;
255
function networking(options?: NetworkingOptions): PluginCreator;
256
function storybook(): PluginCreator;
257
function devTools(): PluginCreator;
258
```
259

260
## Core Types
261

262
```typescript { .api }
263
interface ReactotronCore {
264
  options: ClientOptions<this>;
265
  plugins: Plugin<this>[];
266
  startTimer(): () => number;
267
  close(): void;
268
  send<Type extends string, Payload>(type: Type, payload?: Payload, important?: boolean): void;
269
  display(config: DisplayConfig): void;
270
  configure(options: ClientOptions<this>): this;
271
  use<P extends PluginCreator<this>>(pluginCreator: P): this;
272
  connect(): this;
273
}
274

275
type PluginCreator<T = ReactotronCore> = (reactotron: T) => Plugin<T>;
276

277
interface Plugin<T> {
278
  onConnect?(): void;
279
  onDisconnect?(): void;
280
  onCommand?(command: any): void;
281
  onPlugin?(client: T): void;
282
  features?: Record<string, any>;
283
}
284

285
type AsyncStorageStatic = {
286
  getItem(key: string): Promise<string | null>;
287
  setItem(key: string, value: string): Promise<void>;
288
  removeItem(key: string): Promise<void>;
289
  mergeItem(key: string, value: string): Promise<void>;
290
  clear(): Promise<void>;
291
  multiGet(keys: string[]): Promise<Array<[string, string | null]>>;
292
  multiSet(pairs: Array<[string, string]>): Promise<void>;
293
  multiRemove(keys: string[]): Promise<void>;
294
  multiMerge(pairs: Array<[string, string]>): Promise<void>;
295
};
296

297
interface ClientOptions<T> {
298
  createSocket?: ((path: string) => WebSocket) | null;
299
  host?: string | null;
300
  port?: number | null;
301
  name?: string;
302
  secure?: boolean;
303
  plugins?: PluginCreator<T>[];
304
  safeRecursion?: boolean;
305
  onCommand?: ((command: any) => void) | null;
306
  onConnect?: () => void;
307
  onDisconnect?: () => void;
308
  environment?: string;
309
  client?: Record<string, string | number | boolean>;
310
  setClientId?: (clientId: string) => Promise<void>;
311
  getClientId?: (name: string) => Promise<string>;
312
  proxyHack?: boolean;
313
}
314
```