Having trouble building the React Native app after adding react-native-vector icons?

A recent project I've been working on involved adding react-native-vector-icons using react-native 0.63.4. However, during the build process, I encountered an error when running the command npx react-native run-ios in the terminal. The warnings/errors displayed were as follows:

In file included from /Users/newuser/workspace/programming/mobile/numbers/ios/Pods/Headers/Public/Flipper-Folly/folly/json.h:48:
In file included from /Users/newuser/workspace/programming/mobile/numbers/ios/Pods/Headers/Public/Flipper-Folly/folly/dynamic.h:796:
...
(1 failure)

Attempting to build the project with Xcode also resulted in the following error:

/Users/newuser/workspace/libevent/event.h:44:10: 'event2/event-config.h' file not found

Even after trying commands like pod install and pod update, the app still refuses to build.

xcodetypescriptreact-native

Answer №1

Encountered an issue here, make sure to troubleshoot your installation as a common problem could be missing fonts in infoplist. Check your infoplist file and ensure it includes the following:

<key>UIAppFonts</key>
<array>
    <string>AntDesign.ttf</string>
    <string>Entypo.ttf</string>
    <string>EvilIcons.ttf</string>
    <string>Feather.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>FontAwesome5_Brands.ttf</string>
    <string>FontAwesome5_Regular.ttf</string>
    <string>FontAwesome5_Solid.ttf</string>
    <string>Fontisto.ttf</string>
    <string>Foundation.ttf</string>
    <string>Ionicons.ttf</string>
    <string>MaterialCommunityIcons.ttf</string>
    <string>MaterialIcons.ttf</string>
    <string>Octicons.ttf</string>
    <string>SimpleLineIcons.ttf</string>
    <string>Zocial.ttf</string>
    <string>icomoon.ttf</string>
</array>

If not resolved, try running

react-native link react-native-vector-icons

Alternatively, consider using the legacy build system by navigating to

workspace settings -> build system -> legacy build system

Another factor to consider is

If you are using use_frameworks! in your Podfile, remember that you need to dynamically load the icon font by executing Icon.loadFont() during application bootstrapping.

Answer №2

Finally, I discovered the solution to the problem at this helpful link: Check it out

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Type '{Property: string, Property2: string} does not match the type Observable<Filters[]>

Here is a method I am trying to use: getFilters(): Observable<Filters[]> { let filters: Observable<Filters[]> = [ { property: "Value", property2: "Value2" }, { property: "Value3", property2: "V ...

angulartypescriptobservable

Managing a digital timepiece within a multiplayer gaming environment

I'm currently developing a fast-paced game where players control a block resembling a clock. To accurately calculate the time taken by each player to make moves, I store the start time of the game and record the timestamp of every move in the databas ...

javascriptmysqlnode.jstypescript

How tall is the Apple System Keyboard in iOS8/iOS8?

Can you tell me the exact height of the Apple System Keyboard in iOS 8 and later, both with and without the predictive text bar above the keyboard? ...

iosxcodeuikeyboard

Tips for notifying the parent component when the state of a third-party child component is updated

Utilizing a third party RN component. The component is implemented as: <Component ref={comp => (this.comp = comp)} ... Through this component, data can be accessed like so: this.comp.state.height As the third-party component is integrated into ...

reactjsreact-native

What is the best way to implement a Promise Function within a For loop?

Here is a function called sendEmail: public async sendEmail (log: LogMessage): Promise<void> { nodemailer.createTestAccount(async () => { return ServiceFactory.getSystemService().getNetworkPreferences().then(async (networkPreferences) => ...

typescriptfor-looppromise

Challenges with implementing asynchronous functions in NestJS controllers

Currently, I am in the process of developing a finance tracker application that involves importing data from a CSV file. The import functionality checks if an entry already exists in the database, adds a specific category to it if not found, and then saves ...

javascripttypescriptasync-awaitpromisenestjs

Utilizing Vue 3 props validation in conjunction with the power of Typescript

Looking to customize a Link component using Nuxt, Typescript, and the composition-api. The prop target can accept specific values as outlined below. I'm curious if using a custom validator function to check prop types at runtime adds value when compar ...

typescriptvue.jsvuejs3

Wondering how to leverage TypeScript, Next-redux-wrapper, and getServerSideProps in your project?

Transitioning from JavaScript to TypeScript for my codebase is proving to be quite challenging. // store.ts import { applyMiddleware, createStore, compose, Store } from "redux"; import createSagaMiddleware, { Task } from "redux-saga"; ...

typescriptreduxnext.jsnext-redux-wrapper

What is the best way to obtain and transmit an ID from an Angular dropdown menu selection

Can you assist me with a coding issue? In my template, I have a select dropdown with options saved in a list of settings. Each setting has its own unique id. I also have a data model in my interface for fields sent or received from the backend. How can I e ...

angulartypescript

The depth buffer in Webgl FrameBuffer is not being cleared properly

Currently, I am working on developing a 2D sprite renderer that utilizes render textures for custom compositing. However, I have encountered an issue where the depth buffer on the FrameBuffer is not clearing properly. Due to this, all the sprites leave a p ...

javascripttypescriptwebgl

In Typescript, is it possible to utilize the value from a particular key in a type declaration as the type for another key within the same declaration?

Consider a scenario where I am designing a Variable type that includes a key named type with a value of type string. Is there a method to extract the value from the type key and utilize it as the type for another key within the declaration, without resorti ...

angulartypescripttypescastingtype-conversion

Ensure that child components' property types are enforced in TypeScript

I am trying to enforce the type of a property in a child component. I expected the code below not to compile because Child's property name is not correctly typed inside Parent within the app. However, there is no compiler warning displayed. Is there ...

reactjstypescript

How to pass a distinct identifier to an Angular 2 component?

Encountering an issue with Angular2 where I need to assign a unique identifier to my reusable component. Seeking assistance from the community. account.html <div class="container"> <!-- ACCOUNT INFO --> <div class="row"> ...

angulartypescript

Type inference error in TypeScript occurs within a conditional statement when the condition relies on the output of a function call rather than a boolean expression

In my TypeScript code, I have a Linked List class that is working perfectly. The class includes a Node type and functions to add items to the list. type ListItem = number | string | object; class Node { private value: ListItem; private next: Node | nu ...

typescripttype-inferencetypescript-class

Troubleshooting TypeScript when importing external JavaScript: Module not found or no type declaration file available

I recently acquired a VueJS admin template built in JS and am looking to integrate it into my existing TS application. However, when I attempt to transfer the components, views, and other elements, I encounter the following error message. Is there a way to ...

typescriptvue.js

The issue encountered is when the data from the Angular form in the login.component.html file fails to be

I am struggling with a basic login form in my Angular project. Whenever I try to submit the form data to login.components.ts, it appears empty. Here is my login.component.html: <mat-spinner *ngIf="isLoading"></mat-spinner> & ...

node.jsangulartypescriptexpress

Struggling to utilize a personalized filter leads to the error message: "Unable to call a function without a designated call signature."

Trying to use a custom filter from an Angular controller is resulting in the error message: 'Cannot invoke an expression whose type lacks a call signature'. I successfully implemented this on my last project, so I'm confused about what coul ...

angularjstypescriptangularjs-filter

Update button Image upon click

Is there a way to swap the image on a button when it's clicked? I want my button to start with one icon, but then change to another icon once it has been clicked. How can I achieve this effect? Any suggestions on how to make this happen? Check out ...

angulartypescript

Exploring a different approach to utilizing Ant Design Table Columns and ColumnGroups

As per the demo on how Ant Design groups columns, tables from Ant Design are typically set up using the following structure, assuming that you have correctly predefined your columns and data: <Table columns={columns} dataSource={data} // .. ...

javascriptreactjstypescriptantd

The functionality of connect-flash in Express JS is compromised when used in conjunction with express-mysql-session

I am facing a unique issue in my project. I have identified the source of the problem but I am struggling to find a solution. My project utilizes various modules such as cookie-parser, express-mysql-session, express-session, connect-flash, passport and m ...

node.jstypescriptexpresssessionflash-message