Example doesnt work

[mary-ng5519]

Hi folks, we love your work, please help revise your guideline and example because we evaluated the apk built from the latest sourcebase, it shows that the scanner apps cant detect any HCE-based tag, we tested on popular NFC reader apps. Refs for NFC reader apps:

1. https://play.google.com/store/apps/details?id=com.wakdev.wdnfc&hl=en&gl=US
2. https://play.google.com/store/apps/details?id=com.gonext.nfcreader&hl=en&gl=US
3. https://play.google.com/store/apps/details?id=com.nxp.taginfolite&hl=en&gl=US
4. The APK built from example sourcebase

[ghachemsaif]

Same here. My component :

import React, { useState } from "react";
import { Modal, StyleSheet, Text, Pressable, View,TouchableOpacity } from "react-native";
import HCESession, { NFCContentType, NFCTagType4 } from 'react-native-hce';

const Badge = (props) => {
  const [modalVisible, setModalVisible] = useState(true);
  let simulation;
  const startSimulation = async () => {
      const tag = new NFCTagType4(NFCContentType.Text, "Hello world");
      simulation = await (new HCESession(tag)).start();
  }
  const stopSimulation = async () => {
    await simulation.terminate();
  }
  return (

      <Modal
      style={{alignItems: "center",borderWidth:0}}
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}
      >
        <View style={styles.modalView}>
        <TouchableOpacity
                onPress={() => {
                   console.log('emulating'); startSimulation()
                }}
                style={
                    [styles.item,{backgroundColor : '#3264A2'}]}>
                <TouchableOpacity
                    onPress={() => {
                      stopSimulation;props.CloseBadge()
                    }}
                style={styles.alignRight}
                >
                    <Text>Annuler</Text>
                </TouchableOpacity>
                <Text style={styles.badgeName}>My Badge</Text>
            </TouchableOpacity>
        </View>
      </Modal>

  );
};

const styles = StyleSheet.create({
  item : {
    padding : 15,
    minHeight :150,
    borderRadius : 10,
     width : '100%',
     borderColor : '#3264A2',
     borderWidth : 1
 },
  title : {
      color: '#3264A2',
      fontSize : 32,

      fontFamily:'Baloo2_600SemiBold'
  },
  alignedItems : {
      justifyContent: "center",
      alignItems: "center",
      textAlign : "center",
  },
  centeredView: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      alignSelf: 'stretch',
  },
  modalView: {
      backgroundColor: "white",
      borderRadius: 20,
      padding: 35,
      paddingTop : 10,
      alignItems: "center",
      shadowColor: "#000",
      shadowOpacity: 0.25,
      shadowRadius: 4,
      elevation: 5,
      borderColor : 'transparent',
  },
  button: {
      borderRadius: 20,
      padding: 15,
      elevation: 2,
      alignSelf: 'stretch'
  },
  buttonOpen: {
      marginTop : 45,
      backgroundColor: "#3264A2",
  },
  buttonClose: {
      color: "#000",
      textDecorationLine : 'underline',
      textAlign :'right',
      alignSelf: 'flex-end',
  },
  buttonConfirm :{
      backgroundColor: "#2196F3",
      marginBottom : 15
  },
  buttonConfirmDsiabled :{
      backgroundColor: "#a2cdee",
      marginBottom : 15,
      borderRadius: 20,
      padding: 15,
      elevation: 2,
      alignSelf: 'stretch'
  },
  textStyle: {
      color: "white",
      fontWeight: "bold",
      textAlign: "center"
  },
  modalText: {
      marginBottom: 15,
      textAlign: "center",
      color :'#3264A2',
      fontSize : 24
  },
  modalTextSmall: {
      marginBottom: 15,
      textAlign: "center",
      color :'#000',
      fontSize : 16
  },
  modalContent : {
      width :300,
      elevation: 10,
      alignSelf : 'center'
  },
  badgeName : {
    fontFamily:'Baloo2_600SemiBold',
    fontSize : 22,
    color : 'white',
    textAlign :'left',
  },
  alignRight : {
      textAlign :'right',
      alignSelf: 'flex-end',
  }

});

export default Badge;

[zahhaoui]

same problem

[lucascampelo]

In my case, the example code crashes before build. (Node v14.18.2, yarn 1.22.18, Windows 10)

transform[stderr]: Could not resolve "C:\Users\campe\Projetos\oddie\react-native-hce\src\index" in file C:\Users\campe\Projetos\oddie\react-native-hce\example\src\App.tsx.
[Thu Jul 14 2022 24:18:26.821]  BUNDLE  ./index.tsx

error: Error: Unable to resolve module `@babel/runtime/helpers/interopRequireDefault` from `..\src\index.ts`: @babel/runtime/helpers/interopRequireDefault could not be found within the project.

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules: rm -rf node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
    at ModuleResolver.resolveDependency (C:\Users\campe\Projetos\oddie\react-native-hce\example\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:186:15)
    at ResolutionRequest.resolveDependency (C:\Users\campe\Projetos\oddie\react-native-hce\example\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (C:\Users\campe\Projetos\oddie\react-native-hce\example\node_modules\metro\src\node-haste\DependencyGraph.js:287:16)
    at Object.resolve (C:\Users\campe\Projetos\oddie\react-native-hce\example\node_modules\metro\src\lib\transformHelpers.js:267:42)
    at C:\Users\campe\Projetos\oddie\react-native-hce\example\node_modules\metro\src\DeltaBundler\traverseDependencies.js:434:31
    at Array.map (<anonymous>)
    at resolveDependencies (C:\Users\campe\Projetos\oddie\react-native-hce\example\node_modules\metro\src\DeltaBundler\traverseDependencies.js:431:18)
    at C:\Users\campe\Projetos\oddie\react-native-hce\example\node_modules\metro\src\DeltaBundler\traverseDependencies.js:275:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Users\campe\Projetos\oddie\react-native-hce\example\node_modules\metro\src\DeltaBundler\traverseDependencies.js:87:24)

I've already tried the four options above, but still crashes.

[appidea]

@lucascampelo The repository has been build using bob, which implements own scripts in package.json that takes care about building the example project. More informations are available in the contribution guide.

If You decided to not use the scripts, and to run the example using just npm start / yarn command from example directory, ensure that You had run install twice:

• in the example directory
• and, one level up, in the root directory of the repo (because example uses the code that exist outside the example directory too).

[alvinlu7]

To clarify, I think the issue means that the NDEF text content is not showing up in NFC scanners. I have the same issue with the apps they listed. I even implemented my own scanner in react-native-nfc-manager and it doesn't appear to be able to read the NDEF text content emulated by this package - perhaps this is some deeper issue related to Android to Android scanning as this SO post points out - @appidea mentioned that they tested it with iPhone scanning an Android in another issue so this could be some unexplored territory

[appidea]

Yes, You are right. There are some issues regarding transmission android-to-android. What could I add, I additionally have tested the transmission from Samsung Galaxy to Xiaomi phone, it worked, but only one-direction (xiaomi as a reader, samsung as host).

The problems like these seems to be outside the scope of this library code - because the low-level communication with NFC chip and it's behaviour are in the phone manufacturer's and OS responsibility. This library just bridge react native to HostApduService in Android.

[appidea]

no activity - closing...