Icon badges, or notification badges, are useful UI elements in any Android or iOS application. They allow app icons to become alive and indicate that there is important data for users to view in real-time. They might show how many users are online, a notification count, new updates and news, or the number of unread messages. You've seen icon and notification badges in applications such as Facebook, Snapchat, Instagram, and YouTube. Although you can create notification badges locally within applications, these will not update in real-time. Luckily, with PubNub, building real-time notification badges are simple.
In this tutorial, you will be using React Native badge components and libraries to clone Facebook Messenger and add badges to the icons. PubNub will be used to power the real-time updates to the application badges. The final result will be a simple application that looks as follows.
Although this application will take you step-by-step through building a React Native badge component with an icon that updates in real time, you can find the final application's source code in the GitHub repository.
In this section, you will install the necessary tools and dependencies to be able to simulate, run, and test the React Native badge components.
You'll need to create a free PubNub account, as you'll need your publish/subscribe keys to send information across the PubNub Network. You can learn how to create your keys in this video/written walkthrough.
Ensure that you enable Presence to know when users come online and Message Persistence to persist information.
Let's connect to discuss your real-time project.
You will need to download and use your favorite code editor when developing the React Native badge component. Visual Studio Code is recommended as it is a lightweight, open-source, and free code editor that supports different languages and frameworks. You should also add the React Native Tools plugin for debugging and integrated commands for React Native.
The next set of tools you’ll need for developing cross-platform applications is to download iOS and Android development environments.
For iOS devices, you'll need to download Xcode. For Mac users, you can simply download Xcode for free in the app store. For PC users, you will need to simulate Mac OS with a Virtual Machine if you want to develop your app for iPhone. You can see how to do this here.
For simulating Android applications, you'll need to download Android Studio.
Download Node.js, the JavaScript runtime environment, as it is necessary to run React Native applications, as well as install packages with npm (which is included with the download).
Next, you'll install React Native to build your icon badges. This is an open-source platform developed by Facebook that has become very popular over the years. React Native allows developers to write their applications in one language across multiple platforms, which will allow you to develop your app notification badges for Android and iOS devices.
To set up the React Native development environment, you'll be using the React Native CLI, which will allow you to quickly install libraries, link packages, and simulate the app.
Navigate in the terminal/console to the folder you would like to develop this application. Use npm to install the React Native CLI command line utility.
Note: You will be prompted to install CocoaPods after this installation. Say yes to this download and make sure you don’t run CocoaPods as root (i.e. make sure you installed react-native first using sudo and then you can use react-native as a normal user. CocoaPods then should run properly).
Then run the following commands to create a new React Native project called realtimebadge.
Install the following React Native libraries that will be used in your project, including the PubNub React SDK: React Native Elements, React Native Vector Icons, React Navigation, React Native Gesture Handler, and React PubNub to your project.
Now it’s time to finally start building the React Native icon badge components with real-time updates.
In your project directory, create a new folder in the root directory called src. Within src, create three more folders called navigation, styles, and screens.
Next, open App.js. Include the necessary React Native libraries including PubNub into your app and initialize a PubNub instance with the publish and subscribe keys you received earlier.
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 for your use cases, but in this tutorial, it will simply display “Empty screen.” as the text. Create the file Empty.js inside src/screens and place the following code inside Empty.js.
To style the UI, create a file in src/Styles called Styles.js, and add the following code.
To create Facebook Messenger-styled navigation bars, we’ll be using react-navigation.
The top navigation bar will include “Messages,” “Active,” “Groups,” and “Calls” as a material-design-themed tab bar from react-navigation’s createMaterialTopTabNavigator. Create a file called Messages.js in the root folder and include the following code.
If you export the Messages.js component into your App.js render, you will see the following.
Next, build the base navigator of the notification badge app which includes a bottom tab navigation bar as well as the top bar that was just made. You can use Icon from react-native-elements as the tabBarIcon. However, these icons will be changed to BadgedIcons.
Create a file named Navigation.js inside src/Navigation and begin by adding the bottom icons.
As was done for the top bar, you can easily build a bottom navigation bar with icons by using 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:
To use the react-native-elements badge, import it from `react-native-elements` in Navigation.js.
Instead of the MessagesIcon, replace it with a BadgedIcon.
Note: you can pass in any count inside the first withBadge argument.
You can then change the Icon render to MessagesBadge.
You have now added an app notification badge to the messages icon that looks as follows.
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 using Presence to find 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 change this for 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 change 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.
You are now ready 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 send 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:
Congratulations, you have learned how to build a basic messaging app with notification badges in React Native that update with new messages and users in real time using PubNub.
You can check out the completed version of the application on GitHub. If you would like to learn more about how to power your React applications with PubNub, be sure to check out PubNub's other React developer resources:
If you’d like to learn more about how to use PubNub for your use case, get a custom demo from a member of our team.
