React Native module to handle PassKit pass.

Usage no npm install needed!

<script type="module">
  import reactNativePasskitWallet from '';



React Native module to handle PassKit pass.


  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:authorities="com.yourcompany.fileprovider"
    +     android:grantUriPermissions="true"
    +     android:exported="false">
    +     <meta-data
    +       android:name=""
    +       android:resource="@xml/passkit_file_paths" />
    +   </provider>
  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="">
        <cache-path name="passkit" path="/"/>


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

Check whether the device supports adding passes

  .then((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


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 (
        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

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