React Native WalletPasses


React Native WalletPasses is a module to handle Wallet passes on iOS and Android.

Installation

$3

``bash
yarn add react-native-wallet-passes
`

or use npm, if you prefer:

`bash
npm install --save react-native-wallet-passes
`

$3

> Important: You only need to do this step if you're using React Native 0.59 or lower. Since v0.60, linking happens automatically.

$3

#### Add following lines to AndroidManifest.xml

`diff


...
+ + android:name="androidx.core.content.FileProvider"
+ android:authorities="com.yourcompany.fileprovider"
+ android:grantUriPermissions="true"
+ android:exported="false"
+ tools:replace="android:authorities">
+ + android:name="android.support.FILE_PROVIDER_PATHS"
+ android:resource="@xml/wallet_passes_file_paths"
+ tools:replace="android:resource" />
+


`

#### Create wallet_passes_file_paths.xml

Create wallet_passes_file_paths.xml file in your project's android/src/main/res/xml directory. The .pkpass files will be created in your app's cache directory.

`xml


name="wallet-passes"
path="." />

`

Usage

`jsx
import {WalletPasses} from 'react-native-wallet-passes';
`

or import the default export:

`jsx
import WalletPasses from 'react-native-wallet-passes';
`

$3

`jsx
WalletPasses.canAddPasses().then((result) => {
console.log('Can add passes:', result);
});
`

> For Android, true will be returned if at least one app is installed that can open .pkpass files.

$3

`jsx
WalletPasses.addPass(base64EncodedPass);
`

For Android, a file provider has to be specified for the second argument. Then a dialog box will appear, and ask the user to choose an app opening the pass.

`jsx
WalletPasses.addPass(base64EncodedPass, 'com.yourcompany.fileprovider');
`

$3

`jsx
import {AddPassButton, ADD_PASS_BUTTON_CONSTANTS} from 'react-native-wallet-passes';
import type {FunctionComponent} from 'react';
import {styles} from './styles';

const App: FunctionComponent = () => {
return (
style={styles.addPassButton}
addPassButtonStyle={ADD_PASS_BUTTON_CONSTANTS.STYLE.BLACK_OUTLINE}
onPress={() => {
console.log('onPress');
}}
/>
);
};
`

$3

`jsx
import {useLayoutEffect} from 'react';
import {View} from 'react-native';
import {WalletPasses} from 'react-native-wallet-passes';
import type {FunctionComponent} from 'react';

const App: FunctionComponent = () => {
useLayoutEffect(() => {
const walletPassesEventSubscription = WalletPasses.addEventListener(
'addPassesViewControllerDidFinish',
onAddPassesViewControllerDidFinish,
);

return walletPassesEventSubscription.remove;
}, []);

const onAddPassesViewControllerDidFinish = () => {
// Add-passes view controller has been dismissed
console.log('onAddPassesViewControllerDidFinish');
};

return ;
};
``

$3

- _ADD_PASS_BUTTON_CONSTANTS.STYLE_ - Options for the AddPassButton's style
- _BLACK_ - A black button with white lettering
- _BLACK_OUTLINE_ - A black button with a light outline
- _ADD_PASS_BUTTON_CONSTANTS.DEFAULT_WIDTH_ - The AddPassButton's default width
- _ADD_PASS_BUTTON_CONSTANTS.DEFAULT_HEIGHT_ - The AddPassButton's default height