react-native-passkit

React native wrapper over google PayClient (for android) and PassKit (for iOS). Contains google and apple buttons

Installation

$ npm install --save @reeq/react-native-passkit
# --- or ---
$ yarn add @reeq/react-native-passkit

and

$ pod install

Usage

import {
  AddPassButton,
  addPass,
  canAddPasses,
  containsPass,
} from '@reeq/react-native-passkit';

const handleAddPassButton = async () => {
  try {
    const pass = 'BASE_64_ENCODED_STRING';

    const isAddable = await canAddPasses();

    if (!isAddable) {
      return;
    }

    const hasPassAlready = await containsPass(pass);

    if (hasPassAlready) {
      return;
    }

    await addPass(pass);
  } catch (err) {
    console.log(err);
  }
};

<AddPassButton
  variant={{
    android: 'light',
    ios: 'dark-outline',
  }}
  onPress={handleAddPassButton}
/>;

Components

AddPassButton

Platform: iOS/Android

Type

type AndroidVariant = 'dark' | 'light' | 'light-outline';
type iOSVariant = 'dark' | 'dark-outline';

interface AddPassButtonProps extends ViewProps {
  variant?: {
    ios?: iOSVariant;
    android?: AndroidVariant;
  };
  onPress?: () => void;
}

type AddPassButton: React.FC<AddPassButtonProps>

Usage

import { AddPassButton } from '@reeq/react-native-passkit';
import { Platform } from 'react-native';

//...

<AddPassButton
  variant={{
    android: 'light', // Default is 'dark'
    ios: 'dark', // Default is 'dark-outline'
  }}
  onPress={() => {
    console.log("I'm pressed");
  }}
  style={{
    height: Platform.select({
      android: 44,
      ios: 60,
    }),
    width: Platform.select({
      android: 288,
      ios: 260,
    }), // This style is default. Can be overriden
  }}
/>;

API

addPass()

Platform: iOS/Android

Type

type addPass = (base64EncodedPass: string) => Promise<void>;

Usage

import { addPass } from '@reeq/react-native-passkit';

//...

await addPass('BASE_64_ENCODED_PASS');

addPassJWT()

Platform: Android

Type

type addPassJWT = (passJWT: string) => Promise<void>;

Usage

import { addPassJWT } from '@reeq/react-native-passkit';

//...

await addPassJWT('JWT_SIGNED_PASS');

canAddPasses()

Platform: iOS/Android

Type:

type canAddPasses = () => Promise<boolean>;

Usage

import { canAddPasses } from '@reeq/react-native-passkit';

//...

const canAdd = await canAddPasses();

console.log(canAdd); // true / false

containsPass()

Platform: iOS

Type

type containsPass = (base64encodedPass: string) => Promise<boolean>;

Usage

import { containsPass } from '@reeq/react-native-passkit';

//...

const hasPassInWallet = await containsPass('BASE_64_ENCODED_PASS');

console.log(hasPassInWallet); // true / false

addPassResultListener()

Platform: iOS/Android

Type

type AddPassResultStatus = 'success' | 'cancelled' | 'error';

type AddPassResultErrorType = 'api' | 'unexpected';

interface AddPassResultEvent {
  status: AddPassResultStatus;
  errorType?: AddPassResultErrorType;
  message?: string;
}

type addPassResultListener = (
  callback: (event: AddPassResultEvent) => void
) => EmitterSubscription.remove;

Usage

import { addPassResultListener } from '@reeq/react-native-passkit';
import { useEffect } from 'React';

//...

useEffect(() => {
  const unsubscribe = addPassResultListener((event) => {
    console.log(event); // { status: 'success' }
  });
  return () => {
    unsubscribe();
  };
}, []);

useAddPassResult()

Platform: iOS/Android

Type

type AddPassResultStatus = 'success' | 'cancelled' | 'error';

type AddPassResultErrorType = 'api' | 'unexpected';

interface AddPassResultEvent {
  status: AddPassResultStatus;
  errorType?: AddPassResultErrorType;
  message?: string;
}

type useAddPassResult: () => AddPassResultEvent | undefined

Usage

import { useAddPassResult } from '@reeq/react-native-passkit';

//...

const passAddResult = useAddPassResult();

console.log(passAddResult); // { status: "success" }

How to create pass

iOS

• pass-js creating pass lib for node js

Android

• google-codelab for node js

Localization

iOS

By default iOS add pass button does not support localization. To enable languages you want to support add them in XCode under Localizations list in the Info tab of the project. Button's localization will change automatically based on user phone setting's locale.

Android

By default Android will apply localization for button with all available languages. To restrict app to support only specific languages you need to do the following in android/app/build.gradle:

android {

	//...

    defaultConfig {
    	//...

        resConfigs("en", "da", "uk") // restrict locale to English, Danish and Ukrainian
    }
}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library