@passgage-sdk/react-native

React Native wrapper for Passgage Access SDK with ready-to-use components and hooks.

Installation

npm install @passgage-sdk/react-native @passgage-sdk/core
# or
yarn add @passgage-sdk/react-native @passgage-sdk/core

Peer Dependencies

You also need to install these peer dependencies:

npm install react-native-vision-camera react-native-nfc-manager @react-native-community/geolocation

Follow the installation instructions for each native library:

Usage

Provider Setup

Wrap your app with PassgageAccessProvider:

import { PassgageAccessProvider } from '@passgage-sdk/react-native';

function App() {
  return (
    <PassgageAccessProvider
      baseURL="https://your-api.passgage.com"
      token="your-jwt-token"
    >
      <YourApp />
    </PassgageAccessProvider>
  );
}

QR Scanner Hook

import { useQRScanner } from '@passgage-sdk/react-native';

function QRScanScreen() {
  const { scan, isLoading, error } = useQRScanner({
    onSuccess: (entrance) => {
      console.log('QR scan successful:', entrance);
    },
    onError: (error) => {
      console.error('QR scan failed:', error);
    },
  });

  return (
    <View>
      {/* Your camera view */}
      <Camera onCodeScanned={(code) => scan(code)} />
    </View>
  );
}

NFC Scanner Hook

import { useNFCScanner } from '@passgage-sdk/react-native';

function NFCScanScreen() {
  const { startScanning, stopScanning, isScanning } = useNFCScanner({
    onSuccess: (entrance) => {
      console.log('NFC scan successful:', entrance);
    },
    onError: (error) => {
      console.error('NFC scan failed:', error);
    },
  });

  useEffect(() => {
    startScanning();
    return () => stopScanning();
  }, []);

  return <View>{/* Your NFC scan UI */}</View>;
}

Check-In Hook

import { useCheckIn } from '@passgage-sdk/react-native';

function CheckInScreen() {
  const { nearbyBranches, checkIn, isLoading } = useCheckIn();

  const handleCheckIn = async (branchId: string) => {
    await checkIn({
      branchId,
      entranceType: 0, // 0 = ENTRY, 1 = EXIT
    });
  };

  return (
    <View>
      {nearbyBranches.map((branch) => (
        <TouchableOpacity key={branch.id} onPress={() => handleCheckIn(branch.id)}>
          <Text>{branch.title}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
}

Remote Work Hook

import { useRemoteWork } from '@passgage-sdk/react-native';

function RemoteWorkScreen() {
  const { logEntry, logExit, isLoading } = useRemoteWork();

  return (
    <View>
      <Button title="Log Entry" onPress={() => logEntry()} />
      <Button title="Log Exit" onPress={() => logExit()} />
    </View>
  );
}

API

Hooks

useQRScanner() - QR code scanning with validation
useNFCScanner() - NFC card scanning with validation
useCheckIn() - GPS-based check-in
useRemoteWork() - Remote work logging
useLocation() - Location tracking
usePassgageAccess() - Access SDK context

Components

<PassgageAccessProvider> - SDK configuration provider

JSPM

@passgage/sdk-react-native

Package Exports

Readme