this repo has no description
Fix font display on Android (#5776)
* Fix font display on Android
* Format
* Split out fake fonts hook for platforms
authored by
Eric Bailey
and committed by
GitHub
7ca1789d
834beac5
+77
-20
+7
app.config.js
+7
app.config.js
···
236
236
fonts: [
237
237
'./assets/fonts/inter/InterVariable.ttf',
238
238
'./assets/fonts/inter/InterVariable-Italic.ttf',
239
+
// Android only
240
+
'./assets/fonts/inter/Inter-Regular.otf',
241
+
'./assets/fonts/inter/Inter-Italic.otf',
242
+
'./assets/fonts/inter/Inter-SemiBold.otf',
243
+
'./assets/fonts/inter/Inter-SemiBoldItalic.otf',
244
+
'./assets/fonts/inter/Inter-ExtraBold.otf',
245
+
'./assets/fonts/inter/Inter-ExtraBoldItalic.otf',
239
246
],
240
247
},
241
248
],
+34
-18
src/alf/fonts.ts
+34
-18
src/alf/fonts.ts
···
1
1
import {TextStyle} from 'react-native'
2
-
import {useFonts} from 'expo-font'
3
2
4
-
import {isWeb} from '#/platform/detection'
3
+
import {isAndroid, isWeb} from '#/platform/detection'
5
4
import {Device, device} from '#/storage'
6
5
7
6
const WEB_FONT_FAMILIES = `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"`
···
40
39
*/
41
40
export function applyFonts(style: TextStyle, fontFamily: 'system' | 'theme') {
42
41
if (fontFamily === 'theme') {
43
-
style.fontFamily = 'InterVariable'
42
+
if (isAndroid) {
43
+
style.fontFamily =
44
+
{
45
+
400: 'Inter-Regular',
46
+
500: 'Inter-Regular',
47
+
600: 'Inter-SemiBold',
48
+
700: 'Inter-SemiBold',
49
+
800: 'Inter-ExtraBold',
50
+
900: 'Inter-ExtraBold',
51
+
}[String(style.fontWeight || '400')] || 'Inter-Regular'
52
+
53
+
if (style.fontStyle === 'italic') {
54
+
if (style.fontFamily === 'Inter-Regular') {
55
+
style.fontFamily = 'Inter-Italic'
56
+
} else {
57
+
style.fontFamily += 'Italic'
58
+
}
59
+
}
44
60
45
-
if (style.fontStyle === 'italic') {
46
-
style.fontFamily += 'Italic'
61
+
/*
62
+
* These are not supported on Android and actually break the styling.
63
+
*/
64
+
delete style.fontWeight
65
+
delete style.fontStyle
66
+
} else {
67
+
style.fontFamily = 'InterVariable'
68
+
69
+
if (style.fontStyle === 'italic') {
70
+
style.fontFamily += 'Italic'
71
+
}
47
72
}
48
73
49
-
// fallback families only supported on web
50
74
if (isWeb) {
75
+
// fallback families only supported on web
51
76
style.fontFamily += `, ${WEB_FONT_FAMILIES}`
52
77
}
53
78
···
70
95
}
71
96
}
72
97
73
-
/*
74
-
* IMPORTANT: This is unused. Expo statically extracts these fonts.
75
-
*
76
-
* All used fonts MUST be configured here. Unused fonts can be commented out.
77
-
*
78
-
* This is used for both web fonts and native fonts.
98
+
/**
99
+
* Here only for bundling purposes, not actually used.
79
100
*/
80
-
export function DO_NOT_USE() {
81
-
return useFonts({
82
-
InterVariable: require('../../assets/fonts/inter/InterVariable.ttf'),
83
-
'InterVariable-Italic': require('../../assets/fonts/inter/InterVariable-Italic.ttf'),
84
-
})
85
-
}
101
+
export {DO_NOT_USE} from '#/alf/util/unusedUseFonts'
+2
-2
src/alf/tokens.ts
+2
-2
src/alf/tokens.ts
+19
src/alf/util/unusedUseFonts.android.ts
+19
src/alf/util/unusedUseFonts.android.ts
···
1
+
import {useFonts} from 'expo-font'
2
+
3
+
/*
4
+
* IMPORTANT: This is unused. Expo statically extracts these fonts.
5
+
*
6
+
* All used fonts MUST be configured here. Unused fonts can be commented out.
7
+
*
8
+
* This is used for both web fonts and native fonts.
9
+
*/
10
+
export function DO_NOT_USE() {
11
+
return useFonts({
12
+
'Inter-Regular': require('../../../assets/fonts/inter/Inter-Regular.otf'),
13
+
'Inter-Italic': require('../../../assets/fonts/inter/Inter-Italic.otf'),
14
+
'Inter-Bold': require('../../../assets/fonts/inter/Inter-SemiBold.otf'),
15
+
'Inter-BoldItalic': require('../../../assets/fonts/inter/Inter-SemiBoldItalic.otf'),
16
+
'Inter-Black': require('../../../assets/fonts/inter/Inter-ExtraBold.otf'),
17
+
'Inter-BlackItalic': require('../../../assets/fonts/inter/Inter-ExtraBoldItalic.otf'),
18
+
})
19
+
}
+15
src/alf/util/unusedUseFonts.ts
+15
src/alf/util/unusedUseFonts.ts
···
1
+
import {useFonts} from 'expo-font'
2
+
3
+
/*
4
+
* IMPORTANT: This is unused. Expo statically extracts these fonts.
5
+
*
6
+
* All used fonts MUST be configured here. Unused fonts can be commented out.
7
+
*
8
+
* This is used for both web fonts and native fonts.
9
+
*/
10
+
export function DO_NOT_USE() {
11
+
return useFonts({
12
+
InterVariable: require('../../../assets/fonts/inter/InterVariable.ttf'),
13
+
'InterVariable-Italic': require('../../../assets/fonts/inter/InterVariable-Italic.ttf'),
14
+
})
15
+
}