React Native Paper Badge Example with Vector Icons

Hello friends, In today’s tutorial we would learn about Badge component of react native paper. The badge component is used to show small notification icon with notification count inside it like how many notification left to seen. We’re using react native vector icons here to show main icons. So in this tutorial we would learn about React Native Paper Badge Example with Vector Icons.

Contents in this project React Native Paper Badge Example with Vector Icons :-

1. First of all you have to Install both React native paper and React native vector icons packages in your project. I’ve already made Installation tutorial on both topics. Read from here React Native Paper Installation Guide and React Native Vector Icons installation guide.

2. Open your project’s main App.js file and import Badge, Provider as PaperProvider from ‘react-native-paper’ and StyleSheet, SafeAreaView, View, TouchableOpacity, Alert, Text from ‘react-native’ and Icon from ‘react-native-vector-icons/MaterialIcons’ .

3. Creating our Main component.

4. Creating 3 ICON component named as settings_icon, verified_user_icon and call_icon . We are calling icons from react-native-vector-icons/MaterialIcons . You can find list of all available icons HERE.

5. Creating return block, Here we would make 1 Root View component with Icon and Badge component.

6. Creating Style.

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

Screenshots :-

React Native Paper Badge Example with Vector Icons

Leave a Reply

Your email address will not be published.