Build for scale: Use custom fonts in React Native

Introduction

This series of build for scale: Is About the advanced way to use React native app.

I will talk about methods, best practices, how-to use guides, and advanced approaches on how to use the most used tools, and packages. Taking into account how to structure it in your app, how to architect the solution, and advanced approaches for a performant, secure, and scalable app.

This series is perfect for React Native developers of all levels who want to take their skills to the next level and build apps that stand the test of time. Whether you’re a seasoned professional or just starting, you’ll find invaluable knowledge and practical guidance to transform your React Native development journey I explained in the previous article how to optimise

In this small tech Article, I will guide you to use custom fonts in React Native, with an example of mapping those fonts for RTL and Internalizations.

Choose Your?Font:

• Select the font file you want to use (usually?.ttf or?.otf format). Free options are available on websites like Google Fonts (https://fonts.google.com/), Adobe Fonts (https://fonts.adobe.com/), and Font Squirrel (https://www.fontsquirrel.com/).
• Download the desired font file.

Place the Font File:

• Create a dedicated folder within your React Native project to store custom fonts. A common convention is to use assets/fonts.
• Place the downloaded font file inside the assets/fonts folder.

Linking Assets?:

• Create react-native.config.jsin the root folder. and add the following:

module.exports = {
  project: {
    ios: {},
    android: {}, // grouped into "project"
  },
  assets: ['./src/assets/fonts/'], // stays the same
};        

• For React Native Version ≥ 0.69
• ?—?Due to auto-linking, link, and unlink commands have been removed in React Native 0.69.
• Run in terminal

npx react-native-asset        

For React Native Version< 0.69

npx react-native link        

link command will links fonts in Info.plst for IOS and creates fonts directory (android/app/src/main/assets/fonts) for Android, where copies your fonts

The assets in the assets folder (including your font files) are automatically included in the native project during build time.

How to use the?fonts:

In your Typography folder, add the following:

We use it in StyledText in the following way:

• The StyledText component accepts variant and language props to specify the font-variant and language direction.
• The fontMap object contains mappings of font families for different variants and languages.
• The component renders a Text component with the specified fontFamily based on the variant and language props.
• Additional styles passed through the style prop are merged with the default styles defined in the StyleSheet.
• TypeScript types and interfaces are used to ensure type safety throughout the component.

Conclusion

There are different issues when using custom fonts

Mismatched Font Family?Names:

• Description: Inconsistency between the font family name used in the code and the actual font file name or path can lead to errors.
• Example: Importing SourceCodePro-ExtraLight.otf but loading it as /assets/fonts/SourceCodePro-ExtraLight.ttf mismatches the fontFamily in your styles.
• Solution: Ensure exact matching between the font family name in the code, file name, and path used for loading.

Unsupported Font?Formats:

• Description: Using font formats not supported by the target platform (iOS, Android, or web) can cause unexpected errors or rendering issues.
• Supported formats: React Native typically supports?.ttf and?.otf formats.
• Solution: Verify that your chosen font format is compatible with the target platforms of your React Native app.

Performance Impact:

• Description: Large font files can significantly impact loading times, especially when loading multiple custom fonts.
• Impact: Increased app bundle size and potential delays in rendering content that uses custom fonts.
• Solutions:
• Optimize font files: Use tools like Font Squirrel (https://www.fontsquirrel.com/blog/2009/10/welcome-to-font-squirrel) or online converters to optimize font file size without compromising quality.
• Load fonts selectively: Only load fonts used on specific screens or components to avoid unnecessary bundle size increase.
• Use font subsetting: Exclude unused characters from the font file to reduce size.

I share insights about React Native, React, and Typescript. Follow me on Linkedin or Medium

#reactnative #react #typescript #mobiledevelopment #engineering #patterns #bestpractices #memoryleak #performance #scaleApp #fastApp #userexperience