Users can generate QR codes with their name & email using native Android code that automatically clears on logout/new login for security.

App.tsx

@@ -5,7 +5,10 @@ import {
   StyleSheet,
   Text,
   TouchableOpacity,
-  Alert, NativeModules
+  Alert,
+  NativeModules,
+  Image,
+  ScrollView,
 } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { useState, useEffect } from 'react';
@@ -13,6 +16,7 @@ import Login from './src/components/Login';
 import Register from './src/components/Register';
 import { authAPI } from './src/services/authAPI';
 import { networkService } from './src/services/networkService';
+
 type Screen = 'login' | 'register' | 'home';
 const { MyNativeModule } = NativeModules;
 
@@ -22,6 +26,8 @@ function App() {
   const [isInitialized, setIsInitialized] = useState(false);
   const [isOnline, setIsOnline] = useState(true);
   const [currentUser, setCurrentUser] = useState<any>(null);
+  const [qrCode, setQrCode] = useState<string | null>(null);
+  const [isGeneratingQR, setIsGeneratingQR] = useState(false);
 
   // Initialize app
   useEffect(() => {
@@ -64,6 +70,7 @@ function App() {
 
   const navigateToLogin = () => {
     setCurrentUser(null);
+    setQrCode(null); // Clear QR code when navigating to login
     setCurrentScreen('login');
   };
 
@@ -72,12 +79,14 @@ function App() {
   const navigateToHome = async () => {
     const user = await authAPI.getCurrentUser();
     setCurrentUser(user);
+    setQrCode(null); // Clear old QR code when new user logs in
     setCurrentScreen('home');
   };
 
   const handleLogout = async () => {
     try {
       await authAPI.logout();
+      setQrCode(null); // Clear QR code on logout
       navigateToLogin();
       Alert.alert('Success', 'Logged out successfully');
     } catch (error) {
@@ -102,6 +111,26 @@ Logged In: ${status.authentication.isLoggedIn ? 'Yes' : 'No'}
     }
   };
 
+  const generateQRCode = async () => {
+    if (!currentUser?.email) {
+      Alert.alert('Error', 'No user email available');
+      return;
+    }
+
+    setIsGeneratingQR(true);
+    try {
+      const qrData = `User: ${currentUser.fullName}\nEmail: ${currentUser.email}`;
+      const base64Image = await MyNativeModule.generateQRCode(qrData, 300, 300);
+      setQrCode(base64Image);
+      Alert.alert('Success', 'QR Code generated successfully!');
+    } catch (error) {
+      console.error('QR Code generation error:', error);
+      Alert.alert('Error', 'Failed to generate QR code');
+    } finally {
+      setIsGeneratingQR(false);
+    }
+  };
+
   const renderScreen = () => {
     switch (currentScreen) {
       case 'login':
@@ -120,7 +149,7 @@ Logged In: ${status.authentication.isLoggedIn ? 'Yes' : 'No'}
         );
       case 'home':
         return (
-          <View style={styles.homeContainer}>
+          <ScrollView style={styles.homeContainer} contentContainerStyle={styles.scrollContent}>
             <View style={styles.statusBar}>
               <Text style={styles.statusText}>
                 {isOnline ? '🟢 Online' : '🔴 Offline'}
@@ -135,7 +164,27 @@ Logged In: ${status.authentication.isLoggedIn ? 'Yes' : 'No'}
               {currentUser?.email}
             </Text>
 
+            {qrCode && (
+              <View style={styles.qrContainer}>
+                <Text style={styles.qrLabel}>Your QR Code:</Text>
+                <Image
+                  source={{ uri: qrCode }}
+                  style={styles.qrImage}
+                />
+              </View>
+            )}
+
             <View style={styles.buttonContainer}>
+              <TouchableOpacity
+                style={styles.qrButton}
+                onPress={generateQRCode}
+                disabled={isGeneratingQR}
+              >
+                <Text style={styles.buttonText}>
+                  {isGeneratingQR ? 'Generating...' : 'Generate QR Code'}
+                </Text>
+              </TouchableOpacity>
+
               <TouchableOpacity style={styles.statusButton} onPress={showAppStatus}>
                 <Text style={styles.buttonText}>App Status</Text>
               </TouchableOpacity>
@@ -150,7 +199,7 @@ Logged In: ${status.authentication.isLoggedIn ? 'Yes' : 'No'}
                 ? 'Your data is synced with the cloud'
                 : 'Working offline - data saved locally'}
             </Text>
-          </View>
+          </ScrollView>
         );
       default:
         return null;
@@ -191,10 +240,14 @@ const styles = StyleSheet.create({
   },
   homeContainer: {
     flex: 1,
+    backgroundColor: '#f0f0f0',
+  },
+  scrollContent: {
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#f0f0f0',
+    paddingHorizontal: 20,
-    padding: 20,
+    paddingBottom: 50,
+    minHeight: '100%',
   },
   statusBar: {
     position: 'absolute',
@@ -209,6 +262,7 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.1,
     shadowRadius: 4,
     elevation: 3,
+    zIndex: 10,
   },
   statusText: {
     fontSize: 12,
@@ -220,28 +274,62 @@ const styles = StyleSheet.create({
     color: '#333',
     marginBottom: 8,
     textAlign: 'center',
+    marginTop: 40,
   },
   emailText: {
     fontSize: 16,
     color: '#666',
-    marginBottom: 40,
+    marginBottom: 30,
+  },
+  qrContainer: {
+    alignItems: 'center',
+    marginBottom: 30,
+    backgroundColor: 'white',
+    padding: 20,
+    borderRadius: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  qrLabel: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 12,
+  },
+  qrImage: {
+    width: 300,
+    height: 300,
+    borderRadius: 8,
   },
   buttonContainer: {
-    flexDirection: 'row',
+    flexDirection: 'column',
-    gap: 15,
+    gap: 12,
     marginBottom: 30,
+    width: '100%',
+  },
+  qrButton: {
+    backgroundColor: '#10b981',
+    paddingHorizontal: 20,
+    paddingVertical: 14,
+    borderRadius: 25,
+    alignItems: 'center',
   },
   statusButton: {
     backgroundColor: '#3bb6d8',
     paddingHorizontal: 20,
-    paddingVertical: 12,
+    paddingVertical: 14,
     borderRadius: 25,
+    alignItems: 'center',
   },
   logoutButton: {
     backgroundColor: '#ff6b6b',
     paddingHorizontal: 20,
-    paddingVertical: 12,
+    paddingVertical: 14,
     borderRadius: 25,
+    alignItems: 'center',
   },
   buttonText: {
     color: 'white',

android/app/build.gradle

@@ -72,6 +72,11 @@ def enableProguardInReleaseBuilds = false
  */
 def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
 
+repositories {
+    google()
+    mavenCentral()
+}
+
 android {
     ndkVersion rootProject.ext.ndkVersion
     buildToolsVersion rootProject.ext.buildToolsVersion
@@ -116,4 +121,7 @@ dependencies {
     } else {
         implementation jscFlavor
     }
+
+    // QR Code generation
+    implementation 'com.google.zxing:core:3.5.1'
 }

android/app/src/main/java/com/lynkeduppro/MyNativeModule.kt

@@ -4,6 +4,12 @@ import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReactContextBaseJavaModule
 import com.facebook.react.bridge.ReactMethod
 import com.facebook.react.bridge.Promise
+import android.graphics.Bitmap
+import android.graphics.Color
+import android.util.Base64
+import java.io.ByteArrayOutputStream
+import java.nio.charset.StandardCharsets
+import java.security.MessageDigest
 
 class MyNativeModule(private val reactContext: ReactApplicationContext)
     : ReactContextBaseJavaModule(reactContext) {
@@ -16,4 +22,36 @@ class MyNativeModule(private val reactContext: ReactApplicationContext)
     fun greet(name: String, promise: Promise) {
         promise.resolve("Hello $name from Android(Kotlin)!")
     }
+
+    @ReactMethod
+    fun generateQRCode(data: String, width: Int, height: Int, promise: Promise) {
+        try {
+            val bitmap = createQRCodeBitmap(data, width, height)
+            val base64Image = bitmapToBase64(bitmap)
+            promise.resolve(base64Image)
+        } catch (e: Exception) {
+            promise.reject("QR_CODE_ERROR", "Failed to generate QR code: ${e.message}")
+        }
+    }
+
+    private fun createQRCodeBitmap(data: String, width: Int, height: Int): Bitmap {
+        // Use ZXing library for QR code generation
+        val qrCodeWriter = com.google.zxing.qrcode.QRCodeWriter()
+        val bitMatrix = qrCodeWriter.encode(data, com.google.zxing.BarcodeFormat.QR_CODE, width, height)
+        
+        val bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565)
+        for (y in 0 until height) {
+            for (x in 0 until width) {
+                bitmap.setPixel(x, y, if (bitMatrix[x, y]) Color.BLACK else Color.WHITE)
+            }
+        }
+        return bitmap
+    }
+
+    private fun bitmapToBase64(bitmap: Bitmap): String {
+        val outputStream = ByteArrayOutputStream()
+        bitmap.compress(Bitmap.CompressFormat.PNG, 100, outputStream)
+        val byteArray = outputStream.toByteArray()
+        return "data:image/png;base64," + Base64.encodeToString(byteArray, Base64.DEFAULT)
+    }
 }