@reeq/react-native-passkit
Version:
React native wrapper over google PayClient (for android) and PassKit (for iOS). Contains google and apple buttons
314 lines (210 loc) • 5.46 kB
Markdown
React native wrapper over google PayClient (for android) and PassKit (for iOS). Contains google and apple buttons
## Installation
```bash
$ npm install --save @reeq/react-native-passkit
# --- or ---
$ yarn add @reeq/react-native-passkit
```
and
```bash
$ pod install
```
## Usage
```js
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}
/>;
```
```ts
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>
```
```js
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
}}
/>;
```
```ts
type addPass = (base64EncodedPass: string) => Promise<void>;
```
```js
import { addPass } from '@reeq/react-native-passkit';
//...
await addPass('BASE_64_ENCODED_PASS');
```
```ts
type addPassJWT = (passJWT: string) => Promise<void>;
```
```js
import { addPassJWT } from '@reeq/react-native-passkit';
//...
await addPassJWT('JWT_SIGNED_PASS');
```
```ts
type canAddPasses = () => Promise<boolean>;
```
```js
import { canAddPasses } from '@reeq/react-native-passkit';
//...
const canAdd = await canAddPasses();
console.log(canAdd); // true / false
```
```ts
type containsPass = (base64encodedPass: string) => Promise<boolean>;
```
```js
import { containsPass } from '@reeq/react-native-passkit';
//...
const hasPassInWallet = await containsPass('BASE_64_ENCODED_PASS');
console.log(hasPassInWallet); // true / false
```
```ts
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;
```
```js
import { addPassResultListener } from '@reeq/react-native-passkit';
import { useEffect } from 'React';
//...
useEffect(() => {
const unsubscribe = addPassResultListener((event) => {
console.log(event); // { status: 'success' }
});
return () => {
unsubscribe();
};
}, []);
```
```ts
type AddPassResultStatus = 'success' | 'cancelled' | 'error';
type AddPassResultErrorType = 'api' | 'unexpected';
interface AddPassResultEvent {
status: AddPassResultStatus;
errorType?: AddPassResultErrorType;
message?: string;
}
type useAddPassResult: () => AddPassResultEvent | undefined
```
```js
import { useAddPassResult } from '@reeq/react-native-passkit';
//...
const passAddResult = useAddPassResult();
console.log(passAddResult); // { status: "success" }
```
- [pass-js](https://github.com/tinovyatkin/pass-js) creating pass lib for node js
- [google-codelab](https://codelabs.developers.google.com/add-to-wallet-web#0) for node js
By default iOS add pass button does not support localization. To enable languages you want to support add them in XCode under <b>Localizations</b> list in the <b>Info</b> tab of the project. Button's localization will change automatically based on user phone setting's locale.
By default Android will apply localization for button with all [available](https://developers.google.com/wallet/legacy-resources/button-guidelines) languages. To restrict app to support only specific languages you need to do the following in <b>android/app/build.gradle</b>:
```gradle
android {
//...
defaultConfig {
//...
resConfigs("en", "da", "uk") // restrict locale to English, Danish and Ukrainian
}
}
```
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)