How can I integrate in-app notifications in React Native?
The Novu documentation contains integration guides for 'React' and other web apps. I need to integrate it into my React Native application. I have seen that it can be done using WebSocket events, but there is no proper documentation for this. Can you help me with this?
12 Replies
Hi @mid97, I'm an AI assistant for Novu. While a team member reviews this question, I'll see if I can find relevant sources for your question.
-----------------------------
While I generate an answer, here are some sources that might be helpful:
* Integration Store
* How to send push notifications in an Android app (react native) with FCM and Novu
* Building a real-time bidding system with Socket.io and React Native - Novu
* How to build the most beautiful Todolist with React Native and Socket.io - Novu
-----------------------------
Answer
Integrating in-app notifications in React Native with Novu involves handling WebSocket events for real-time notifications. Although there's no direct component like
notification-center for React Native as provided for web apps, you can still achieve this by connecting to the Novu WebSocket server and handling events for notifications.
Here's a step-by-step guide based on the information I found:
1. WebSocket Connection: You can connect to the Novu WebSocket server using the WebSocket URL wss://ws.novu.co/socket.io/EIO=4&transport=websocket. This connection will allow you to listen for real-time events related to notifications (1) .
2. Listening for Events: Once connected, you can listen for specific events such as notification_received to handle incoming notifications. This is similar to handling WebSocket events in any React Native application.
3. Triggering Notifications: To trigger notifications, you would typically use Novu's backend API to send notifications based on certain actions or events in your application. This involves setting up a workflow in Novu that triggers notifications and then invoking this workflow from your React Native app's backend based on your app's logic (2) .
4. Securing WebSocket Connection: For securing the WebSocket connection, while specific details on securing WebSocket connections with Novu in React Native aren't directly provided, it's important to follow general best practices for securing WebSocket connections. This includes using secure WebSockets (wss://) and implementing authentication and authorization mechanisms to ensure that only authorized users can receive notifications.
Please note that since there's no direct support for React Native in Novu's documentation, this approach involves a custom implementation using Novu's WebSocket server and backend API. You might need to adapt the implementation based on your specific requirements and Novu's API capabilities.
For further assistance, consider reaching out on Novu's community channels or exploring their GitHub for any examples or additional guides that might be relevant. This approach is based on available information and might require adjustments as Novu updates its features and documentation (1) .
Got it. Tagging @Support for additional help.
@mid97
Currently react native is not supported for in-app notifications
I know, but while searching in Novu's chatbot, I found a result mentioning that if you are interested in exploring community-driven solutions, you might need to handle socket events and custom token storage yourself. This was detailed in some GitHub issues and Discord discussions.
@Pawan Jain It would be really good to create dedicated documentation on the Novu website explaining that is not possible to have In-App Notification Center on any Mobile framework (react-native, flutter, Xamarin/MAUI, iOS native, Android native). It could give more details and transparency on why this is not possible, why this is not a priority, or even why having an In-App Notification Center integration for Mobile does not make sense from Novu's perspective.
Right now, looks like we're having a lack of information or status around Mobile integrations for In-App Notification Center or Inbox features. We can find a really good documentation about Push notifications, but not for the In-App for Mobile.
I can share my current experience:
We do have a really good integration between Novu here in my company for our Web clients, where we have the In-App Notification Center working, but now we'd like to have the same great experience on the Mobile App as well. I found this headless client API (https://docs.novu.co/notification-center/client/headless/get-started) that looks promising for Mobile integration, but then I also found this issue on our Github repo: https://github.com/novuhq/novu/issues/4499 where it is explained that the headless API does not work because of the localStorage.
In our case is not very important to have the Notification Center widget or ready-to-use UI Componentes, we just want to have access to the Data, the Notification Center events, notification count, mark as read/unread and delete. We can create the UI based on our company Design System, so the first step in my opinion would be to provide a way to have access to Notification Center events, functions, and Data, not a complete SDK with specific Mobile UI components.
So, we may be close to a Mobile solution in terms of the Notification Center, but I'm not sure if there are other alternatives using Novu, or if we just have to forget about In-App Notification Center for Mobile...
@Eduardo Santos
Thanks for the feedback.
Just want to check if you are currently using novu cloud?
Yes, we are
Thanks for sharing.
Relaying feedback with our team.
Is there any workaround for this? @Pawan Jain
@mid97 Unfortunately, no workaround for this currently.
We have the same requirement to integrate in-app notification center in react-navtive based app. It will be great to have this feature