@@ -16,6 +16,7 @@ This guide covers all ways to use fonts with the `setTheme` function in Instabug
16
16
## Overview
17
17
18
18
The Instabug React Native bridge supports font loading from multiple sources:
19
+
19
20
- ** App Bundle** : Fonts included in your app assets
20
21
- ** System Fonts** : Built-in platform fonts
21
22
- ** Custom Fonts** : Any TTF/OTF font files
@@ -24,14 +25,17 @@ The Instabug React Native bridge supports font loading from multiple sources:
24
25
## Font Types Supported
25
26
26
27
### 1. Google Fonts
28
+
27
29
- Download TTF files from [ Google Fonts] ( https://fonts.google.com/ )
28
30
- Examples: Roboto, Inter, Nunito, Open Sans, Lato
29
31
30
32
### 2. Custom Fonts
33
+
31
34
- Any TTF/OTF font files
32
35
- Commercial fonts, free fonts, custom designs
33
36
34
37
### 3. System Fonts
38
+
35
39
- Platform default fonts
36
40
- No setup required
37
41
- Examples: San Francisco (iOS), Roboto (Android)
@@ -41,6 +45,7 @@ The Instabug React Native bridge supports font loading from multiple sources:
41
45
### Method 1: Bundle Fonts (Recommended)
42
46
43
47
#### Step 1: Download Font Files
48
+
44
49
``` bash
45
50
# Create fonts directory
46
51
mkdir fonts
@@ -51,6 +56,7 @@ mkdir fonts
51
56
```
52
57
53
58
#### Step 2: Add to Android
59
+
54
60
``` bash
55
61
# Create assets/fonts directory
56
62
mkdir -p android/app/src/main/assets/fonts
@@ -60,13 +66,16 @@ cp fonts/*.ttf android/app/src/main/assets/fonts/
60
66
```
61
67
62
68
#### Step 3: Add to iOS
69
+
63
70
1 . ** Add to Xcode Project:**
71
+
64
72
- Open your iOS project in Xcode
65
73
- Right-click on your project → "Add Files to [ ProjectName] "
66
74
- Select your TTF files
67
75
- Make sure "Add to target" is checked
68
76
69
77
2 . ** Update Info.plist:**
78
+
70
79
``` xml
71
80
<key >UIAppFonts</key >
72
81
<array >
@@ -78,6 +87,7 @@ cp fonts/*.ttf android/app/src/main/assets/fonts/
78
87
```
79
88
80
89
#### Step 4: Use with setTheme
90
+
81
91
``` typescript
82
92
import Instabug from ' instabug-reactnative' ;
83
93
import { Platform } from ' react-native' ;
@@ -88,19 +98,19 @@ const applyCustomTheme = () => {
88
98
primaryColor: ' #2196F3' ,
89
99
backgroundColor: ' #FFFFFF' ,
90
100
primaryTextColor: ' #333333' ,
91
-
101
+
92
102
// Text styles (Android only)
93
103
primaryTextStyle: ' normal' ,
94
104
secondaryTextStyle: ' normal' ,
95
105
ctaTextStyle: ' bold' ,
96
-
106
+
97
107
// Fonts - Android (use font paths)
98
108
... (Platform .OS === ' android' && {
99
109
primaryFontPath: ' /data/user/0/com.yourapp/files/fonts/Roboto-Regular.ttf' ,
100
110
secondaryFontPath: ' /data/user/0/com.yourapp/files/fonts/Roboto-Light.ttf' ,
101
111
ctaFontPath: ' /data/user/0/com.yourapp/files/fonts/Roboto-Bold.ttf' ,
102
112
}),
103
-
113
+
104
114
// Fonts - iOS (use font paths, not assets)
105
115
... (Platform .OS === ' ios' && {
106
116
primaryFontPath: ' fonts/Roboto-Regular.ttf' ,
@@ -112,6 +122,7 @@ const applyCustomTheme = () => {
112
122
```
113
123
114
124
### Method 2: System Fonts Only
125
+
115
126
``` typescript
116
127
import Instabug from ' instabug-reactnative' ;
117
128
@@ -123,12 +134,12 @@ const applySystemTheme = () => {
123
134
primaryTextColor: ' #333333' ,
124
135
secondaryTextColor: ' #666666' ,
125
136
titleTextColor: ' #000000' ,
126
-
137
+
127
138
// Text styles (Android only)
128
139
primaryTextStyle: ' normal' ,
129
140
secondaryTextStyle: ' normal' ,
130
141
ctaTextStyle: ' bold' ,
131
-
142
+
132
143
// No font paths = uses system fonts
133
144
});
134
145
};
@@ -139,11 +150,13 @@ const applySystemTheme = () => {
139
150
### Method 1: Expo Fonts (Recommended for Expo)
140
151
141
152
#### Step 1: Install Expo Fonts
153
+
142
154
``` bash
143
155
npx expo install expo-font
144
156
```
145
157
146
158
#### Step 2: Download and Add Fonts
159
+
147
160
``` bash
148
161
# Create fonts directory
149
162
mkdir fonts
@@ -153,6 +166,7 @@ mkdir fonts
153
166
```
154
167
155
168
#### Step 3: Configure app.json
169
+
156
170
``` json
157
171
{
158
172
"expo" : {
@@ -175,6 +189,7 @@ mkdir fonts
175
189
```
176
190
177
191
#### Step 4: Load Fonts in Your App
192
+
178
193
``` typescript
179
194
import * as Font from ' expo-font' ;
180
195
import { useEffect , useState } from ' react' ;
@@ -203,6 +218,7 @@ export default function App() {
203
218
```
204
219
205
220
#### Step 5: Use with setTheme
221
+
206
222
``` typescript
207
223
import Instabug from ' instabug-reactnative' ;
208
224
import { Platform } from ' react-native' ;
@@ -213,12 +229,12 @@ const applyExpoTheme = () => {
213
229
primaryColor: ' #2196F3' ,
214
230
backgroundColor: ' #FFFFFF' ,
215
231
primaryTextColor: ' #333333' ,
216
-
232
+
217
233
// Text styles (Android only)
218
234
primaryTextStyle: ' normal' ,
219
235
secondaryTextStyle: ' normal' ,
220
236
ctaTextStyle: ' bold' ,
221
-
237
+
222
238
// Fonts - use font paths for both platforms
223
239
primaryFontPath: ' fonts/Roboto-Regular.ttf' ,
224
240
secondaryFontPath: ' fonts/Inter-Regular.ttf' ,
@@ -228,16 +244,19 @@ const applyExpoTheme = () => {
228
244
```
229
245
230
246
### Method 2: Expo with Bundle Fonts
247
+
231
248
Same as Regular React Native Method 1, but fonts are automatically included in the Expo build.
232
249
233
250
## Asset Linking Options
234
251
235
252
### Option 1: Manual Copy (Current Method)
253
+
236
254
- Copy TTF files to native directories
237
255
- Update Info.plist manually
238
256
- Works with all setups
239
257
240
258
### Option 2: React Native CLI Linking
259
+
241
260
``` bash
242
261
# Create a react-native.config.js file
243
262
module.exports = {
@@ -246,11 +265,13 @@ module.exports = {
246
265
```
247
266
248
267
Then run:
268
+
249
269
``` bash
250
270
npx react-native link
251
271
```
252
272
253
273
### Option 3: Expo Asset Linking
274
+
254
275
``` json
255
276
{
256
277
"expo" : {
@@ -265,11 +286,13 @@ npx react-native link
265
286
```
266
287
267
288
### Option 4: Metro Asset Plugin
289
+
268
290
``` bash
269
291
npm install --save-dev react-native-asset
270
292
```
271
293
272
294
Create ` react-native.config.js ` :
295
+
273
296
``` javascript
274
297
module .exports = {
275
298
assets: [' ./fonts/' ],
@@ -279,6 +302,7 @@ module.exports = {
279
302
## Usage Examples
280
303
281
304
### Example 1: Google Fonts (Roboto)
305
+
282
306
``` typescript
283
307
// Download: Roboto-Regular.ttf, Roboto-Bold.ttf, Roboto-Light.ttf
284
308
// Add to project using any method above
@@ -290,12 +314,12 @@ const applyRobotoTheme = () => {
290
314
primaryTextColor: ' #212121' ,
291
315
secondaryTextColor: ' #757575' ,
292
316
titleTextColor: ' #000000' ,
293
-
317
+
294
318
// Text styles (Android only)
295
319
primaryTextStyle: ' normal' ,
296
320
secondaryTextStyle: ' normal' ,
297
321
ctaTextStyle: ' bold' ,
298
-
322
+
299
323
// Font paths for both platforms
300
324
primaryFontPath: ' fonts/Roboto-Regular.ttf' ,
301
325
secondaryFontPath: ' fonts/Roboto-Light.ttf' ,
@@ -305,6 +329,7 @@ const applyRobotoTheme = () => {
305
329
```
306
330
307
331
### Example 2: Custom Fonts (Inter)
332
+
308
333
``` typescript
309
334
// Download: Inter-Regular.ttf, Inter-Bold.ttf, Inter-Medium.ttf
310
335
// Add to project using any method above
@@ -316,12 +341,12 @@ const applyInterTheme = () => {
316
341
primaryTextColor: ' #1F2937' ,
317
342
secondaryTextColor: ' #6B7280' ,
318
343
titleTextColor: ' #111827' ,
319
-
344
+
320
345
// Text styles (Android only)
321
346
primaryTextStyle: ' normal' ,
322
347
secondaryTextStyle: ' normal' ,
323
348
ctaTextStyle: ' bold' ,
324
-
349
+
325
350
// Font paths for both platforms
326
351
primaryFontPath: ' fonts/Inter-Regular.ttf' ,
327
352
secondaryFontPath: ' fonts/Inter-Medium.ttf' ,
@@ -331,6 +356,7 @@ const applyInterTheme = () => {
331
356
```
332
357
333
358
### Example 3: System Fonts Only
359
+
334
360
``` typescript
335
361
const applySystemTheme = () => {
336
362
Instabug .setTheme ({
@@ -339,7 +365,7 @@ const applySystemTheme = () => {
339
365
primaryTextColor: ' #000000' ,
340
366
secondaryTextColor: ' #8E8E93' ,
341
367
titleTextColor: ' #000000' ,
342
-
368
+
343
369
// Text styles (Android only) - no font paths = uses system fonts
344
370
primaryTextStyle: ' normal' ,
345
371
secondaryTextStyle: ' normal' ,
@@ -349,6 +375,7 @@ const applySystemTheme = () => {
349
375
```
350
376
351
377
### Example 4: Mixed Approach
378
+
352
379
``` typescript
353
380
const applyMixedTheme = () => {
354
381
Instabug .setTheme ({
@@ -357,12 +384,12 @@ const applyMixedTheme = () => {
357
384
primaryTextColor: ' #2D3436' ,
358
385
secondaryTextColor: ' #636E72' ,
359
386
titleTextColor: ' #2D3436' ,
360
-
387
+
361
388
// Text styles (Android only)
362
389
primaryTextStyle: ' normal' ,
363
390
secondaryTextStyle: ' normal' ,
364
391
ctaTextStyle: ' bold' ,
365
-
392
+
366
393
// Custom font only for CTA - rest use system fonts
367
394
ctaFontPath: ' fonts/Roboto-Bold.ttf' ,
368
395
});
@@ -408,51 +435,62 @@ Instabug.setTheme({
408
435
### Common Issues
409
436
410
437
#### 1. Font Not Loading
438
+
411
439
** Symptoms:** Font appears as system font or doesn't change
412
440
** Solutions:**
441
+
413
442
- Check font filename matches exactly (case-sensitive)
414
443
- Verify font is added to both Android and iOS
415
444
- For iOS, check Info.plist entries
416
445
- For Expo, ensure fonts are loaded before using setTheme
417
446
- ** iOS users** : Make sure you're using ` *FontPath ` properties, not ` *FontAsset `
418
447
419
448
#### 2. Font Loading in Expo
449
+
420
450
** Symptoms:** Font works in development but not in production
421
451
** Solutions:**
452
+
422
453
- Use ` expo-font ` to load fonts before app starts
423
454
- Ensure fonts are included in app.json
424
455
- Test with ` expo build ` or EAS Build
425
456
426
457
#### 3. Font File Issues
458
+
427
459
** Symptoms:** App crashes or font doesn't load
428
460
** Solutions:**
461
+
429
462
- Verify TTF file is not corrupted
430
463
- Check file size (should be reasonable, not 0 bytes)
431
464
- Ensure font file is valid TTF/OTF format
432
465
433
466
#### 4. Performance Issues
467
+
434
468
** Symptoms:** App slow to start or font loading delays
435
469
** Solutions:**
470
+
436
471
- Use system fonts for better performance
437
472
- Limit number of custom fonts
438
473
- Preload fonts in app initialization
439
474
440
475
### Debug Steps
441
476
442
477
1 . ** Check Font Loading:**
478
+
443
479
``` typescript
444
480
// Add this to debug font loading
445
481
console .log (' Available fonts:' , Instabug .getAvailableFonts ()); // If available
446
482
```
447
483
448
484
2 . ** Verify File Paths:**
485
+
449
486
``` bash
450
487
# Check if fonts are in the right place
451
488
ls -la android/app/src/main/assets/fonts/
452
489
ls -la ios/YourApp/
453
490
```
454
491
455
492
3 . ** Test with System Fonts First:**
493
+
456
494
``` typescript
457
495
// Test with system fonts to ensure setTheme works
458
496
Instabug .setTheme ({
@@ -469,7 +507,7 @@ Instabug.setTheme({
469
507
4 . ** Test on Both Platforms:** Fonts may behave differently on iOS vs Android
470
508
5 . ** Use Standard Font Weights:** Regular, Bold, Light are most reliable
471
509
6 . ** Keep Font Files Small:** Optimize TTF files for mobile
472
- 7 . ** Use * FontPath Properties:** Ensures compatibility with both platforms
510
+ 7 . ** Use \ * FontPath Properties:** Ensures compatibility with both platforms
473
511
474
512
## Summary
475
513
@@ -481,4 +519,4 @@ Instabug.setTheme({
481
519
- ** System Fonts:** No setup required, best performance
482
520
- ** Platform Compatibility:** Use ` *FontPath ` properties for both platforms
483
521
484
- The native bridge handles all font loading automatically once fonts are properly added to your project!
522
+ The native bridge handles all font loading automatically once fonts are properly added to your project!
0 commit comments