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’.

3. Creating our main App component.

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.

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

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

7. Creating Style.

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

Screenshot :-

Leave a Reply

Your email address will not be published.