Nfc integearation in ionic react capacitor porject

Hi I want to add nfc reader functionality in my app I am using ionic react with capcitor project
So i installed @ionic-native/nfc module in my app then phonegap-nfc but when i try to build my app and open it the app crash on startup and i got the error in android studio logcat
Here is the code snippets ,error and app configuration

const addNFCListener = async () => {
try {
await NFC.addNdefListener(
() => {
console.log(‘successfully attached ndef listener’);
},
async (err:any) => {
console.log(‘error attaching ndef listener’, err);
// Handle error
}
).subscribe(async (event) => {
console.log('received ndef message. the tag contains: ', event.tag);
const id = NFC.bytesToHexString(event.tag.id);
// Handle the tag ID as needed

      // Display the tag ID in a toast or another way as needed
      console.log(id);
    });
  } catch (error) {
    console.error('Error adding NFC listener', error);
    // Handle error
  }
};

addNFCListener();

@awesome-cordova-plugins/core”: “^5.40.0”,
@awesome-cordova-plugins/firebase-authentication”: “^5.41.0”,
@awesome-cordova-plugins/network”: “^6.2.0”,
@awesome-cordova-plugins/pdf-generator”: “^5.41.0”,
@awesome-cordova-plugins/photo-viewer”: “^5.39.1”,
@awesome-cordova-plugins/sign-in-with-apple”: “^5.41.0”,
@awesome-cordova-plugins/splash-screen”: “^6.2.0”,
@capacitor-community/facebook-login”: “^3.3.0”,
@capacitor-community/native-market”: “^4.0.0”,
@capacitor/android”: “^5.0.0”,
@capacitor/app”: “^5.0.0”,
@capacitor/core”: “^5.0.0”,
@capacitor/filesystem”: “^5.0.0”,
@capacitor/haptics”: “^5.0.0”,
@capacitor/ios”: “^5.0.0”,
@capacitor/keyboard”: “^5.0.0”,
@capacitor/push-notifications”: “^5.0.0”,
@capacitor/status-bar”: “^5.0.0”,
@ionic-native/nfc”: “^5.36.0”,
“phonegap-nfc”: “^1.2.0”,

FATAL EXCEPTION: main
Process: com.realornot.app, PID: 16105
java.lang.RuntimeException: Unable to resume activity {com.realornot.app/com.realornot.app.MainActivity}: java.lang.IllegalArgumentException: com.realornot.app: Targeting S+ (version 31 and above) requires that one of FLAG_IMMUTABLE or FLAG_MUTABLE be specified when creating a PendingIntent.
Strongly consider using FLAG_IMMUTABLE, only use FLAG_MUTABLE if some functionality depends on the PendingIntent being mutable, e.g. if it needs to be used with inline replies or bubbles.
at android.app.ActivityThread.performResumeActivity(ActivityThread.java:4773)
at android.app.ActivityThread.handleResumeActivity(ActivityThread.java:4806)
at android.app.servertransaction.ResumeActivityItem.execute(ResumeActivityItem.java:54)
at android.app.servertransaction.ActivityTransactionItem.execute(ActivityTransactionItem.java:45)
at android.app.servertransaction.TransactionExecutor.executeLifecycleState(TransactionExecutor.java:176)
at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:97)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2307)
at android.os.Handler.dispatchMessage(Handler.java:106)
at android.os.Looper.loopOnce(Looper.java:201)
at android.os.Looper.loop(Looper.java:288)
at android.app.ActivityThread.main(ActivityThread.java:7872)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:936)
Caused by: java.lang.IllegalArgumentException: com.realornot.app: Targeting S+ (version 31 and above) requires that one of FLAG_IMMUTABLE or FLAG_MUTABLE be specified when creating a PendingIntent.
Strongly consider using FLAG_IMMUTABLE, only use FLAG_MUTABLE if some functionality depends on the PendingIntent being mutable, e.g. if it needs to be used with inline replies or bubbles.
at android.app.PendingIntent.checkFlags(PendingIntent.java:401)
at android.app.PendingIntent.getActivityAsUser(PendingIntent.java:484)
at android.app.PendingIntent.getActivity(PendingIntent.java:470)
at android.app.PendingIntent.getActivity(PendingIntent.java:434)
at com.chariotsolutions.nfc.plugin.NfcPlugin.createPendingIntent(NfcPlugin.java:486)
at com.chariotsolutions.nfc.plugin.NfcPlugin.startNfc(NfcPlugin.java:534)
at com.chariotsolutions.nfc.plugin.NfcPlugin.onResume(NfcPlugin.java:814)
at org.apache.cordova.PluginManager.onResume(PluginManager.java:287)
at com.getcapacitor.cordova.MockCordovaWebViewImpl.handleResume(MockCordovaWebViewImpl.java:155)
at com.getcapacitor.Bridge.onResume(Bridge.java:1271)
at com.getcapacitor.BridgeActivity.onResume(BridgeActivity.java:85)
at android.app.Instrumentation.callActivityOnResume(Instrumentation.java:1564)
at android.app.Activity.performResume(Activity.java:8437)
at android.app.ActivityThread.performResumeActivity(ActivityThread.java:4763)
… 13 more

First off, please use proper code blocks.

Second, @ionic-native is dead as of 2021 being replaced by awesome-cordova-plugins. The error you are getting “requires that one of FLAG_IMMUTABLE or FLAG_MUTABLE be specified when creating a PendingIntent” is due to the plugin you are using (or version of it) being outdated and not supporting current Android SDK versions.

You probably want this plugin - NFC - Awesome Cordova Plugins.

There is also a Capacitor plugin over here - Capacitor NFC Plugin - Capawesome

1 Like

Thank you for the reply. What do I need to install PhoneGap-NFC with the Awesome Cordova plugin? I am getting an error because of PhoneGap-NFC.
Can you guide me on how to start implementing the Awesome Cordova plugin for NFC, and any tutorials or articles would be helpful?

It looks like the PhoneGap plugin hasn’t been updated since 2020 - Release 1.2.0 · chariotsolutions/phonegap-nfc · GitHub. So, you either need to fork it and fix the issues or use the Capacitor plugin (which would be the better choice).

2 Likes

Thanks for the reply.

Can I use @awesome-cordova-plugin/nfc without phonegap-nfc? Any implementation guide for @awesome-cordova-plugin/nfc would be helpful.

Are there any other Capacitor plugins available in the market for Ionic React besides capawesome capacitor because it is sponsorware for Capacitor?

Have you tried capacitor-plugins / capacitor-nfc · GitLab ?

1 Like

The @awesome-cordova-plugin project is just a wrapper around the underlying Cordova plugin. So, no, you cannot use it without the Cordova plugin itself.

Thanks for the reply. I tried this, but I am getting an error when building my app in Android Studio. Here is a snapshot of the error.

@twestrick Thanks. I am contacting the Capawesome team for a one-time sponsorship plan to use their NFC Capacitor. Any suggestions would be helpful.

@ashokmanjhu Did you find any solution? I am struggling with the same problem nfc integration in ionic react capacitor. Thanks

Yes , Later on contacted to the capawesome-team and purchased their capacitor to use it and it worked perfectly without any issues.

1 Like

Aren’t there any free options? how much should we pay ? is it one time purchase or monthly subscription?

Currently there is no free option. $15 for personal use or $50 for professional use . It is a monthly subscription.
Link - Insiders - Capawesome