feat: add About screen in Settings to display app version/build metadata, fix version reporting, and update navigation

Lalit Sharma · Lalit Sharma · commit edc89e746b71 · 2026-02-27T18:03:18.000Z
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.50] — 2026-02-27
+
+### Added
+- Added a new `About` screen in Settings that displays app version/build metadata in the UI (`App Version`, `Build`, `Configured Version`, and `Runtime Version`).
+
+### Fixed
+- Fixed Android app version reporting mismatch by sourcing native `versionName` from `apps/mobile/package.json` in app Gradle config instead of using a hardcoded value.
+
+### Changed
+- Added Settings navigation/linking support for the new `About` route (`settings/about`).
+- Bumped `apps/mobile` version to `1.1.50`.
+
 ## [1.1.49] — 2026-02-27
 
 ### Fixed
diff --git a/apps/mobile/android/app/build.gradle b/apps/mobile/android/app/build.gradle
@@ -1,8 +1,11 @@
 apply plugin: "com.android.application"
 apply plugin: "org.jetbrains.kotlin.android"
 apply plugin: "com.facebook.react"
+import groovy.json.JsonSlurper
 
 def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
+def mobilePackageJson = new JsonSlurper().parse(file("../../package.json"))
+def mobileVersionName = (mobilePackageJson.version ?: "1.0.0").toString()
 
 /**
  * This is the configuration block to customize your React Native Android app.
@@ -120,7 +123,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 3
-        versionName "1.0.0"
+        versionName mobileVersionName
 
         buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
         manifestPlaceholders += [GOOGLE_MAPS_ANDROID_API_KEY: googleMapsAndroidApiKey]
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-timer/mobile",
-  "version": "1.1.49",
+  "version": "1.1.50",
   "private": true,
   "main": "index.js",
   "scripts": {
diff --git a/apps/mobile/src/navigation/RootNavigator.tsx b/apps/mobile/src/navigation/RootNavigator.tsx
@@ -43,6 +43,7 @@ import { useLandingEclipses } from "../hooks/useLandingEclipses";
 import { useLandingScroll } from "../hooks/useLandingScroll";
 import { useNotificationScheduler } from "../hooks/useNotificationScheduler";
 import { useTimerState } from "../hooks/useTimerState";
+import AboutScreen from "../screens/AboutScreen";
 import EclipsePreviewScreen, { type PreviewPayload } from "../screens/EclipsePreviewScreen";
 import HelpScreen from "../screens/HelpScreen";
 import LandingScreen from "../screens/LandingScreen";
@@ -79,6 +80,7 @@ type RootStackParamList = {
   Preview: { payload: PreviewPayload };
   PhotographyGuide: { payload: PhotographyGuidePayload };
   Settings: undefined;
+  About: undefined;
   Help: undefined;
   ThemeSettings: undefined;
   NotificationSettings: undefined;
@@ -93,6 +95,7 @@ const linking: LinkingOptions<RootStackParamList> = {
       Timer: "timer",
       PhotographyGuide: "photography-guide",
       Settings: "settings",
+      About: "settings/about",
       Help: "settings/help",
       ThemeSettings: "settings/theme",
       NotificationSettings: "notifications",
@@ -192,6 +195,7 @@ function toMenuRouteName(route: keyof RootStackParamList): MenuRouteName | null
   if (route === "Timer" || route === "PhotographyGuide") return "Timer";
   if (
     route === "Settings" ||
+    route === "About" ||
     route === "Help" ||
     route === "ThemeSettings" ||
     route === "NotificationSettings" ||
@@ -553,6 +557,7 @@ function SettingsRoute({ navigation, onOpenMenu }: SettingsRouteProps) {
   return (
     <SettingsScreen
       onOpenMenu={onOpenMenu}
+      onOpenAbout={() => navigation.navigate("About")}
       onOpenHelp={() => navigation.navigate("Help")}
       onOpenThemeSettings={() => navigation.navigate("ThemeSettings")}
       onOpenNotificationSettings={() => navigation.navigate("NotificationSettings")}
@@ -565,6 +570,10 @@ function HelpRoute({ onOpenMenu }: RouteWithMenuProps) {
   return <HelpScreen onOpenMenu={onOpenMenu} />;
 }
 
+function AboutRoute({ onOpenMenu }: RouteWithMenuProps) {
+  return <AboutScreen onOpenMenu={onOpenMenu} />;
+}
+
 function ThemeSettingsRoute({ onOpenMenu }: ThemeSettingsRouteProps) {
   const { state, actions } = useAppState();
 
@@ -1010,6 +1019,7 @@ export default function RootNavigator() {
           <Stack.Screen name="Settings">
             {(props) => <SettingsRoute {...props} onOpenMenu={openMenu} />}
           </Stack.Screen>
+          <Stack.Screen name="About">{() => <AboutRoute onOpenMenu={openMenu} />}</Stack.Screen>
           <Stack.Screen name="Help">{() => <HelpRoute onOpenMenu={openMenu} />}</Stack.Screen>
           <Stack.Screen name="ThemeSettings">
             {(props) => <ThemeSettingsRoute {...props} onOpenMenu={openMenu} />}
diff --git a/apps/mobile/src/screens/AboutScreen.tsx b/apps/mobile/src/screens/AboutScreen.tsx
@@ -0,0 +1,128 @@
+import Constants from "expo-constants";
+import { useMemo } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+import BurgerButton from "../components/BurgerButton";
+import { useAppTheme } from "../theme/useAppTheme";
+
+type AboutScreenProps = {
+  onOpenMenu: () => void;
+};
+
+type VersionRowProps = {
+  label: string;
+  value: string;
+};
+
+function VersionRow({ label, value }: VersionRowProps) {
+  const { colors } = useAppTheme();
+  const styles = useMemo(() => createStyles(colors), [colors]);
+
+  return (
+    <View style={styles.row}>
+      <Text style={styles.rowLabel}>{label}</Text>
+      <Text style={styles.rowValue}>{value}</Text>
+    </View>
+  );
+}
+
+function coerceVersionValue(value: unknown): string {
+  if (typeof value === "string" && value.trim().length > 0) return value;
+  if (typeof value === "number" && Number.isFinite(value)) return String(value);
+  return "Unavailable";
+}
+
+export default function AboutScreen({ onOpenMenu }: AboutScreenProps) {
+  const { colors } = useAppTheme();
+  const styles = useMemo(() => createStyles(colors), [colors]);
+
+  const appVersion = coerceVersionValue(Constants.nativeAppVersion);
+  const buildVersion = coerceVersionValue(Constants.nativeBuildVersion);
+  const configuredVersion = coerceVersionValue(Constants.expoConfig?.version);
+  const runtimeVersion = coerceVersionValue(Constants.expoConfig?.runtimeVersion);
+
+  return (
+    <SafeAreaView style={styles.safe} edges={["top", "left", "right", "bottom"]}>
+      <View style={styles.headerRow}>
+        <BurgerButton onPress={onOpenMenu} />
+        <View style={styles.headerMeta}>
+          <Text style={styles.title} accessibilityRole="header">
+            About
+          </Text>
+          <Text style={styles.subtitle}>Build and version information for this app.</Text>
+        </View>
+      </View>
+
+      <View style={styles.content}>
+        <View style={styles.card}>
+          <VersionRow label="App Version" value={appVersion} />
+          <VersionRow label="Build" value={buildVersion} />
+          <VersionRow label="Configured Version" value={configuredVersion} />
+          <VersionRow label="Runtime Version" value={runtimeVersion} />
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+function createStyles(colors: ReturnType<typeof useAppTheme>["colors"]) {
+  return StyleSheet.create({
+    safe: {
+      flex: 1,
+      backgroundColor: colors.background,
+    },
+    headerRow: {
+      paddingHorizontal: 12,
+      paddingTop: 8,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 10,
+    },
+    headerMeta: {
+      flex: 1,
+      gap: 2,
+    },
+    title: {
+      color: colors.textPrimary,
+      fontSize: 21,
+      fontWeight: "800",
+    },
+    subtitle: {
+      color: colors.textMuted,
+      fontSize: 12,
+      lineHeight: 17,
+    },
+    content: {
+      paddingHorizontal: 12,
+      paddingTop: 14,
+      gap: 12,
+    },
+    card: {
+      borderRadius: 12,
+      borderWidth: 1,
+      borderColor: colors.border,
+      backgroundColor: colors.surface,
+      paddingVertical: 12,
+      paddingHorizontal: 12,
+      gap: 10,
+    },
+    row: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: 10,
+    },
+    rowLabel: {
+      flex: 1,
+      color: colors.textMuted,
+      fontSize: 12,
+      fontWeight: "600",
+    },
+    rowValue: {
+      color: colors.textPrimary,
+      fontSize: 13,
+      fontWeight: "700",
+    },
+  });
+}
diff --git a/apps/mobile/src/screens/SettingsScreen.tsx b/apps/mobile/src/screens/SettingsScreen.tsx
@@ -11,6 +11,7 @@ type SettingsScreenProps = {
   onOpenLocationSettings: () => void;
   onOpenThemeSettings: () => void;
   onOpenHelp: () => void;
+  onOpenAbout: () => void;
 };
 
 type SettingsActionCardProps = {
@@ -43,6 +44,7 @@ export default function SettingsScreen({
   onOpenLocationSettings,
   onOpenThemeSettings,
   onOpenHelp,
+  onOpenAbout,
 }: SettingsScreenProps) {
   const { colors } = useAppTheme();
   const styles = useMemo(() => createStyles(colors), [colors]);
@@ -80,6 +82,11 @@ export default function SettingsScreen({
           subtitle="Read quick answers, troubleshooting tips, and full docs."
           onPress={onOpenHelp}
         />
+        <SettingsActionCard
+          title="About"
+          subtitle="View app version and build details."
+          onPress={onOpenAbout}
+        />
       </View>
     </SafeAreaView>
   );

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@eclipse-timer/mobile",`
`3`		`- "version": "1.1.49",`
	`3`	`+ "version": "1.1.50",`
`4`	`4`	`"private": true,`
`5`	`5`	`"main": "index.js",`
`6`	`6`	`"scripts": {`