React Native WalletPasses is a module to handle Wallet passes on iOS and Android.
yarn
:yarn add react-native-wallet-passes
or use npm
, if you prefer:
npm install --save react-native-wallet-passes
Important: You only need to do this step if you're using React Native 0.59 or lower. Since v0.60, linking happens automatically.
<manifest ...>
<application ...>
...
+ <provider
+ android:name="androidx.core.content.FileProvider"
+ android:authorities="com.yourcompany.fileprovider"
+ android:grantUriPermissions="true"
+ android:exported="false"
+ tools:replace="android:authorities">
+ <meta-data
+ android:name="android.support.FILE_PROVIDER_PATHS"
+ android:resource="@xml/wallet_passes_file_paths"
+ tools:replace="android:resource" />
+ </provider>
</application>
</manifest>
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 version="1.0" encoding="utf-8"?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
<cache-path
name="wallet-passes"
path="." />
</paths>
import {WalletPasses} from 'react-native-wallet-passes';
or import the default
export:
import WalletPasses from 'react-native-wallet-passes';
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.
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.
WalletPasses.addPass(base64EncodedPass, 'com.yourcompany.fileprovider');
import {AddPassButton, ADD_PASS_BUTTON_CONSTANTS} from 'react-native-wallet-passes';
import type {FunctionComponent} from 'react';
import {styles} from './styles';
const App: FunctionComponent = () => {
return (
<AddPassButton
style={styles.addPassButton}
addPassButtonStyle={ADD_PASS_BUTTON_CONSTANTS.STYLE.BLACK_OUTLINE}
onPress={() => {
console.log('onPress');
}}
/>
);
};
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 <View />;
};