How to create Avatar in react-native ?

Last Updated : 18 May, 2025

In this article, we will create 3 different kinds of Avatars using the react-native-paper library. An avatar is used for representation purposes in the form of icons, images, or text. In our project, we will create all these Avatars using material design. To give you a better idea of what we’re going to create, let’s watch a demo video.

Demo Video

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

For the Android users,
- For the Android Emulator, press "a" as mentioned in the image below.
- For the Physical Device, download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
For iOS users, simply scan the QR code using the Camera app.
If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Create a new component folder (optional)

You can create a new folder called "components" to organize all component files better, as mentioned in the image below. Alternatively, you can write the component code directly in App.js.

Step 4: Working with Avatar.js

- Import libraries: Import required libraries at the top of the file.

JavaScript

// Importing React library
import React from "react";
// Importing required components from react-native
import {
	Text, // For displaying text
	View, // For creating a container
	StyleSheet // For styling components
} from "react-native";
// Importing Avatar component from react-native-paper
import { Avatar } from "react-native-paper";

- StyleSheet: Create a StyleSheet to style components like container and text.

JavaScript

// Defining styles for the component
const styles = StyleSheet.create({
	// Style for the main container
	container: {
		margin: 30, // Adding margin around the container
	},
	// Style for the text elements
	text: {
		marginBottom: 20, // Adding space below the text
		fontSize: 30, // Setting font size to 30
	},
});

- Avator Component: This component is used to display an icon, image, text inside the avatar as mentioned in below article.

JavaScript

{/* Avatar Icon with size 100 and coffee icon */}
<Avatar.Icon size={100} icon="coffee" />

{/* Avatar Image with size 100 and an image source */}
<Avatar.Image
    size={100}
    source={{
        uri:`https://media.geeksforgeeks.org/wp-content/uploads/20220305133853/gfglogo-300x300.png`,
    }}
/>

{/* Avatar Text with size 100 and label "RK" */}
<Avatar.Text size={100} label="RK" />

- Text: This component is used to display text on the screen.

JavaScript

{/* Text for Avatar Icon example */}
<Text style={styles.text}>Avatar Icon example</Text>

{/* Text for Avatar Image example */}
<Text style={styles.text}>Avatar Image example</Text>

{/* Text for Avatar Text example */}
<Text style={styles.text}>Avatar Text example</Text>

Now, wrap the Avatars and Texts components with a View component and return from the AvatarExample component. Also, ensure to export the AvatarExample.

Avatar.js:

Avatar.js

// Importing React library
import React from "react";
// Importing required components from react-native
import {
	Text, // For displaying text
	View, // For creating a container
	StyleSheet // For styling components
} from "react-native";
// Importing Avatar component from react-native-paper
import { Avatar } from "react-native-paper";

// Defining a functional component named AvatarExample
const AvatarExample = () => {
	return (
		// Main container for the component
		<View style={styles.container}>
			{/* Text for Avatar Icon example */}
			<Text style={styles.text}>Avatar Icon example</Text>
			{/* Avatar Icon with size 100 and coffee icon */}
			
			<Avatar.Icon size={100} icon="coffee" />

			{/* Text for Avatar Image example */}
			<Text style={styles.text}>Avatar Image example</Text>
			{/* Avatar Image with size 100 and an image source */}
			<Avatar.Image
				size={100}
				source={{
					uri:
						`https://media.geeksforgeeks.org/wp-content/uploads/20220305133853/gfglogo-300x300.png`,
				}}
			/>
			{/* Text for Avatar Text example */}
			<Text style={styles.text}>Avatar Text example</Text>
			{/* Avatar Text with size 100 and label "RK" */}
			<Avatar.Text size={100} label="RK" />
		</View>
	);
};

// Exporting the AvatarExample component as the default export
export default AvatarExample;

// Defining styles for the component
const styles = StyleSheet.create({
	// Style for the main container
	container: {
		margin: 30, // Adding margin around the container
	},
	// Style for the text elements
	text: {
		marginBottom: 20, // Adding space below the text
		fontSize: 30, // Setting font size to 30
	},
});

Step 5: Working with App.js

Now call this AvatarExample Component in the main "App" Component in App.js.

App.js:

App.js

// Importing the React library to use React components
import React from "react"; 
// Importing the View component from react-native for layout purposes
import { View } from "react-native"; 
// Importing the AvatarExample component from the components folder
import AvatarExample from "./components/Avatar";

// Defining the main App component
const App = () => { 
  return ( 
    // Rendering a View container
    <View> 
      {/* Rendering the AvatarExample component inside the View */}
      <AvatarExample /> 
    </View> 
  ); 
}; 

// Exporting the App component as the default export of this file
export default App;

Or

You can write the whole code in one file, i.e, App.js.

Complete Source Code:

App.js:

App.js

// Importing React library
import React from "react";
// Importing required components from react-native
import {
  Text, // For displaying text
  View, // For creating a container
  StyleSheet // For styling components
} from "react-native";
// Importing Avatar component from react-native-paper
import { Avatar } from "react-native-paper";

// Defining a functional component named AvatarExample
const AvatarExample = () => {
  return (
    // Main container for the component
    <View style={styles.container}>
      {/* Text for Avatar Icon example */}
      <Text style={styles.text}>Avatar Icon example</Text>
      {/* Avatar Icon with size 100 and coffee icon */}

      <Avatar.Icon size={100} icon="coffee" />

      {/* Text for Avatar Image example */}
      <Text style={styles.text}>Avatar Image example</Text>
      {/* Avatar Image with size 100 and an image source */}
      <Avatar.Image
        size={100}
        source={{
          uri:
            `https://media.geeksforgeeks.org/wp-content/uploads/20220305133853/gfglogo-300x300.png`,
        }}
      />
      {/* Text for Avatar Text example */}
      <Text style={styles.text}>Avatar Text example</Text>
      {/* Avatar Text with size 100 and label "RK" */}
      <Avatar.Text size={100} label="RK" />
    </View>
  );
};


// Defining styles for the component
const styles = StyleSheet.create({
  // Style for the main container
  container: {
    margin: 30, // Adding margin around the container
  },
  // Style for the text elements
  text: {
    marginBottom: 20, // Adding space below the text
    fontSize: 30, // Setting font size to 30
  },
});



// Defining the main App component
const App = () => {
  return (
    // Rendering a View container
    <View>
      {/* Rendering the AvatarExample component inside the View */}
      <AvatarExample />
    </View>
  );
};

// Exporting the App component as the default export of this file
export default App;

Output

React Native Switch API

samiksharanjan

Improve

Article Tags :

How to create Avatar in react-native ?

Demo Video

Step-by-Step Implementation

Step 1: Create a React Native Project

Project Structure:

Step 2: Run Application

Step 3: Create a new component folder (optional)

Step 4: Working with Avatar.js

Step 5: Working with App.js

Or

Complete Source Code:

Similar Reads

React Native Basics

React Native Components

React Native UI Elements

React Native API

React Native Questions

React Native Projects

Thank You!

What kind of Experience do you want to share?