@molecule/app-push-react-native
Provider bond · push · App (browser) · v1.0.3 · Apache-2.0
React Native push notifications provider
npm install @molecule/app-push-react-nativenpm · Source on GitHub · Implements @molecule/app-push
How it works
@molecule/app-push-react-native is a provider bond on the app (browser) side: it implements the push core interface (@molecule/app-push) with a concrete vendor or library behind it.
Your code calls the core; you wire this provider once at startup. Swapping vendors later is one line in that wiring, not a rewrite.
import { setProvider, requestPermission, register } from '@molecule/app-push'
import { provider } from '@molecule/app-push-react-native'
// Wire BEFORE anything touches the push bond (see remarks).
setProvider(provider)
// iOS requires permission before a token can be issued.
const status = await requestPermission()
if (status === 'granted') {
const token = await register()
// token.value is an EXPO push token ("ExponentPushToken[…]") — send it to
// your API and deliver pushes via Expo's Push HTTP API.
}Reference
React Native push notifications provider for molecule.dev.
Implements the PushProvider interface from @molecule/app-push using
expo-notifications: permission flow, Expo push-token registration,
foreground/action listeners, local notifications, and badge management.
Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit
src/index.tsJSDoc, not this file.
Quick Start
import { setProvider, requestPermission, register } from '@molecule/app-push'
import { provider } from '@molecule/app-push-react-native'
// Wire BEFORE anything touches the push bond (see remarks).
setProvider(provider)
// iOS requires permission before a token can be issued.
const status = await requestPermission()
if (status === 'granted') {
const token = await register()
// token.value is an EXPO push token ("ExponentPushToken[…]") — send it to
// your API and deliver pushes via Expo's Push HTTP API.
}
Type
provider
Installation
npm install @molecule/app-push-react-native @molecule/app-i18n @molecule/app-logger @molecule/app-push expo-constants expo-notifications react-native
API
Interfaces
ReactNativePushConfig
Configuration for the React Native push notifications provider.
interface ReactNativePushConfig {
/**
* Android notification channel ID. On Android the provider creates (or updates)
* this channel via expo-notifications' `setNotificationChannelAsync` during
* `register()`, and targets it when scheduling local notifications (unless a
* per-notification `channelId` overrides it). Android 8+ requires a channel for
* notifications to display, and server push payloads target it by id. No-op on
* iOS/web; when omitted, expo's default channel is used.
*/
androidChannelId?: string
/**
* Human-readable name shown for the Android channel in the system notification
* settings. Applied only when `androidChannelId` is set; defaults to the channel
* id when omitted. Ignored on iOS/web.
*/
androidChannelName?: string
/**
* EAS `projectId` used when requesting an Expo push token. Required on Expo
* SDK 49+ standalone/EAS builds — `getExpoPushTokenAsync` throws without it
* outside Expo Go. When omitted, the provider falls back to the value in the
* Expo config (`app.json` `extra.eas.projectId`, read via `expo-constants`).
*/
projectId?: string
/**
* Whether to handle notifications when the app is in the foreground.
* @default true
*/
handleForeground?: boolean
}
Functions
createReactNativePushProvider(config)
Creates a React Native push notifications provider backed by expo-notifications.
function createReactNativePushProvider(config?: ReactNativePushConfig): PushProvider
config— Optional provider configuration.
Returns: A PushProvider implementation for React Native.
Constants
provider
Default React Native push notifications provider.
const provider: PushProvider
Core Interface
Implements @molecule/app-push interface.
Bond Wiring
Setup function to register this provider with the core interface:
import { setProvider } from '@molecule/app-push'
import { provider } from '@molecule/app-push-react-native'
export function setupNativePushReactNative(): void {
setProvider(provider)
}
Injection Notes
Requirements
Peer dependencies:
@molecule/app-i18n^1.0.1@molecule/app-logger^1.0.1@molecule/app-push^1.0.1expo-constants>=14.0.0expo-notifications>=0.20.0react-native>=0.72.0
Runtime Dependencies
-
@molecule/app-i18n -
@molecule/app-logger -
@molecule/app-push -
expo-constants -
expo-notifications -
react-native -
Call
setProvider(provider)before ANY push call.@molecule/app-push'sgetProvider()silently auto-bonds a WEB push provider when nothing is bonded — in React Native that fails at runtime with service-worker errors instead of a clear "no provider" message. -
Tokens are Expo push tokens, not raw FCM/APNs device tokens. The server must send through Expo's Push API (
https://exp.host/--/api/v2/push/send); an FCM/APNs sender cannot deliver to anExponentPushToken[…]. -
Standalone/EAS builds need an EAS
projectIdfor token registration (Expo SDK 49+ throws without one outside Expo Go). Pass it as the provider'sprojectIdconfig option, or setapp.jsonextra.eas.projectId— the provider reads that automatically viaexpo-constantswhen the option is omitted. -
expo-notificationsis a peer dependency loaded on demand — install it withnpx expo install expo-notifications. -
With
handleForeground: true(default), the global foreground-display handler is installed whenonNotificationReceived()is first subscribed — subscribe early (app root) if foreground alerts should always show. -
Android notification channels: set
androidChannelId(and optionallyandroidChannelName) and the provider creates that channel on Android viasetNotificationChannelAsyncatregister(), then targets it for local notifications (a per-callchannelIdwins). Android 8+ needs a channel for notifications to display; iOS/web ignore this. -
The Expo push token and the native device token are distinct.
register()/getToken()return the Expo push token;onTokenChangefires with a freshly re-fetched Expo push token (NOT the raw native FCM/APNs token that triggered the change), so the token you send to your backend always stays anExponentPushToken[…]. -
unregister()deregisters the device with the OS push service (unregisterForNotificationsAsync()) AND clears the locally cached token, so the backend can no longer deliver to it.
Translations
Translation strings are provided by @molecule/app-locales-push.