Enhance app configuration and EAS build profiles

- Updated app.config.js to include dynamic display names and release stages based on EAS build profiles.
- Added NonProductionBanner component to App for better visibility of build status.
- Modified eas.json to define channels for development, preview, and production builds.
- Introduced new EAS build script for development-simulator in package.json.
- Enhanced AboutScreen to display build labels based on the current release stage.

Author: CodeByMAB

App.tsx

@@ -4,11 +4,13 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { AuthProvider } from './src/context/AuthContext';
 import { WalletProvider } from './src/context/WalletContext';
 import { SettingsProvider } from './src/context/SettingsContext';
+import { NonProductionBanner } from './src/components/common/NonProductionBanner';
 import RootNavigator from './src/navigation/RootNavigator';
 
 export default function App() {
   return (
     <SafeAreaProvider>
+      <NonProductionBanner />
       <AuthProvider>
         <SettingsProvider>
           <WalletProvider>

app.config.js

@@ -2,15 +2,37 @@
  * Dynamic Expo config: injects Breez API key from the environment at build/start time.
  * EAS: set `BREEZ_API_KEY` as a secret. Local dev: use `EXPO_PUBLIC_BREEZ_API_KEY` in `.env`
  * or export `BREEZ_API_KEY` before `npx expo start`.
+ *
+ * EAS sets `EAS_BUILD_PROFILE` during cloud builds — used to label non-production installs
+ * (home screen name, in-app banner, About).
  */
 const appJson = require('./app.json');
 
+const easProfile = process.env.EAS_BUILD_PROFILE;
+
+function displayName(base) {
+  if (easProfile === 'development') return `${base} (Dev)`;
+  if (easProfile === 'preview') return `${base} (Preview)`;
+  return base;
+}
+
+/** @type {'development' | 'preview' | 'production' | undefined} */
+function releaseStage() {
+  if (easProfile === 'development' || easProfile === 'preview' || easProfile === 'production') {
+    return easProfile;
+  }
+  return undefined;
+}
+
 module.exports = {
   expo: {
     ...appJson.expo,
+    name: displayName(appJson.expo.name),
     extra: {
       ...(appJson.expo?.extra ?? {}),
       breezApiKey: process.env.BREEZ_API_KEY || process.env.EXPO_PUBLIC_BREEZ_API_KEY || '',
+      releaseStage: releaseStage(),
+      easBuildProfile: easProfile ?? null,
     },
   },
 };

eas.json

@@ -3,17 +3,28 @@
     "development": {
       "developmentClient": true,
       "distribution": "internal",
+      "channel": "development",
+      "ios": {
+        "simulator": false
+      }
+    },
+    "development-simulator": {
+      "developmentClient": true,
+      "distribution": "internal",
+      "channel": "development",
       "ios": {
         "simulator": true
       }
     },
     "preview": {
       "distribution": "internal",
+      "channel": "preview",
       "ios": {
         "simulator": false
       }
     },
     "production": {
+      "channel": "production",
       "ios": {
         "buildConfiguration": "Release"
       },

package.json

@@ -14,6 +14,7 @@
     "test:e2e": "bash scripts/qa-e2e-maestro.sh",
     "generate:app-icon": "node scripts/generate-app-icon.cjs",
     "eas:build:dev:ios": "npx --yes eas-cli build --profile development --platform ios",
+    "eas:build:dev:ios:sim": "npx --yes eas-cli build --profile development-simulator --platform ios",
     "eas:build:dev:android": "npx --yes eas-cli build --profile development --platform android",
     "eas:build:preview:ios": "npx --yes eas-cli build --profile preview --platform ios",
     "eas:build:preview:android": "npx --yes eas-cli build --profile preview --platform android",

src/components/common/NonProductionBanner.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import Constants from 'expo-constants';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { colors } from '@theme/colors';
+
+const stage = Constants.expoConfig?.extra?.releaseStage as string | undefined;
+
+export function NonProductionBanner() {
+  const insets = useSafeAreaInsets();
+  if (stage !== 'development' && stage !== 'preview') {
+    return null;
+  }
+  const label = stage === 'preview' ? 'Preview build — not for production use' : 'Development build — not for production use';
+  return (
+    <View style={[styles.bar, { paddingTop: insets.top }]}>
+      <Text style={styles.text}>{label}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    backgroundColor: colors.warningMuted,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.warning,
+    paddingBottom: 8,
+    paddingHorizontal: 12,
+  },
+  text: {
+    color: colors.warning,
+    fontSize: 12,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+});

src/screens/settings/AboutScreen.tsx

@@ -34,6 +34,13 @@ export function AboutScreen() {
   const { height: tipHeight, loading: tipLoading } = useMainnetTipHeight();
 
   const appVersion = Constants.expoConfig?.version ?? '—';
+  const releaseStage = Constants.expoConfig?.extra?.releaseStage as string | undefined;
+  const buildLabel =
+    releaseStage === 'development'
+      ? 'Development'
+      : releaseStage === 'preview'
+        ? 'Preview'
+        : null;
   const blockHeightLabel = tipLoading
     ? '…'
     : tipHeight != null
@@ -62,6 +69,18 @@ export function AboutScreen() {
             </View>
             <Text style={styles.rowValue}>{appVersion}</Text>
           </View>
+          {buildLabel != null ? (
+            <>
+              <View style={styles.separator} />
+              <View style={styles.row}>
+                <View style={styles.rowLeft}>
+                  <Ionicons name="hammer-outline" size={20} color={colors.warning} />
+                  <Text style={styles.rowLabel}>Build</Text>
+                </View>
+                <Text style={[styles.rowValue, styles.rowValueWarning]}>{buildLabel}</Text>
+              </View>
+            </>
+          ) : null}
           <View style={styles.separator} />
           <View style={styles.row}>
             <View style={styles.rowLeft}>
@@ -173,6 +192,10 @@ const styles = StyleSheet.create({
     fontSize: 14,
     color: colors.textTertiary,
   },
+  rowValueWarning: {
+    color: colors.warning,
+    fontWeight: '600',
+  },
   separator: {
     height: 1,
     backgroundColor: colors.border,