GeekyAnts / GeekyAnts/NativeBase

[Mobile+Expo] Custom Fonts are not working in 3.4.7-3.49 with fontFamily prop

Open
#5,215 8 comments 8 reactions 0 assignees View on GitHub
bug triage v3
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.