0
# Specialized Components
1

2
Purpose-built components for specific use cases including pricing cards, social icons, progress indicators, navigation tabs, and floating action buttons.
3

4
## Capabilities
5

6
### PricingCard
7

8
Pricing plan display component for showcasing subscription tiers, product pricing, and feature comparisons with customizable layouts and styling.
9

10
```typescript { .api }
11
/**
12
 * Pricing plan display component
13
 */
14
interface PricingCardProps {
15
  /** Card container styles */
16
  containerStyle?: StyleProp<ViewStyle>;
17
  /** Wrapper styles */
18
  wrapperStyle?: StyleProp<ViewStyle>;
19
  /** Pricing plan title */
20
  title?: string;
21
  /** Price value */
22
  price: string | number;
23
  /** Currency symbol */
24
  currency?: string;
25
  /** Feature list */
26
  info?: string[];
27
  /** Action button configuration */
28
  button?: Partial<ButtonProps>;
29
  /** Title styles */
30
  titleStyle?: StyleProp<TextStyle>;
31
  /** Price styles */
32
  priceStyle?: StyleProp<TextStyle>;
33
  /** Info text styles */
34
  infoStyle?: StyleProp<TextStyle>;
35
  /** Card color theme */
36
  color?: string;
37
  /** Touch handler */
38
  onButtonPress?(): void;
39
}
40
```
41

42
**Usage Examples:**
43

44
```typescript
45
import React from 'react';
46
import { PricingCard } from 'react-native-elements';
47

48
// Basic pricing card
49
<PricingCard
50
  color="#007AFF"
51
  title="Basic Plan"
52
  price="$9.99"
53
  info={[
54
    'Up to 5 projects',
55
    '10GB storage',
56
    'Email support',
57
    'Basic analytics'
58
  ]}
59
  button={{
60
    title: 'Get Started',
61
    icon: 'flight-takeoff',
62
  }}
63
  onButtonPress={() => selectPlan('basic')}
64
/>
65

66
// Premium pricing card with custom styling
67
<PricingCard
68
  containerStyle={{
69
    borderWidth: 2,
70
    borderColor: '#FFD700',
71
    borderRadius: 15,
72
    elevation: 5,
73
  }}
74
  wrapperStyle={{
75
    backgroundColor: '#fff',
76
  }}
77
  title="Premium Plan"
78
  titleStyle={{
79
    fontSize: 20,
80
    fontWeight: 'bold',
81
    color: '#333',
82
  }}
83
  price="$29.99"
84
  currency="$"
85
  priceStyle={{
86
    fontSize: 36,
87
    color: '#FFD700',
88
    fontWeight: 'bold',
89
  }}
90
  info={[
91
    'Unlimited projects',
92
    '100GB storage',
93
    'Priority support',
94
    'Advanced analytics',
95
    'Custom integrations',
96
    'Team collaboration'
97
  ]}
98
  infoStyle={{
99
    fontSize: 14,
100
    color: '#666',
101
  }}
102
  button={{
103
    title: 'Upgrade Now',
104
    buttonStyle: {
105
      backgroundColor: '#FFD700',
106
      borderRadius: 25,
107
    },
108
    titleStyle: {
109
      color: '#333',
110
      fontWeight: 'bold',
111
    },
112
  }}
113
  color="#FFD700"
114
/>
115

116
// Enterprise pricing card
117
<PricingCard
118
  title="Enterprise"
119
  price="Custom"
120
  info={[
121
    'Everything in Premium',
122
    'Unlimited storage',
123
    'Dedicated support',
124
    'Custom SLA',
125
    'On-premise deployment',
126
    'Advanced security'
127
  ]}
128
  button={{
129
    title: 'Contact Sales',
130
    type: 'outline',
131
  }}
132
  containerStyle={{
133
    backgroundColor: '#f8f9fa',
134
  }}
135
  color="#333"
136
  onButtonPress={() => openContactForm()}
137
/>
138

139
// Comparison layout with multiple cards
140
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
141
  <PricingCard
142
    containerStyle={{ width: '30%' }}
143
    title="Starter"
144
    price="Free"
145
    info={['1 project', '1GB storage']}
146
    button={{ title: 'Start Free' }}
147
    color="#6c757d"
148
  />
149
  
150
  <PricingCard
151
    containerStyle={{ 
152
      width: '30%',
153
      borderWidth: 2,
154
      borderColor: '#007AFF',
155
    }}
156
    title="Pro"
157
    price="$19.99"
158
    info={['10 projects', '50GB storage', 'Priority support']}
159
    button={{ 
160
      title: 'Most Popular',
161
      buttonStyle: { backgroundColor: '#007AFF' }
162
    }}
163
    color="#007AFF"
164
  />
165
  
166
  <PricingCard
167
    containerStyle={{ width: '30%' }}
168
    title="Business"
169
    price="$49.99"
170
    info={['Unlimited projects', '500GB storage', 'Phone support']}
171
    button={{ title: 'Contact Us' }}
172
    color="#28a745"
173
  />
174
</View>
175
```
176

177
### SocialIcon
178

179
Social media platform icons component with built-in brand colors, platform recognition, and customizable styling for social sharing and profile links.
180

181
```typescript { .api }
182
/**
183
 * Social media platform icons with brand colors
184
 */
185
interface SocialIconProps extends TouchableOpacityProps {
186
  /** Social platform type */
187
  type: SocialMediaType;
188
  /** Raised/elevated appearance */
189
  raised?: boolean;
190
  /** Light color variant */
191
  light?: boolean;
192
  /** Icon size */
193
  iconSize?: number;
194
  /** Icon color */
195
  iconColor?: string;
196
  /** Container styles */
197
  style?: StyleProp<ViewStyle>;
198
  /** Font family */
199
  fontFamily?: string;
200
  /** Font weight */
201
  fontWeight?: string;
202
  /** Touch handler */
203
  onPress?(): void;
204
  /** Long press handler */
205
  onLongPress?(): void;
206
  /** Icon styles */
207
  iconStyle?: StyleProp<TextStyle>;
208
  /** Underlay color */
209
  underlayColor?: string;
210
  /** Title text */
211
  title?: string;
212
  /** Button configuration */
213
  button?: boolean;
214
  /** Loading state */
215
  loading?: boolean;
216
  /** Activity indicator props */
217
  activityIndicatorStyle?: StyleProp<ViewStyle>;
218
  /** Small size variant */
219
  small?: boolean;
220
  /** Medium size variant */
221
  medium?: boolean;
222
  /** Large size variant */
223
  large?: boolean;
224
  /** Extra large size variant */
225
  xlarge?: boolean;
226
}
227

228
/**
229
 * Supported social media platform types
230
 */
231
type SocialMediaType =
232
  | 'facebook'
233
  | 'twitter'
234
  | 'google-plus-official'
235
  | 'pinterest'
236
  | 'linkedin'
237
  | 'youtube'
238
  | 'vimeo'
239
  | 'tumblr'
240
  | 'instagram'
241
  | 'quora'
242
  | 'foursquare'
243
  | 'wordpress'
244
  | 'stumbleupon'
245
  | 'github'
246
  | 'twitch'
247
  | 'medium'
248
  | 'soundcloud'
249
  | 'gitlab'
250
  | 'angellist'
251
  | 'codepen';
252
```
253

254
**Usage Examples:**
255

256
```typescript
257
import React from 'react';
258
import { SocialIcon } from 'react-native-elements';
259

260
// Basic social icons
261
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
262
  <SocialIcon
263
    type='facebook'
264
    onPress={() => openSocialProfile('facebook')}
265
  />
266
  <SocialIcon
267
    type='twitter'
268
    onPress={() => openSocialProfile('twitter')}
269
  />
270
  <SocialIcon
271
    type='instagram'
272
    onPress={() => openSocialProfile('instagram')}
273
  />
274
  <SocialIcon
275
    type='linkedin'
276
    onPress={() => openSocialProfile('linkedin')}
277
  />
278
</View>
279

280
// Raised social icons
281
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
282
  <SocialIcon
283
    raised
284
    type='facebook'
285
    onPress={() => shareOnFacebook()}
286
  />
287
  <SocialIcon
288
    raised
289
    type='twitter'
290
    onPress={() => shareOnTwitter()}
291
  />
292
  <SocialIcon
293
    raised
294
    type='google-plus-official'
295
    onPress={() => shareOnGoogle()}
296
  />
297
</View>
298

299
// Light variant social icons
300
<View style={{ backgroundColor: '#333', padding: 20 }}>
301
  <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
302
    <SocialIcon type='github' light />
303
    <SocialIcon type='medium' light />
304
    <SocialIcon type='youtube' light />
305
  </View>
306
</View>
307

308
// Custom sized and styled social icons
309
<SocialIcon
310
  type='facebook'
311
  iconSize={30}
312
  style={{
313
    width: 80,
314
    height: 80,
315
    borderRadius: 40,
316
  }}
317
  iconStyle={{
318
    color: '#fff',
319
  }}
320
  onPress={handleFacebookShare}
321
/>
322

323
// Social icon with title (button style)
324
<SocialIcon
325
  title='Sign In With Facebook'
326
  button
327
  type='facebook'
328
  style={{ width: 250 }}
329
  onPress={signInWithFacebook}
330
/>
331

332
// Loading state social icon
333
<SocialIcon
334
  type='google-plus-official'
335
  loading={isSigningIn}
336
  button
337
  title={isSigningIn ? 'Signing In...' : 'Sign In With Google'}
338
  onPress={signInWithGoogle}
339
/>
340

341
// Custom color social icon
342
<SocialIcon
343
  type='twitter'
344
  iconColor='#1DA1F2'
345
  style={{
346
    backgroundColor: '#fff',
347
    borderWidth: 1,
348
    borderColor: '#1DA1F2',
349
  }}
350
  raised
351
/>
352

353
// Different sizes
354
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
355
  <SocialIcon type='facebook' small />
356
  <SocialIcon type='facebook' medium />
357
  <SocialIcon type='facebook' large />
358
  <SocialIcon type='facebook' xlarge />
359
</View>
360
```
361

362
### LinearProgress
363

364
Linear progress indicator component for showing task completion, loading states, and progress tracking with customizable appearance and animation.
365

366
```typescript { .api }
367
/**
368
 * Linear progress indicator
369
 */
370
interface LinearProgressProps {
371
  /** Progress value (0-1) */
372
  value?: number;
373
  /** Progress variant type */
374
  variant?: 'determinate' | 'indeterminate';
375
  /** Progress bar color */
376
  color?: 'primary' | 'secondary' | string;
377
  /** Track color */
378
  trackColor?: string;
379
  /** Container styles */
380
  style?: StyleProp<ViewStyle>;
381
  /** Animation configuration */
382
  animation?: {
383
    duration?: number;
384
  };
385
}
386
```
387

388
**Usage Examples:**
389

390
```typescript
391
import React, { useState, useEffect } from 'react';
392
import { LinearProgress } from 'react-native-elements';
393

394
// Determinate progress bar
395
const [progress, setProgress] = useState(0);
396

397
useEffect(() => {
398
  const timer = setInterval(() => {
399
    setProgress(prev => (prev >= 1 ? 0 : prev + 0.1));
400
  }, 1000);
401
  return () => clearInterval(timer);
402
}, []);
403

404
<View>
405
  <Text>Upload Progress: {Math.round(progress * 100)}%</Text>
406
  <LinearProgress
407
    value={progress}
408
    variant="determinate"
409
    color="#007AFF"
410
    trackColor="#E0E0E0"
411
    style={{ marginVertical: 10, height: 8, borderRadius: 4 }}
412
  />
413
</View>
414

415
// Indeterminate progress bar (loading)
416
<LinearProgress
417
  variant="indeterminate"
418
  color="#4caf50"
419
  style={{ marginVertical: 20 }}
420
/>
421

422
// Custom styled progress bars
423
<View>
424
  <Text h4>File Processing</Text>
425
  <LinearProgress
426
    value={0.7}
427
    color="#ff9800"
428
    trackColor="#fff3e0"
429
    style={{
430
      height: 12,
431
      borderRadius: 6,
432
      backgroundColor: '#fff3e0',
433
      marginVertical: 10,
434
    }}
435
  />
436
  
437
  <Text h4>Download Complete</Text>
438
  <LinearProgress
439
    value={1}
440
    color="#4caf50"
441
    trackColor="#e8f5e8"
442
    style={{
443
      height: 6,
444
      borderRadius: 3,
445
      marginVertical: 10,
446
    }}
447
  />
448
</View>
449

450
// Multiple progress indicators
451
<View>
452
  <View style={{ marginBottom: 15 }}>
453
    <Text>CPU Usage: 45%</Text>
454
    <LinearProgress
455
      value={0.45}
456
      color="#2196f3"
457
      style={{ marginTop: 5, height: 4 }}
458
    />
459
  </View>
460
  
461
  <View style={{ marginBottom: 15 }}>
462
    <Text>Memory: 78%</Text>
463
    <LinearProgress
464
      value={0.78}
465
      color="#ff9800"
466
      style={{ marginTop: 5, height: 4 }}
467
    />
468
  </View>
469
  
470
  <View style={{ marginBottom: 15 }}>
471
    <Text>Storage: 23%</Text>
472
    <LinearProgress
473
      value={0.23}
474
      color="#4caf50"
475
      style={{ marginTop: 5, height: 4 }}
476
    />
477
  </View>
478
</View>
479

480
// Animated progress with steps
481
const steps = ['Preparing', 'Processing', 'Finalizing', 'Complete'];
482
const [currentStep, setCurrentStep] = useState(0);
483

484
<View>
485
  <Text h4>{steps[currentStep]}</Text>
486
  <LinearProgress
487
    value={(currentStep + 1) / steps.length}
488
    color="#9c27b0"
489
    style={{
490
      marginVertical: 15,
491
      height: 10,
492
      borderRadius: 5,
493
    }}
494
    animation={{ duration: 500 }}
495
  />
496
  <Text style={{ textAlign: 'center', color: '#666' }}>
497
    Step {currentStep + 1} of {steps.length}
498
  </Text>
499
</View>
500
```
501

502
### Tab & TabView
503

504
Tab navigation components for creating tabbed interfaces with swipeable content and customizable tab indicators and styling.
505

506
```typescript { .api }
507
/**
508
 * Tab navigation component
509
 */
510
interface TabProps {
511
  /** Tab value/key */
512
  value: number;
513
  /** Value change handler */
514
  onChange(value: number): void;
515
  /** Disable tab functionality */
516
  disableIndicator?: boolean;
517
  /** Indicator styles */
518
  indicatorStyle?: StyleProp<ViewStyle>;
519
  /** Variant type */
520
  variant?: 'primary' | 'default';
521
  /** Scrollable tabs */
522
  scrollable?: boolean;
523
  /** Dense layout */
524
  dense?: boolean;
525
  /** Tab container styles */
526
  containerStyle?: StyleProp<ViewStyle>;
527
}
528

529
/**
530
 * Individual tab item
531
 */
532
interface TabItemProps extends ButtonProps {
533
  /** Tab title */
534
  title?: string;
535
  /** Tab icon */
536
  icon?: IconNode;
537
  /** Title styles */
538
  titleStyle?: StyleProp<TextStyle | ViewStyle>;
539
  /** Button styles */
540
  buttonStyle?: StyleProp<ViewStyle>;
541
  /** Container styles */
542
  containerStyle?: StyleProp<ViewStyle>;
543
}
544

545
/**
546
 * TabView component for swipeable content
547
 */
548
interface TabViewProps {
549
  /** Current tab value */
550
  value: number;
551
  /** Value change handler */
552
  onChange(value: number): void;
553
  /** Tab items configuration */
554
  children: React.ReactElement<TabViewItemProps>[];
555
  /** Animation type */
556
  animationType?: 'spring' | 'timing';
557
  /** Disable swipe */
558
  disableSwipe?: boolean;
559
  /** Tab bar position */
560
  tabBarPosition?: 'top' | 'bottom';
561
  /** Container styles */
562
  containerStyle?: StyleProp<ViewStyle>;
563
}
564

565
/**
566
 * TabView item component
567
 */
568
interface TabViewItemProps {
569
  /** Item children */
570
  children?: React.ReactNode;
571
  /** Container styles */
572
  style?: StyleProp<ViewStyle>;
573
}
574
```
575

576
**Usage Examples:**
577

578
```typescript
579
import React, { useState } from 'react';
580
import { Tab, TabView, Text, Avatar } from 'react-native-elements';
581

582
// Basic tab navigation
583
const [tabIndex, setTabIndex] = useState(0);
584

585
<View>
586
  <Tab
587
    value={tabIndex}
588
    onChange={setTabIndex}
589
    indicatorStyle={{ backgroundColor: '#007AFF', height: 3 }}
590
    variant="primary"
591
  >
592
    <Tab.Item title="Tab 1" />
593
    <Tab.Item title="Tab 2" />
594
    <Tab.Item title="Tab 3" />
595
  </Tab>
596
  
597
  <TabView value={tabIndex} onChange={setTabIndex}>
598
    <TabView.Item>
599
      <Text h4>Content for Tab 1</Text>
600
    </TabView.Item>
601
    <TabView.Item>
602
      <Text h4>Content for Tab 2</Text>
603
    </TabView.Item>
604
    <TabView.Item>
605
      <Text h4>Content for Tab 3</Text>
606
    </TabView.Item>
607
  </TabView>
608
</View>
609

610
// Tabs with icons
611
<Tab
612
  value={activeTab}
613
  onChange={setActiveTab}
614
  indicatorStyle={{
615
    backgroundColor: '#FF6B6B',
616
    height: 2,
617
  }}
618
>
619
  <Tab.Item
620
    title="Home"
621
    icon={{ name: 'home', type: 'material', color: '#666' }}
622
  />
623
  <Tab.Item
624
    title="Search"
625
    icon={{ name: 'search', type: 'material', color: '#666' }}
626
  />
627
  <Tab.Item
628
    title="Profile"
629
    icon={{ name: 'person', type: 'material', color: '#666' }}
630
  />
631
</Tab>
632

633
// Scrollable tabs
634
<Tab
635
  value={scrollableIndex}
636
  onChange={setScrollableIndex}
637
  scrollable
638
  containerStyle={{ backgroundColor: '#f8f9fa' }}
639
>
640
  <Tab.Item title="Dashboard" />
641
  <Tab.Item title="Analytics" />
642
  <Tab.Item title="Reports" />
643
  <Tab.Item title="Settings" />
644
  <Tab.Item title="Users" />
645
  <Tab.Item title="Billing" />
646
</Tab>
647

648
// Custom styled tabs
649
<Tab
650
  value={customIndex}
651
  onChange={setCustomIndex}
652
  indicatorStyle={{
653
    backgroundColor: '#4caf50',
654
    height: 4,
655
    borderRadius: 2,
656
  }}
657
  containerStyle={{
658
    backgroundColor: '#fff',
659
    elevation: 2,
660
  }}
661
>
662
  <Tab.Item
663
    title="Recent"
664
    titleStyle={{ fontSize: 16, fontWeight: 'bold' }}
665
    buttonStyle={{
666
      paddingVertical: 15,
667
    }}
668
  />
669
  <Tab.Item
670
    title="Popular"
671
    titleStyle={{ fontSize: 16, fontWeight: 'bold' }}
672
    buttonStyle={{
673
      paddingVertical: 15,
674
    }}
675
  />
676
</Tab>
677

678
// Complete TabView with content
679
<TabView
680
  value={viewIndex}
681
  onChange={setViewIndex}
682
  animationType="spring"
683
  disableSwipe={false}
684
  containerStyle={{ flex: 1 }}
685
>
686
  <TabView.Item style={{ padding: 20 }}>
687
    <View>
688
      <Text h3>Dashboard</Text>
689
      <Text>Welcome to your dashboard</Text>
690
      {/* Dashboard content */}
691
    </View>
692
  </TabView.Item>
693
  
694
  <TabView.Item style={{ padding: 20 }}>
695
    <View>
696
      <Text h3>Messages</Text>
697
      <Text>Your recent messages</Text>
698
      {/* Messages content */}
699
    </View>
700
  </TabView.Item>
701
  
702
  <TabView.Item style={{ padding: 20 }}>
703
    <View>
704
      <Text h3>Settings</Text>
705
      <Text>App configuration</Text>
706
      {/* Settings content */}
707
    </View>
708
  </TabView.Item>
709
</TabView>
710
```
711

712
### SpeedDial & FAB
713

714
Floating Action Button (FAB) and SpeedDial components for quick access actions and expandable action menus with Material Design styling.
715

716
```typescript { .api }
717
/**
718
 * Material Design floating action button
719
 */
720
interface FABProps extends TouchableOpacityProps {
721
  /** FAB title text */
722
  title?: string;
723
  /** FAB icon */
724
  icon?: IconNode;
725
  /** FAB color */
726
  color?: string;
727
  /** FAB size */
728
  size?: 'small' | 'large';
729
  /** Button styles */
730
  buttonStyle?: StyleProp<ViewStyle>;
731
  /** Title styles */
732
  titleStyle?: StyleProp<TextStyle>;
733
  /** Icon styles */
734
  iconStyle?: StyleProp<ViewStyle>;
735
  /** Container styles */
736
  containerStyle?: StyleProp<ViewStyle>;
737
  /** Placement position */
738
  placement?: 'left' | 'right';
739
  /** Loading state */
740
  loading?: boolean;
741
  /** Loading props */
742
  loadingProps?: ActivityIndicatorProps;
743
  /** Visible state */
744
  visible?: boolean;
745
  /** Upper case title */
746
  upperCase?: boolean;
747
}
748

749
/**
750
 * Expandable floating action button with multiple actions
751
 */
752
interface SpeedDialProps {
753
  /** SpeedDial visibility */
754
  isOpen: boolean;
755
  /** Icon for closed state */
756
  icon?: IconNode;
757
  /** Icon for open state */
758
  openIcon?: IconNode;
759
  /** SpeedDial actions */
760
  actions: SpeedDialActionProps[];
761
  /** Open handler */
762
  onOpen?(): void;
763
  /** Close handler */
764
  onClose?(): void;
765
  /** Toggle handler */
766
  onToggle?(): void;
767
  /** Button styles */
768
  buttonStyle?: StyleProp<ViewStyle>;
769
  /** Container styles */
770
  containerStyle?: StyleProp<ViewStyle>;
771
  /** Overlay color */
772
  overlayColor?: string;
773
  /** Label placement */
774
  labelPressable?: boolean;
775
  /** Transition delay */
776
  transitionDelay?: number;
777
}
778

779
/**
780
 * SpeedDial action configuration
781
 */
782
interface SpeedDialActionProps {
783
  /** Action icon */
784
  icon: IconNode;
785
  /** Action title/label */
786
  title?: string;
787
  /** Action handler */
788
  onPress(): void;
789
  /** Button styles */
790
  buttonStyle?: StyleProp<ViewStyle>;
791
  /** Title styles */
792
  titleStyle?: StyleProp<TextStyle>;
793
  /** Container styles */
794
  containerStyle?: StyleProp<ViewStyle>;
795
}
796
```
797

798
**Usage Examples:**
799

800
```typescript
801
import React, { useState } from 'react';
802
import { FAB, SpeedDial } from 'react-native-elements';
803

804
// Basic FAB
805
<FAB
806
  icon={{ name: 'add', color: 'white' }}
807
  color="#007AFF"
808
  onPress={() => console.log('FAB pressed')}
809
  placement="right"
810
/>
811

812
// FAB with title
813
<FAB
814
  title="Create"
815
  icon={{ name: 'create', color: 'white' }}
816
  color="#4caf50"
817
  onPress={handleCreate}
818
  upperCase
819
/>
820

821
// Small FAB with loading state
822
<FAB
823
  icon={{ name: 'save', color: 'white' }}
824
  size="small"
825
  color="#ff9800"
826
  loading={isSaving}
827
  onPress={handleSave}
828
/>
829

830
// SpeedDial with multiple actions
831
const [speedDialOpen, setSpeedDialOpen] = useState(false);
832

833
<SpeedDial
834
  isOpen={speedDialOpen}
835
  icon={{ name: 'add', color: '#fff' }}
836
  openIcon={{ name: 'close', color: '#fff' }}
837
  onOpen={() => setSpeedDialOpen(!speedDialOpen)}
838
  onClose={() => setSpeedDialOpen(!speedDialOpen)}
839
  actions={[
840
    {
841
      icon: { name: 'email', color: '#fff' },
842
      title: 'Email',
843
      onPress: () => console.log('Email pressed'),
844
    },
845
    {
846
      icon: { name: 'phone', color: '#fff' },
847
      title: 'Call',
848
      onPress: () => console.log('Call pressed'),
849
    },
850
    {
851
      icon: { name: 'message', color: '#fff' },
852
      title: 'Message',
853
      onPress: () => console.log('Message pressed'),
854
    },
855
  ]}
856
/>
857

858
// Custom styled SpeedDial
859
<SpeedDial
860
  isOpen={customSpeedDialOpen}
861
  icon={{ name: 'menu', color: '#fff' }}
862
  openIcon={{ name: 'close', color: '#fff' }}
863
  onOpen={() => setCustomSpeedDialOpen(!customSpeedDialOpen)}
864
  onClose={() => setCustomSpeedDialOpen(!customSpeedDialOpen)}
865
  buttonStyle={{
866
    backgroundColor: '#9c27b0',
867
  }}
868
  actions={[
869
    {
870
      icon: { name: 'camera', color: '#fff' },
871
      title: 'Take Photo',
872
      onPress: openCamera,
873
      buttonStyle: { backgroundColor: '#2196f3' },
874
    },
875
    {
876
      icon: { name: 'photo-library', color: '#fff' },
877
      title: 'Gallery',
878
      onPress: openGallery,
879
      buttonStyle: { backgroundColor: '#4caf50' },
880
    },
881
    {
882
      icon: { name: 'videocam', color: '#fff' },
883
      title: 'Record Video',
884
      onPress: recordVideo,
885
      buttonStyle: { backgroundColor: '#ff5722' },
886
    },
887
  ]}
888
  overlayColor="rgba(0,0,0,0.5)"
889
  transitionDelay={50}
890
/>
891

892
// FAB with different placements
893
<View style={{ flex: 1 }}>
894
  <FAB
895
    icon={{ name: 'share', color: 'white' }}
896
    placement="left"
897
    color="#e91e63"
898
    onPress={handleShare}
899
  />
900
  
901
  <FAB
902
    icon={{ name: 'favorite', color: 'white' }}
903
    placement="right"
904
    color="#f44336"
905
    onPress={handleFavorite}
906
    containerStyle={{ bottom: 80 }}
907
  />
908
</View>
909

910
// Conditional FAB visibility
911
<FAB
912
  icon={{ name: 'edit', color: 'white' }}
913
  color="#607d8b"
914
  visible={showEditFAB}
915
  onPress={handleEdit}
916
  buttonStyle={{
917
    borderRadius: 28,
918
  }}
919
/>
920
```