0
# React Hooks
1

2
Real-time monitoring hooks for dynamic device states and event-driven updates. Perfect for React components that need to respond to device state changes automatically.
3

4
## Capabilities
5

6
### Battery Monitoring Hooks
7

8
React hooks for monitoring battery state and power changes.
9

10
```typescript { .api }
11
/**
12
 * Hook for monitoring battery level changes
13
 * @returns Current battery level (0.0 to 1.0) or null if loading
14
 */
15
function useBatteryLevel(): number | null;
16

17
/**
18
 * Hook for monitoring low battery events
19
 * @returns Battery level when low, or null
20
 */
21
function useBatteryLevelIsLow(): number | null;
22

23
/**
24
 * Hook for monitoring power state changes
25
 * @returns Current power state object
26
 */
27
function usePowerState(): Partial<PowerState>;
28

29
/**
30
 * Hook for monitoring screen brightness changes (iOS only)
31
 * @returns Current brightness level (0.0 to 1.0) or null
32
 */
33
function useBrightness(): number | null;
34
```
35

36
**Usage Examples:**
37

38
```typescript
39
import React from 'react';
40
import { View, Text } from 'react-native';
41
import { 
42
  useBatteryLevel, 
43
  useBatteryLevelIsLow, 
44
  usePowerState,
45
  useBrightness 
46
} from 'react-native-device-info';
47

48
// Battery monitor component
49
const BatteryMonitor = () => {
50
  const batteryLevel = useBatteryLevel();
51
  const lowBatteryLevel = useBatteryLevelIsLow();
52
  const powerState = usePowerState();
53
  const brightness = useBrightness();
54
  
55
  const batteryPercent = batteryLevel ? Math.round(batteryLevel * 100) : 0;
56
  const isLowBattery = lowBatteryLevel !== null;
57
  
58
  return (
59
    <View>
60
      <Text>Battery: {batteryPercent}%</Text>
61
      <Text>Charging: {powerState.batteryState === 'charging' ? 'Yes' : 'No'}</Text>
62
      <Text>Low Power Mode: {powerState.lowPowerMode ? 'Yes' : 'No'}</Text>
63
      {isLowBattery && (
64
        <Text style={{ color: 'red' }}>
65
          Low Battery Warning: {Math.round(lowBatteryLevel * 100)}%
66
        </Text>
67
      )}
68
      {brightness !== null && (
69
        <Text>Screen Brightness: {Math.round(brightness * 100)}%</Text>
70
      )}
71
    </View>
72
  );
73
};
74

75
// Power-aware component
76
const PowerAwareComponent = () => {
77
  const powerState = usePowerState();
78
  const batteryLevel = useBatteryLevel();
79
  
80
  // Adaptive rendering based on power state
81
  const shouldReduceAnimations = powerState.lowPowerMode || 
82
    (batteryLevel && batteryLevel < 0.2);
83
  
84
  const animationDuration = shouldReduceAnimations ? 0 : 300;
85
  
86
  return (
87
    <View>
88
      <Text>Power Saving Mode: {shouldReduceAnimations ? 'On' : 'Off'}</Text>
89
      {/* Use animationDuration for animations */}
90
    </View>
91
  );
92
};
93
```
94

95
### Device Information Hooks
96

97
Hooks for device identification and system information.
98

99
```typescript { .api }
100
/**
101
 * Hook for getting device name
102
 * @returns AsyncHookResult with device name
103
 */
104
function useDeviceName(): AsyncHookResult<string>;
105

106
/**
107
 * Hook for getting manufacturer information
108
 * @returns AsyncHookResult with manufacturer name
109
 */
110
function useManufacturer(): AsyncHookResult<string>;
111

112
/**
113
 * Hook for checking if device is an emulator
114
 * @returns AsyncHookResult with emulator status
115
 */
116
function useIsEmulator(): AsyncHookResult<boolean>;
117

118
/**
119
 * Hook for getting first install time
120
 * @returns AsyncHookResult with install timestamp
121
 */
122
function useFirstInstallTime(): AsyncHookResult<number>;
123

124
/**
125
 * Hook for checking system feature availability
126
 * @param feature - System feature name to check
127
 * @returns AsyncHookResult with feature availability
128
 */
129
function useHasSystemFeature(feature: string): AsyncHookResult<boolean>;
130

131
interface AsyncHookResult<T> {
132
  loading: boolean;
133
  result: T;
134
}
135
```
136

137
**Usage Examples:**
138

139
```typescript
140
import React from 'react';
141
import { View, Text, ActivityIndicator } from 'react-native';
142
import { 
143
  useDeviceName, 
144
  useManufacturer, 
145
  useIsEmulator,
146
  useFirstInstallTime,
147
  useHasSystemFeature
148
} from 'react-native-device-info';
149

150
// Device info component
151
const DeviceInfoComponent = () => {
152
  const deviceName = useDeviceName();
153
  const manufacturer = useManufacturer();
154
  const isEmulator = useIsEmulator();
155
  const firstInstall = useFirstInstallTime();
156
  const hasCamera = useHasSystemFeature('android.hardware.camera');
157
  
158
  if (deviceName.loading || manufacturer.loading) {
159
    return (
160
      <View>
161
        <ActivityIndicator />
162
        <Text>Loading device information...</Text>
163
      </View>
164
    );
165
  }
166
  
167
  const installDate = firstInstall.result > 0 ? 
168
    new Date(firstInstall.result).toLocaleDateString() : 'Unknown';
169
  
170
  return (
171
    <View>
172
      <Text>Device: {deviceName.result}</Text>
173
      <Text>Manufacturer: {manufacturer.result}</Text>
174
      <Text>Emulator: {isEmulator.result ? 'Yes' : 'No'}</Text>
175
      <Text>First Install: {installDate}</Text>
176
      <Text>Camera: {hasCamera.result ? 'Available' : 'Not Available'}</Text>
177
    </View>
178
  );
179
};
180

181
// Feature-dependent component
182
const CameraFeatureComponent = () => {
183
  const hasCamera = useHasSystemFeature('android.hardware.camera');
184
  
185
  if (hasCamera.loading) {
186
    return <ActivityIndicator />;
187
  }
188
  
189
  if (!hasCamera.result) {
190
    return <Text>Camera not available on this device</Text>;
191
  }
192
  
193
  return (
194
    <View>
195
      <Text>Camera features enabled</Text>
196
      {/* Camera-related UI */}
197
    </View>
198
  );
199
};
200
```
201

202
### Audio Device Monitoring Hooks
203

204
Hooks for monitoring audio device connections and changes.
205

206
```typescript { .api }
207
/**
208
 * Hook for monitoring headphone connections
209
 * @returns AsyncHookResult with headphone connection status
210
 */
211
function useIsHeadphonesConnected(): AsyncHookResult<boolean>;
212

213
/**
214
 * Hook for monitoring wired headphone connections
215
 * @returns AsyncHookResult with wired headphone status
216
 */
217
function useIsWiredHeadphonesConnected(): AsyncHookResult<boolean>;
218

219
/**
220
 * Hook for monitoring Bluetooth headphone connections
221
 * @returns AsyncHookResult with Bluetooth headphone status
222
 */
223
function useIsBluetoothHeadphonesConnected(): AsyncHookResult<boolean>;
224
```
225

226
**Usage Examples:**
227

228
```typescript
229
import React, { useEffect } from 'react';
230
import { View, Text } from 'react-native';
231
import { 
232
  useIsHeadphonesConnected, 
233
  useIsWiredHeadphonesConnected,
234
  useIsBluetoothHeadphonesConnected 
235
} from 'react-native-device-info';
236

237
// Audio device monitor component
238
const AudioDeviceMonitor = () => {
239
  const headphones = useIsHeadphonesConnected();
240
  const wiredHeadphones = useIsWiredHeadphonesConnected();
241
  const bluetoothHeadphones = useIsBluetoothHeadphonesConnected();
242
  
243
  return (
244
    <View>
245
      <Text>Headphones: {headphones.result ? 'Connected' : 'Disconnected'}</Text>
246
      <Text>Wired: {wiredHeadphones.result ? 'Connected' : 'Disconnected'}</Text>
247
      <Text>Bluetooth: {bluetoothHeadphones.result ? 'Connected' : 'Disconnected'}</Text>
248
    </View>
249
  );
250
};
251

252
// Audio-aware media player
253
const AudioAwarePlayer = () => {
254
  const headphones = useIsHeadphonesConnected();
255
  const bluetoothHeadphones = useIsBluetoothHeadphonesConnected();
256
  
257
  // Adjust audio quality based on output device
258
  const audioQuality = headphones.result ? 'high' : 'standard';
259
  const showVolumeWarning = !headphones.result;
260
  
261
  useEffect(() => {
262
    if (bluetoothHeadphones.result) {
263
      console.log('Bluetooth headphones connected - enabling wireless features');
264
      // Handle wireless-specific features
265
    }
266
  }, [bluetoothHeadphones.result]);
267
  
268
  return (
269
    <View>
270
      <Text>Audio Quality: {audioQuality}</Text>
271
      {showVolumeWarning && (
272
        <Text style={{ color: 'orange' }}>
273
          Warning: Playing through speakers
274
        </Text>
275
      )}
276
      {bluetoothHeadphones.result && (
277
        <Text>Bluetooth audio active</Text>
278
      )}
279
    </View>
280
  );
281
};
282
```
283

284
### Advanced Hook Usage Patterns
285

286
Advanced patterns for using device info hooks effectively.
287

288
**Usage Examples:**
289

290
```typescript
291
import React, { useState, useEffect, useMemo } from 'react';
292
import { View, Text } from 'react-native';
293
import { 
294
  useBatteryLevel, 
295
  usePowerState, 
296
  useIsHeadphonesConnected,
297
  useDeviceName,
298
  useManufacturer 
299
} from 'react-native-device-info';
300

301
// Performance-aware component
302
const PerformanceAwareComponent = () => {
303
  const batteryLevel = useBatteryLevel();
304
  const powerState = usePowerState();
305
  const headphones = useIsHeadphonesConnected();
306
  
307
  // Memoized performance profile
308
  const performanceProfile = useMemo(() => {
309
    const batteryOk = batteryLevel ? batteryLevel > 0.2 : false;
310
    const isCharging = powerState.batteryState === 'charging';
311
    const lowPowerMode = powerState.lowPowerMode;
312
    
313
    if (isCharging || (batteryOk && !lowPowerMode)) {
314
      return 'high';
315
    } else if (batteryOk && !lowPowerMode) {
316
      return 'balanced';
317
    } else {
318
      return 'power_saver';
319
    }
320
  }, [batteryLevel, powerState]);
321
  
322
  const settings = useMemo(() => ({
323
    animationsEnabled: performanceProfile !== 'power_saver',
324
    highQualityAudio: headphones.result && performanceProfile === 'high',
325
    backgroundRefreshRate: performanceProfile === 'high' ? 30 : 
326
                          performanceProfile === 'balanced' ? 60 : 300
327
  }), [performanceProfile, headphones.result]);
328
  
329
  return (
330
    <View>
331
      <Text>Performance Profile: {performanceProfile}</Text>
332
      <Text>Animations: {settings.animationsEnabled ? 'On' : 'Off'}</Text>
333
      <Text>HQ Audio: {settings.highQualityAudio ? 'On' : 'Off'}</Text>
334
      <Text>Refresh Rate: {settings.backgroundRefreshRate}s</Text>
335
    </View>
336
  );
337
};
338

339
// Device-specific component
340
const DeviceSpecificComponent = () => {
341
  const deviceName = useDeviceName();
342
  const manufacturer = useManufacturer();
343
  const [deviceConfig, setDeviceConfig] = useState(null);
344
  
345
  useEffect(() => {
346
    if (!deviceName.loading && !manufacturer.loading) {
347
      // Configure based on specific device
348
      const config = {
349
        device: deviceName.result,
350
        manufacturer: manufacturer.result,
351
        optimizations: getDeviceOptimizations(
352
          manufacturer.result, 
353
          deviceName.result
354
        )
355
      };
356
      setDeviceConfig(config);
357
    }
358
  }, [deviceName.loading, manufacturer.loading, deviceName.result, manufacturer.result]);
359
  
360
  const getDeviceOptimizations = (mfg, device) => {
361
    const opts = { performanceMode: 'standard' };
362
    
363
    // Device-specific optimizations
364
    if (mfg === 'Apple') {
365
      opts.performanceMode = 'high';
366
      opts.useHardwareAcceleration = true;
367
    } else if (mfg === 'Samsung') {
368
      opts.useCustomEffects = true;
369
      opts.performanceMode = 'balanced';
370
    }
371
    
372
    return opts;
373
  };
374
  
375
  if (!deviceConfig) {
376
    return <Text>Loading device configuration...</Text>;
377
  }
378
  
379
  return (
380
    <View>
381
      <Text>Device: {deviceConfig.device}</Text>
382
      <Text>Manufacturer: {deviceConfig.manufacturer}</Text>
383
      <Text>Performance: {deviceConfig.optimizations.performanceMode}</Text>
384
    </View>
385
  );
386
};
387

388
// Composite monitoring component
389
const DeviceMonitorDashboard = () => {
390
  const batteryLevel = useBatteryLevel();
391
  const powerState = usePowerState();
392
  const deviceName = useDeviceName();
393
  const headphones = useIsHeadphonesConnected();
394
  const brightness = useBrightness();
395
  
396
  const [alerts, setAlerts] = useState([]);
397
  
398
  useEffect(() => {
399
    const newAlerts = [];
400
    
401
    if (batteryLevel && batteryLevel < 0.1) {
402
      newAlerts.push('Critical battery level');
403
    }
404
    
405
    if (powerState.lowPowerMode) {
406
      newAlerts.push('Low power mode active');
407
    }
408
    
409
    if (brightness && brightness > 0.9) {
410
      newAlerts.push('High screen brightness - impacts battery');
411
    }
412
    
413
    setAlerts(newAlerts);
414
  }, [batteryLevel, powerState.lowPowerMode, brightness]);
415
  
416
  return (
417
    <View>
418
      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>Device Status</Text>
419
      
420
      <View style={{ marginTop: 10 }}>
421
        <Text>Device: {deviceName.loading ? 'Loading...' : deviceName.result}</Text>
422
        <Text>Battery: {batteryLevel ? `${Math.round(batteryLevel * 100)}%` : 'Loading...'}</Text>
423
        <Text>Charging: {powerState.batteryState === 'charging' ? 'Yes' : 'No'}</Text>
424
        <Text>Headphones: {headphones.result ? 'Connected' : 'Disconnected'}</Text>
425
        {brightness !== null && (
426
          <Text>Brightness: {Math.round(brightness * 100)}%</Text>
427
        )}
428
      </View>
429
      
430
      {alerts.length > 0 && (
431
        <View style={{ marginTop: 10 }}>
432
          <Text style={{ color: 'red', fontWeight: 'bold' }}>Alerts:</Text>
433
          {alerts.map((alert, index) => (
434
            <Text key={index} style={{ color: 'red' }}>• {alert}</Text>
435
          ))}
436
        </View>
437
      )}
438
    </View>
439
  );
440
};
441

442
export {
443
  PerformanceAwareComponent,
444
  DeviceSpecificComponent,
445
  DeviceMonitorDashboard
446
};
447
```
448

449
### Custom Hook Patterns
450

451
Creating custom hooks for specific use cases.
452

453
**Usage Examples:**
454

455
```typescript
456
import { useState, useEffect } from 'react';
457
import { 
458
  useBatteryLevel, 
459
  usePowerState, 
460
  useIsHeadphonesConnected 
461
} from 'react-native-device-info';
462

463
// Custom hook for power management
464
const usePowerManagement = () => {
465
  const batteryLevel = useBatteryLevel();
466
  const powerState = usePowerState();
467
  const [powerProfile, setPowerProfile] = useState('balanced');
468
  
469
  useEffect(() => {
470
    if (batteryLevel === null) return;
471
    
472
    const isCharging = powerState.batteryState === 'charging';
473
    const isLowPower = powerState.lowPowerMode;
474
    
475
    if (isCharging || batteryLevel > 0.5) {
476
      setPowerProfile('high');
477
    } else if (batteryLevel > 0.2 && !isLowPower) {
478
      setPowerProfile('balanced');
479
    } else {
480
      setPowerProfile('power_saver');
481
    }
482
  }, [batteryLevel, powerState]);
483
  
484
  return {
485
    batteryLevel,
486
    powerState,
487
    powerProfile,
488
    isCharging: powerState.batteryState === 'charging',
489
    shouldOptimize: powerProfile === 'power_saver'
490
  };
491
};
492

493
// Custom hook for audio context
494
const useAudioContext = () => {
495
  const headphones = useIsHeadphonesConnected();
496
  const powerInfo = usePowerManagement();
497
  
498
  const audioQuality = headphones.result && powerInfo.powerProfile === 'high' ? 
499
    'high' : 'standard';
500
  
501
  const shouldShowVolumeWarning = !headphones.result;
502
  const canUseHighQualityEffects = headphones.result && 
503
    powerInfo.powerProfile !== 'power_saver';
504
  
505
  return {
506
    headphonesConnected: headphones.result,
507
    audioQuality,
508
    shouldShowVolumeWarning,
509
    canUseHighQualityEffects,
510
    loading: headphones.loading
511
  };
512
};
513

514
// Usage of custom hooks
515
const MediaPlayerComponent = () => {
516
  const powerInfo = usePowerManagement();
517
  const audioContext = useAudioContext();
518
  
519
  return (
520
    <View>
521
      <Text>Power Profile: {powerInfo.powerProfile}</Text>
522
      <Text>Audio Quality: {audioContext.audioQuality}</Text>
523
      
524
      {audioContext.shouldShowVolumeWarning && (
525
        <Text style={{ color: 'orange' }}>Volume warning: Using speakers</Text>
526
      )}
527
      
528
      {powerInfo.shouldOptimize && (
529
        <Text style={{ color: 'blue' }}>Power saving active</Text>
530
      )}
531
    </View>
532
  );
533
};
534
```
535

536
## Types
537

538
```typescript { .api }
539
interface AsyncHookResult<T> {
540
  loading: boolean;
541
  result: T;
542
}
543

544
interface PowerState {
545
  batteryLevel: number;
546
  batteryState: BatteryState;
547
  lowPowerMode: boolean;
548
  [key: string]: any;
549
}
550

551
type BatteryState = 'unknown' | 'unplugged' | 'charging' | 'full';
552
```