React Native

Integration time — 9 minutes.

GitHub - Tangem Card SDK React Native

Requirements

iOS

iOS 13+ (CoreNFC is required), Xcode 12.5.1+ SDK can be imported to a project with target version iOS 11, but it will be able to work only from iOS 13.

Android

Android with minimal SDK version of 21 and a device with NFC support.

Installation

npm install tangem-sdk-react-native-new

Android Notes

Add the following intent filters and metadata tag to your app AndroidManifest.xml

<intent-filter>
    <action android:name="android.nfc.action.NDEF_DISCOVERED"/>
    <category android:name="android.intent.category.DEFAULT"/>
</intent-filter>

<intent-filter>
    <action android:name="android.nfc.action.TECH_DISCOVERED"/>
</intent-filter>

<meta-data android:name="android.nfc.action.TECH_DISCOVERED" android:resource="@xml/nfc_tech_filter" />

Create the file android/src/main/res/xml/nfc_tech_filter.xml and add the following content:

<resources>
   <tech-list>
       <tech>android.nfc.tech.IsoDep</tech>
       <tech>android.nfc.tech.Ndef</tech>
       <tech>android.nfc.tech.NfcV</tech>
   </tech-list>
</resources>

Example AndroidManifest.xml

iOS Notes

1. Add Swift Header Search Path to your app by following this steps:

   • Open ios/YourAppName.xcodeproj in Xcode

   • Right-click on Your App Name in the Project Navigator on the left, and click New File…

   • Create a single empty Swift file to the project (make sure that Your App Name target is selected when adding)

   • When Xcode asks, press Create Bridging Header and do not remove Swift file then.

2. As React Native trying to link against an older Swift runtime while targeting a newer version of the OS. We need to remove swift linking from our project to be able to compile the SDK. apply below changes on your IOS project file (project.pbxproj)

   LIBRARY_SEARCH_PATHS = (
      "\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"",
   -  "\"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)\"",
      "\"$(inherited)\"",
    );

3. Configure your app to detect NFC tags. Turn on Near Field Communication Tag Reading under the Capabilities tab for the project’s target (see Add a capability to a target).

4. Add the NFCReaderUsageDescription key as a string item to the Info.plist file. For the value, enter a string that describes the reason the app needs access to the device’s NFC reader:

   <key>NFCReaderUsageDescription</key>
   <string>Some reason</string>

5. In the Info.plist file, add the list of the application identifiers supported in your app to the ISO7816 Select Identifiers (AIDs) information property list key. The AIDs of Tangem cards are: A000000812010208 and D2760000850101.

   <key>com.apple.developer.nfc.readersession.iso7816.select-identifiers</key>
   <array>
       <string>A000000812010208</string>
       <string>D2760000850101</string>
   </array>

6. To prevent customers from installing apps on a device that does not support the NFC capability, add the following to the Info.plist code (Optional):

<key>UIRequiredDeviceCapabilities</key>
<array>
    <string>nfc</string>
</array>

Next steps:

pageScan cardpageSign data