How do you use icons in a React Native Elements Header object? - react-native

I went through all the set up steps at https://reactnativeelements.com/docs and am just trying to do a simple Header following their example.
If I click the "Copy Code" button in their playground, it gives me this:
import * as React from "react";
import { Header, Icon } from "#rneui/base";
import { SafeAreaProvider } from "react-native-safe-area-context";
export default () => {
return (
<Header
backgroundImageStyle={{}}
barStyle="default"
centerComponent={{
text: "MY TITLE",
style: { color: "#fff" }
}}
centerContainerStyle={{}}
containerStyle={{ width: 350 }}
leftComponent={{ icon: "menu", color: "#fff" }}
leftContainerStyle={{}}
linearGradientProps={{}}
placement="center"
rightComponent={{ icon: "home", color: "#fff" }}
rightContainerStyle={{}}
statusBarProps={{}}
/>
);
}
When I do that in my app, though, it shows question marks for the icons:
Their set up docs do include this step for manual linking:
react-native link react-native-vector-icons
which I can't do because react-native no longer supports it.
But I don't know what's going wrong here. Any help would be appreciated.
If it helps, these are my dependencies in my package.json:
"#rneui/base": "^4.0.0-rc.6",
"#rneui/themed": "^4.0.0-rc.6",
"react": "18.0.0",
"react-native": "0.69.4",
"react-native-asset": "^2.0.1",
"react-native-gesture-handler": "^2.6.0",
"react-native-linear-gradient": "^2.6.2",
"react-native-safe-area-context": "^4.3.3",
"react-native-vector-icons": "^9.2.0"

For Android, I just had to follow the installation instructions at the Github repo for react-native-vector-icons here. (You might think that's obvious, but the docs for react-native-elements just have you do a yarn/npm install of react-native-vector-icons and act like that's enough to get you up and running.)
They had me add this to the android/app/build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
and then rebuild the app.
For iOS it's more complicated. You need to use XCode and manually copy over the fonts, and then update some files. The directions are at that link above. But they're not quite accurate because they have you add fonts to the Build Phases > Copy Bundle Resources thing in XCode. (In my case, I didn't manually have to add them. They were already there.) However, running the code gave me an error "multiple commands produce" these .ttf file.
The solution to that was to go back to Build Phases > Copy Bundle Resources and manually delete all the icon .ttf files listed there, as per this article.
Everything is working now. It's stupid it's this complicated though

Related

Text Recognition with RNCamera

I'm trying to develop a ReactNative app which uses RNCamera, along with other libraries like react-navigation. Here are the dependencies and their versions that I am using:
"#react-native-community/masked-view": "^0.1.10",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-camera": "^3.42.0",
"react-native-cli": "^2.0.1",
"react-native-gesture-handler": "^1.9.0",
"react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.16.1",
"react-navigation": "^4.4.3",
"react-navigation-stack": "^2.10.2"
Everything is working just fine, but the problem is that I want to use the live text recognition which does not give me the results expected. This is the code I am using:
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {RNCamera} from 'react-native-camera';
const CameraScreen = ({navigation}) => {
state = {
recordOptions: {
mute: false,
maxDuration: 5,
quality: RNCamera.Constants.VideoQuality['288p'],
}
};
return (
<RNCamera
ref={ref => {
camera = ref;
}}
style={{
flex: 1,
width: '100%',
}}
type={'back'}
flashMode={'off'}
autoFocus={'on'}
zoom={0}
whiteBalance={'auto'}
ratio={'16:9'}
focusDepth={0}
trackingEnabled
androidCameraPermissionOptions={{
title: 'Permission to use camera',
message: 'We need your permission to use your camera',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}
onTextRecognized={({text})=>{console.log(text)}}
></RNCamera>
);
};
const styles = StyleSheet.create({});
export default CameraScreen;
As you can see, I call an console.log function for onTextRecognized, which is triggered every few milliseconds. What happens is that I am constantly reciving the text 'undefined', which does not change even if I put text in front of the camera for a minute. This is the logs I got (it can be seen that logs appear every few milliseconds):
logs file
Does anybody know how can I get the text without taking a picture?
I also have tried to add 'textBlocks' from other tutorials but I can't make it work (please tell me if you also know how to do this).
Ok that was an stupid question, sorry.
The curly brackets that I put in onTextRecognized={({text})=>{console.log(text)}} are for extracting specific information from a bigger object. As the 'text' parameter does not exist in the 'textBlocks' object that onTextRecognized returns, the console prints undefined. In order to make it work you actualy have to put {textBlocks} where I put text, like so:
onTextRecognized={({textBlocks})=>{console.log(textBlocks)}}
Putting that will return the 'textBlocks' object from a bigger 'textBlock'object (they have the same name but the inner 'textBlocks' is easier to use).

Search Bar Icon not shown | React native

Search icon is replaced by some other icon. How to put icon in SearchBar (React-native-elements || React-native)
screenshot of the icon.
Found The solution.
For some react-native versions, we need to manually link the module. In this case, i had to link react-native-vector-icons.
npm install react-native-vector-icons--save
react-native link react-native-vector-icons
from project directory.
I did these:
npm install react-native-vector-icons--save
react-native link react-native-vector-icons
and then close the app from emulator uninstall it just to be on the safe side then:
npm start
react-native run-android
Another solution which I have just managed to resolve for my project just now.
Just follow the instructions:
https://github.com/oblador/react-native-vector-icons#installation
I encountered an error that prompted me to have duplicate fonts. You may want to skip the part where it mentioned copying the Fonts folder from react-native-elements and placing it into the src/assets/fonts folder that resides in your react native project.
Shut down your laptop and then wait for about 10s before booting back up. I hope it helps whoever encountering the same issue as me (or us).
Just want to share the versions used in my project -
dependencies": {
..
**"react": "17.0.2",
"react-native": "0.67.3",
"react-native-elements": "^3.4.2",
"react-native-safe-area-context": "^4.0.1",
"react-native-screens": "^3.12.0",**
...
**"react-native-vector-icons": "^9.1.0"**
},
I think i have encountered this once and solved it by adding this line at the end of android>app>build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
then doing ./gradlew clean , and running the app again
Here the code from documentation:
import { Icon } from 'react-native-elements'
<Icon
name='rowing' />
<Icon
name='g-translate'
color='#00aced' />
<Icon
name='sc-telegram'
type='evilicon'
color='#517fa4'
/>
<Icon
reverse
name='ios-american-football'
type='ionicon'
color='#517fa4'
/>
<Icon
raised
name='heartbeat'
type='font-awesome'
color='#f50'
onPress={() => console.log('hello')} />

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

Can't resolve Font Awesome modules in 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

React native icons

Somebody try to use react-native-icons? I follow this steps:
npm install react-native-icons#latest --save
In XCode, in the project navigator right click Libraries ➜ Add Files to [your project's name]
Go to node_modules ➜ react-native-icons➜ ios and add ReactNativeIcons.xcodeproj
Add libReactNativeIcons.a (from 'Products' under ReactNativeIcons.xcodeproj) to your project's Build Phases ➜ Link Binary With Libraries phase
Add the font files you want to use into the Copy Bundle Resources build phase of your project (click the '+' and click 'Add Other...' then choose the font files from node_modules/react-native-icons/ios/Libraries/FontAwesomeKit).
Run your project (Cmd+R)
My Code
var React = require('react-native');
var Icon = require('FAKIconImage');
var { AppRegistry, StyleSheet, Text, View} = React;
class BringgersApp extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to Bringgers!
</Text>
<Icon
name='ion|beer'
size={150}
color='#887700'
style={styles.beer} />
</View>
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
React.AppRegistry.registerComponent('BringgersApp', function() { return BringgersApp });
After I build, he says the file doesn't exist...
Font file doesn't exist
I clean the DerivedData and try to build many times, but doesn't work.
Steps to install and usage Ionicons, FontAwesome and Entypo font Icons in react-native.
First you need to install using following command.
react-native install react-native-vector-icons
Then Required to Link:
react-native link react-native-vector-icons
Import font package files to your page:
import Ionicons from 'react-native-vector-icons/Ionicons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Entypo from 'react-native-vector-icons/Entypo';
Usage Example:
<View>
<Text>Ionicons Icons</Text>
<Icon name='md-bicycle' />
<Text>FontAwesome Icons</Text>
<FontAwesome name='trophy' />
<Text>Entypo Icons</Text>
<Entypo name='aircraft' />
</View>
If you want to see list of available icons, you can look in this directory:
Ionicons:
\node_modules\react-native-vector-icons\glyphmaps\Ionicons.json
FontAwesome:
\node_modules\react-native-vector-icons\glyphmaps\FontAwesome.json
Entypo:
\node_modules\react-native-vector-icons\glyphmaps\Entypo.json
Giving you my apps screenshot.
First things first,
the maintainer of react-native-iconshimself points to the newer & maintained react-native-vector-icons
Apparently as of now the rnpm project has been merged into react-native.
In other words, your life can be as easy as typing
react-native install react-native-vector-icons
react-native link react-native-vector-icons
And you may be good to go*)
*) at least it worked on my machine
Did you import file node_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit/ionicons.ttf to your project?
Use React Native Package Manager : https://github.com/rnpm/rnpm
$ npm install rnpm -g
Running
Installing dependency:
If you want to install a dependency and link it in one run:
$ rnpm install react-native-icons
Linking dependency:
If you already have some installed (but not linked) modules, run:
$ rnpm link
Do you have "Build settings" -> "Header Search Paths" -> "$(SRCROOT)/node_modules/react-native/React" recursive?
Did you include icon fonts to "Build phases" -> "Copy Bundle Resources" in your Main project?
So in my project, I access the Icons through this code: let { Icon, } = require('react-native-icons');
Although I never had issues using FontAwesome icons, I had issues using Material Icons. You can also check out react-native-vector-icons.
For using icons in react native, there are many libraries available, react-native-vector-icons is one of them, it is very easy to use.
just follow 2 steps, first you have to install library,
then you have to link it also, to use it in your project.
Run this command for installing library
npm install react-native-vector-icons --save
Run this command for linking library
react-native link react-native-vector-icons
How to use this library
You can use any directory showed in the image, each directory has a lots of icons in it, now you have to choose which directory has a best icon for you...
For finding best directory for you, I will recommend you, simply visit this link:
Find best icon for your app
On this website simply search the name of icon you are lookig for,
You will get matching icons in all directories, you can simply remember the name of your selected icon, and use it in your app...
suppose I search arrow on this link, and I selected arrowsalt from AntDesign directory and want to use it in my App.
import Icon from 'react-native-vector-icons/AntDesign';
if you want to use FontAwesome, then simply replace AntDesign with FontAwesome, or the name of directory you want to use.
e.g import Icon from 'react-native-vector-icons/DirectoryName';
And use icon like this.
<Icon name="arrowsalt" size={30} color="blue" />
For further details Visit this link
Reference:
https://openbase.com/js/react-native-vector-icons/documentation
https://aboutreact.com/react-native-vector-icons/
https://oblador.github.io/react-native-vector-icons/
try
rnpm link // If you installed module
Also
npm install module-name
and after execute
rnpm link
restart services..
This code relink automatic your modules.
Work to me. Thanks.
you can also try with native-base library.
it provide tag
it is easy and simple to use any icon which can be use with mobile devices.
follow this link for more information on native base icon.
http://nativebase.io/docs/v2.0.0/components#icon
follow this link for more information on list of icon.
https://ionicframework.com/docs/v2/ionicons/
ex.
<Icon name='ios-list' style={style.icon} />
Step 1: Install react-native-elements
yarn add react-native-elements
# or with npm
npm i react-native-elements --save
Step 2: Install react-native-vector-icons
If you have already installed react-native-vector-icons as a dependency for your project you can skip this step. Otherwise run the following command:
# yarn
yarn add react-native-vector-icons
# or with npm
npm i --save react-native-vector-icons
# link
react-native link react-native-vector-icons
and after this just simply use them in your project like
import { Icon } from 'react-native-elements';
class IonBeer extends React.Component {
render() {
return (
<Icon
name='md-beer'
type='ionicon'
color='#887700'
size=150
/>
);
}
}
and then simply use it like.
<IonBeer/>
any where you want
For Icon you can use react-native vector icon . It comprises of various icon that we can use in your project for a native look .
for more you can have a look https://github.com/oblador/react-native-vector-icons.
For more native components you can have a look at nativebase.io .It's an awesome library for UI in react native .