How to create Avatar in react-native ?
Last Updated : 07 Mar, 2024
React-native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms.
Prerequisites:
Approach: In this article, we will create 3 different kinds of Avatars using the react-native-paper library. 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. We will see the approach step-by-step.
Below is the step by step implementation:
Step 1: Create a react-native project using the following command:
npx react-native init DemoProject
Step 2: Install react-native paper using the following command:
npm install react-native-paper
Step 3: Start the server using the following:
npx react-native run-android
Step 4: Installing the dependencies for icons and deep linking:
npm i react-native-vector-icons react-native link react-native-vector-icons
Step 5: Now go to your project and create a components folder. Inside components folder, create a file Avatar.js.
Project Structure: It will look like this.
Implementation: Write down the code in respective files.
Avatar.js import React from "react"; import { Text, View, StyleSheet } from "react-native"; import { Avatar } from "react-native-paper"; const AvatarExample = () => { return ( <View style={styles.container}> <Text style={styles.text}>Avatar Icon example</Text> <Avatar.Icon size={100} icon="coffee" /> <Text style={styles.text}>Avatar Image example</Text> <Avatar.Image size={100} source={{ uri: `https://media.geeksforgeeks.org/wp-content/uploads/20220305133853/gfglogo-300x300.png`, }} /> <Text style={styles.text}>Avatar Text example</Text> <Avatar.Text size={100} label="RK" /> </View> ); }; export default AvatarExample; const styles = StyleSheet.create({ container: { margin: 30, }, text: { marginBottom: 20, fontSize: 30, }, });