header QR scan and add wallet andriod

App.tsx

@@ -1,4 +1,5 @@
 import { StyleSheet, View, ActivityIndicator } from 'react-native'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
 import { StatusBar } from 'expo-status-bar'
 import React, { useEffect, useState } from 'react'
 import { PaperProvider } from 'react-native-paper'
@@ -9,7 +10,7 @@ import SubWalletScreen from './screens/SubWalletScreen'
 import { useWalletStore } from './store/walletStore'
 import { walletManager } from './services/WalletManager'
 import { StorageService } from './services/StorageService'
-import { Text } from 'react-native-paper'
+
 
 export default function App() {
   const isConnected = useWalletStore((state) => state.isConnected)
@@ -19,42 +20,45 @@ export default function App() {
   const [initializing, setInitializing] = useState(true)
 
   useEffect(() => {
-    initWallet()
-  }, [])
-
-  const initWallet = async () => {
-    try {
-      const savedUri = await StorageService.load<string>('master_nwc_uri')
-      if (savedUri) {
-        await walletManager.connect(savedUri)
-        const wallets = walletManager.listWallets()
-        setSubWallets(wallets)
-        setConnected(true)
+    const initWallet = async () => {
+      try {
+        const savedUri = await StorageService.load<string>('master_nwc_uri')
+        if (savedUri) {
+          await walletManager.connect(savedUri)
+          const wallets = walletManager.listWallets()
+          setSubWallets(wallets)
+          setConnected(true)
+        }
+      } catch (error) {
+      } finally {
+        setInitializing(false)
       }
-    } catch (error) {
-    } finally {
-      setInitializing(false)
     }
-  }
+    initWallet()
+  }, [])
 
   if (initializing) {
     return (
-      <PaperProvider theme={ElectricWaspTheme}>
-        <View style={styles.loadingContainer}>
-          <ActivityIndicator size="large" color="#FFD700" />
-          <StatusBar style="light" />
-        </View>
-      </PaperProvider>
+      <SafeAreaProvider>
+        <PaperProvider theme={ElectricWaspTheme}>
+          <View style={styles.loadingContainer}>
+            <ActivityIndicator size="large" color="#FFD700" />
+            <StatusBar style="light" />
+          </View>
+        </PaperProvider>
+      </SafeAreaProvider>
     )
   }
 
   return (
-    <PaperProvider theme={ElectricWaspTheme}>
-      <View style={styles.container}>
-        {!isConnected ? <ConnectScreen /> : (selectedWalletId ? <SubWalletScreen /> : <Dashboard />)}
-        <StatusBar style="light" />
-      </View>
-    </PaperProvider>
+    <SafeAreaProvider>
+      <PaperProvider theme={ElectricWaspTheme}>
+        <View style={styles.container}>
+          {!isConnected ? <ConnectScreen /> : (selectedWalletId ? <SubWalletScreen /> : <Dashboard />)}
+          <StatusBar style="light" />
+        </View>
+      </PaperProvider>
+    </SafeAreaProvider>
   )
 }
 

components/QRScanner.tsx

@@ -6,9 +6,10 @@ import { Button, Text, IconButton } from 'react-native-paper'
 interface QRScannerProps {
     onScan: (data: string) => void
     onClose: () => void
+    title?: string
 }
 
-export default function QRScanner({ onScan, onClose }: QRScannerProps) {
+export default function QRScanner({ onScan, onClose, title = 'Scan Lightning Invoice' }: QRScannerProps) {
     const [permission, requestPermission] = useCameraPermissions()
     const [scanned, setScanned] = useState(false)
 
@@ -50,7 +51,7 @@ export default function QRScanner({ onScan, onClose }: QRScannerProps) {
             >
                 <View style={styles.overlay}>
                     <View style={styles.header}>
-                        <Text style={styles.title}>Scan Lightning Invoice</Text>
+                        <Text style={styles.title}>{title}</Text>
                         <IconButton icon="close" iconColor="#fff" onPress={onClose} />
                     </View>
                     <View style={styles.scannerTarget}>

screens/ConnectScreen.tsx

@@ -45,7 +45,7 @@ export default function ConnectScreen() {
     }
 
     if (scannerVisible) {
-        return <QRScanner onScan={handleScan} onClose={() => setScannerVisible(false)} />
+        return <QRScanner onScan={handleScan} onClose={() => setScannerVisible(false)} title="Scan NWC Connection" />
     }
 
     return (

screens/Dashboard.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
-import { View, StyleSheet, ScrollView, Alert } from 'react-native'
+import { View, StyleSheet, ScrollView, Alert, Platform } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Text, Card, IconButton, FAB, Menu } from 'react-native-paper'
 import { useWalletStore } from '../store/walletStore'
 import { walletManager } from '../services/WalletManager'
@@ -12,6 +13,7 @@ import { Eye, EyeOff } from 'lucide-react-native'
 
 export default function Dashboard() {
     const [modalVisible, setModalVisible] = useState(false)
+    const insets = useSafeAreaInsets()
     const [menuVisible, setMenuVisible] = useState<string | null>(null)
 
     const subWallets = useWalletStore((state) => state.subWallets)
@@ -270,7 +272,7 @@ export default function Dashboard() {
             {/* FAB */}
             <FAB
                 icon="plus"
-                style={styles.fab}
+                style={[styles.fab, { marginBottom: (Platform.OS === 'android' ? 16 : 0) + insets.bottom }]}
                 onPress={handleCreateWallet}
                 color="#000000"
             />

screens/SubWalletScreen.tsx

@@ -142,7 +142,7 @@ export default function SubWalletScreen() {
     if (!wallet) return null
 
     if (scannerVisible) {
-        return <QRScanner onScan={handleScan} onClose={() => setScannerVisible(false)} />
+        return <QRScanner onScan={handleScan} onClose={() => setScannerVisible(false)} title="Scan Lightning Invoice" />
     }
 
     return (