[DX-285] React Native push notifications guide by maratal · Pull Request #3228 · ably/docs

maratal · 2026-02-26T23:30:54Z

Description

React Native push notifications tutorial.

https://ably.atlassian.net/browse/DX-285

Checklist

Commits have been rebased.
Linting has been run against the changed file(s).
The PR adheres to the writing style guide and contribution guide.

coderabbitai · 2026-02-26T23:31:04Z

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: bacfe21c-2170-426d-a0c3-4485fcc0c449

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch DX-285-react-native-guide

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

splindsay-92

Just an initial comment again on if we should be using ably-js react hooks here. Also, would it make this whole guide a bit simpler/shorted if we made use of the dashboards ability to send notifications to device/clientId/Channel? We could still have basic code segments to show how its done, but there'd be no need for the additional UI/handling (also this page is due for a refurb).

I won't block the guide based on the current design though, but just a thought that might make things cleaner :)

maratal · 2026-03-27T01:52:55Z

Also, would it make this whole guide a bit simpler/shorted if we made use of the dashboards ability to send notifications to device/clientId/Channel? We could still have basic code segments to show how its done, but there'd be no need for the additional UI/handling (also this page is due for a refurb).

That's a fair point. But I think there is a real trade-off between completeness and brevity here — having the send functionality in the app gives readers something tangible to run themselves rather than deferring to an external interface for the most satisfying part of the exercise. Also, in general we tend to use Ably CLI for interacting with the service anyway. I would prefer to hear from other team members before cutting this. If the consensus is to go leaner, I am happy to make the change. wdyt @sacOO7 @m-hulbert @AndyTWF

Kotlin, XML, Ruby, and Swift blocks were inside <Code> components, pulling them into the language switcher and causing mismatched tabs for users with a different language selected. These are platform config files that all readers need to see, so they are now plain fenced code blocks. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

The page is a React Native-only guide with no language switching. Having react blocks inside <Code> caused the global language selector to show Swift and other pubsub languages as options, resulting in empty states for non-react selections. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Wrap app in AblyProvider + ChannelProvider - Split App into App (providers) and PushScreen (hooks) - Replace manual useEffect channel subscription with useChannel - Replace module-scope realtime client with useAbly() in PushScreen - Update ably channels publish CLI to ably push publish --channel - Remove scrollViewRef auto-scroll for brevity - Rename appendLog to log Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

m-hulbert

This is getting there Marat. I've just put a few comments in, but I'd say in general we need to be opinionated on a method rather than consistently offer multiple options. Also agree with @splindsay-92 about keeping this simpler where it makes sense / reflects real-world usage.

m-hulbert · 2026-04-19T10:51:13Z

+
+Add `use_modular_headers!` to `ios/Podfile` after `prepare_react_native_project!`:
+
+```ruby


I don't think this should be ruby?

Podfile is a Ruby file.

m-hulbert · 2026-04-19T10:54:45Z

+```
+
+<Aside data-type='note'>
+At the time of writing React Native Gradle plugin is not compatible with Gradle 9. If you see a `JvmVendorSpec.IBM_SEMERU` error during the Android build, update `android/gradle/wrapper/gradle-wrapper.properties` to use Gradle 8.13: `distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip`.


We should avoid things like 'at time of writing' etc. Can we just state we should use 8.13 instead if it's still not supported in 9?

I'm now thinking that it's an insignificant implementation detail which can be easily fixed by android developer familiar with android studio enough to dare implement pushes. I'm removing this.

m-hulbert · 2026-04-19T10:58:15Z

+
+After successful activation, `deviceId` contains the unique device ID assigned to this installation.
+
+<Aside data-type='note'>


Do we need all this exposition? Three notes in a row suggests this is way too complex. Do we need to explain which methods are used and why?

Moved two of them in a short code comment.

m-hulbert · 2026-04-19T10:58:53Z

+
+## Step 1: Set up Ably <a id="step-1"/>
+
+Replace the contents of `App.tsx` with the following to initialize the Ably Realtime client, wrap the app in `AblyProvider` and `ChannelProvider`, and subscribe to a channel for incoming messages using the `useChannel` hook:


Should we keep this to the Pub/Sub rather than a 'realtime client' so people know what it is?

m-hulbert · 2026-04-19T11:01:14Z

+```
+</Code>
+
+The `transportType` is set to `fcm` on both platforms because `messaging().getToken()` always returns an FCM registration token, even on iOS. Firebase exchanges the APNs device token for an FCM token internally, so Ably communicates with Firebase rather than APNs directly (instead Firebase sends push notifications to iOS devices via APNs).


Do we need to explain this? Would someone know this if they're React Native devs or familiar with Push? Maybe even a short code comment for iOS would be sufficient?

Moved to code comment (I'm not sure what you've meant by "for iOS" tho, it's cross-platform js code snippets).

m-hulbert · 2026-04-19T11:03:14Z

+
+## Step 3: Subscribe and test push notifications <a id="step-3"/>
+
+The FCM SDK handles background push notifications automatically and displays them as system notifications. For foreground handling, use `@notifee/react-native` to display notifications while the app is open.


Should we choose one approach or the other? Or explain how to use both.

I've meant that if a reader wants to display pushes inside their app (foreground), they should use notifee (code example already shows how). If app in the background though, it will be handled by Android itself and displayed in the Notification Center.

m-hulbert · 2026-04-19T11:04:38Z

+</Code>
+
+<Aside data-type='note'>
+Sending push notifications using `deviceId` or `clientId` requires the `push-admin` capability for your API key. Use this method for testing purposes. In production, send push notifications from your backend server by publishing messages with a `push` `extras` field to a channel.


Could the capabilities be covered in the pre-reqs rather than mid-guide? Which method are we then referring to here?

Moved to Prerequisites.

m-hulbert · 2026-04-19T11:08:24Z

+
+### Send push via channel <a id="step-4-send-channel"/>
+
+To test push notifications via channel, tap **Subscribe to Channel** in the app and then send a push notification to the channel using the Ably CLI:


There's a lot of 'testing' here and do we need both options? I think I agree with Steven that we should either use the dashboard (or more likely the CLI) for pushing the notifications as you wouldn't tend to be sending via the app in reality.

Not sure I follow, do you mean to remove code snippet for js and only leave CLI? (js one was Steven suggestion.)

…ge flag and new screenshot Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Remove 'at time of writing' Gradle note (insignificant impl detail) - Replace 'realtime client' with 'Pub/Sub' - Remove transportType prose; add inline code comment - Move deviceId and requestPermission notes to code comments - Move push-admin capability note to Prerequisites #3 - Split Step 3 into 'Test admin push notifications' and 'Subscribe to channel push notifications' Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

maratal changed the base branch from main to DX-286-kotlin-push-guide February 26, 2026 23:31

maratal added the review-app Create a Heroku review app label Feb 26, 2026

ably-ci temporarily deployed to ably-docs-dx-285-react--62f9if February 26, 2026 23:32 Inactive

ably-ci temporarily deployed to ably-docs-dx-285-react--62f9if March 1, 2026 14:28 Inactive

ably-ci temporarily deployed to ably-docs-dx-285-react--62f9if March 1, 2026 17:54 Inactive

maratal force-pushed the DX-285-react-native-guide branch from 473e3a0 to 31c16f7 Compare March 1, 2026 19:51

ably-ci temporarily deployed to ably-docs-dx-285-react--62f9if March 1, 2026 19:51 Inactive

ably-ci temporarily deployed to ably-docs-dx-285-react--62f9if March 1, 2026 20:39 Inactive

ably-ci temporarily deployed to ably-docs-dx-285-react--62f9if March 1, 2026 21:11 Inactive

ably-ci temporarily deployed to ably-docs-dx-285-react--62f9if March 1, 2026 22:27 Inactive

maratal force-pushed the DX-285-react-native-guide branch from 55ea18f to 5b431eb Compare March 1, 2026 23:56

ably-ci temporarily deployed to ably-docs-dx-285-react--62f9if March 1, 2026 23:56 Inactive

ably-ci temporarily deployed to ably-docs-dx-285-react--62f9if March 2, 2026 01:13 Inactive

ably-ci had a problem deploying to ably-docs-dx-285-react--62f9if March 2, 2026 01:21 Failure

ably-ci temporarily deployed to ably-docs-dx-285-react--62f9if March 2, 2026 01:57 Inactive

ably-ci temporarily deployed to ably-docs-dx-285-react--62f9if March 2, 2026 10:03 Inactive

maratal force-pushed the DX-285-react-native-guide branch from 09bc9fb to f86cf42 Compare March 2, 2026 10:31

ably-ci temporarily deployed to ably-docs-dx-285-react--62f9if March 2, 2026 10:31 Inactive

ably-ci temporarily deployed to ably-docs-dx-285-react--62f9if March 2, 2026 11:46 Inactive

maratal force-pushed the DX-285-react-native-guide branch from 7db79f5 to 4de286b Compare March 2, 2026 15:10

ably-ci temporarily deployed to ably-docs-dx-285-react--62f9if March 2, 2026 15:10 Inactive

maratal force-pushed the DX-286-kotlin-push-guide branch from 789d8eb to 02ac81e Compare March 4, 2026 13:07

maratal force-pushed the DX-285-react-native-guide branch from 4de286b to 60d24d8 Compare March 4, 2026 13:08

ably-ci temporarily deployed to ably-docs-dx-285-react--62f9if March 4, 2026 13:08 Inactive

GregHolmes force-pushed the DX-286-kotlin-push-guide branch from 02ac81e to 9942418 Compare March 5, 2026 11:25

Base automatically changed from DX-286-kotlin-push-guide to main March 5, 2026 11:38

maratal requested a review from GregHolmes March 5, 2026 13:18

GregHolmes force-pushed the DX-285-react-native-guide branch from 60d24d8 to 061e171 Compare March 6, 2026 13:38

GregHolmes temporarily deployed to ably-docs-dx-285-react--62f9if March 6, 2026 13:38 Inactive

splindsay-92 reviewed Mar 26, 2026

View reviewed changes

maratal added review-app Create a Heroku review app and removed review-app Create a Heroku review app labels Mar 27, 2026

ably-ci temporarily deployed to ably-docs-dx-285-react--nyzhyw March 27, 2026 01:29 Inactive

maratal added review-app Create a Heroku review app and removed review-app Create a Heroku review app labels Mar 27, 2026

ably-ci temporarily deployed to ably-docs-dx-285-react--cnuuro March 27, 2026 01:38 Inactive

ably-ci deployed to ably-docs-dx-285-react--cnuuro March 27, 2026 02:02 View deployment

ably-ci temporarily deployed to ably-docs-dx-285-react--cnuuro March 27, 2026 02:26 Inactive

maratal added review-app Create a Heroku review app and removed review-app Create a Heroku review app labels Apr 5, 2026

ably-ci had a problem deploying to ably-docs-dx-285-react--v0zs1k April 5, 2026 23:53 Failure

ably-ci temporarily deployed to ably-docs-dx-285-react--v0zs1k April 6, 2026 00:32 Inactive

ably-ci temporarily deployed to ably-docs-dx-285-react--v0zs1k April 6, 2026 01:05 Inactive

ably-ci temporarily deployed to ably-docs-dx-285-react--v0zs1k April 6, 2026 14:26 Inactive

ably-ci temporarily deployed to ably-docs-dx-285-react--v0zs1k April 6, 2026 22:13 Inactive

maratal force-pushed the DX-285-react-native-guide branch from 7bf600f to 97012f7 Compare April 6, 2026 22:59

ably-ci deployed to ably-docs-dx-285-react--v0zs1k April 6, 2026 22:59 View deployment

maratal force-pushed the DX-285-react-native-guide branch from 97012f7 to 966396e Compare April 6, 2026 23:36

ably-ci temporarily deployed to ably-docs-dx-285-react--v0zs1k April 6, 2026 23:36 Inactive

maratal added review-app Create a Heroku review app and removed review-app Create a Heroku review app labels Apr 6, 2026

m-hulbert reviewed Apr 19, 2026

View reviewed changes

maratal and others added 3 commits April 20, 2026 23:53

fix(react-native-guide): update CLI channel push command with --messa…

eacaaf6

…ge flag and new screenshot Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix(react-native-guide): add CLI push publish reference.

b71ae20


		Add `use_modular_headers!` to `ios/Podfile` after `prepare_react_native_project!`:

		```ruby


		After successful activation, `deviceId` contains the unique device ID assigned to this installation.

		<Aside data-type='note'>


		## Step 1: Set up Ably <a id="step-1"/>

		Replace the contents of `App.tsx` with the following to initialize the Ably Realtime client, wrap the app in `AblyProvider` and `ChannelProvider`, and subscribe to a channel for incoming messages using the `useChannel` hook:


		## Step 3: Subscribe and test push notifications <a id="step-3"/>

		The FCM SDK handles background push notifications automatically and displays them as system notifications. For foreground handling, use `@notifee/react-native` to display notifications while the app is open.


		### Send push via channel <a id="step-4-send-channel"/>

		To test push notifications via channel, tap Subscribe to Channel in the app and then send a push notification to the channel using the Ably CLI:

Conversation

maratal commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Uh oh!

coderabbitai bot commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

splindsay-92 left a comment

Choose a reason for hiding this comment

Uh oh!

maratal commented Mar 27, 2026

Uh oh!

m-hulbert left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maratal Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maratal Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

5 participants

maratal commented Feb 26, 2026 •

edited

Loading

coderabbitai bot commented Feb 26, 2026 •

edited

Loading

maratal Apr 20, 2026 •

edited

Loading

maratal Apr 20, 2026 •

edited

Loading