How to get an Icon Component in react-native-paper without Button Component like in react-native-elements

Question

I'm using react-native-paper and I want to get an Icon component but without any link with Button Component. I went through the doc and I didn't found an Icon Component. I want something similar than react-native-elements one

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


<Icon
  name='g-translate'
  color='#00aced' />

So please help me to achieve this.

Corydalis

Answer 1

you can use "react-native-vector-icons" library because the icon in react-native-paper is from react-native-vector-icons. here is code:

import Icon from 'react-native-vector-icons/FontAwesome'; const myIcon = <Icon name="rocket" size={30} color="#900" />;

Morena

But I wanted to use react-native-paper because it provides a very good way to set a custom icon than react-native-vector-icons itself – Corydalis

What do you want to custom? – Morena

react-native-paper gives the possibility to easily set a custom icon from image. For example ``` <Button icon={require('../assets/chameleon.jpg')}> Press me </Button>``` But now I want to use Icon without ButtonComponent that's why I'm asking an Icon Component – Corydalis

Hi. Sorry i have some busy work. i think you have 2 ways. 1. Use Button without text and disabled props is true. 2. Use IconButton and set disabled props is true. way 2 is easy to use and work i think. Goodluck! – Morena

Answer 2

An alternative approach would be to directly import the Icon component from the source directory of react-native-paper:

import { View } from 'react-native'
import { Text } from 'react-native-paper'
import Icon from 'react-native-paper/src/components/Icon'

function Price() {
  return (
    <View>
      <Text>&euro; 2,100.58</Text>
      <Icon source="arrow-right" size={15} />
    </View>
  )
}

Edit: With the latest version you can also directly import the Icon component.

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

Blastopore

Answer 3

You can use Avtar.Icon. By default, it has some margin around the icon. You can create your own component by modifying the Avtar.Icon. Here is an example:

    const iconSize = 34
    const customAvtardimension = 0.6 * iconSize
    <Avatar.Icon
      size={iconSize}
      icon="bell-ring-outline"
      color={Colors.redA700}
      style={{
        backgroundColor: Colors.transparent,
        width: customAvtardimension,
        height: customAvtardimension,
      }}
    />

Foreandafter