NFC Implementation Example

To have a similar behavior on Android and iOS, a mechanism similar to the alert action sheet on iOS must be implemented. For each call of (SCWS.initNfcTagReaderSession()), (SCWS.endNfcTagReaderSession()) and (SCWS.updateMessageNfcTagReaderSession()) on iOS, an alert action sheet must be displayed on Android.

This behavior can be reproduce with the class (AndroidNfcOverlay()).

How to include and use AndroidNfcOverlay

The AndroidNfcOverlay class must be imported as a dependency, and then included in the render function of a component:

import { AndroidNfcOverlay } from 'scwsapi-react';

class ExampleComponent extends React.Component {
    constructor(props) {
        super(props);
        // Reference to overlay object
        this.overlay = React.createRef();
    }

    render() {
        return (
            <View>
                <AndroidNfcOverlay ref={this.overlay} onCancel={this.cancelOverlay} />
            </View>
        );
    }
}

Initialization of the NFC session

To initialize the NFC session, the overlay method (AndroidNfcOverlay.display()) can be called:

// in ExampleComponent class
function initNfcSession(message) {
    nfcScanning = true;
            if (Platform.OS === 'ios') {
                    SCWS.initNfcTagReaderSession(message);
            } else {
                    this.overlay.current.display();
            }
}

Update NFC session message

The Overlay message can be updated with the (AndroidNfcOverlay.changeText()) method:

// in ExampleComponent class
    async updateNfcMessage(newText) {
            if (Platform.OS === 'ios') {
                    await SCWS.updateMessageNfcTagReaderSession(newText);
            } else {
                    this.overlay.current.changeText(newText);
            }
    }

End NFC session

// in ExampleComponent class
async endNfcSession(errorMessage) {
            if (nfcScanning) {
                    nfcScanning = false;
                    if (Platform.OS === 'ios') {
                            await SCWS.endNfcTagReaderSession(errorMessage);
                    } else {
                            this.hideOverlay(false, errorMessage);
                    }
            }
    }

hideOverlay = (canceled, errorMessage) => {
            this.overlay.current.hide(canceled, errorMessage);
            nfcScanning = false;
    };

    cancelOverlay = () => {
            nfcScanning = false;
            this.hideOverlay(true);
    };

cancelOverlay is a function called by the AndroidNfcOverlay button (this function must take no argument, so we cannot use hideOverlay).

On iOS, the NFC events are only read between (SCWS.initNfcTagReaderSession()) and (SCWS.endNfcTagReaderSession()).

On Android, by default, SCWS will always send reader events such as (SCWS.onreaderstatechanged()) after a (SCWS.createEnvironment()).

The boolean nfcScanning can be used to reproduce the iOS behavior on Android. This boolean indicates if the overlay is currently visible by the user, and can be used in callbacks (for example (SCWS.onreaderstatechanged())) to start the operations with the token:

SCWS.onreaderstatechanged = async function (reader) {
        if (nfcScanning) {
                SCWS.updateReaderList();

                if (reader.cardPresent) {
                    // Do operations with the token
                    let token = await reader.connect();
                }
        }
};