Skip to content

Commit c3a5b97

Browse files
committed
fix: lint
1 parent dafc63d commit c3a5b97

File tree

1 file changed

+54
-16
lines changed

1 file changed

+54
-16
lines changed

FONTS_SETUP_GUIDE.md

Lines changed: 54 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ This guide covers all ways to use fonts with the `setTheme` function in Instabug
1616
## Overview
1717

1818
The Instabug React Native bridge supports font loading from multiple sources:
19+
1920
- **App Bundle**: Fonts included in your app assets
2021
- **System Fonts**: Built-in platform fonts
2122
- **Custom Fonts**: Any TTF/OTF font files
@@ -24,14 +25,17 @@ The Instabug React Native bridge supports font loading from multiple sources:
2425
## Font Types Supported
2526

2627
### 1. Google Fonts
28+
2729
- Download TTF files from [Google Fonts](https://fonts.google.com/)
2830
- Examples: Roboto, Inter, Nunito, Open Sans, Lato
2931

3032
### 2. Custom Fonts
33+
3134
- Any TTF/OTF font files
3235
- Commercial fonts, free fonts, custom designs
3336

3437
### 3. System Fonts
38+
3539
- Platform default fonts
3640
- No setup required
3741
- Examples: San Francisco (iOS), Roboto (Android)
@@ -41,6 +45,7 @@ The Instabug React Native bridge supports font loading from multiple sources:
4145
### Method 1: Bundle Fonts (Recommended)
4246

4347
#### Step 1: Download Font Files
48+
4449
```bash
4550
# Create fonts directory
4651
mkdir fonts
@@ -51,6 +56,7 @@ mkdir fonts
5156
```
5257

5358
#### Step 2: Add to Android
59+
5460
```bash
5561
# Create assets/fonts directory
5662
mkdir -p android/app/src/main/assets/fonts
@@ -60,13 +66,16 @@ cp fonts/*.ttf android/app/src/main/assets/fonts/
6066
```
6167

6268
#### Step 3: Add to iOS
69+
6370
1. **Add to Xcode Project:**
71+
6472
- Open your iOS project in Xcode
6573
- Right-click on your project → "Add Files to [ProjectName]"
6674
- Select your TTF files
6775
- Make sure "Add to target" is checked
6876

6977
2. **Update Info.plist:**
78+
7079
```xml
7180
<key>UIAppFonts</key>
7281
<array>
@@ -78,6 +87,7 @@ cp fonts/*.ttf android/app/src/main/assets/fonts/
7887
```
7988

8089
#### Step 4: Use with setTheme
90+
8191
```typescript
8292
import Instabug from 'instabug-reactnative';
8393
import { Platform } from 'react-native';
@@ -88,19 +98,19 @@ const applyCustomTheme = () => {
8898
primaryColor: '#2196F3',
8999
backgroundColor: '#FFFFFF',
90100
primaryTextColor: '#333333',
91-
101+
92102
// Text styles (Android only)
93103
primaryTextStyle: 'normal',
94104
secondaryTextStyle: 'normal',
95105
ctaTextStyle: 'bold',
96-
106+
97107
// Fonts - Android (use font paths)
98108
...(Platform.OS === 'android' && {
99109
primaryFontPath: '/data/user/0/com.yourapp/files/fonts/Roboto-Regular.ttf',
100110
secondaryFontPath: '/data/user/0/com.yourapp/files/fonts/Roboto-Light.ttf',
101111
ctaFontPath: '/data/user/0/com.yourapp/files/fonts/Roboto-Bold.ttf',
102112
}),
103-
113+
104114
// Fonts - iOS (use font paths, not assets)
105115
...(Platform.OS === 'ios' && {
106116
primaryFontPath: 'fonts/Roboto-Regular.ttf',
@@ -112,6 +122,7 @@ const applyCustomTheme = () => {
112122
```
113123

114124
### Method 2: System Fonts Only
125+
115126
```typescript
116127
import Instabug from 'instabug-reactnative';
117128

@@ -123,12 +134,12 @@ const applySystemTheme = () => {
123134
primaryTextColor: '#333333',
124135
secondaryTextColor: '#666666',
125136
titleTextColor: '#000000',
126-
137+
127138
// Text styles (Android only)
128139
primaryTextStyle: 'normal',
129140
secondaryTextStyle: 'normal',
130141
ctaTextStyle: 'bold',
131-
142+
132143
// No font paths = uses system fonts
133144
});
134145
};
@@ -139,11 +150,13 @@ const applySystemTheme = () => {
139150
### Method 1: Expo Fonts (Recommended for Expo)
140151

141152
#### Step 1: Install Expo Fonts
153+
142154
```bash
143155
npx expo install expo-font
144156
```
145157

146158
#### Step 2: Download and Add Fonts
159+
147160
```bash
148161
# Create fonts directory
149162
mkdir fonts
@@ -153,6 +166,7 @@ mkdir fonts
153166
```
154167

155168
#### Step 3: Configure app.json
169+
156170
```json
157171
{
158172
"expo": {
@@ -175,6 +189,7 @@ mkdir fonts
175189
```
176190

177191
#### Step 4: Load Fonts in Your App
192+
178193
```typescript
179194
import * as Font from 'expo-font';
180195
import { useEffect, useState } from 'react';
@@ -203,6 +218,7 @@ export default function App() {
203218
```
204219

205220
#### Step 5: Use with setTheme
221+
206222
```typescript
207223
import Instabug from 'instabug-reactnative';
208224
import { Platform } from 'react-native';
@@ -213,12 +229,12 @@ const applyExpoTheme = () => {
213229
primaryColor: '#2196F3',
214230
backgroundColor: '#FFFFFF',
215231
primaryTextColor: '#333333',
216-
232+
217233
// Text styles (Android only)
218234
primaryTextStyle: 'normal',
219235
secondaryTextStyle: 'normal',
220236
ctaTextStyle: 'bold',
221-
237+
222238
// Fonts - use font paths for both platforms
223239
primaryFontPath: 'fonts/Roboto-Regular.ttf',
224240
secondaryFontPath: 'fonts/Inter-Regular.ttf',
@@ -228,16 +244,19 @@ const applyExpoTheme = () => {
228244
```
229245

230246
### Method 2: Expo with Bundle Fonts
247+
231248
Same as Regular React Native Method 1, but fonts are automatically included in the Expo build.
232249

233250
## Asset Linking Options
234251

235252
### Option 1: Manual Copy (Current Method)
253+
236254
- Copy TTF files to native directories
237255
- Update Info.plist manually
238256
- Works with all setups
239257

240258
### Option 2: React Native CLI Linking
259+
241260
```bash
242261
# Create a react-native.config.js file
243262
module.exports = {
@@ -246,11 +265,13 @@ module.exports = {
246265
```
247266

248267
Then run:
268+
249269
```bash
250270
npx react-native link
251271
```
252272

253273
### Option 3: Expo Asset Linking
274+
254275
```json
255276
{
256277
"expo": {
@@ -265,11 +286,13 @@ npx react-native link
265286
```
266287

267288
### Option 4: Metro Asset Plugin
289+
268290
```bash
269291
npm install --save-dev react-native-asset
270292
```
271293

272294
Create `react-native.config.js`:
295+
273296
```javascript
274297
module.exports = {
275298
assets: ['./fonts/'],
@@ -279,6 +302,7 @@ module.exports = {
279302
## Usage Examples
280303

281304
### Example 1: Google Fonts (Roboto)
305+
282306
```typescript
283307
// Download: Roboto-Regular.ttf, Roboto-Bold.ttf, Roboto-Light.ttf
284308
// Add to project using any method above
@@ -290,12 +314,12 @@ const applyRobotoTheme = () => {
290314
primaryTextColor: '#212121',
291315
secondaryTextColor: '#757575',
292316
titleTextColor: '#000000',
293-
317+
294318
// Text styles (Android only)
295319
primaryTextStyle: 'normal',
296320
secondaryTextStyle: 'normal',
297321
ctaTextStyle: 'bold',
298-
322+
299323
// Font paths for both platforms
300324
primaryFontPath: 'fonts/Roboto-Regular.ttf',
301325
secondaryFontPath: 'fonts/Roboto-Light.ttf',
@@ -305,6 +329,7 @@ const applyRobotoTheme = () => {
305329
```
306330

307331
### Example 2: Custom Fonts (Inter)
332+
308333
```typescript
309334
// Download: Inter-Regular.ttf, Inter-Bold.ttf, Inter-Medium.ttf
310335
// Add to project using any method above
@@ -316,12 +341,12 @@ const applyInterTheme = () => {
316341
primaryTextColor: '#1F2937',
317342
secondaryTextColor: '#6B7280',
318343
titleTextColor: '#111827',
319-
344+
320345
// Text styles (Android only)
321346
primaryTextStyle: 'normal',
322347
secondaryTextStyle: 'normal',
323348
ctaTextStyle: 'bold',
324-
349+
325350
// Font paths for both platforms
326351
primaryFontPath: 'fonts/Inter-Regular.ttf',
327352
secondaryFontPath: 'fonts/Inter-Medium.ttf',
@@ -331,6 +356,7 @@ const applyInterTheme = () => {
331356
```
332357

333358
### Example 3: System Fonts Only
359+
334360
```typescript
335361
const applySystemTheme = () => {
336362
Instabug.setTheme({
@@ -339,7 +365,7 @@ const applySystemTheme = () => {
339365
primaryTextColor: '#000000',
340366
secondaryTextColor: '#8E8E93',
341367
titleTextColor: '#000000',
342-
368+
343369
// Text styles (Android only) - no font paths = uses system fonts
344370
primaryTextStyle: 'normal',
345371
secondaryTextStyle: 'normal',
@@ -349,6 +375,7 @@ const applySystemTheme = () => {
349375
```
350376

351377
### Example 4: Mixed Approach
378+
352379
```typescript
353380
const applyMixedTheme = () => {
354381
Instabug.setTheme({
@@ -357,12 +384,12 @@ const applyMixedTheme = () => {
357384
primaryTextColor: '#2D3436',
358385
secondaryTextColor: '#636E72',
359386
titleTextColor: '#2D3436',
360-
387+
361388
// Text styles (Android only)
362389
primaryTextStyle: 'normal',
363390
secondaryTextStyle: 'normal',
364391
ctaTextStyle: 'bold',
365-
392+
366393
// Custom font only for CTA - rest use system fonts
367394
ctaFontPath: 'fonts/Roboto-Bold.ttf',
368395
});
@@ -408,51 +435,62 @@ Instabug.setTheme({
408435
### Common Issues
409436

410437
#### 1. Font Not Loading
438+
411439
**Symptoms:** Font appears as system font or doesn't change
412440
**Solutions:**
441+
413442
- Check font filename matches exactly (case-sensitive)
414443
- Verify font is added to both Android and iOS
415444
- For iOS, check Info.plist entries
416445
- For Expo, ensure fonts are loaded before using setTheme
417446
- **iOS users**: Make sure you're using `*FontPath` properties, not `*FontAsset`
418447

419448
#### 2. Font Loading in Expo
449+
420450
**Symptoms:** Font works in development but not in production
421451
**Solutions:**
452+
422453
- Use `expo-font` to load fonts before app starts
423454
- Ensure fonts are included in app.json
424455
- Test with `expo build` or EAS Build
425456

426457
#### 3. Font File Issues
458+
427459
**Symptoms:** App crashes or font doesn't load
428460
**Solutions:**
461+
429462
- Verify TTF file is not corrupted
430463
- Check file size (should be reasonable, not 0 bytes)
431464
- Ensure font file is valid TTF/OTF format
432465

433466
#### 4. Performance Issues
467+
434468
**Symptoms:** App slow to start or font loading delays
435469
**Solutions:**
470+
436471
- Use system fonts for better performance
437472
- Limit number of custom fonts
438473
- Preload fonts in app initialization
439474

440475
### Debug Steps
441476

442477
1. **Check Font Loading:**
478+
443479
```typescript
444480
// Add this to debug font loading
445481
console.log('Available fonts:', Instabug.getAvailableFonts()); // If available
446482
```
447483

448484
2. **Verify File Paths:**
485+
449486
```bash
450487
# Check if fonts are in the right place
451488
ls -la android/app/src/main/assets/fonts/
452489
ls -la ios/YourApp/
453490
```
454491

455492
3. **Test with System Fonts First:**
493+
456494
```typescript
457495
// Test with system fonts to ensure setTheme works
458496
Instabug.setTheme({
@@ -469,7 +507,7 @@ Instabug.setTheme({
469507
4. **Test on Both Platforms:** Fonts may behave differently on iOS vs Android
470508
5. **Use Standard Font Weights:** Regular, Bold, Light are most reliable
471509
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
473511

474512
## Summary
475513

@@ -481,4 +519,4 @@ Instabug.setTheme({
481519
- **System Fonts:** No setup required, best performance
482520
- **Platform Compatibility:** Use `*FontPath` properties for both platforms
483521

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

Comments
 (0)