Example of React Native Paper Avatar Icon Image Text

Hello friends, in today’s tutorial we would learn about 3 components of React Native Paper library. The Avatar component of paper is used to represent people in 3 different ways Icon, Image and text. Using the Avatar component we can make material style Icons, Images with rounded shape and Text with round backgrounds. So in this tutorial we would learn about Example of React Native Paper Avatar Icon Image Text.

Contents in this project Example of React Native Paper Avatar Icon Image Text :-

1. First of all before going further in this tutorial you have to install React Native Paper and Vector Icons package in your project. I have already make tutorial on both of them. Here is the link of Paper Installation Guide and Vector Icon Installation Guide is Here.

2. Now open your project’s main App.js file and import Avatar, Provider as PaperProvider from ‘react-native-paper’ and StyleSheet, SafeAreaView, View from ‘react-native’.

import React from 'react';

import { Avatar, Provider as PaperProvider } from 'react-native-paper';

import { StyleSheet, SafeAreaView, View } from 'react-native';

import React from 'react';

import { Avatar, Provider as PaperProvider } from 'react-native-paper';

import { StyleSheet, SafeAreaView, View } from 'react-native';

3. Creating our main App component.

export default function Main() {



}

export default function Main() {

}

4. Creating return() block, Now here we would first make a Root View component and make Avatar.Icon component in 3 shapes with 3 different Icons. Now the main thing is that Here is the list of Icons you can use here in the MaterialCommunityIcons section.

<View style={styles.view1}>

          <Avatar.Icon
            size={50}
            icon="folder"
            color='white'
            style={{ backgroundColor: 'green' }}
          />

          <Avatar.Icon
            size={70}
            color='white'
            icon="bluetooth-settings"
            style={{ backgroundColor: '#00B8D4' }} />

          <Avatar.Icon
            size={100}
            icon="blogger"
            color='white'
            style={{ backgroundColor: 'orange' }}
          />

        </View>

<Avatar.Icon

size={50}

icon="folder"

color='white'

style={{ backgroundColor: 'green' }}

<Avatar.Icon

size={70}

color='white'

icon="bluetooth-settings"

style={{ backgroundColor: '#00B8D4' }} />

<Avatar.Icon

size={100}

icon="blogger"

color='white'

style={{ backgroundColor: 'orange' }}

</View>

5. Creating Another 3 Avatar Image component with different shapes.

 <View style={styles.view2}>

          <Avatar.Image
            size={50}
            source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2021/04/Rose.jpg' }} />

          <Avatar.Image
            size={70}
            source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2021/04/Rose.jpg' }} />

          <Avatar.Image
            size={100}
            source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2021/04/Rose.jpg' }} />

        </View>

<Avatar.Image

size={50}

source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2021/04/Rose.jpg' }} />

<Avatar.Image

size={70}

source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2021/04/Rose.jpg' }} />

<Avatar.Image

size={100}

source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2021/04/Rose.jpg' }} />

</View>

6. Creating one more Avatar Text component with different shapes and color.

 <View style={styles.view2}>

          <Avatar.Text
            size={50}
            label="AB"
            style={{ backgroundColor: 'green' }} />

          <Avatar.Text
            size={70}
            label="CD"
            color='white'
            style={{ backgroundColor: 'orange' }} />

          <Avatar.Text
            size={100}
            label="EF"
            style={{ backgroundColor: 'red' }} />

        </View>

<Avatar.Text

size={50}

label="AB"

style={{ backgroundColor: 'green' }} />

<Avatar.Text

size={70}

label="CD"

color='white'

style={{ backgroundColor: 'orange' }} />

<Avatar.Text

size={100}

label="EF"

style={{ backgroundColor: 'red' }} />

</View>

7. Creating Style.

const styles = StyleSheet.create({

  MainContainer: {
    flex: 1,
    justifyContent: 'center'
  },

  view1: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center'
  },

  view2: {
    flexDirection: 'row',
    marginTop: 20,
    justifyContent: 'space-evenly',
    alignItems: 'center'
  }

});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: 'center'

view1: {

flexDirection: 'row',

justifyContent: 'space-evenly',

alignItems: 'center'

view2: {

flexDirection: 'row',

marginTop: 20,

justifyContent: 'space-evenly',

alignItems: 'center'

}

});

8. Complete Source Code for App.js file :-

import React from 'react';

import { Avatar, Provider as PaperProvider } from 'react-native-paper';

import { StyleSheet, SafeAreaView, View } from 'react-native';

export default function Main() {

  return (
    <PaperProvider>

      <SafeAreaView style={styles.MainContainer}>

        <View style={styles.view1}>

          <Avatar.Icon
            size={50}
            icon="folder"
            color='white'
            style={{ backgroundColor: 'green' }}
          />

          <Avatar.Icon
            size={70}
            color='white'
            icon="bluetooth-settings"
            style={{ backgroundColor: '#00B8D4' }} />

          <Avatar.Icon
            size={100}
            icon="blogger"
            color='white'
            style={{ backgroundColor: 'orange' }}
          />

        </View>

        <View style={styles.view2}>

          <Avatar.Image
            size={50}
            source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2021/04/Rose.jpg' }} />

          <Avatar.Image
            size={70}
            source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2021/04/Rose.jpg' }} />

          <Avatar.Image
            size={100}
            source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2021/04/Rose.jpg' }} />

        </View>

        <View style={styles.view2}>

          <Avatar.Text
            size={50}
            label="AB"
            style={{ backgroundColor: 'green' }} />

          <Avatar.Text
            size={70}
            label="CD"
            color='white'
            style={{ backgroundColor: 'orange' }} />

          <Avatar.Text
            size={100}
            label="EF"
            style={{ backgroundColor: 'red' }} />

        </View>

      </SafeAreaView>

    </PaperProvider>
  );
}

const styles = StyleSheet.create({

  MainContainer: {
    flex: 1,
    justifyContent: 'center'
  },

  view1: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center'
  },

  view2: {
    flexDirection: 'row',
    marginTop: 20,
    justifyContent: 'space-evenly',
    alignItems: 'center'
  }

});

100

import React from 'react';

import { Avatar, Provider as PaperProvider } from 'react-native-paper';

import { StyleSheet, SafeAreaView, View } from 'react-native';

export default function Main() {

return (

<Avatar.Icon

size={50}

icon="folder"

color='white'

style={{ backgroundColor: 'green' }}

<Avatar.Icon

size={70}

color='white'

icon="bluetooth-settings"

style={{ backgroundColor: '#00B8D4' }} />

<Avatar.Icon

size={100}

icon="blogger"

color='white'

style={{ backgroundColor: 'orange' }}

</View>

<Avatar.Image

size={50}

source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2021/04/Rose.jpg' }} />

<Avatar.Image

size={70}

source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2021/04/Rose.jpg' }} />

<Avatar.Image

size={100}

source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2021/04/Rose.jpg' }} />

</View>

<Avatar.Text

size={50}

label="AB"

style={{ backgroundColor: 'green' }} />

<Avatar.Text

size={70}

label="CD"

color='white'

style={{ backgroundColor: 'orange' }} />

<Avatar.Text

size={100}

label="EF"

style={{ backgroundColor: 'red' }} />

</View>

</SafeAreaView>

</PaperProvider>

);

}

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: 'center'

view1: {

flexDirection: 'row',

justifyContent: 'space-evenly',

alignItems: 'center'

view2: {

flexDirection: 'row',

marginTop: 20,

justifyContent: 'space-evenly',

alignItems: 'center'

}

});

Screenshot :-

Example of React Native Paper Avatar Icon Image Text

Contents in this project Example of React Native Paper Avatar Icon Image Text :-

Also Read :

Leave a Reply Cancel reply

Search Here