react-native-passkit-wallet

React Native module to handle PassKit pass.

Usage no npm install needed!

<script type="module">
  import reactNativePasskitWallet from 'https://cdn.skypack.dev/react-native-passkit-wallet';
</script>

README

react-native-passkit-wallet

React Native module to handle PassKit pass.

Installation

  1. Install library from npm

    npm install --save react-native-passkit-wallet
    
  2. Link native code

    react-native link react-native-passkit-wallet
    

Android configuration

  1. 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">
    +     <meta-data
    +       android:name="android.support.FILE_PROVIDER_PATHS"
    +       android:resource="@xml/passkit_file_paths" />
    +   </provider>
      </application>
    </manifest>
    
  2. 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-passkit-wallet'

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