How to Create Notification Badge in your React Native App

Badges are small components such as circles or dots which represent a numerical value or status. They are very useful for users as they can easily identify unread notifications or status with a single look.

In this react native example, let’s create a notification badge inside an app.

First of all, install react native elements library.

npm i react-native-elements --save

As react native elements require react native vector icons library, add that too.

npm i --save react-native-vector-icons

If you are using react native version <0.60, then don’t forget to link the library.

react-native link react-native-vector-icons

We use Badge component of react native elements library to show the badge. You can use Badge as given below.

import { Badge } from 'react-native-elements'
<Badge value="99+" status="error" />

The prop status determines the color of the badge. When the status = “error” the color would be red. Following is the complete example of react native notification badge.

Class Component

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Badge, Icon } from 'react-native-elements';



export default class App extends Component {
  constructor(props){
    super(props);
  }


  render() {
   return (
    <View style={styles.container}>
      <View style={styles.row}>
      <Icon type="ionicon" name="ios-notifications" size={50} color='blue' />
      <Badge
      value="7"
    status="error"
    containerStyle={styles.badgeStyle}
  />
  </View>
    </View>
      );
    } 
  }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10
  },
  text: {
    fontSize: 18
  },
  row: {
    flexDirection: 'row'
  },
  badgeStyle: { 
    position: 'absolute',
    top: -4,
    right: -4 
  }
});

Function Component

import React from 'react';
import {View, StyleSheet} from 'react-native';
import {Badge, Icon} from 'react-native-elements';

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <Icon type="ionicon" name="ios-notifications" size={50} color="blue" />
        <Badge value="7" status="error" containerStyle={styles.badgeStyle} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10,
  },
  text: {
    fontSize: 18,
  },
  row: {
    flexDirection: 'row',
  },
  badgeStyle: {
    position: 'absolute',
    top: -4,
    right: -4,
  },
});

export default App;

Following is the output of the react native example.

Thank you for reading!!