react-native-wallet-pass

react-native-wallet-pass

React Native module to handle PassKit pass.

Installation

1. Install library from npm

npm install --save react-native-wallet-pass

2. Link native code

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-pass', path: '../node_modules/react-native-wallet-pass'

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-pass', path: '../node_modules/react-native-wallet-pass'

end

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

react-native link

Run command below:

react-native link react-native-wallet-pass

3. Android configuration

• Add following lines to AndroidManifest.xml

  <manifest ...>
    <application ...>
      ...
  +   <provider
  +     android:name="android.support.v4.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/passkit_file_paths"
  +       tools:replace="android:resource" />
  +   </provider>
    </application>
  </manifest>
  

• Create passkit_file_paths.xml

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

  <paths xmlns:android="http://schemas.android.com/apk/res/android">
      <cache-path name="passkit" path="/"/>
  </paths>
  

Usage

import PassKit, { AddPassButton } from 'react-native-wallet-pass'

Check whether the device supports adding passes

PassKit.canAddPasses()
  .then((result) => {
    console.log(result)
  })

For Android, true will be returned if apps that can open pkpass files are installed.

Prompt the user to add the pass to the pass library

PassKit.addPass(base64EncodedPass)

For Android, file provider has to be specified for the second argument. And a dialogue box will appear to choose an app to open the pass.

PassKit.addPass(base64EncodedPass, 'com.yourcompany.fileprovider')

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

class App extends Component<{}> {
  render() {
    return (
      <AddPassButton
        style={styles.addPassButton}
        addPassButtonStyle={PassKit.AddPassButtonStyle.black}
        onPress={() => { console.log('onPress') }}
      />
    )
  }
}

Handle events (iOS only)

class App extends Component<{}> {
  // To keep the context of 'this'
  onAddPassesViewControllerDidFinish = this.onAddPassesViewControllerDidFinish.bind(this)

  componentDidMount() {
    // Add event listener
    PassKit.addEventListener('addPassesViewControllerDidFinish', this.onAddPassesViewControllerDidFinish)
  }

  componentWillUnmount() {
    // Remove event listener
    PassKit.removeEventListener('addPassesViewControllerDidFinish', this.onAddPassesViewControllerDidFinish)
  }

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

Constants (iOS only)

• PassKit.AddPassButtonStyle - The appearance of the add-pass button
  • black - A black button with white lettering
  • blackOutline - A black button with a light outline
• PassKit.AddPassButtonWidth - Default add-pass button width
• PassKit.AddPassButtonHeight - Default add-pass button height