React Native Alement Avatar Example

Hi Guys,

In this blog, I will explain you how to use element avatar in react native. You can easily use element avatar in react native. First i will create import namespace PricingCard from react-native-elements, after I will using element avatar using for element avatar tagadd in react native example.

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

Step 1 - Create project

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

expo init ElementAvatar 

Step 2 - Installation of Dependency

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 ElementAvatar 

Run the following command

npm install react-native-elements --save

Step 3 - App.js

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

import { StatusBar } from 'expo-status-bar';
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}>
      <Avatar
        containerStyle={{marginBottom: 20}}
        size="xlarge"
        rounded
        source=
        {{
          uri:
            'data:image/jpeg;base64,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',
        }}
      />
      <Avatar
        size="xlarge"
        source={{
          uri:
            'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw4NDQ4ODQ0ODg0NDQ8NDhAODw8PDQ0PFREWFhUSFRUYHyghGBonGxUTITEhJSorLi4uFx8zODMtNygtLi4BCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIAOEA4QMBIgACEQEDEQH/xAAbAAEAAwEBAQEAAAAAAAAAAAAABAUGAwECB//EADcQAQACAQEEBQsDAwUAAAAAAAABAgMRBAUhMRJBUXGREyIyQlJhgaGxwdEGYuEkcrIzNIKS8P/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwD9xAAAAAAAAAAEfa9rphr0rz3RHpWnshm9v3lkzaxM9Gnsx956wXm1b4w4+ET07dlOMePJW5d/5J9Cla9+tp+yoAWM762j2q/9Yd9l39eJiMtYmvXNY0tHw61OA2uDPTJHSpaLR7vv2OjEUvNZ1rM1ntiZiUzDvbPT1+lHZeIn58wasVmwb4plmK3joXnlx823dKzAAAAAAAAAAAAAAAAAAB5LjtW0VxUm9uUeMz1RDtLN7/2rp5PJxPm4+fvtP/vqCDte02zXm9/hHVWOyHEAAAAAAAGi3FvCckeSvOt6xrWZ52r+YZ1I3dk6GbHb98RPdPCfqDYgAAAAAAAAAAAAAAAAA+L20iZnlETPgxeS82tNp52mbT8Za3eVtMGWf2WjxjRkAAAAAAAAAH1inzq/3R9Xy9pzjvj6g3AAAAAAAAAAAAAAAAAAIO+Z/p8ndH+UMo1e+v8AbZO6v+UMoAAAAAAAAAADb0trET2xEvpX7iyzfBXpTr0Zmsd0clgAAAAAAAAAAAAAAAACFviP6fL3R9YZNtNqxeUx3p7VZj5MZes1mYmNJidJjskHgAAAAAAAAOuy4Jy5K0j1p07o658AabcuPo7PTttrbxnh8tE55WsRERHKIiI7noAAAAAAAAAAAAAAAACg/UWyxE1y1jn5t+/qn7eC/fGXHFomto1raNJiesGJHbbMHksl6ezPD3xzj5OIAAAAAADSbi2HydPKWjz7xw/bX+VDseLymXHTn0rxr3c5+WrZgAAAAAAAAAAAAAAAAAAPJegM5+o8WmSl+q1NPjE/iYVLVb52bymG3tU8+vwjjHhqyoAAAAAALr9N7Pra2WfV8yvfPP5aeK/V+4qabPT902tPjP4WAAAAAAAAAAAAAAAAAAAAIW8d40wRp6V5jhX7z2QCRtNojHeZ5RS2vgxcJG1bblzT59p09mOFY+COAAAAAADT7gyxbBFeukzWfjOsfVZMbse13w26VJ58JieVo97S7t3jXPHs3j0q/eO2ATQAAAAAAAAAAAAAAQtp3phx8Jv0rdlPOn8QCa8taIjWZiIjnM8Ihnto39knhjrFI7Z8634VufacmT072t3zwj4cgXu377pXWuLz7e16kfln8mS17Ta0zNpnWZnrfIAAAAAAAAA+8OW2O0XpOlqzrD4Aa7d+3Vz11jhaPSr1xP4S2IxZLUmLUtNbRymOErPZ9+5a8LxF47fRt+AaQQNm3vhycOl0J7L8PnyT4AAAAAAABS703x0ZnHh06UcLX5xE9ke8FptG1Y8X+peK+6ec90Kvad/1jhipM++/CPBRXvNpmbTMzPOZnWZfIJO07fly+nedPZjhXw60YAAAAAAAAAAAAAAAAAHfZtsy4vQvMR2c6+EuAC92bf8A1Zaf8qfiVps224svoXiZ7OVvCWOexMxOsTpMcpjhMA3Aod2b5nWKZp1ieEX64/u/K+AABD3ttE4sF7RwtPm190zw1ZJof1JmiMdKddrdL4RH8s8AAAAAAAAAAAAAAAAAAAAAAAAA1G4tonJgiJ4zjnod8c4+U6fBl13+ms0a5Kdc6Xj6T9gXwAMlvXaPKZ7z1VnoV7o/nVDAAAAAAAAAAAAAAAAAAAAAAAAAB22PPOLJS8erPH316/k4gNr5entR4jF9Ke2QHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/9k=',
        }}
        >
        <Accessory />
      </Avatar>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Step 4 - Run project

In the last step run your project using bellow command.

npm start

Output

It will help you...