react-native-wallet-pass

React Native module to handle PassKit pass.

Installation

$3

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

$3

You can link native code in the way you prefer:

#### CocoaPods

Add line to your project target section in your Podfile:

`diff
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.

`diff
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:

`shell
react-native link react-native-wallet-pass
`

$3

1. Add following lines to AndroidManifest.xml

`diff


...
+ + android:name="android.support.v4.content.FileProvider"
+ android:authorities="com.yourcompany.fileprovider"
+ android:grantUriPermissions="true"
+ android:exported="false"
+ tools:replace="android:authorities">
+ + android:name="android.support.FILE_PROVIDER_PATHS"
+ android:resource="@xml/passkit_file_paths"
+ tools:replace="android:resource" />
+


`

1. 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.

`xml



`

Usage

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

$3

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

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

$3

`jsx
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.

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

$3

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

$3

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

$3

- 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