GeekyAnts / GeekyAnts/NativeBase
[Mobile+Expo] Custom Fonts are not working in 3.4.7-3.49 with fontFamily prop
- Dominant language
- TypeScript
- Stars
- 20.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
when setting up custom fonts with fontFamily prop are not working on Expo, iOS and Android
### CodeSandbox/Snack link
https://snack.expo.dev/@despotes/nativebase-custom-fonts-issue
### Steps to reproduce
1. Create a React Native Project with Expo or React Native Init. I'm using version 0.69.2 and tried on Snack Expo with SDK 44.0.0
2. Install Native Base 3.4.7 or 3.4.9 the versions that I have tested
3. Install Custom Fonts using the Documentation provided by Native Base [here](https://docs.nativebase.io/3.0.x/customizing-fonts)
4. If using Custom fonts through style prop is working, but if using the fontFamily prop (`fontFamily="body"` ) like suggested with by Docs it will not work.
### NativeBase Version
3.4.7
### Platform
- [X] Android
- [ ] CRA
- [X] Expo
- [X] iOS
- [ ] Next
### Other Platform
_No response_
### Additional Information
# Possible Temporary Fix
Found a possible small fix, but in my opinion cannot be a long term solution.
In file `native-base/src/theme/styled-system.ts` inside `getRNKeyAndStyleValue` function
We can check if the key value is `fontFamily` and in case don't apply the transformer function.
**from**
```typescript
if (transformer) {
val = transformer(val, theme[scale], theme, styledSystemProps.fontSize);
} else {
// If a token is not found in the theme
val = get(theme[scale], value, value);
}
```
**to**
```typescript
if (transformer) {
val = key === 'fontFamily'
? val
: transformer(val, theme[scale], theme, styledSystemProps.fontSize);
} else {
// If a token is not found in the theme
val = get(theme[scale], value, value);
}
```
## Reason
I'll take in account the Snack Example
**Snack Example.**
```typescript
const theme = extendTheme({
fontConfig: {
CormorantSC: {
400: {
normal: 'CormorantSC-Regular'
}
},
},
// Make sure values below matches any of the keys in `fontConfig`
fonts: {
heading: 'CormorantSC',
body: 'CormorantSC',
mono: 'CormorantSC',
},
});
export default function App() {
let [fontsLoaded] = useFonts({
'CormorantSC-Regular': require('./assets/fonts/CormorantSC-Regular.ttf'),
});
if (!fontsLoaded) {
return ;
}
return (
React Native Text
NATIVE BASE TEXT
)
}
```
**fontFamily transformer function** inside `styled-system.ts`
```typescript
export const typography = {
fontFamily: {
property: 'fontFamily',
scale: 'fonts',
transformer: (val: any, scale: any) => {
const value = get(scale, val);
return value ? value.toString() : undefined;
},
},
...
}
```
The reason is not working is because in the `transformer` function for fontFamily takes the only the first arguments: `val` and `theme[scale]`.
The `val` will have value of `CormorantSC-Regular`, resolved from `fontFamily="body"` in another function before `getRNKeyAndStyleValue`.
The `theme[scale]` will have the value of `{ heading: 'CormorantSC', body: 'CormorantSC', mono: 'CormorantSC' }`
`get` from lodash try to look up for the `CormorantSC-Regular` in `{ heading: 'CormorantSC', body: 'CormorantSC', mono: 'CormorantSC' }` and it will give undefined
Contributor guide
Research direction
Start in native-base/src/theme/styled-system.ts, focusing on getRNKeyAndStyleValue and the fontFamily transformer. Reproduce the behavior with the linked Expo Snack and the documented fontConfig/fonts setup, then verify that fontFamily="body" resolves correctly on both platforms without breaking direct style usage.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend, mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100