React Native module to handle PassKit pass.
npm
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
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>
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')
}
}