Hi Guys,

Today, I will learn you how to use element avatar in react native. You can easily use the element avatar in react native. First, I will create import namespace PricingCard from react-native-elements, after I will use element avatar using for element avatar tag add in react native example.

Here, I will give you a full example for simply display element avatar using react native as below.

In the first step Run the following command for create project.

expo init ElementAvatarExample 

In the step, Run the following command for installation of dependency.

To use element avatar you need to npm install react-native-elements --save.

To install this open the terminal and jump into your project

cd ElementAvatarExample 

npm install react-native-elements --save

In this step, You will open App.js file and put the code.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Avatar, Accessory } from 'react-native-elements';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.textTitle}>React Native Element Avatar Example - </Text>
      <Text style={styles.textTitle}>Mywebtuts.com</Text>
      <Avatar
        containerStyle={{marginBottom: 20}}
        size="xlarge"
        rounded
        source=
        {{
          uri:
            'https://www.mywebtuts.com/user-defualt-images.jpg',
        }}
      />
      <Avatar
        size="xlarge"
        source={{
          uri:
            'https://www.mywebtuts.com/user-defualt-images.jpg',
        }}
        >
      </Avatar>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#e2e2e2',
    alignItems: 'center',
    justifyContent: 'center',
  },
  textTitle:{
    fontSize: 20,
    paddingLeft: 15,
    paddingRight: 10,
    textAlign: 'center', 
    color: '#000'
  }
}); 

In the last step run your project using bellow command.

npm start

It will help you...