CODEWITHSUNDEEP
androidreact-nativeiconsreact-native-elements
Jakkins
Jakkins

Reputation: 175

React native 0.69.5, react-native-elements, Icon component showing just X

Tried both ways to show Icon:

Dependencies

dependencies

import { Icon } from 'react-native-elements'

import { Icon } from 'react-native-elements'

<Icon
  raised
  name='heartbeat'
  type='font-awesome'
  color='#f50'
  onPress={() => console.log('hello')} />

import Icon from 'react-native-vector-icons/FontAwesome'

import Icon from 'react-native-vector-icons/FontAwesome';
import { Input } from 'react-native-elements';

<Input
  placeholder='INPUT WITH CUSTOM ICON'
  leftIcon={
    <Icon
      name='user'
      size={24}
      color='black'
    />
  }
/>

Also CheckBox shows an X instead of the usual

<CheckBox
title="Remember me"
checked={false}/>

Showing:

CheckBox showing X instead of the usual

What I tried

Solved

Solved by manually copying their folder with all the ttf inside android/app/src/main/assets/fonts as said here

Upvotes: 0

Views: 1350

Answers (2)

Zaid Qureshi
Zaid Qureshi

Reputation: 637

If its on android you have to follow the following steps: go into android/app/build.gradle and paste the below line at top.

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

After that you have to npx react-native run-android and it will show the icons.

Upvotes: 2

BenoHiT
BenoHiT

Reputation: 312

I don't know much about elements, but for the vector icons, you just have to write like that :

import FontAwesome from 'react-native-vector-icons/FontAwesome'

then

<FontAwesome name="user" size={24} style={{color:'black'}} />

Upvotes: 0

Related Questions