=======================================================


What are app icon notification badges?

App icon badges, also known as notification badges, are an integral part of any Android or iOS application's user interface. They act as a real-time indicator for essential data, such as the number of online users, notification count, new updates, news, or the number of unread messages. These notification badges are commonly seen in popular applications like Facebook, Snapchat, Instagram, and YouTube.

While the local creation of notification badges within applications is possible, real-time updates are not. Fortunately, with PubNub, building real-time notification badges is a breeze. In this step-by-step tutorial, we will be using React Native badge components and libraries to clone Facebook Messenger and add badges to the icons. PubNub will power the real-time updates to the application badges.

Please note that although this tutorial will guide you in building a real-time React Native badge component with an app icon, you can find the final application's source code in the GitHub repository.

Setting Up the Environment for App Icon Notification Badge

In this section, we will be installing the necessary tools and dependencies to simulate, run, and test the React Native badge components.

Create a PubNub Account to Start Building Your App Notification Badge

Firstly, you'll need to create a free PubNub account to obtain your publish/subscribe keys. These keys are necessary for sending information across the PubNub Network. You can learn how to create your keys in this video/written walkthrough. Make sure to enable Presence to track the online status of users and Message Persistence to retain information.

Setting Up Your Development Environments for the Notification Badges

For developing the React Native badge component, you'll need your favorite code editor. Visual Studio Code is a recommended choice as it's a lightweight, open-source, free code editor that supports different languages and frameworks. Additionally, the React Native Tools plugin is suggested for debugging and integrated commands for React Native.

Furthermore, to develop cross-platform applications, you need to set up iOS and Android development environments.

Developing App Notification Badges for iOS

For iOS devices, install the latest version of Xcode. For Mac users, you can download Xcode for free from the App Store. PC users will need to simulate Mac OS with a Virtual Machine for iPhone app development. See how to do this here.

Developing App Notification Badges for Android

For Android applications, download the latest version of Android Studio.

React Packages and Libraries Needed for App Notification Badges

Firstly, download Node.js, a JavaScript runtime environment, necessary for running React Native applications and installing packages using `npm`.

Next, install React Native to build your app icon badges. React Native is an open-source platform developed by Facebook that allows developers to create applications in one language across multiple platforms.

To set up the React Native development environment, use the `npx` which allows quick installation of libraries, linking of packages, and app simulation.

In your terminal/console, navigate to the folder where you wish to develop the application, and use `npx` to install the React Native CLI command line utility.

Install the React Native libraries necessary for your project, including the PubNub React SDK: React Native Elements, React Native Vector Icons, React Navigation, React Native Gesture Handler, and React PubNub.

Building and Running Your App Notification Badges

Now, let's start building the React Native app icon badge components with real-time updates.

Building the UI for Your Notification Badges

In your project directory, create a new `src` folder in the root directory. Inside `src`, create three more folders: `navigation`, `styles`, and `screens`.

Next, open `App.js` and include the necessary React Native libraries, including PubNub, into your app. Initialize a PubNub instance with the publish and subscribe keys you previously received.

Under `componentDidMount()`, subscribe to an arbitrary channel, such as "channel1", with the boolean flag `withPresence` set to `true`.

After importing the React libraries and initializing the constructor, create a blank screen as a default screen for each navigation view. You may modify this screen based on your use cases. However, in this tutorial, it will simply display “Empty screen.” as the text. Create the file `Empty.js` in `src/screens` and place the following code inside `Empty.js`.

To style the UI, create a `Styles.js` file in `src/styles`, and add the following code.

For creating Facebook Messenger-styled navigation bars, we’ll use `react-navigation`'s `createMaterialTopTabNavigator`. Create a `Messages.js` file in the root folder and include the following code.

If you insert the Messages.js component into your **App.js** render, you will observe the following.


Now, establish the base navigator of the notification badge app, which includes a bottom tab navigation bar along with the top bar that you've just created. You can employ Icon from `react-native-elements` as the `tabBarIcon`. However, these icons will later be switched to `BadgedIcons`.

Create a file named **Navigation.js** inside **src/Navigation** and start by adding the bottom icons.

Implementing App Notification Badges in React

As you did for the top bar, you can effortlessly construct a bottom navigation bar with icons by employing `createBottomTabNavigator`.

To include this navigation component in the application, first create a `default export`.

And then add it to the **App.js** file. The App.js file at this point should look as follows:

Incorporating App Icon Badges Notifications with React

To utilize the `react-native-elements` badge, import it from \`react-native-elements\` in Navigation.js.

Instead of the `MessagesIcon`, substitute it with a `BadgedIcon`.

**Note**: you can pass any count inside the first `withBadge` argument.

You can then modify the Icon render to `MessagesBadge`.

You have now incorporated an app notification badge to the messages icon as shown below.


Active Users App Notification Badge

Throughout this tutorial, the badge count has been hard-coded for the `MessagesIcon`. However, you can make the `UsersIcon` badge update in real time by employing Presence to ascertain the number of users connected.

In **App.js**, after connecting to PubNub, you can have each client subscribe to a global channel. Then, with a Presence `hereNow()` call, you can retrieve the number of users connected. You can update this client's `usersCount` in the state and pass it into the navigation props, allowing you to access this value in the badge in real time.

Your App.js should now look as follows.

In this code, `setInterval()` is used to continuously check the number of users joined every 10 seconds (you may modify this according to your needs). The user count is stored in the state and pass it through the `Navigation` component as a `screenProp`. When rendering the badged icon, it can be accessed from the `screenProps` as `userCount`.

As such, you need to modify `UsersScreen` to include an icon as well as a badge. This is an alternative way to use the badge compared to how it was used for the messages badge.

Run the App with the Badge Icons

You are now prepared to run the application. You can simulate the app with iOS devices using the following command.

For Android devices, you can simulate the application with the following command.

Using PubNub's Debug Console, you can dispatch messages to the application to display the updated notification badge updates with new messages and users in the application. You'll need to enter information for a few different fields, including your publish/subscribe keys, channel name ("channel1"), and a UUID for the users to be unique from each other. The application should function as follows:


What's Next: After you’ve Constructed Your App Notification Badges and Icons

Congratulations, you've mastered how to construct a basic messaging app with notification badges in React Native that update with new messages and users in real time utilizing PubNub.

You can inspect the completed version of the application on GitHub. If you would like to delve more into how to power your React applications with PubNub, be sure to explore PubNub's other React developer resources:

If you’d like to delve more into how to use PubNub for your use case, get a custom demo from a member of our team.