Below are are few notes from using custom icons and Typographies in React Native. Don’t forget to checkout React Native Sketch Elements, the most comprehensive React Native starter kit.

Custom Icon Library with Expo

I recently decided to upgrade the icon font from React Sketch Elements to its original icon library. The process entails exporting the icon slices from Sketch as SVG files, creating the font file using icomoon, and finally importing this font file using Expo. Cherry on top of the cake, we will be using Flow to make enforce the proper icon names in the project. This is a manual process however you can completely automatize this workflow using this great story from Luis Martins.

Once you have the font file form icomoon, you need to import it, as well as it’s icomoon specification file. We will be using createIconSetFromIcoMoon() to create the <Icon> component and Font.loadAsyc() to load the font file.

// To load the font

import {Font} from "expo";

import {createIconSetFromIcoMoon} from " // To create the componentimport {createIconSetFromIcoMoon} from " @expo/vector-icons "; import Icons from "./icons.ttf";

import config from "./config.json"; export const loadIconFont = () => Font.loadAsync({ Icons });

const Icon = createIconSetFromIcoMoon(config, "Icons"); // Type Safety First!

export type IconName = "arrow-up" | "arrow-right" | "...";

I used a small line of JavaScript to generate the IconName type as seen below.

const config = require("./config"); console.log(

config.icons.map(icon => `"${icon.properties.name}"`).join(" | ")

);

Custom Typography

You might have noticed that iOS <Text> has an irreducible that can make vertical alignment of text very difficult. With the San Francisco font, this padding is balanced so you won’t notice the issue. But with some other font it will appear obvious. If you are looking to solve this issue, please checkout this great story from Martin Adamko. I ended up using his tip to create a custom font file which use only for single text lines that can be easily aligned vertically. For the rest, I use the original font file that applies the lineHeight property. Thanks Martin!

import MyriadProRegular from "./fonts/MyriadPro-Regular.otf";

import MyriadProRegularSingleLine from "./fonts/MyriadPro-Regular-SingleLine.otf"; render(): React.Node {

const {type, numberOfLines, children} = this.props;

const typographyStyle = styleGuide.typography[type];

if (numberOfLines === 1) {

style.push({ fontFamily: 'MyriadProRegularSingleLine' });

}

return (

<Text {...{ style, numberOfLines }}>

{children}

</Text>

);

}

That’s all Folks!

Hope that you enjoyed this story. Please let me know your thoughts on this topic.