React Native module to handle PassKit pass.

npm install --save react-native-passkit-wallet

You can link native code in the way you prefer:

Add line to your project target section in your Podfile:

target 'YourProjectTarget' do

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

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

end

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

Run command below:

react-native link react-native-passkit-wallet

1. Add following lines to AndroidManifest.xml

   <manifest
     ...
   + xmlns:tools="http://schemas.android.com/tools"
   >
     <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/passkit_file_paths"
   +       tools:replace="android:resource" />
   +   </provider>
     </application>
   </manifest>

2. Create passkit_file_paths.xml

   Create passkit_file_paths.xml file in your project's android/app/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>

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

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

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

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

PassKit.containsPass(base64EncodedPass)

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

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

• 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