Screens & Navigation

app/
├── _layout.tsx              # Root layout (providers, auth check)
├── index.tsx                # Splash screen
│
├── (auth)/                  # Auth group (unauthenticated users)
│   ├── _layout.tsx         # Auth layout
│   ├── welcome.tsx         # Welcome/onboarding
│   ├── login.tsx           # Login screen
│   ├── register.tsx        # Registration
│   ├── forgot-password.tsx # Password reset
│   └── biometric-setup.tsx # Biometric configuration
│
├── (tabs)/                  # Main dashboard (authenticated)
│   ├── _layout.tsx         # Tab bar layout
│   ├── home.tsx            # Dashboard home
│   ├── cards.tsx           # Cards list
│   ├── scan.tsx            # QR scanner (center FAB)
│   ├── wallet.tsx          # Wallet & transactions
│   └── profile.tsx         # User profile
│
├── payment/                 # Payment flows
│   ├── send.tsx            # Send money
│   ├── receive.tsx         # Receive (QR generation)
│   ├── topup.tsx           # Top-up wallet
│   ├── qr-pay.tsx          # QR payment
│   ├── request.tsx         # Payment requests
│   ├── scheduled.tsx       # Scheduled payments
│   ├── transaction.tsx     # Transaction details
│   └── success.tsx         # Payment success
│
├── identity/                # KYC flows
│   ├── index.tsx           # KYC status
│   ├── documents.tsx       # Document upload
│   ├── selfie.tsx          # Selfie capture
│   ├── address.tsx         # Address verification
│   └── status.tsx          # Verification status
│
├── settings/                # Settings screens (10+)
│   ├── index.tsx           # Settings menu
│   ├── personal.tsx        # Personal info
│   ├── security.tsx        # Security settings
│   ├── notifications.tsx   # Notification prefs
│   ├── language.tsx        # Language selection
│   ├── currency.tsx        # Currency selection
│   ├── limits.tsx          # Spending limits
│   ├── devices.tsx         # Connected devices
│   ├── 2fa.tsx             # Two-factor auth
│   └── payment-methods.tsx # Payment methods
│
├── loyalty/                 # Loyalty program
│   ├── cashback.tsx        # Cashback history
│   ├── challenges.tsx      # Active challenges
│   └── history.tsx         # Points history
│
├── support/                 # Support center
│   ├── help.tsx            # Help center
│   ├── faq.tsx             # FAQ
│   ├── contact.tsx         # Contact form
│   └── tickets.tsx         # Support tickets
│
├── legal/                   # Legal pages
│   ├── terms.tsx           # Terms of service
│   ├── privacy.tsx         # Privacy policy
│   └── licenses.tsx        # Open source licenses
│
├── card-details.tsx         # Single card details
├── kyc.tsx                  # KYC entry point
└── notifications.tsx        # Notifications list

export default function LoginScreen() {
  const { login, loginDemo, biometricEnabled } = useAuthStore();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleBiometricLogin = async () => {
    const result = await LocalAuthentication.authenticateAsync({
      promptMessage: 'Authenticate to login',
      fallbackLabel: 'Use password',
    });

    if (result.success) {
      // Retrieve stored credentials and login
      const credentials = await SecureStore.getItemAsync('credentials');
      if (credentials) {
        const { email, password } = JSON.parse(credentials);
        await login(email, password);
      }
    }
  };

  return (
    <View style={styles.container}>
      <TextInput
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
      />
      <TextInput
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />

      <Button title="Login" onPress={() => login(email, password)} />

      {biometricEnabled && (
        <Button
          title="Use Face ID"
          onPress={handleBiometricLogin}
          icon={<FaceId />}
        />
      )}

      <Button
        title="Demo Mode"
        onPress={loginDemo}
        variant="outline"
      />
    </View>
  );
}

import { Tabs } from 'expo-router';

export default function TabsLayout() {
  return (
    <Tabs
      screenOptions={{
        tabBarStyle: {
          backgroundColor: '#0f172a',
          borderTopColor: 'rgba(255,255,255,0.1)',
        },
        tabBarActiveTintColor: '#06b6d4',
        tabBarInactiveTintColor: '#64748b',
      }}
    >
      <Tabs.Screen
        name="home"
        options={{
          title: 'Home',
          tabBarIcon: ({ color }) => <Home color={color} />,
        }}
      />
      <Tabs.Screen
        name="cards"
        options={{
          title: 'Cards',
          tabBarIcon: ({ color }) => <CreditCard color={color} />,
        }}
      />
      <Tabs.Screen
        name="scan"
        options={{
          title: '',
          tabBarIcon: () => (
            <View style={styles.fabButton}>
              <Scan color="white" size={24} />
            </View>
          ),
        }}
      />
      <Tabs.Screen
        name="wallet"
        options={{
          title: 'Wallet',
          tabBarIcon: ({ color }) => <Wallet color={color} />,
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: 'Profile',
          tabBarIcon: ({ color }) => <User color={color} />,
        }}
      />
    </Tabs>
  );
}