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

import React from 'react';

import { Badge, Provider as PaperProvider } from 'react-native-paper';

import { StyleSheet, SafeAreaView, View, TouchableOpacity, Alert, Text } from 'react-native';

import Icon from 'react-native-vector-icons/MaterialIcons';

import React from 'react';

import { Badge, Provider as PaperProvider } from 'react-native-paper';

import { StyleSheet, SafeAreaView, View, TouchableOpacity, Alert, Text } from 'react-native';

import Icon from 'react-native-vector-icons/MaterialIcons';

3. Creating our Main component.

export default function Main() {



}

export default function Main() {

}

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.

const settings_icon = (
    <Icon
      name="settings"
      size={50}
      color='#00BFA5'
      onPress={() => { Alert.alert("Settings Icon Clicked") }}
    />
  );

  const verified_user_icon = (
    <Icon
      name="verified-user"
      size={50}
      color='#00BFA5'
      onPress={() => { Alert.alert("Verified User Icon Clicked") }}
    />
  );

  const call_icon = (
    <Icon
      name="call"
      size={50}
      color='#00BFA5'
      onPress={() => { Alert.alert("Call Icon Clicked") }}
    />
  );

const settings_icon = (

<Icon

name="settings"

size={50}

color='#00BFA5'

onPress={() => { Alert.alert("Settings Icon Clicked") }}

);

const verified_user_icon = (

<Icon

name="verified-user"

size={50}

color='#00BFA5'

onPress={() => { Alert.alert("Verified User Icon Clicked") }}

);

const call_icon = (

<Icon

name="call"

size={50}

color='#00BFA5'

onPress={() => { Alert.alert("Call Icon Clicked") }}

);

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

 return (
    <PaperProvider>

      <SafeAreaView style={styles.MainContainer}>

        <Text style={styles.text}> React Native Paper Badge Example </Text>

        <View style={styles.view1}>

          <View style={styles.badgeContainer}>

            <TouchableOpacity>

              {settings_icon}

            </TouchableOpacity>

            <Badge
              visible={true}
              size={30}
              style={{ top: 0, position: 'absolute' }}>
              1
            </Badge>

          </View>

          <View style={styles.badgeContainer}>

            <TouchableOpacity>

              {verified_user_icon}

            </TouchableOpacity>

            <Badge
              visible={true}
              size={30}
              style={{ top: 0, position: 'absolute' }}>
              7
            </Badge>

          </View>

          <View style={styles.badgeContainer}>

            <TouchableOpacity>

              {call_icon}

            </TouchableOpacity>

            <Badge
              visible={true}
              size={30}
              style={{ top: 0, position: 'absolute' }}>
              12
            </Badge>

          </View>

        </View>

      </SafeAreaView>

    </PaperProvider>
  );

return (

<Text style={styles.text}> React Native Paper Badge Example </Text>

{settings_icon}

</TouchableOpacity>

<Badge

visible={true}

size={30}

style={{ top: 0, position: 'absolute' }}>

</Badge>

</View>

{verified_user_icon}

</TouchableOpacity>

<Badge

visible={true}

size={30}

style={{ top: 0, position: 'absolute' }}>

</Badge>

</View>

{call_icon}

</TouchableOpacity>

<Badge

visible={true}

size={30}

style={{ top: 0, position: 'absolute' }}>

</Badge>

</View>

</SafeAreaView>

</PaperProvider>

);

6. Creating Style.

const styles = StyleSheet.create({

  MainContainer: {
    flex: 1,
    justifyContent: 'center',
  },

  view1: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center'
  },

  badgeContainer: {
    width: 70,
    height: 70,
    justifyContent: 'center',
    alignItems: 'center'
  },

  text: {
    fontSize: 30,
    textAlign: 'center',
    color: 'black',
    paddingBottom: 20

  }

});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: 'center',

view1: {

flexDirection: 'row',

justifyContent: 'space-evenly',

alignItems: 'center'

badgeContainer: {

width: 70,

height: 70,

justifyContent: 'center',

alignItems: 'center'

text: {

fontSize: 30,

textAlign: 'center',

color: 'black',

paddingBottom: 20

}

});

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

import React from 'react';

import { Badge, Provider as PaperProvider } from 'react-native-paper';

import { StyleSheet, SafeAreaView, View, TouchableOpacity, Alert, Text } from 'react-native';

import Icon from 'react-native-vector-icons/MaterialIcons';

export default function Main() {

  const settings_icon = (
    <Icon
      name="settings"
      size={50}
      color='#00BFA5'
      onPress={() => { Alert.alert("Settings Icon Clicked") }}
    />
  );

  const verified_user_icon = (
    <Icon
      name="verified-user"
      size={50}
      color='#00BFA5'
      onPress={() => { Alert.alert("Verified User Icon Clicked") }}
    />
  );

  const call_icon = (
    <Icon
      name="call"
      size={50}
      color='#00BFA5'
      onPress={() => { Alert.alert("Call Icon Clicked") }}
    />
  );

  return (
    <PaperProvider>

      <SafeAreaView style={styles.MainContainer}>

        <Text style={styles.text}> React Native Paper Badge Example </Text>

        <View style={styles.view1}>

          <View style={styles.badgeContainer}>

            <TouchableOpacity>

              {settings_icon}

            </TouchableOpacity>

            <Badge
              visible={true}
              size={30}
              style={{ top: 0, position: 'absolute' }}>
              1
            </Badge>

          </View>

          <View style={styles.badgeContainer}>

            <TouchableOpacity>

              {verified_user_icon}

            </TouchableOpacity>

            <Badge
              visible={true}
              size={30}
              style={{ top: 0, position: 'absolute' }}>
              7
            </Badge>

          </View>

          <View style={styles.badgeContainer}>

            <TouchableOpacity>

              {call_icon}

            </TouchableOpacity>

            <Badge
              visible={true}
              size={30}
              style={{ top: 0, position: 'absolute' }}>
              12
            </Badge>

          </View>

        </View>

      </SafeAreaView>

    </PaperProvider>
  );
}

const styles = StyleSheet.create({

  MainContainer: {
    flex: 1,
    justifyContent: 'center',
  },

  view1: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center'
  },

  badgeContainer: {
    width: 70,
    height: 70,
    justifyContent: 'center',
    alignItems: 'center'
  },

  text: {
    fontSize: 30,
    textAlign: 'center',
    color: 'black',
    paddingBottom: 20

  }

});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

import React from 'react';

import { Badge, Provider as PaperProvider } from 'react-native-paper';

import { StyleSheet, SafeAreaView, View, TouchableOpacity, Alert, Text } from 'react-native';

import Icon from 'react-native-vector-icons/MaterialIcons';

export default function Main() {

const settings_icon = (

<Icon

name="settings"

size={50}

color='#00BFA5'

onPress={() => { Alert.alert("Settings Icon Clicked") }}

);

const verified_user_icon = (

<Icon

name="verified-user"

size={50}

color='#00BFA5'

onPress={() => { Alert.alert("Verified User Icon Clicked") }}

);

const call_icon = (

<Icon

name="call"

size={50}

color='#00BFA5'

onPress={() => { Alert.alert("Call Icon Clicked") }}

);

return (

<Text style={styles.text}> React Native Paper Badge Example </Text>

{settings_icon}

</TouchableOpacity>

<Badge

visible={true}

size={30}

style={{ top: 0, position: 'absolute' }}>

</Badge>

</View>

{verified_user_icon}

</TouchableOpacity>

<Badge

visible={true}

size={30}

style={{ top: 0, position: 'absolute' }}>

</Badge>

</View>

{call_icon}

</TouchableOpacity>

<Badge

visible={true}

size={30}

style={{ top: 0, position: 'absolute' }}>

</Badge>

</View>

</SafeAreaView>

</PaperProvider>

);

}

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: 'center',

view1: {

flexDirection: 'row',

justifyContent: 'space-evenly',

alignItems: 'center'

badgeContainer: {

width: 70,

height: 70,

justifyContent: 'center',

alignItems: 'center'

text: {

fontSize: 30,

textAlign: 'center',

color: 'black',

paddingBottom: 20

}

});

Screenshots :-

React Native Paper Badge Example with Vector Icons

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

Also Read :

Leave a Reply Cancel reply

Search Here