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

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

Description

React Native web push notifications tutorial.

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: 1cd0facd-c0cd-49f7-b04f-d7aa8b85bccf

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
Post copyable unit tests in a comment
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.}

Three fixes discovered while running the app: - Use Gradle 8.13 (not 8.8) for RN 0.84 compatibility; add troubleshooting note - Declare POST_NOTIFICATIONS in AndroidManifest.xml (was missing) - Use notifee.requestPermission() on Android instead of PermissionsAndroid for consistent behavior across API levels Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Firebase messaging().getToken() returns an FCM token on iOS too — Firebase handles the APNs token exchange internally. Using transportType 'apns' with an FCM token was incorrect. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…ove token refresh listener into activatePush. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

GregHolmes

Looks good! Just a couple comments.

GregHolmes · 2026-03-06T13:54:57Z

src/pages/docs/push/getting-started/react-native.mdx

+```react
+// Generate a unique device ID for this installation
+const [deviceId] = useState(
+  `push-tutorial-${Platform.OS}-${Math.random().toString(36).slice(2, 9)}`,


Random device ID is a bit fragile, is it worth having an Aside or comment here stating that this is for demo purposes? Otherwise every restart creates a new device registration with Ably, orphaning the previous one.

GregHolmes · 2026-03-06T13:56:38Z

src/pages/docs/push/getting-started/react-native.mdx

+
+## Step 5: Send push with code <a id="step-5"/>
+
+You can send push notifications directly from your app using `deviceId`, `clientId`, or channel publishing. Channel publishing does not require the `push-admin` capability.


Is this a bit misleading to say channel p ublishing does not require the push-admin capability? Publishing to a channel requires publish capability but the extras.push field in the message payload still requires push rules to be configured on the channel. (stated in prerequisite 4). Just wondering if this will confuse readers into thinking that no special set up is required for push.

GregHolmes · 2026-03-06T13:57:34Z

src/pages/docs/push/getting-started/react-native.mdx

+</Code>
+
+<Aside>
+At the time of writing React Native 0.84's 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`.


Mentioning ReactNative 0.84 specifically is likely to result in it being outdated quickly. Is it worth being more general here or noting that this is the RN version at the time of writing this guide?

GregHolmes · 2026-03-06T13:58:46Z

src/pages/docs/push/getting-started/react-native.mdx

+```
+</Code>
+
+<Aside>


This has no data-type attribute. All asides should. It could just be

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

maratal and others added 2 commits March 6, 2026 13:37

WIP: React Native push guide.

5125f52

maratal and others added 15 commits March 6, 2026 13:37

Add note explaining permission handling on Android and iOS.

1035c06

Add instruction for downloading service account json file.

2cb9ac3

Add use_modular_headers! Podfile step for Firebase Swift pods

75fa712

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Add iOS project configuration details.

e1d5929

Call registerDeviceForRemoteMessages() before getToken() on iOS

8633b35

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Improve tutorial structure and wording.

ad6c6b5

Replace deprecated SafeAreaView with react-native-safe-area-context.

1c7d019

Improve explanation of FCM pushes via APNs.

a893c55

Refactor device registration into saveDeviceRegistration helper and m…

7ea5dd9

…ove token refresh listener into activatePush. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Small fixes.

c9efce2

Add screenshot.

bce0d87

Fixes from CLAUDE.md

b1d694f

Fixed screenshot width and button colors.

e99b89c

Add more comments and a note.

061e171

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

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

GregHolmes requested changes Mar 6, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DX-285] React Native guide#3228

[DX-285] React Native guide#3228
maratal wants to merge 17 commits intomainfrom
DX-285-react-native-guide

maratal commented Feb 26, 2026

Uh oh!

coderabbitai bot commented Feb 26, 2026 •

edited

Loading

Review skipped

Uh oh!

GregHolmes left a comment

Uh oh!

GregHolmes Mar 6, 2026

Uh oh!

GregHolmes Mar 6, 2026

Uh oh!

GregHolmes Mar 6, 2026

Uh oh!

GregHolmes Mar 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants


		## Step 5: Send push with code <a id="step-5"/>

		You can send push notifications directly from your app using `deviceId`, `clientId`, or channel publishing. Channel publishing does not require the `push-admin` capability.

+              ```
+              </Code>
+              <Aside>

Conversation

maratal commented Feb 26, 2026

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!

GregHolmes left a comment

Choose a reason for hiding this comment

Uh oh!

GregHolmes Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

GregHolmes Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

GregHolmes Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

GregHolmes Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

coderabbitai bot commented Feb 26, 2026 •

edited

Loading