0
# Helper Functions
1

2
Utility functions for icon management, text scaling, component enhancement, and other helpful tools to extend React Native Elements functionality.
3

4
## Capabilities
5

6
### Icon Management
7

8
Functions for managing and extending the icon system in React Native Elements.
9

10
```typescript { .api }
11
/**
12
 * Returns the appropriate vector icon component for given icon type
13
 * @param type - Icon family identifier
14
 * @returns Vector icon component class
15
 */
16
function getIconType(type: IconType): React.ComponentType<any>;
17

18
/**
19
 * Registers custom icon families for use with Icon component
20
 * @param id - Unique identifier for the icon family
21
 * @param customIcon - Icon component class
22
 */
23
function registerCustomIconType(id: string, customIcon: any): void;
24

25
/**
26
 * Supported icon family types
27
 */
28
type IconType = 
29
  | 'material'
30
  | 'material-community'
31
  | 'simple-line-icon'
32
  | 'zocial'
33
  | 'font-awesome'
34
  | 'octicon'
35
  | 'ionicon'
36
  | 'foundation'
37
  | 'evilicon'
38
  | 'entypo'
39
  | 'antdesign'
40
  | 'font-awesome-5'
41
  | 'feather'
42
  | 'fontisto';
43
```
44

45
**Usage Examples:**
46

47
```typescript
48
import { 
49
  getIconType, 
50
  registerCustomIconType,
51
  Icon 
52
} from 'react-native-elements';
53

54
// Get icon component for a specific type
55
const MaterialIcons = getIconType('material');
56
const FontAwesome = getIconType('font-awesome');
57

58
// Register custom icon family
59
import CustomIconSet from './CustomIconSet';
60

61
registerCustomIconType('custom-icons', CustomIconSet);
62

63
// Now you can use custom icons
64
<Icon
65
  name="custom-home"
66
  type="custom-icons"
67
  size={24}
68
  color="#007AFF"
69
/>
70

71
// Register multiple custom icon sets
72
import BusinessIcons from './BusinessIcons';
73
import WeatherIcons from './WeatherIcons';
74

75
registerCustomIconType('business', BusinessIcons);
76
registerCustomIconType('weather', WeatherIcons);
77

78
// Use registered custom icons
79
<View>
80
  <Icon name="chart" type="business" size={30} />
81
  <Icon name="sunny" type="weather" size={30} />
82
  <Icon name="building" type="business" size={30} />
83
</View>
84

85
// Dynamic icon type selection
86
function DynamicIcon({ iconFamily, iconName, ...props }) {
87
  const IconComponent = getIconType(iconFamily);
88
  
89
  return (
90
    <IconComponent
91
      name={iconName}
92
      {...props}
93
    />
94
  );
95
}
96

97
<DynamicIcon
98
  iconFamily="material-community"
99
  iconName="account-circle"
100
  size={40}
101
  color="#4caf50"
102
/>
103

104
// Validate icon type before use
105
function SafeIcon({ type, ...props }) {
106
  try {
107
    const IconComponent = getIconType(type);
108
    return <IconComponent {...props} />;
109
  } catch (error) {
110
    console.warn(`Icon type "${type}" not found, using default`);
111
    return <Icon type="material" name="help" {...props} />;
112
  }
113
}
114
```
115

116
### Text Scaling
117

118
Responsive text scaling function for creating adaptive typography across different screen sizes and densities.
119

120
```typescript { .api }
121
/**
122
 * Responsive text scaling function using react-native-size-matters
123
 * @param size - Base font size
124
 * @param factor - Scaling factor (default: 0.25)
125
 * @returns Scaled size number based on device dimensions
126
 */
127
function normalize(size: number, factor?: number): number;
128
```
129

130
**Usage Examples:**
131

132
```typescript
133
import { normalize } from 'react-native-elements';
134
import { Text, StyleSheet } from 'react-native';
135

136
// Basic text normalization
137
const styles = StyleSheet.create({
138
  title: {
139
    fontSize: normalize(24),
140
    fontWeight: 'bold',
141
  },
142
  subtitle: {
143
    fontSize: normalize(18),
144
  },
145
  body: {
146
    fontSize: normalize(14),
147
  },
148
  caption: {
149
    fontSize: normalize(12),
150
  },
151
});
152

153
function ResponsiveText() {
154
  return (
155
    <View>
156
      <Text style={styles.title}>Large Title</Text>
157
      <Text style={styles.subtitle}>Subtitle Text</Text>
158
      <Text style={styles.body}>Body text content</Text>
159
      <Text style={styles.caption}>Small caption</Text>
160
    </View>
161
  );
162
}
163

164
// Custom scaling factor
165
const customStyles = StyleSheet.create({
166
  extraLargeTitle: {
167
    fontSize: normalize(32, 0.3), // More aggressive scaling
168
  },
169
  subtleTitle: {
170
    fontSize: normalize(20, 0.1), // Less aggressive scaling
171
  },
172
});
173

174
// Dynamic text scaling based on content importance
175
function AdaptiveText({ children, importance = 'normal', ...props }) {
176
  const fontSize = {
177
    high: normalize(18, 0.3),
178
    normal: normalize(16, 0.25),
179
    low: normalize(14, 0.2),
180
  }[importance];
181
  
182
  return (
183
    <Text style={[{ fontSize }, props.style]} {...props}>
184
      {children}
185
    </Text>
186
  );
187
}
188

189
<View>
190
  <AdaptiveText importance="high">Important Message</AdaptiveText>
191
  <AdaptiveText importance="normal">Regular Content</AdaptiveText>
192
  <AdaptiveText importance="low">Fine Print</AdaptiveText>
193
</View>
194

195
// Responsive button text
196
function ResponsiveButton({ title, ...props }) {
197
  return (
198
    <Button
199
      title={title}
200
      titleStyle={{
201
        fontSize: normalize(16),
202
        fontWeight: 'bold',
203
      }}
204
      {...props}
205
    />
206
  );
207
}
208

209
// Create a responsive text component
210
function createResponsiveText(baseSize, scaleFactor = 0.25) {
211
  return function ResponsiveTextComponent({ children, style, ...props }) {
212
    return (
213
      <Text
214
        style={[
215
          { fontSize: normalize(baseSize, scaleFactor) },
216
          style
217
        ]}
218
        {...props}
219
      >
220
        {children}
221
      </Text>
222
    );
223
  };
224
}
225

226
const H1 = createResponsiveText(32, 0.3);
227
const H2 = createResponsiveText(28, 0.3);
228
const H3 = createResponsiveText(24, 0.25);
229
const Body = createResponsiveText(16, 0.2);
230

231
<View>
232
  <H1>Main Heading</H1>
233
  <H2>Sub Heading</H2>
234
  <H3>Section Title</H3>
235
  <Body>Body content text</Body>
236
</View>
237
```
238

239
### Component Enhancement
240

241
Higher-order components and utilities for enhancing existing components with additional functionality.
242

243
```typescript { .api }
244
/**
245
 * Higher-order component that adds badge overlay to any component
246
 * @param badgeProps - Badge configuration properties
247
 * @returns HOC function that wraps components with badge functionality
248
 */
249
function withBadge<P>(
250
  badgeProps?: Partial<BadgeProps>
251
): (WrappedComponent: React.ComponentType<P>) => React.ComponentType<P>;
252

253
/**
254
 * Badge properties for withBadge HOC
255
 */
256
interface BadgeProps {
257
  /** Badge content */
258
  value?: React.ReactNode;
259
  /** Badge status type */
260
  status?: 'primary' | 'success' | 'warning' | 'error';
261
  /** Badge container styles */
262
  badgeStyle?: StyleProp<ViewStyle>;
263
  /** Container styles */
264
  containerStyle?: StyleProp<ViewStyle>;
265
  /** Text styles */
266
  textStyle?: StyleProp<TextStyle>;
267
}
268
```
269

270
**Usage Examples:**
271

272
```typescript
273
import { withBadge, Icon, Avatar, Button } from 'react-native-elements';
274

275
// Basic badge enhancement
276
const BadgedIcon = withBadge({
277
  value: 5,
278
  status: 'error',
279
})(Icon);
280

281
<BadgedIcon
282
  name="notifications"
283
  type="material"
284
  color="#666"
285
  size={30}
286
/>
287

288
// Dynamic badge values
289
const BadgedAvatar = withBadge({
290
  value: notificationCount,
291
  status: 'primary',
292
  badgeStyle: { right: -6, top: -3 },
293
})(Avatar);
294

295
<BadgedAvatar
296
  source={{ uri: 'https://example.com/avatar.jpg' }}
297
  size="medium"
298
  rounded
299
/>
300

301
// Conditional badge display
302
const ConditionalBadge = withBadge({
303
  value: hasUnreadMessages ? '!' : null,
304
  status: 'error',
305
})(Button);
306

307
<ConditionalBadge
308
  title="Messages"
309
  icon={{ name: 'mail', color: '#fff' }}
310
  onPress={openMessages}
311
/>
312

313
// Custom badge styling
314
const CustomBadgedComponent = withBadge({
315
  value: '99+',
316
  badgeStyle: {
317
    backgroundColor: '#FF6B6B',
318
    borderRadius: 12,
319
    height: 24,
320
    minWidth: 24,
321
    right: -8,
322
    top: -8,
323
  },
324
  textStyle: {
325
    color: '#fff',
326
    fontSize: 12,
327
    fontWeight: 'bold',
328
  },
329
})(View);
330

331
<CustomBadgedComponent style={{ padding: 20, backgroundColor: '#f0f0f0' }}>
332
  <Icon name="shopping-cart" size={40} />
333
</CustomBadgedComponent>
334

335
// Badge with icon content
336
const IconBadged = withBadge({
337
  value: <Icon name="check" size={12} color="#fff" />,
338
  status: 'success',
339
  badgeStyle: { right: 0, top: 0 },
340
})(Avatar);
341

342
<IconBadged
343
  title="JD"
344
  size="large"
345
  rounded
346
  containerStyle={{ backgroundColor: '#007AFF' }}
347
/>
348

349
// Multiple badges (nested withBadge)
350
const DoubleBadged = withBadge({
351
  value: 'VIP',
352
  status: 'warning',
353
  badgeStyle: { right: -10, bottom: -5 },
354
})(withBadge({
355
  value: 3,
356
  status: 'error',
357
  badgeStyle: { right: -5, top: -5 },
358
})(Avatar));
359

360
<DoubleBadged
361
  source={{ uri: 'https://example.com/vip-user.jpg' }}
362
  size="large"
363
  rounded
364
/>
365

366
// Create reusable badged components
367
function createBadgedComponent(Component, defaultBadgeProps = {}) {
368
  return function BadgedWrapper({ badge, ...props }) {
369
    if (!badge) return <Component {...props} />;
370
    
371
    const BadgedComponent = withBadge({
372
      ...defaultBadgeProps,
373
      ...badge,
374
    })(Component);
375
    
376
    return <BadgedComponent {...props} />;
377
  };
378
}
379

380
const FlexibleBadgedIcon = createBadgedComponent(Icon, {
381
  status: 'error',
382
  badgeStyle: { right: -6, top: -6 },
383
});
384

385
<FlexibleBadgedIcon
386
  name="home"
387
  badge={{ value: 2 }}
388
  size={30}
389
/>
390
```
391

392
### External Component Integration
393

394
Utilities for integrating external components with React Native Elements theming and styling system.
395

396
```typescript { .api }
397
/**
398
 * Rating components wrapped from react-native-ratings
399
 * Enhanced with theme support through withTheme HOC
400
 */
401

402
/**
403
 * Basic tap-to-rate component with theme integration
404
 */
405
interface RatingProps {
406
  /** Rating type */
407
  type?: 'star' | 'rocket' | 'bell' | 'heart';
408
  /** Current rating value */
409
  rating?: number;
410
  /** Number of rating items */
411
  count?: number;
412
  /** Rating change handler */
413
  onFinishRating?(rating: number): void;
414
  /** Show rating value */
415
  showRating?: boolean;
416
  /** Custom rating image */
417
  ratingImage?: any;
418
  /** Rating color */
419
  ratingColor?: string;
420
  /** Empty rating color */
421
  ratingBackgroundColor?: string;
422
  /** Size of rating items */
423
  imageSize?: number;
424
  /** Readonly state */
425
  readonly?: boolean;
426
  /** Start from value */
427
  startingValue?: number;
428
  /** Fraction digits */
429
  fractions?: number;
430
  /** Minimum value */
431
  minValue?: number;
432
  /** Jump to rating on tap */
433
  jumpValue?: number;
434
  /** Tap rating style */
435
  style?: StyleProp<ViewStyle>;
436
}
437

438
/**
439
 * Swipe-based rating with Airbnb styling and theme integration
440
 */
441
interface AirbnbRatingProps {
442
  /** Default rating */
443
  defaultRating?: number;
444
  /** Review array */
445
  reviews?: string[];
446
  /** Number of stars */
447
  count?: number;
448
  /** Selected color */
449
  selectedColor?: string;
450
  /** Review color */
451
  reviewColor?: string;
452
  /** Review size */
453
  reviewSize?: number;
454
  /** Show review */
455
  showReview?: boolean;
456
  /** Rating change handler */
457
  onFinishRating?(rating: number): void;
458
  /** Star size */
459
  size?: number;
460
  /** Star color */
461
  starColor?: string;
462
  /** Unselected color */
463
  unSelectedColor?: string;
464
}
465
```
466

467
**Usage Examples:**
468

469
```typescript
470
import { Rating, AirbnbRating } from 'react-native-elements';
471

472
// Basic rating component
473
<Rating
474
  showRating
475
  onFinishRating={handleRating}
476
  style={{ paddingVertical: 10 }}
477
/>
478

479
// Custom styled rating
480
<Rating
481
  type="star"
482
  ratingCount={5}
483
  imageSize={30}
484
  showRating
485
  startingValue={3.5}
486
  fractions={1}
487
  ratingColor="#FFD700"
488
  ratingBackgroundColor="#E0E0E0"
489
  onFinishRating={(rating) => {
490
    console.log('Rating is: ' + rating);
491
    setUserRating(rating);
492
  }}
493
  style={{ paddingVertical: 20 }}
494
/>
495

496
// Airbnb-style rating
497
<AirbnbRating
498
  count={5}
499
  reviews={['Terrible', 'Bad', 'OK', 'Good', 'Excellent']}
500
  defaultRating={3}
501
  size={30}
502
  onFinishRating={handleAirbnbRating}
503
/>
504

505
// Readonly rating display
506
<Rating
507
  readonly
508
  startingValue={4.2}
509
  imageSize={20}
510
  style={{ alignSelf: 'flex-start' }}
511
/>
512

513
// Custom heart rating
514
<Rating
515
  type="heart"
516
  ratingCount={5}
517
  imageSize={40}
518
  showRating
519
  onFinishRating={setHeartRating}
520
  style={{ paddingVertical: 15 }}
521
/>
522

523
// Themed rating with custom colors
524
function ThemedRating({ onRating }) {
525
  const { theme } = useTheme();
526
  
527
  return (
528
    <Rating
529
      showRating
530
      ratingColor={theme.colors.primary}
531
      ratingBackgroundColor={theme.colors.grey4}
532
      onFinishRating={onRating}
533
      style={{ paddingVertical: 10 }}
534
    />
535
  );
536
}
537

538
// Rating in product card
539
function ProductCard({ product }) {
540
  return (
541
    <Card>
542
      <Card.Title>{product.name}</Card.Title>
543
      <Card.Image source={{ uri: product.image }} />
544
      
545
      <View style={{ paddingHorizontal: 15, paddingBottom: 15 }}>
546
        <Rating
547
          readonly
548
          startingValue={product.rating}
549
          imageSize={16}
550
          style={{ alignSelf: 'flex-start', marginBottom: 10 }}
551
        />
552
        <Text style={{ fontSize: 16, fontWeight: 'bold' }}>
553
          ${product.price}
554
        </Text>
555
      </View>
556
    </Card>
557
  );
558
}
559

560
// Interactive rating form
561
function RatingForm({ onSubmit }) {
562
  const [rating, setRating] = useState(0);
563
  const [review, setReview] = useState('');
564
  
565
  return (
566
    <View style={{ padding: 20 }}>
567
      <Text h4>Rate this product</Text>
568
      
569
      <AirbnbRating
570
        count={5}
571
        reviews={['Poor', 'Fair', 'Good', 'Very Good', 'Excellent']}
572
        defaultRating={0}
573
        size={40}
574
        showReview
575
        onFinishRating={setRating}
576
      />
577
      
578
      <Input
579
        placeholder="Write a review..."
580
        multiline
581
        value={review}
582
        onChangeText={setReview}
583
        containerStyle={{ marginTop: 20 }}
584
      />
585
      
586
      <Button
587
        title="Submit Review"
588
        onPress={() => onSubmit({ rating, review })}
589
        disabled={rating === 0}
590
        buttonStyle={{ marginTop: 20 }}
591
      />
592
    </View>
593
  );
594
}
595
```