Push Notifications Not Working in React Native App

I’m currently facing challenges with implementing push notifications in my React Native application using the Amity SDK. I have attempted to register the push token using the following code:

import { Client } from '@amityco/ts-sdk-react-native';

const registerPushToken = async (deviceId: string) => {
    try {
        await Client.registerPushNotification(deviceId);
    } catch (e) {
        const errorText = getErrorMessage(e);
        console.log('registerPushTokenError', errorText);
    }
};

However, I’m encountering dependency conflicts when trying to integrate the UI SDK. As a result, push notifications are not functioning correctly in my app.

Has anyone experienced similar issues or have suggestions on how to resolve the dependency conflicts? Any guidance would be greatly appreciated!

Thank you!

Hello @devS , could you help share the conflict details and a screenshot of any errors you’ve encountered, please? Also, you mentioned that the notification isn’t working correctly—can you describe its current behavior?

The push notification is not triggering when I use the method I shared above. However, when I attempt to implement the UI Kit to handle push notifications, I encounter dependency conflicts (screenshot attached). Specifically, it seems there is a version mismatch between React Native and the Amity SDK.

Hello @devS , Let me pass this to our team for checking, and I’ll get back to you.

Thanks for passing this along! Since this is a critical part of our app’s functionality, I would greatly appreciate it if the team could look into this as soon as possible. Please keep me updated on any progress.

Hello @devS , For this issue, we need more information from you:

  1. Please confirm the React Native repository that you are using.
  2. Provide a detailed list of how you installed the project, including the steps you followed.

Additionally, please note that push notifications are only available in the UIKit (specifically in this repo). For more information, please refer to this link: Amity Social UIKit React Native CLI.

I’m using the AmityCo/Amity-Social-UIKit-React-Native-OpenSource repository and following the exact steps provided in this link: AmityCo/Amity-Social-UIKit-React-Native-OpenSource. When running yarn i or npm i, I’m encountering an error, which is shown in the attached screenshot. Let me know if you need any additional information.

1 Like

Hello @devS , Thank you for providing all the necessary information. We have forwarded it to the team for further investigation. We will keep you updated on the progress

Could you please provide the package.json file for further review? @devS

Sure,

{
  "name": "myApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@amityco/ts-sdk-react-native": "^6.22.0",
    "@apollo/client": "3.2.5",
    "@apollo/react-hooks": "^4.0.0",
    "@appcues/react-native": "^3.1.12",
    "@hadnet/react-native-hold-menu-no-expo": "^0.3.0",
    "@hookform/resolvers": "^3.3.1",
    "@miblanchard/react-native-slider": "^2.3.1",
    "@notifee/react-native": "^7.8.2",
    "@react-native-async-storage/async-storage": "^1.19.3",
    "@react-native-clipboard/clipboard": "^1.14.1",
    "@react-native-community/blur": "^4.4.1",
    "@react-native-community/datetimepicker": "^7.6.2",
    "@react-native-community/eslint-config": "^3.2.0",
    "@react-native-community/netinfo": "^9.4.1",
    "@react-native-community/slider": "^4.4.3",
    "@react-native-firebase/app": "^20.5.0",
    "@react-native-firebase/messaging": "^20.5.0",
    "@react-native-firebase/remote-config": "^20.5.0",
    "@react-native-masked-view/masked-view": "^0.2.9",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/drawer": "^6.6.3",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.26",
    "@react-navigation/stack": "^6.3.17",
    "@reduxjs/toolkit": "^1.9.5",
    "@shopify/flash-list": "^1.5.0",
    "@simform_solutions/react-native-audio-waveform": "^2.0.0",
    "add": "^2.0.6",
    "amazon-cognito-identity-js": "^6.3.5",
    "apollo-boost": "^0.4.9",
    "aws-amplify": "^5.3.10",
    "aws-amplify-react-native": "^7.0.6",
    "date-fns": "^3.3.1",
    "eslint-config-react-native": "^4.1.0",
    "graphql": "^16.8.1",
    "i18next": "^23.8.2",
    "i18next-react-native-language-detector": "^1.0.2",
    "lodash": "^4.17.21",
    "moment": "^2.30.1",
    "native-base": "^3.4.28",
    "react": "18.2.0",
    "react-hook-form": "^7.46.0",
    "react-i18next": "^14.0.5",
    "react-native": "0.72.4",
    "react-native-audio-recorder-player": "^3.6.10",
    "react-native-awesome-alerts": "^2.0.0",
    "react-native-blob-util": "^0.19.11",
    "react-native-config": "^1.5.1",
    "react-native-context-menu-view": "^1.16.0",
    "react-native-controlled-mentions": "^2.2.5",
    "react-native-create-thumbnail": "^2.0.0",
    "react-native-device-info": "^11.1.0",
    "react-native-document-picker": "^9.3.1",
    "react-native-dotenv": "^3.4.9",
    "react-native-element-dropdown": "^2.10.1",
    "react-native-fast-image": "^8.6.3",
    "react-native-gesture-handler": "^2.12.1",
    "react-native-gifted-chat": "^2.4.0",
    "react-native-haptic-feedback": "^2.3.1",
    "react-native-image-crop-picker": "^0.41.2",
    "react-native-image-picker": "^7.1.2",
    "react-native-image-viewing": "^0.2.2",
    "react-native-keyboard-area": "^1.0.6",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-mime-types": "^2.5.0",
    "react-native-mmkv": "2.12.1",
    "react-native-modal": "^13.0.1",
    "react-native-modal-datetime-picker": "^17.1.0",
    "react-native-paper": "^5.10.4",
    "react-native-pdf": "^6.7.5",
    "react-native-permissions": "^4.1.5",
    "react-native-photos-gallery": "^0.0.1",
    "react-native-popup-menu": "^0.16.1",
    "react-native-progress": "^5.0.1",
    "react-native-pulse": "^1.0.7",
    "react-native-reanimated": "3.5.1",
    "react-native-responsive-screen": "^1.4.2",
    "react-native-safe-area-context": "^4.7.2",
    "react-native-screens": "^3.25.0",
    "react-native-share": "^10.2.1",
    "react-native-slider": "^0.11.0",
    "react-native-splash-screen": "^3.3.0",
    "react-native-swiper": "^1.6.0",
    "react-native-swiper-flatlist": "^3.2.3",
    "react-native-track-player": "^4.1.1",
    "react-native-video": "^6.4.5",
    "react-native-walkthrough-tooltip": "^1.6.0",
    "react-native-webview": "^13.7.0",
    "react-native-youtube-iframe": "^2.3.0",
    "react-redux": "^8.1.2",
    "yarn": "^1.22.21",
    "yup": "^1.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.74.84",
    "@react-native/metro-config": "^0.72.11",
    "@tsconfig/react-native": "^3.0.0",
    "@types/react": "^18.0.24",
    "@types/react-native": "^0.73.0",
    "@types/react-native-dotenv": "^0.2.0",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "babel-plugin-module-resolver": "^5.0.0",
    "eslint": "^9.6.0",
    "eslint-plugin-react": "^7.34.3",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.8",
    "prettier": "^2.4.1",
    "react-native-svg": "^15.1.0",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "engines": {
    "node": ">=16"
  }
}

@devS Thank you for providing additional info, we have passed it to our team to check this further.

Thanks for passing this along! Since this is a critical part of our app’s functionality, I would greatly appreciate it if the team could look into this as soon as possible. Please keep me updated on any progress.

Hello @devS ,

  1. Push Notification Registration:
    Currently, we do not support registering push notifications via the SDK.
  2. Installation Issue:
    For the dependency conflicts during project installation, we were unable to reproduce the issue on our side. We recommend trying the following:
  • Use the npm pack command to bundle the package and then try installing it again

If you need further assistance or additional information, please feel free to reach out.

After downgrading some dependencies, I successfully installed AmityCo/Amity-Social-UIKit-React-Native-OpenSource and uploaded the build to TestFlight. However, I’m not receiving any notifications. The certificates are correctly configured, and notifications from Firebase console are working, but Amity chat message notifications are still not coming through. What steps should I take next?

Do I need to upload a new build to TestFlight every time I want to test notifications?

Hello @devS ,

  1. For troubleshooting push notifications, please check the following guide: Push Notification Troubleshooting Guide.

  2. Regarding your question about uploading a new build to TestFlight:
    You will need to upload a new build if you make any changes related to the push notification registration flow or modify the app’s capabilities/configurations. For other backend changes, testing can be done without a new build.

If you need further assistance, please let us know!

@SocialPlus_Support We’re still not able to get notifications working on our TestFlight build, is there anyone else that can assist us with our issue? If we can’t resolve it, it’s definitely a dealbreaker for our company as your customer.

Thank you!

Hello @georgekorsnick , have you verified the list we provided and ensured all the items are checked? If you’ve followed the checklist precisely but are still facing issues, could you please share the error you’re encountering? Have you successfully registered the push notification? Also, what steps have you implemented or completed so far? Without these details, it will be challenging for us to help identify the issue. Thank you.

@SocialPlus_Support, as you mentioned, the SDK currently does not support registering push notifications. To clarify, does this mean we need to implement push notification registration natively, using Swift for iOS and Kotlin for Android?

Hello @Poonam , As you mentioned, the SDK currently does not support registering push notifications directly. You will need to implement push notification registration yourself. For more details, please refer to this documentation:
React Native Push Notifications Initialization.

If you need further assistance, feel free to reach out!

@SocialPlus_Support As of last version of the ts-sdk-react-native (6.30.1), the method for registering devices is currently not being exported from Amity’s Client.

image
ts-sdk-react-native/src/client/api/index.ts

As you can see, the registerPushNotification method is not found in the main index.ts file for the Client, even though the method does exist and is being exported in ts-sdk-react-native/src/client/api/registerPushNotification.ts we’d expect it to work similarly as the Swift, Android, and Flutter versions as shown in the docs, but currently there’s no way to access that method from our application, so we had to recreate the API call while we wait for the fix to be pushed, which is not ideal.