Adding Custom Fonts to React Native App is quite easy and only needs a few steps.
assets/fonts
in the root of your project and paste downloaded fonts files in it.react-native.config.js
filemodule.exports = {
project: {
ios: {},
android: {},
},
assets: ["./assets/fonts/"],
};
yarn react-native link
from the root of the project.yarn ios
or yarn android
Voila!. You now have custom fonts set up.
const styles = StyleSheet.create({
title: {
fontFamily: "Inter",
fontWeight: "bold",
//or
fontFamily: "Inter-Bold",
},
});
👉 https://github.com/yjose/Tasker/commit/c8e9bc6dc3beea92ab696c19debc7e32784da0de
For a long time, I used react-native-vector-icons
to create my custom icons assets, this approach comes with some difficulty as I always find myself regenerating a new font whenever our designer changes an icon in the design system. Also, this approach has some limits on supporting some SVG properties.
Using react-native-svg
will fix most of those issues, also I found it very simple to add new icons as Most of the design tools Nowadays export the SVG icon as React Native component.
react-native-svg
yarn add react-native-svg
## on IOS only ( need to install native deps )
yarn setup:ios
## rebuild app
yarn ios
import * as React from "react";
import Svg, { SvgProps, Path } from "react-native-svg";
export function Check(props: SvgProps) {
return (
<Svg width={28} height={28} fill="none" {...props}>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-14.893 2.053a1 1 0 01-1.414 0l-2.556-2.556a1 1 0 00-1.414 1.415l3.899 3.898a1 1 0 001.482.075l7.778-7.778a1 1 0 10-1.414-1.414l-6.36 6.36z"
fill="#006CFF"
/>
</Svg>
);
}
👉 https://github.com/yjose/Tasker/commit/16d4e1a1d9029ba365d122a199687dd820a2d0a3