2.2.1 • Published 3 years ago
@metroipo/react-native-metroipo v2.2.1
@metroipo/react-native-metroipo
Official React-Native wrapper for the Metro Ipo SDK.
Installation
npm install @metroipo/react-native-metroipo
# OR
yarn add @metroipo/react-native-metroipo
Linking
Linking is automatic, however, you still need to perform a few steps for iOS.
iOS
- Ensure that
use_frameworks!
is added to your app target in your Podfile. - Run
npx pod-install
to retrieve the sdk.
Android
No additional setup is necessary.
Usage
import { MetroIpo, MetroIpoConfig } from '@metroipo/react-native-metroipo';
Starting the Signature Capture Flow
try {
const config = MetroIpoConfig.setDomain("METRO_URL").build();
const init = await MetroIpo.init(config);
if (init.success) {
// Successfully initialized the SDK.
}
// Starting the Signature Capture
const res = await MetroIpo.startCapture("CODE");
if (res.success) {
// Successfully started the SDK.
}
} catch (error) {
// Could not start the SDK.
}
Adding Customizations
// Customizing the Theme - iOS only. The Android theme can be updated in your app's colors.xml file. See here for further details: https://github.com/metro-ipo/metroipo-android-sdk#6-customizing-the-theme
const config = MetroIpoConfig.setDomain("METRO_URL")
.setAppearance({
colorPrimary: '#000000' <Hex String>,
colorTextPrimary: '#000000' <Hex String>,
colorButtonPrimary: '#000000' <Hex String>,
colorButtonPrimaryText: '#FFFFFF' <Hex String>,
colorButtonPrimaryPressed: '#000000' <Hex String>,
imageNavCenterLogo: '' <String>, // Name of Asset in Xcode
imageNavBackground: '' <String>, // Name of Asset in Xcode
imageBottomLogo: '' <String>, // Name of Asset in Xcode
buttonBorderRadius: 18 <Number>,
})
.build();
const init = await MetroIpo.init(config);
Handling Capture Callbacks
React.useEffect(() => {
MetroIpo.onComplete((event: any) => {
setResult(event.message);
});
MetroIpo.onCancel((event: any) => {
setResult(event.message);
});
return () => {
MetroIpo.removeListeners();
}
}, []);
Troubleshooting
When installing or using @metroipo/react-native-metroipo
you may encounter the following problems:
iOS - If you are using @react-native-firebase
in your project, along with use_frameworks!
, you may encounter an error with RNFirebase
. To avoid this, add $RNFirebaseAsStaticFramework = true
at the top of your Podfile
.
iOS - For Cycle inside FBReactNativeSpec
errors add the following to your podfile (https://github.com/facebook/react-native/issues/31034#issuecomment-812564390).
post_install do |installer|
react_native_post_install(installer)
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
end
if (target.name&.eql?('FBReactNativeSpec'))
target.build_phases.each do |build_phase|
if (build_phase.respond_to?(:name) && build_phase.name.eql?('[CP-User] Generate Specs'))
target.build_phases.move(build_phase, 0)
end
end
end
end
end
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT