@visionpush/react-native

Official React Native SDK for VisionPush — push notifications, in-app messages, geofencing and analytics for iOS & Android.

It wraps the native VisionPush iOS and Android SDKs through a thin React Native bridge and exposes a typed TypeScript API plus ready-made React hooks.

Installation

npm install @visionpush/react-native
# or
yarn add @visionpush/react-native

This package ships native code and uses React Native autolinking — no manual linking is required for the bridge itself. It does, however, depend on the underlying native VisionPush SDKs, which need the two prerequisites below.

iOS

The iOS bridge delegates to the VisionPushSDK CocoaPod. React Native resolves native dependencies through CocoaPods, so VisionPushSDK must be installable as a Pod (published to the CocoaPods trunk). After installing the npm package:

cd ios && pod install

ℹ️ The VisionPush iOS SDK is also distributed via Swift Package Manager, but the React Native iOS toolchain uses CocoaPods — the VisionPushSDK Pod is what matters here. Minimum deployment target: iOS 15.0.

You also need the standard push-notification capability and an UNUserNotificationCenter delegate wired in your AppDelegate (see the native iOS SDK docs).

Android

The Android bridge delegates to the native VisionPush Android SDK. Until it is published to Maven Central, that SDK is resolved from JitPack, so add the JitPack repository to your app's android/settings.gradle:

dependencyResolutionManagement {
  repositories {
    google()
    mavenCentral()
    maven { url 'https://jitpack.io' }   // <- required for the VisionPush Android SDK
  }
}

Minimum SDK: API 21. Add your google-services.json for FCM as usual.

Quick start

import { VisionPushClient } from '@visionpush/react-native';

const visionpush = new VisionPushClient({
  appId: 'YOUR_APP_ID',
  apiKey: 'vp_live_xxxxxxxxxxxxxxxx',
  // apiUrl: 'https://api.visionpush.de/v1', // self-hosted / staging override
});

async function setup() {
  await visionpush.initialize();              // registers the device
  const status = await visionpush.requestPermission();
  console.log('permission:', status);

  await visionpush.setExternalId('user-42');
  await visionpush.setTags({ plan: 'pro', locale: 'de' });
  await visionpush.trackEvent('app_open', { source: 'cold_start' });
}

// React to notifications
const off = visionpush.onNotificationOpened((payload) => {
  console.log('opened:', payload);
});
// ...later: off();

React hooks

import {
  useVisionPush,
  useNotificationPermission,
  useNotifications,
  useInbox,
} from '@visionpush/react-native';

function Screen() {
  const client = useVisionPush(visionpush);
  const { status, request } = useNotificationPermission(client);
  const { last } = useNotifications(client);
  const { items, markRead, refresh } = useInbox(client);

  // render…
}

API surface

| Area | Exports | | --- | --- | | Client | VisionPushClient | | Realtime | RealtimeChannel | | Hooks | useVisionPush, useNotificationPermission, useNotifications, useInbox, useRealtime | | Errors | VisionPushError, NotInitializedError, NativeModuleError, PlatformNotSupportedError, … | | Types | VisionPushConfig, NotificationPayload, PermissionStatus, InboxItem, … |

Client methods include initialize, requestPermission, getPermissionStatus, setExternalId, setTags, optIn, optOut, trackEvent, getInbox, getDeviceId, enableRealtime/disableRealtime and the on* event subscriptions.

Development

npm install        # also runs `bob build` via prepare
npm run build      # react-native-builder-bob → lib/{commonjs,module,typescript}
npm run typecheck  # tsc --noEmit
npm test           # vitest

The package is built with react-native-builder-bob and emits CommonJS, ES modules and TypeScript declarations under lib/. The react-native/source fields point at src/ so Metro consumes the TypeScript source directly during development.

License

MIT © VisionLab