Unlock the Power of Icons and Fonts in Your React Native App

Getting Started with React Native

To begin, let’s create a new React Native project with a TypeScript template. Open your terminal and run the following command:

npx react-native init MyProject --template react-native-template-typescript

This will create a new React Native project with a TypeScript template. Navigate to the project folder and build your app for each OS.

Linking and Unlinking with React Native Asset

React Native Asset makes linking and unlinking a breeze. First, install react-native-asset globally:

npm install -g react-native-asset

Create a new folder called assets and another folder inside it called fonts. Then, download a font family from Google Fonts, unzip it, and add your chosen font weights to the fonts folder.

Creating a Text Component

Let’s create a custom text component to consume our new fonts. Create a folder called components with a file inside called Text.tsx, and add the following code:

import { TextProps } from 'eact-native';

interface Props extends TextProps {
  children: React.ReactNode;
}

const Text: React.FC<Props> = ({ children, style,...props }) => {
  return <Text {...props}>{children}</Text>;
};

export default Text;

React Native Vector Icons

With over 3,000 free icons and 15.7k GitHub stars, React Native Vector Icons is an excellent choice for all your icon needs. To use this package, install it and its dev dependency in your project:

npm install react-native-vector-icons
npm install --save-dev @types/react-native-vector-icons

Building an Icon Component

Let’s build a reusable icon component. Create a new file called Icon.tsx in your components folder, and add the following code:

import { View, TextStyle } from 'eact-native';
import MaterialCommunityIcons from 'eact-native-vector-icons/MaterialCommunityIcons';

interface Props {
  name: keyof typeof MaterialCommunityIcons.glyphMap;
  size: number;
  color: string;
}

const Icon: React.FC<Props> = ({ name, size, color }) => {
  return <MaterialCommunityIcons name={name} size={size} color={color} />;
};

export default Icon;

Working with Popular Icon Sets

Besides Material Community Icons, you can also use popular icon sets like Entypo, Ionicon, or Simple Line Icons in your React Native applications. Let’s use one of these icons in an application. Edit your Icon.tsx file to add the following minimalistic code:

import { View, TextStyle } from 'eact-native';
import Entypo from 'eact-native-vector-icons/Entypo';

interface Props {
  name: keyof typeof Entypo.glyphMap;
  size: number;
  color: string;
}

const Icon: React.FC<Props> = ({ name, size, color }) => {
  return <Entypo name={name} size={size} color={color} />;
};

export default Icon;

Troubleshooting Common Issues

While working with React Native Vector Icons, Ionicons, or custom icons, you may often run into issues or errors. Here are some common issues and their solutions:

• Extremely slow launch of emulator: Use a real smartphone device (iOS or Android) instead of an emulator.
• TypeError: cli.init is not a function for react native while creating a project: Uninstall and re-install React Native global.
• Error encountered: Missing setup packages or software: Ensure you have the required setup in place correctly.
• Build failed: Examine the stack trace and log to determine what went wrong.
• Icons not rendering: Use npx react-native-asset to associate the asset files with the project.