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

[despotes]

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
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

    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

    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.

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 <AppLoading />;
  }
  return (
    <NativeBaseProvider>
    <Box safeArea>
      <ReactNativeText style={{ fontFamily: 'CormorantSC-Regular', fontSize: 30 }}>React Native Text</ReactNativeText>
      <NativeBaseText fontFamily="body" fontSize={30}>NATIVE BASE TEXT</NativeBaseText>
      </Box>
    </NativeBaseProvider>
  )
}

fontFamily transformer function inside styled-system.ts

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

[Krithikj20]

Hi @despotes, Thank you for reaching out to us. We will try to fix this at the earliest.

[focux]

I'm experiencing the same issue. Also, when trying to change the heading font family to another different than the body font family, it doesn't work either. Not sure if I should open another issue about that.

[tonyneel]

Any update on this issue?

[DanishPatel3014]

Same Issue! I used the react-native's <Text> component and it worked fine and the fontFamily was also changed. But when I used any native-base component, It didn't changed the fontFamily. Please fix this issue.

[tonyneel]

When can we expect a resolution to this?

[iBims1JFK]

+1

[jarrisondev]

Same problem, i follow the documentation but i'm getting this error

Code:

[gvanderclay]

If it helps we are also seeing this issue on our project. We are using "Montserrat" like @jarrisoncano and seeing the same issue.