Can't resolve Font Awesome modules in React Native - react-native

I am trying to get Font Awesome icons running my React Native application by following the instructions posted here. However, after completing the instructions, my simulator doesn't load the application and the command line gives me the following error:
error: bundling failed: Error: While trying to resolve module `#fortawesome/fontawesome-svg-core` from file `/Users/agaidis/Auto-ID-Lab/AudioApp/App.js`, the package `/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/#fortawesome/fontawesome-svg-core/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/#fortawesome/fontawesome-svg-core/index.js`. Indeed, none of these files exist:
* `/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/#fortawesome/fontawesome-svg-core/index.js(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
* `/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/#fortawesome/fontawesome-svg-core/index.js/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
at ResolutionRequest.resolveDependency (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:92:15)
at DependencyGraph.resolveDependency (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/node-haste/DependencyGraph.js:237:485)
at Object.resolve (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/lib/transformHelpers.js:116:25)
at dependencies.map.result (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:298:29)
at Array.map (<anonymous>)
at resolveDependencies (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:294:16)
at /Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:159:33
at Generator.next (<anonymous>)
at step (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:239:307)
at /Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:239:467
BUNDLE [ios, dev] ../../index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
My code is as follows:
App.js
import React, {Component} from 'react';
import {AppRegistry} from 'react-native';
import MainApp from './src/components/MainApp';
import AudioExample from './src/components/AudioExample';
// For icons we use font awesome
import { library } from '#fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faStroopwafel } from '#fortawesome/free-solid-svg-icons';
library.add(faStroopwafel)
AppRegistry.registerComponent('audioApp', () => MainApp);
export default MainApp;
Relevant piece of LangPage.js:
import React from 'react'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import {View, Text, StyleSheet, Picker} from 'react-native'
import PropTypes from 'prop-types'
import Menu from './Menu'
class LangPage extends React.Component{
static propTypes = {
List: PropTypes.array.isRequired,
passFunc: PropTypes.func.isRequired,
}
render(){
return(
<View style={styles.container}>
<View style={styles.boxContainers}>
<FontAwesomeIcon icon="stroopwafel" />
<Text style={styles.header}>Select a Language</Text>
</View>
<View style={[styles.boxContainers, styles.menuBox]}>
<Menu givenL={this.props.List} selectFunc={this.props.passFunc}/>
</View>
</View>
)
}
}
For reference, I am using:
"#fortawesome/fontawesome-svg-core": "^1.2.0-14",
"#fortawesome/free-solid-svg-icons": "^5.1.0-11",
"#fortawesome/react-fontawesome": "0.1.0-11",
"i": "^0.3.6",
"npm": "^6.3.0",
"react": "16.4.1",
"react-native": "0.56.0"
Any thoughts on how I could fix this? Thanks!

Good morning,
I strongly recommend you to use the react-native-vectors-icons library instead of directly using fontAwesome. It may be why it doesn't work. For more informations, click here.
EDIT: You need to import the react-native-vector-icons in your dependencies. Go in your package.json file and type this line in the 'dependencies' section :
"react-native-vector-icons": "^4.5.0",
In your LangPage.js file, you will be able to import them like this :
import Icon from 'react-native-vector-icons/FontAwesome';
With that done, you will be able to display easily icons from font-awesome in your react native components, just like that :
<Icon
color={Colors.primaryBackground}
name={stroopwafel}
size={40}
/>
Hope it helped :)
Have a good day

William is on the right track for getting you where you want to be, however, there are a couple of things missing from his answer.
react-native-vector-icons needs to be linked, either by running
react-native link react-native-vector-icons
or by following the manual linking example in the README.
You can check if linking has worked correctly by checking the following files;
Android:
android/app/src/main/java/.../MainApplication.java
android/settings.gradle
android/app/build.gradle
iOS:
ios/<APP_NAME>/Info.plist
ios/<APP_NAME>/<APP_NAME>.xcodeproj/project.pbxproj
I may have missed some files, but these should be the main ones.
If you have used react-native-create-app and have an expo project that hasn't been ejected yet, then I would recommend using the expo vector-icons package.
Hope this helps.

just:
npm i --save #fortawesome/react-native-fontawesome

remove the libraries
"react-native-linear-gradient": "^2.5.6",
"react-native-vector-icons": "^4.5.0",
and then Reload (cmd+R) the app

Related

react navigation issue in react-native

I am a newbie at react-native and I am facing some issues in the react-native app, after installing 'react-navigation', everything is mentioned in the images. Hope you can help me. Have a good day.
App.js file
MainActivity.java
Package.json
Terminal-issue
Node-cli
First: install #react-navigation/stack by
npm install #react-navigation/stack
using console(console must be opened in your project main directory).
Choose one:
If you are using bare React-Native project install react-gesture-handler using npm install react-native-gesture-handler.
If you are using expo managed project(e.g you created project using npx expo init) - use
npx expo install react-native-gesture-handler.
Docs: https://reactnavigation.org/docs/stack-navigator/
After successfull install please restart your metro/expo server.
Use createNativeStackNavigator from native-stack instead.
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
...
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
...
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
See Installing the native stack navigator library for details.

Tailwind rn installed but not styling views

This is my second go around installing tailwind rn for a project and I simply can't get it to work.
I ran npm install tailwind-rn followed by npx setup-tailwind-rn and I'm running it in development mode after changing the tailwind.config.js to scan the only app file:
content: ["./App.js"],
The App.js file in the meantime looks like this:
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import {TailwindProvider} from 'tailwind-rn';
import utilities from './tailwind.json';
import { useTailwind } from 'tailwind-rn';
export default function App() {
const tw = useTailwind();
return (
<TailwindProvider utilities={utilities}>
<View>
<Text style={tw('text-blue-600')}>Hello world</Text>
<StatusBar style="auto" />
</View>
</TailwindProvider>
);
}
My tailwind.css and tailwind.json are both populated with defitions for .text-blue-600 and I receive no errors when running, but none of the styles I apply work. Very confused.
I would recommend using tailwind-react-native-classnames from jaredh159. No setup or extra configurations needed after installation. It works out of the box.
This package gives the flexibility of mixing styles.
Install using yarn add twrnc or npm install twrnc.
Get more info from the GitHub page

How can I fix this error: Module not found: Can't resolve 'react-navigation/stack'?

package.json:
"#react-navigation/native": "^5.9.4",
"#react-navigation/stack": "^5.14.5",
MainNavigator:
import React from 'react';
import {
createStackNavigator,
createAppContainer,
} from 'react-navigation/stack';
import HomeScreen from './Surveys'
const Stack = createStackNavigator(MyStack);
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name="HomeScreen" component={HomeScreen} />
</Stack.Navigator>
)
}
export default createAppContainer(Stack);
I have deleted node_modules, npm installed for Expo, installed specifically react-navigation/native, installed specifically react-navigation/stack.. I've gone in circles for an hour on this, nothing fixes it.
Try this:
$ yarn add react-navigation
$ expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context #react-native-community/masked-view
$ yarn add react-navigation-stack #react-native-community/masked-view
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
i was trying to re-use parts of an old project using old versions of these libraries/components. the solution was to build it from scratch with the current versions, which was very easy/fast. i wasted a few hours, which i guess isn't a total loss because will serve as a reminder that sometimes it is better to just start from scratch.

Uncaught Error: ReferenceError: Can't find variable: React for react-native-svg on Expo

I want to render simple svg on Expo, but the below error code is shown.
Uncaught Error: ReferenceError: Can't find variable: React
My code:
import * as React from 'react';
import { Component } from 'react';
import { View, Text} from 'react-native';
import Svg, { Circle, Rect } from 'react-native-svg';
export default class Chart extends Component {
render() {
return (
<View>
<Svg height="20" width="20">
<Circle cx="10" cy="10" r="10" fill="red" />
</Svg>
</View>
);
}
}
My dependencies are as below.
Expo cli: 3.27.4
"expo": "~37.0.3",
"react": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-svg": "11.0.1",
Please advise if you know how to solve this issue.
Thanks!
Try to delete the node_modules and do and npx expo install or yarn install and check if this works.

how to add #expo/vector-icons in react native app?

i am using #expo/vector-icons here is my package.json file
"dependencies": {
"#expo/vector-icons": "^4.1.1",
"color": "^1.0.3",
"expo": "^30.0.1",
"moment": "^2.22.2",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-
30.0.0.tar.gz",
"react-native-extended-stylesheet": "^0.4.0" },
when i import #expo/vector-icon library in my component
import { Ionicons } from '#expo/vector-icons';
it gives error
The library comes by default so you don't need to install #expo/vector-icons.
You can just do this for example:
import { Ionicons } from '#expo/vector-icons';
and then you can use it like:
<Ionicons name="ios-pizza" color="red" size={200} />
FYI, this directory is helpful in finding different icons https://expo.github.io/vector-icons/
In your dependencies (package.json) remove #expo/vector-icons. They are included in the expo package and different versions of expo and expo/vector-icons can cause errors like this one.
From the official docs:
This library is installed by default on the template project that get
through expo init -- it is part of the expo package. It includes
popular icon sets and you can browse all of the icons using the
#expo/vector-icons directory.
Update 2021:
The official docs changed a bit, and instead of searching for icons in:
#expo/vector-icons directory
You can now search using:
icons.expo.fyi
This makes it far easier than before.
Go to 'https://icons.expo.fyi/' choose whatever you want, then import via copy, then use it.
import React from 'react'
import { Entypo } from '#expo/vector-icons';
import { View } from 'react-native';
export const Example = () => {
return(
<View>
<Entypo name="plus" size={24} color="black" />
</View>
)
}
Delete your node module folder and run expo init. And run the project