Push Notifications Not Working in React Native App

devS · September 20, 2024, 4:38pm

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!

amitysupport · September 20, 2024, 4:43pm

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?

devS · September 23, 2024, 6:05am

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.

amitysupport · September 23, 2024, 8:04am

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

devS · September 23, 2024, 8:26am

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.

amitysupport · September 23, 2024, 10:37am

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

Please confirm the React Native repository that you are using.
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.

devS · September 23, 2024, 11:16am

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.

amitysupport · September 24, 2024, 1:40am

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

amitysupport · September 24, 2024, 6:19am

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

devS · September 24, 2024, 6:32am

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"
  }
}

amitysupport · September 24, 2024, 10:08am

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

devS · September 24, 2024, 10:09am

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.

amitysupport · September 25, 2024, 8:11am

Hello @devS ,

Push Notification Registration:
Currently, we do not support registering push notifications via the SDK.
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.

devS · September 25, 2024, 8:36am

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?

amitysupport · September 25, 2024, 10:32am

Hello @devS ,

For troubleshooting push notifications, please check the following guide: Push Notification Troubleshooting Guide.
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!

georgekorsnick · October 1, 2024, 12:03pm

@amitysupport 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!

amitysupport · October 1, 2024, 2:57pm

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.

Poonam · October 3, 2024, 7:45am

@amitysupport, 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?

amitysupport · October 3, 2024, 8:35am

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!

amezal · October 7, 2024, 2:24pm

@amitysupport 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.

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.

Topic		Replies	Views
React Native Push Notification Support TS SDK	4	30	September 11, 2024
Issue integrating web-sdk in react-native application Web	15	716	March 1, 2023
"@amityco/js-sdk": "^5.35.0" is not working in react-native General	7	290	March 24, 2023
Push notification setting TS SDK	5	51	October 3, 2024
Push notifications for typescript sdk General	1	354	December 22, 2022

Push Notifications Not Working in React Native App

Related Topics