import React from 'react';
import { NativeEventEmitter, Platform, View, StyleSheet, TouchableOpacity, Text, Alert, ActivityIndicator } from 'react-native';
import { PassbaseSDK, PassbaseButton } from '@passbase/react-native-passbase';
class App extends React.Component {
async componentDidMount() {
this.subscription = new NativeEventEmitter(PassbaseSDK);
this.subscription.addListener('onError', (event) => {
console.log("##onError##", event)
this.subscription.addListener('onFinish', (event) => {
console.log("##onFinish##", event)
this.subscription.addListener('onSubmitted', (event) => {
console.log("##onSubmitted##", event)
this.subscription.addListener('onStart', (event) => {
console.log("##onStart##", event)
handlePassbaseClick = async () => {
const { initSucceed, loading } = this.state
this.setState({loading: true}, async () => {
// Promise based method call
const res = await PassbaseSDK.startVerification();
this.setState({loading: false})
alert('something went wrong. while starting verification.')
// promise based implementation
const res = await PassbaseSDK.init('YOUR_PUBLISHABLE_API_KEY')
console.log("initRes: ", res)
if (res && res.success) {
this.setState({initSucceed: true, loading: false})
const { initSucceed, loading } = this.state;
<View style={styles.container}>
<TouchableOpacity style={styles.button}
onPress={this.handlePassbaseClick}>
<Text style={styles.btnText}>
{initSucceed ? 'start verification' : 'initialize SDK'}
loading && <View style={styles.loadingContainer}>
<ActivityIndicator size={'large'}/>
initSucceed && <PassbaseButton style={{ margin: 10, backgroundColor: 'white' }}/>
this.subscription.removeListener('onFinish', (event) => {
console.log("##removing listener onFinish##", event)
this.subscription.removeListener('onSubmitted', (event) => {
console.log("##removing listener onSubmitted##", event)
this.subscription.removeListener('onError', (event) => {
console.log("##removing listener onError##", event)
this.subscription.removeListener('onStart', (event) => {
console.log("##removing listener onStart##", event)
const styles = StyleSheet.create({
left: 0, right: 0, top: 0, bottom: 0,