Implement Push Notifications in Your React Native App Using IBM Cloud Push Notifications Service

Integrate IBM Cloud Push Notifications Service with a React Native app using React Native SDKs

React Native is an open source framework for easy cross-platform, which helps in building the apps using Javascript. This blog post describes the steps to be followed to integrate IBM Cloud Push Notifications Service with a React Native app using its React Native SDKs (available here).

About the app

This blog helps you build a React Native app that shows all the repositories of a GitHub Organization. It also sends a push notification when an issue or a pull request is created/updated/closed. IBM Cloud Functions actions trigger the push notifications. The complete app is available here.

Push Notifications Service

Create and configure a Push Notifications Service instance from the IBM Cloud catalog. You can refer to this tutorial to create and configure the instance.

IBM Cloud Functions

IBM Cloud Functions are used to create GitHub actions and triggers. Please refer to the IBM Cloud Functions doc for details.

Create an action to get all repositories

Refer to getReposAction.js to create a Node.js action. Create the action using IBM Cloud Functions.

let orgName = "Gypsyan"; defines the organization of the GitHub. Modify this to be the same name as your GitHub org.

This action retrieves all the repositories of the GitHub org and returns the details of the repositories:

Create a Cloud Functions trigger

Create a trigger and add the ReactNativeAction in the actions field.

Add the GitHub webhook

Open the GitHub repository settings and add a webhook with IBM Cloud Functions trigger. Select Issues and Pull Request.

GitHub will invoke the IBM Cloud Functions trigger once any issues or pull request event happens in the GitHub org repositories.

Configure the client app

Go to the  App.js and add push credentials and Cloud Functions credentials.