Show NFC payload info onRead (react-native-nfc started mystically wor…

…king after nfc-ndef-react-native installation)
HSLdevcom · Jun 1, 2017 · fb7d2b5 · fb7d2b5
1 parent ad5142b
commit fb7d2b5
Showing 1 changed file with 24 additions and 4 deletions.
diff --git a/app/components/NFCTest.js b/app/components/NFCTest.js
@@ -4,23 +4,30 @@
  */
 
 import React, {Component} from 'react';
+import {Platform, StyleSheet, Text, View} from 'react-native';
 import NFC, {NfcDataType, NdefRecordType} from 'react-native-nfc';
-import {View, StyleSheet, Platform} from 'react-native';
 
 const styles = StyleSheet.create({
     container: {
         alignItems: 'center',
         flex: 1,
         justifyContent: 'center',
     },
+    text: {
+        fontSize: 20,
+        marginTop: 20,
+    },
 });
 
 class NFCTest extends Component { // eslint-disable-line react/prefer-stateless-function
+    state = {
+        payload: false,
+    };
     componentDidMount() {
         if (Platform.OS === 'android') {
-            console.log('NFC');
             NFC.addListener((payload) => {
-                console.log('payload.type: ', payload.type);
+                console.log('payload: ', payload);
+                this.setState({payload});
                 switch (payload.type) {
                 case NfcDataType.NDEF:
                     this.test(payload);
@@ -49,7 +56,20 @@ class NFCTest extends Component { // eslint-disable-line react/prefer-stateless-
         });
     }
     render() {
-        return <View style={styles.container} />;
+        const {payload} = this.state;
+        if (payload) {
+            return (
+                <View style={styles.container}>
+                    <Text style={styles.text}>ID: {payload.data.id}</Text>
+                    <Text style={styles.text}>Type: {payload.type}</Text>
+                </View>
+            );
+        }
+        return (
+            <View style={styles.container}>
+                <Text style={styles.text}>Read NFC</Text>
+            </View>
+        );
     }
 }