CODEWITHSUNDEEP
react-nativeiconsuisearchbar
Niraj Pradhan
Niraj Pradhan

Reputation: 111

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.

enter image description here

Upvotes: 4

Views: 3655

Answers (5)

RodSarhan
RodSarhan

Reputation: 1447

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

Upvotes: 0

Shirley Charlin Lee
Shirley Charlin Lee

Reputation: 87

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"**

},

Upvotes: 0

Roham Shojaei
Roham Shojaei

Reputation: 470

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

Upvotes: 0

Niraj Pradhan
Niraj Pradhan

Reputation: 111

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.

Upvotes: 2

Tilen
Tilen

Reputation: 337

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')} />

Upvotes: -1

Related Questions