tran2 / react-native-wallet-passes

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

React Native WalletPasses

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

Installation

1. Install library using yarn:

yarn add react-native-wallet-passes

or use npm, if you prefer:

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

2. Link native code

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

Information about linking for RN < v0.60

You can link native code in the way you prefer:

CocoaPods

Add line to your project target section in your Podfile:

target 'YourProjectTarget' do

+   pod 'react-native-wallet-passes', path: '../node_modules/react-native-wallet-passes'

end

If you received error jest-haste-map: Haste module naming collision: Duplicate module name: react-native, add lines below to your Podfile and reinstall pods.

target 'YourProjectTarget' do

+   rn_path = '../node_modules/react-native'
+   pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
+   pod 'React', path: rn_path

  pod 'react-native-wallet-passes', path: '../node_modules/react-native-wallet-passes'

end

+ post_install do |installer|
+   installer.pods_project.targets.each do |target|
+     if target.name == "React-Core"
+       target.remove_from_project
+     end
+   end
+ end

react-native link

Run command below:

react-native link react-native-wallet-passes

3. Android configuration

Add following lines to AndroidManifest.xml

<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

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>

Usage

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

or import the default export:

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

Check whether the device supports adding 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.

Add the pass to the Wallet

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');

Display a button that enables users to add passes to Wallet (iOS only)

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');
      }}
    />
  );
};

Handle events (iOS only)

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 />;
};

Constants

• 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