Question 34883 in React native Question posted in
The official React Native documentation can be found here.

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

Tried both ways to show Icon:

  • with import { Icon } from 'react-native-elements'
  • with import Icon from 'react-native-vector-icons/FontAwesome'

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

Tags:

2

Answers


  1. 0

    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'}} />
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search