react-native-voice-ts 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/README.md +287 -77
  2. package/dist/NativeVoiceAndroid.d.ts +0 -1
  3. package/dist/NativeVoiceAndroid.js +0 -1
  4. package/dist/NativeVoiceIOS.d.ts +0 -1
  5. package/dist/NativeVoiceIOS.js +0 -1
  6. package/dist/VoiceModuleTypes.d.ts +0 -1
  7. package/dist/VoiceModuleTypes.js +0 -1
  8. package/dist/VoiceUtilTypes.d.ts +0 -1
  9. package/dist/VoiceUtilTypes.js +0 -1
  10. package/dist/components/MicIcon.d.ts +24 -5
  11. package/dist/components/MicIcon.js +71 -13
  12. package/dist/components/VoiceMicrophone.d.ts +12 -1
  13. package/dist/components/VoiceMicrophone.js +97 -10
  14. package/dist/components/index.d.ts +1 -2
  15. package/dist/components/index.js +1 -2
  16. package/dist/hooks/index.d.ts +0 -1
  17. package/dist/hooks/index.js +0 -1
  18. package/dist/hooks/useVoiceRecognition.d.ts +12 -1
  19. package/dist/hooks/useVoiceRecognition.js +109 -12
  20. package/dist/index.d.ts +1 -2
  21. package/dist/index.js +1 -2
  22. package/package.json +4 -8
  23. package/CONTRIBUTING.md +0 -293
  24. package/dist/NativeVoiceAndroid.d.ts.map +0 -1
  25. package/dist/NativeVoiceAndroid.js.map +0 -1
  26. package/dist/NativeVoiceIOS.d.ts.map +0 -1
  27. package/dist/NativeVoiceIOS.js.map +0 -1
  28. package/dist/VoiceModuleTypes.d.ts.map +0 -1
  29. package/dist/VoiceModuleTypes.js.map +0 -1
  30. package/dist/VoiceUtilTypes.d.ts.map +0 -1
  31. package/dist/VoiceUtilTypes.js.map +0 -1
  32. package/dist/components/MicIcon.d.ts.map +0 -1
  33. package/dist/components/MicIcon.js.map +0 -1
  34. package/dist/components/VoiceMicrophone.d.ts.map +0 -1
  35. package/dist/components/VoiceMicrophone.js.map +0 -1
  36. package/dist/components/index.d.ts.map +0 -1
  37. package/dist/components/index.js.map +0 -1
  38. package/dist/hooks/index.d.ts.map +0 -1
  39. package/dist/hooks/index.js.map +0 -1
  40. package/dist/hooks/useVoiceRecognition.d.ts.map +0 -1
  41. package/dist/hooks/useVoiceRecognition.js.map +0 -1
  42. package/dist/index.d.ts.map +0 -1
  43. package/dist/index.js.map +0 -1
  44. package/ios/Voice.xcodeproj/project.xcworkspace/xcuserdata/olumayowadaniel.xcuserdatad/UserInterfaceState.xcuserstate +0 -0
  45. package/ios/Voice.xcodeproj/project.xcworkspace/xcuserdata/rudie_shahinian.xcuserdatad/UserInterfaceState.xcuserstate +0 -0
  46. package/plugin/src/withVoice.ts +0 -74
  47. package/plugin/tsconfig.json +0 -10
  48. package/plugin/tsconfig.tsbuildinfo +0 -1
  49. package/src/NativeVoiceAndroid.ts +0 -28
  50. package/src/NativeVoiceIOS.ts +0 -24
  51. package/src/VoiceModuleTypes.ts +0 -64
  52. package/src/VoiceUtilTypes.ts +0 -46
  53. package/src/components/MicIcon.tsx +0 -72
  54. package/src/components/VoiceMicrophone.tsx +0 -238
  55. package/src/components/index.ts +0 -4
  56. package/src/hooks/index.ts +0 -5
  57. package/src/hooks/useVoiceRecognition.ts +0 -217
  58. package/src/images/mic.svg +0 -16
  59. package/src/index.ts +0 -515
package/README.md CHANGED
@@ -75,6 +75,12 @@ npm install react-native-voice-ts --save
75
75
  yarn add react-native-voice-ts
76
76
  ```
77
77
 
78
+ ### Using pnpm
79
+
80
+ ```bash
81
+ pnpm add react-native-voice-ts
82
+ ```
83
+
78
84
  ### iOS Setup
79
85
 
80
86
  ```bash
@@ -105,13 +111,13 @@ cd ios && pod install && cd ..
105
111
  ### Three Ways to Use
106
112
 
107
113
  ```typescript
108
- // 1. Ready-to-use Component (Easiest)
114
+ // 1. Ready-to-use Component (Easiest - New in 2025)
109
115
  import { VoiceMicrophone } from 'react-native-voice-ts';
110
116
 
111
- // 2. Custom Hook (More control)
117
+ // 2. Custom Hook (More control - New in 2025)
112
118
  import { useVoiceRecognition } from 'react-native-voice-ts';
113
119
 
114
- // 3. Core API (Advanced)
120
+ // 3. Core API (Advanced - Fully backward compatible)
115
121
  import Voice from 'react-native-voice-ts';
116
122
 
117
123
  // 4. Import SVG Icons (Optional - for custom UI)
@@ -215,6 +221,218 @@ const styles = StyleSheet.create({
215
221
 
216
222
  ---
217
223
 
224
+ ## 🎨 Built-in Icon Variants
225
+
226
+ The library includes **3 microphone icon variants**, each with on/off states (6 icons total):
227
+
228
+ ### **Variant 1: Standard Outline** (Default)
229
+
230
+ Classic microphone with clean outline design.
231
+
232
+ ```tsx
233
+ import { MicIcon, MicOffIcon } from 'react-native-voice-ts';
234
+
235
+ // Active state
236
+ <MicIcon size={24} color="#007AFF" strokeWidth={2} />
237
+
238
+ // Muted/Off state
239
+ <MicOffIcon size={24} color="#FF3B30" strokeWidth={2} />
240
+ ```
241
+
242
+ **SVG Preview:**
243
+
244
+ <div style="display: flex; gap: 40px; align-items: center; padding: 20px; background: #f5f5f5; border-radius: 8px;">
245
+ <div style="text-align: center;">
246
+ <div><strong>Active</strong></div>
247
+ <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#007AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
248
+ <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
249
+ <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
250
+ <line x1="12" y1="19" x2="12" y2="22"/>
251
+ </svg>
252
+ </div>
253
+ <div style="text-align: center;">
254
+ <div><strong>Muted</strong></div>
255
+ <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#FF3B30" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
256
+ <line x1="2" y1="2" x2="22" y2="22"/>
257
+ <path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2"/>
258
+ <path d="M5 10v2a7 7 0 0 0 12 5"/>
259
+ <path d="M15 9.34V5a3 3 0 0 0-5.68-1.33"/>
260
+ <path d="M9 9v3a3 3 0 0 0 5.12 2.12"/>
261
+ <line x1="12" y1="19" x2="12" y2="22"/>
262
+ </svg>
263
+ </div>
264
+ </div>
265
+
266
+ ### **Variant 2: Filled Microphone**
267
+
268
+ Bold filled microphone for emphasis and better visibility.
269
+
270
+ ```tsx
271
+ import { MicIconFilled, MicOffIconFilled } from 'react-native-voice-ts';
272
+
273
+ // Active filled state
274
+ <MicIconFilled size={24} color="#007AFF" strokeWidth={2} />
275
+
276
+ // Muted filled state
277
+ <MicOffIconFilled size={24} color="#FF3B30" strokeWidth={2} />
278
+ ```
279
+
280
+ **SVG Preview:**
281
+
282
+ ```
283
+ Active: ⎪█⎥ (Solid filled microphone)
284
+ Muted: ⎪/█⎥ (Filled microphone with mute indicator)
285
+ ```
286
+
287
+ <div style="display: flex; gap: 40px; align-items: center; padding: 20px; background: #f5f5f5; border-radius: 8px;">
288
+ <div style="text-align: center;">
289
+ <div><strong>Active</strong></div>
290
+ <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#007AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
291
+ <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
292
+ <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
293
+ <line x1="12" y1="19" x2="12" y2="22"/>
294
+ <path d="M20 7v10" opacity="0.5"/>
295
+ <path d="M23 9v6" opacity="0.3"/>
296
+ <path d="M4 7v10" opacity="0.5"/>
297
+ <path d="M1 9v6" opacity="0.3"/>
298
+ </svg>
299
+ </div>
300
+ <div style="text-align: center;">
301
+ <div><strong>Muted</strong></div>
302
+ <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
303
+ <line x1="2" y1="2" x2="22" y2="22" stroke="#FF3B30"/>
304
+ <path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2"/>
305
+ <path d="M5 10v2a7 7 0 0 0 12 5"/>
306
+ <path d="M15 9.34V5a3 3 0 0 0-5.68-1.33"/>
307
+ <path d="M9 9v3a3 3 0 0 0 5.12 2.12"/>
308
+ <line x1="12" y1="19" x2="12" y2="22"/>
309
+ <path d="M20 7v4" opacity="0.2" stroke-dasharray="2,2"/>
310
+ <path d="M4 7v4" opacity="0.2" stroke-dasharray="2,2"/>
311
+ </svg>
312
+ </div>
313
+ </div>
314
+
315
+ ### **Variant 3: Microphone with Sound Waves**
316
+
317
+ Dynamic microphone with sound wave indicators - perfect for showing active recording.
318
+
319
+ ```tsx
320
+ import { MicIconWave, MicOffIconWave } from 'react-native-voice-ts';
321
+
322
+ // Active with waves
323
+ <MicIconWave size={24} color="#007AFF" strokeWidth={2} />
324
+
325
+ // Muted with disabled waves
326
+ <MicOffIconWave size={24} color="#999" strokeWidth={2} />
327
+ ```
328
+
329
+ **SVG Preview:**
330
+
331
+ ```
332
+ Active: ⎟⎪ ⎥⎟ (Microphone with animated sound waves)
333
+ Muted: ⎟⎪/⎥⎟ (Microphone with muted/dashed waves)
334
+ ```
335
+
336
+ ### **Complete Icon Usage Example**
337
+
338
+ ```tsx
339
+ import React, { useState } from 'react';
340
+ import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
341
+ import {
342
+ VoiceMicrophone,
343
+ MicIcon,
344
+ MicOffIcon,
345
+ MicIconFilled,
346
+ MicOffIconFilled,
347
+ MicIconWave,
348
+ MicOffIconWave,
349
+ } from 'react-native-voice-ts';
350
+
351
+ export default function IconVariantsDemo() {
352
+ const [variant, setVariant] = useState<'standard' | 'filled' | 'wave'>(
353
+ 'standard',
354
+ );
355
+
356
+ const getIcons = () => {
357
+ switch (variant) {
358
+ case 'filled':
359
+ return { ActiveIcon: MicIconFilled, MutedIcon: MicOffIconFilled };
360
+ case 'wave':
361
+ return { ActiveIcon: MicIconWave, MutedIcon: MicOffIconWave };
362
+ default:
363
+ return { ActiveIcon: MicIcon, MutedIcon: MicOffIcon };
364
+ }
365
+ };
366
+
367
+ const { ActiveIcon, MutedIcon } = getIcons();
368
+
369
+ return (
370
+ <View style={styles.container}>
371
+ {/* Icon Variant Selector */}
372
+ <View style={styles.selector}>
373
+ <TouchableOpacity onPress={() => setVariant('standard')}>
374
+ <Text style={variant === 'standard' && styles.active}>Standard</Text>
375
+ </TouchableOpacity>
376
+ <TouchableOpacity onPress={() => setVariant('filled')}>
377
+ <Text style={variant === 'filled' && styles.active}>Filled</Text>
378
+ </TouchableOpacity>
379
+ <TouchableOpacity onPress={() => setVariant('wave')}>
380
+ <Text style={variant === 'wave' && styles.active}>Wave</Text>
381
+ </TouchableOpacity>
382
+ </View>
383
+
384
+ {/* Voice Input with Selected Icon */}
385
+ <VoiceMicrophone>
386
+ {({ isRecording, start, stop }) => (
387
+ <TouchableOpacity
388
+ style={[styles.micButton, isRecording && styles.recording]}
389
+ onPress={isRecording ? stop : start}
390
+ >
391
+ {isRecording ? (
392
+ <MutedIcon size={32} color="#fff" strokeWidth={2} />
393
+ ) : (
394
+ <ActiveIcon size={32} color="#fff" strokeWidth={2} />
395
+ )}
396
+ </TouchableOpacity>
397
+ )}
398
+ </VoiceMicrophone>
399
+ </View>
400
+ );
401
+ }
402
+
403
+ const styles = StyleSheet.create({
404
+ container: { padding: 20, alignItems: 'center' },
405
+ selector: { flexDirection: 'row', gap: 15, marginBottom: 20 },
406
+ active: { fontWeight: 'bold', color: '#007AFF' },
407
+ micButton: {
408
+ width: 70,
409
+ height: 70,
410
+ borderRadius: 35,
411
+ backgroundColor: '#007AFF',
412
+ justifyContent: 'center',
413
+ alignItems: 'center',
414
+ shadowColor: '#000',
415
+ shadowOffset: { width: 0, height: 2 },
416
+ shadowOpacity: 0.25,
417
+ shadowRadius: 3.84,
418
+ elevation: 5,
419
+ },
420
+ recording: { backgroundColor: '#FF3B30' },
421
+ });
422
+ ```
423
+
424
+ ### **Icon Props**
425
+
426
+ All icons accept the same props:
427
+
428
+ | Prop | Type | Default | Description |
429
+ | ------------- | -------- | ---------------- | ---------------------------- |
430
+ | `size` | `number` | `24` | Icon size in pixels |
431
+ | `color` | `string` | `'currentColor'` | Icon color (any valid color) |
432
+ | `strokeWidth` | `number` | `2` | Stroke width for outlines |
433
+
434
+ ---
435
+
218
436
  ### 🎯 Using Hook (For More Control)
219
437
 
220
438
  ```tsx
@@ -243,6 +461,8 @@ export default function App() {
243
461
 
244
462
  ### 🔧 Advanced (Core API)
245
463
 
464
+ For users who want full control or are migrating from previous versions:
465
+
246
466
  ```tsx
247
467
  import React, { useEffect, useState } from 'react';
248
468
  import { View, Text, Button } from 'react-native';
@@ -785,81 +1005,12 @@ function HookExample() {
785
1005
  - [VoiceSearchExample.tsx](./example/src/VoiceSearchExample.tsx) - Full search bar implementation
786
1006
  - [VoiceHookExample.tsx](./example/src/VoiceHookExample.tsx) - Hook usage with advanced features
787
1007
  - [COMPONENT_USAGE.md](./COMPONENT_USAGE.md) - Comprehensive component guide
788
- style={[styles.button, isRecording && styles.recording]}
789
- onPress={isRecording ? stop : start} >
790
- <Text style={styles.buttonText}>
791
- {isRecording ? '⏹ Stop' : '🎤 Start Recording'}
792
- </Text>
793
- </TouchableOpacity>
794
- {error && <Text style={styles.error}>{error}</Text>}
795
- </View>
796
- )}
797
- </VoiceMicrophone>
798
- </View>
799
- );
800
- };
801
1008
 
802
- const styles = StyleSheet.create({
803
- container: {
804
- flex: 1,
805
- padding: 20,
806
- backgroundColor: '#f5f5f5',
807
- justifyContent: 'center',
808
- },
809
- title: {
810
- fontSize: 24,
811
- fontWeight: 'bold',
812
- textAlign: 'center',
813
- marginBottom: 30,
814
- },
815
- textContainer: {
816
- backgroundColor: '#fff',
817
- padding: 20,
818
- borderRadius: 10,
819
- marginBottom: 30,
820
- elevation: 2,
821
- },
822
- label: {
823
- fontSize: 12,
824
- color: '#666',
825
- marginTop: 10,
826
- marginBottom: 5,
827
- fontWeight: '600',
828
- },
829
- liveText: {
830
- fontSize: 16,
831
- color: '#007AFF',
832
- fontStyle: 'italic',
833
- },
834
- finalText: {
835
- fontSize: 18,
836
- color: '#000',
837
- fontWeight: '500',
838
- },
839
- button: {
840
- backgroundColor: '#007AFF',
841
- padding: 15,
842
- borderRadius: 25,
843
- alignItems: 'center',
844
- },
845
- recording: {
846
- backgroundColor: '#FF3B30',
847
- },
848
- buttonText: {
849
- color: '#fff',
850
- fontSize: 18,
851
- fontWeight: 'bold',
852
- },
853
- error: {
854
- color: '#FF3B30',
855
- textAlign: 'center',
856
- marginTop: 10,
857
- },
858
- });
1009
+ ---
859
1010
 
860
- ````
1011
+ ## 💡 More Examples
861
1012
 
862
- ### Example 3: Multi-language Voice Input
1013
+ ### Example 1: Simple Voice Search
863
1014
 
864
1015
  ```typescript
865
1016
  import React, { useState } from 'react';
@@ -988,7 +1139,7 @@ const styles = StyleSheet.create({
988
1139
  fontWeight: 'bold',
989
1140
  },
990
1141
  });
991
- ````
1142
+ ```
992
1143
 
993
1144
  ### Example 4: Using Custom Hook with Form Input
994
1145
 
@@ -1146,7 +1297,9 @@ const styles = StyleSheet.create({
1146
1297
 
1147
1298
  ```typescript
1148
1299
  import React, { useState, useEffect } from 'react';
1149
- import { View, Text, StyleSheet, FlatList } from 'react-native';
1300
+ import { View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
1301
+ import { VoiceMicrophone } from 'react-native-voice-ts';
1302
+ import { View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
1150
1303
  import { VoiceMicrophone } from 'react-native-voice-ts';
1151
1304
 
1152
1305
  const VoiceCommands = () => {
@@ -1313,6 +1466,63 @@ const styles = StyleSheet.create({
1313
1466
 
1314
1467
  ---
1315
1468
 
1469
+ ## 🔄 Backward Compatibility
1470
+
1471
+ **This library is fully backward compatible!** If you're upgrading from a previous version or the original `@react-native-voice/voice`, all your existing code will continue to work without any changes.
1472
+
1473
+ ### Core API (Always Supported)
1474
+
1475
+ The core Voice API remains unchanged and fully supported:
1476
+
1477
+ ```tsx
1478
+ import Voice from 'react-native-voice-ts';
1479
+
1480
+ // All these work exactly as before
1481
+ Voice.start('en-US');
1482
+ Voice.stop();
1483
+ Voice.cancel();
1484
+ Voice.destroy();
1485
+ Voice.isAvailable();
1486
+ Voice.onSpeechResults = (e) => console.log(e.value);
1487
+ ```
1488
+
1489
+ ### What's New in v1.0+
1490
+
1491
+ The new features are **additions** that don't break existing code:
1492
+
1493
+ ```tsx
1494
+ // ✅ NEW: Component (optional to use)
1495
+ import { VoiceMicrophone } from 'react-native-voice-ts';
1496
+
1497
+ // ✅ NEW: Hook (optional to use)
1498
+ import { useVoiceRecognition } from 'react-native-voice-ts';
1499
+
1500
+ // ✅ NEW: Icons (optional to use)
1501
+ import { MicIcon, MicOffIcon } from 'react-native-voice-ts';
1502
+
1503
+ // ✅ Still works: Original API
1504
+ import Voice from 'react-native-voice-ts';
1505
+ ```
1506
+
1507
+ ### Migration Guide
1508
+
1509
+ **No migration needed!** But if you want to use the new features:
1510
+
1511
+ ```tsx
1512
+ // Before (still works)
1513
+ import Voice from 'react-native-voice-ts';
1514
+ Voice.onSpeechResults = (e) => setText(e.value[0]);
1515
+ Voice.start('en-US');
1516
+
1517
+ // After (optional upgrade)
1518
+ import { useVoiceRecognition } from 'react-native-voice-ts';
1519
+ const { isRecording, results, start } = useVoiceRecognition({
1520
+ onResult: setText,
1521
+ });
1522
+ ```
1523
+
1524
+ ---
1525
+
1316
1526
  ## ⚠️ Common Issues & Solutions
1317
1527
 
1318
1528
  ### Issue: No speech detected
@@ -19,4 +19,3 @@ export interface Spec extends TurboModule {
19
19
  }
20
20
  declare const _default: Spec;
21
21
  export default _default;
22
- //# sourceMappingURL=NativeVoiceAndroid.d.ts.map
@@ -1,3 +1,2 @@
1
1
  import { TurboModuleRegistry } from 'react-native';
2
2
  export default TurboModuleRegistry.getEnforcing('Voice');
3
- //# sourceMappingURL=NativeVoiceAndroid.js.map
@@ -15,4 +15,3 @@ export interface Spec extends TurboModule {
15
15
  }
16
16
  declare const _default: Spec;
17
17
  export default _default;
18
- //# sourceMappingURL=NativeVoiceIOS.d.ts.map
@@ -1,3 +1,2 @@
1
1
  import { TurboModuleRegistry } from 'react-native';
2
2
  export default TurboModuleRegistry.getEnforcing('Voice');
3
- //# sourceMappingURL=NativeVoiceIOS.js.map
@@ -51,4 +51,3 @@ export type TranscriptionEndEvent = {
51
51
  export type SpeechVolumeChangeEvent = {
52
52
  value?: number;
53
53
  };
54
- //# sourceMappingURL=VoiceModuleTypes.d.ts.map
@@ -1,2 +1 @@
1
1
  export {};
2
- //# sourceMappingURL=VoiceModuleTypes.js.map
@@ -40,4 +40,3 @@ export interface Language {
40
40
  /** Whether language is available */
41
41
  available: boolean;
42
42
  }
43
- //# sourceMappingURL=VoiceUtilTypes.d.ts.map
@@ -5,4 +5,3 @@
5
5
  * speech recognition functionality.
6
6
  */
7
7
  export {};
8
- //# sourceMappingURL=VoiceUtilTypes.js.map
@@ -5,8 +5,8 @@ export interface MicIconProps {
5
5
  strokeWidth?: number;
6
6
  }
7
7
  /**
8
- * Microphone Icon Component
9
- * Based on Lucide mic icon
8
+ * Standard Microphone Icon (Variant 1)
9
+ * Classic microphone with rounded capsule
10
10
  */
11
11
  export declare const MicIcon: React.FC<MicIconProps>;
12
12
  export interface MicOffIconProps {
@@ -15,9 +15,28 @@ export interface MicOffIconProps {
15
15
  strokeWidth?: number;
16
16
  }
17
17
  /**
18
- * Microphone Off Icon Component
19
- * For recording/stop state
18
+ * Standard Microphone Off Icon (Variant 1)
19
+ * Shows microphone with slash through it
20
20
  */
21
21
  export declare const MicOffIcon: React.FC<MicOffIconProps>;
22
+ /**
23
+ * Filled Microphone Icon (Variant 2)
24
+ * Solid/filled microphone for active state
25
+ */
26
+ export declare const MicIconFilled: React.FC<MicIconProps>;
27
+ /**
28
+ * Filled Microphone Off Icon (Variant 2)
29
+ * Solid microphone with mute indicator
30
+ */
31
+ export declare const MicOffIconFilled: React.FC<MicOffIconProps>;
32
+ /**
33
+ * Wave Microphone Icon (Variant 3)
34
+ * Microphone with sound waves
35
+ */
36
+ export declare const MicIconWave: React.FC<MicIconProps>;
37
+ /**
38
+ * Wave Microphone Off Icon (Variant 3)
39
+ * Microphone with muted waves
40
+ */
41
+ export declare const MicOffIconWave: React.FC<MicOffIconProps>;
22
42
  export default MicIcon;
23
- //# sourceMappingURL=MicIcon.d.ts.map
@@ -1,28 +1,86 @@
1
1
  import React from 'react';
2
- import Svg, { Path, Rect } from 'react-native-svg';
2
+ import Svg, { Path, Line } from 'react-native-svg';
3
3
  /**
4
- * Microphone Icon Component
5
- * Based on Lucide mic icon
4
+ * Standard Microphone Icon (Variant 1)
5
+ * Classic microphone with rounded capsule
6
6
  */
7
7
  export const MicIcon = ({ size = 24, color = 'currentColor', strokeWidth = 2, }) => {
8
8
  return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
9
- <Path d="M12 19v3"/>
9
+ <Path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
10
10
  <Path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
11
- <Rect x="9" y="2" width="6" height="13" rx="3"/>
11
+ <Line x1="12" y1="19" x2="12" y2="22"/>
12
12
  </Svg>);
13
13
  };
14
14
  /**
15
- * Microphone Off Icon Component
16
- * For recording/stop state
15
+ * Standard Microphone Off Icon (Variant 1)
16
+ * Shows microphone with slash through it
17
17
  */
18
18
  export const MicOffIcon = ({ size = 24, color = 'currentColor', strokeWidth = 2, }) => {
19
19
  return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
20
- <Path d="M2 2l20 20"/>
21
- <Path d="M12 12a3 3 0 0 0 3-3V5a3 3 0 1 0-6 0v1"/>
22
- <Path d="M19 10v2a7 7 0 0 1-11.18 5.66"/>
23
- <Path d="M4.27 16.73A7 7 0 0 1 5 12v-2"/>
24
- <Path d="M12 17v5"/>
20
+ <Line x1="2" y1="2" x2="22" y2="22"/>
21
+ <Path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2"/>
22
+ <Path d="M5 10v2a7 7 0 0 0 12 5"/>
23
+ <Path d="M15 9.34V5a3 3 0 0 0-5.68-1.33"/>
24
+ <Path d="M9 9v3a3 3 0 0 0 5.12 2.12"/>
25
+ <Line x1="12" y1="19" x2="12" y2="22"/>
26
+ </Svg>);
27
+ };
28
+ /**
29
+ * Filled Microphone Icon (Variant 2)
30
+ * Solid/filled microphone for active state
31
+ */
32
+ export const MicIconFilled = ({ size = 24, color = 'currentColor', strokeWidth = 2, }) => {
33
+ return (<Svg width={size} height={size} viewBox="0 0 24 24" fill={color} stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
34
+ <Path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
35
+ <Path d="M19 10v2a7 7 0 0 1-14 0v-2" fill="none" stroke={color} strokeWidth={strokeWidth}/>
36
+ <Line x1="12" y1="19" x2="12" y2="22" fill="none" stroke={color} strokeWidth={strokeWidth}/>
37
+ </Svg>);
38
+ };
39
+ /**
40
+ * Filled Microphone Off Icon (Variant 2)
41
+ * Solid microphone with mute indicator
42
+ */
43
+ export const MicOffIconFilled = ({ size = 24, color = 'currentColor', strokeWidth = 2, }) => {
44
+ return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
45
+ <Line x1="2" y1="2" x2="22" y2="22"/>
46
+ <Path d="M15 9.34V5a3 3 0 0 0-5.68-1.33" fill={color}/>
47
+ <Path d="M9 9v3a3 3 0 0 0 5.12 2.12" fill={color}/>
48
+ <Path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2" fill="none"/>
49
+ <Path d="M5 10v2a7 7 0 0 0 12 5" fill="none"/>
50
+ <Line x1="12" y1="19" x2="12" y2="22"/>
51
+ </Svg>);
52
+ };
53
+ /**
54
+ * Wave Microphone Icon (Variant 3)
55
+ * Microphone with sound waves
56
+ */
57
+ export const MicIconWave = ({ size = 24, color = 'currentColor', strokeWidth = 2, }) => {
58
+ return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
59
+ <Path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
60
+ <Path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
61
+ <Line x1="12" y1="19" x2="12" y2="22"/>
62
+ {/* Sound waves */}
63
+ <Path d="M20 7v10" opacity="0.5"/>
64
+ <Path d="M23 9v6" opacity="0.3"/>
65
+ <Path d="M4 7v10" opacity="0.5"/>
66
+ <Path d="M1 9v6" opacity="0.3"/>
67
+ </Svg>);
68
+ };
69
+ /**
70
+ * Wave Microphone Off Icon (Variant 3)
71
+ * Microphone with muted waves
72
+ */
73
+ export const MicOffIconWave = ({ size = 24, color = 'currentColor', strokeWidth = 2, }) => {
74
+ return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
75
+ <Line x1="2" y1="2" x2="22" y2="22"/>
76
+ <Path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2"/>
77
+ <Path d="M5 10v2a7 7 0 0 0 12 5"/>
78
+ <Path d="M15 9.34V5a3 3 0 0 0-5.68-1.33"/>
79
+ <Path d="M9 9v3a3 3 0 0 0 5.12 2.12"/>
80
+ <Line x1="12" y1="19" x2="12" y2="22"/>
81
+ {/* Muted waves */}
82
+ <Path d="M20 7v4" opacity="0.2" strokeDasharray="2,2"/>
83
+ <Path d="M4 7v4" opacity="0.2" strokeDasharray="2,2"/>
25
84
  </Svg>);
26
85
  };
27
86
  export default MicIcon;
28
- //# sourceMappingURL=MicIcon.js.map
@@ -35,6 +35,18 @@ export interface VoiceMicrophoneProps {
35
35
  * @default true
36
36
  */
37
37
  enablePartialResults?: boolean;
38
+ /**
39
+ * Whether to continue listening after getting results (continuous mode)
40
+ * When enabled, the microphone will automatically restart after getting results
41
+ * @default false
42
+ */
43
+ continuous?: boolean;
44
+ /**
45
+ * Maximum silence duration in milliseconds before stopping (continuous mode)
46
+ * Only applies when continuous mode is enabled
47
+ * @default 5000 (5 seconds)
48
+ */
49
+ maxSilenceDuration?: number;
38
50
  /**
39
51
  * Custom render function for the component
40
52
  * Receives isRecording state and control functions
@@ -78,4 +90,3 @@ export interface VoiceMicrophoneProps {
78
90
  */
79
91
  declare const VoiceMicrophone: React.FC<VoiceMicrophoneProps>;
80
92
  export default VoiceMicrophone;
81
- //# sourceMappingURL=VoiceMicrophone.d.ts.map