Npm install -save react-native-elements react-native-vector-icons react-pubnub react-native-gesture-handler react-navigation & react-native link React-native init realtimebadge & cd realtimebadgeĪdd React Native Elements, React Native Vector Icons, React Navigation, React Native Gesture Handler, and React PubNub to your project. Now, let’s build a blank react-native app. Next, to use React Native, you will also need to install the React Native CLI, through which we can initialize and run our project. Important: You must enable Presence in the PubNub Admin Dashboard for this app to work.Ĭreating a Facebook Messenger Clone in React Nativeīefore diving into the code, you will need to install Node.js, if you haven’t already. Get your free PubNub API keys here to enable Pub/Sub Messaging and Presence. We will also be using PubNub for real-time updates to the badge. The final result will be a skeleton app that looks like: We’ll be using some useful React Native libraries to clone Facebook Messenger and add badges to the icons. Luckily, with PubNub, building real-time notification badges is simple. You can see them being used by app icons on Android and iOS, as well as in apps like Facebook, Snapchat, Instagram, and YouTube. They might show how many users are online, a notification count, or the number of unread messages.
They allow icons to become alive and display important data to the user in real time. Icon badges, or notification badges, are useful UI elements in any Android or iOS app.
0 kommentar(er)
