Files
bincio-rec/src/navigation/AppNavigator.tsx
T
Davide Scaini dd4533efd2 feat: activity detail screen with map, stats, and inline editing
Tap any saved recording to open ActivityDetailScreen:
- Full-screen MapLibre map with track fitted to bounds (LngLatBounds padding)
- Stats panel: duration, distance, avg speed, elevation gain (computed
  from track points), avg HR/power/cadence, point count
- 'Edit' button in header opens a pageSheet modal with title TextInput,
  sport grid, and subtype pills — same controls as PostRecordingScreen
- updateRecording() added to db.ts; edits update header title and sport
  summary without navigating away

SavedRecordingsScreen: tapping a card in normal mode navigates to detail;
tapping in selection mode still toggles the checkbox.
2026-06-04 00:13:53 +02:00

66 lines
2.7 KiB
TypeScript

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Text } from 'react-native';
import { RecordingScreen } from '../screens/RecordingScreen';
import { PostRecordingScreen } from '../screens/PostRecordingScreen';
import { SensorPairingScreen } from '../screens/SensorPairingScreen';
import { SavedRecordingsScreen } from '../screens/SavedRecordingsScreen';
import { SettingsScreen } from '../screens/SettingsScreen';
import { ActivityDetailScreen } from '../screens/ActivityDetailScreen';
import { RootStackParamList, TabParamList } from '../types';
import { colors } from '../theme';
import { useTheme } from '../ThemeContext';
const Stack = createNativeStackNavigator<RootStackParamList>();
const Tab = createBottomTabNavigator<TabParamList>();
const TAB_ICONS: Record<string, string> = {
Recording: '◉',
Saved: '☰',
Settings: '⚙',
};
function Tabs() {
const { accent } = useTheme();
return (
<Tab.Navigator
screenOptions={({ route }) => ({
headerStyle: { backgroundColor: colors.bg },
headerTintColor: colors.text,
tabBarStyle: { backgroundColor: colors.surface, borderTopColor: colors.border },
tabBarActiveTintColor: accent,
tabBarInactiveTintColor: colors.textMuted,
tabBarIcon: ({ color }) => (
<Text style={{ color, fontSize: 18 }}>{TAB_ICONS[route.name]}</Text>
),
})}
>
<Tab.Screen name="Recording" component={RecordingScreen} />
<Tab.Screen name="Saved" component={SavedRecordingsScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}
export function AppNavigator() {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerStyle: { backgroundColor: colors.bg },
headerTintColor: colors.text,
contentStyle: { backgroundColor: colors.bg },
}}
>
<Stack.Screen name="Tabs" component={Tabs} options={{ headerShown: false }} />
<Stack.Screen name="PostRecording" component={PostRecordingScreen} options={{ title: 'Save Recording', presentation: 'modal' }} />
<Stack.Screen name="SensorPairing" component={SensorPairingScreen} options={{ title: 'Sensors', presentation: 'modal' }} />
<Stack.Screen name="ActivityDetail" component={ActivityDetailScreen} options={{ title: '' }} />
</Stack.Navigator>
</NavigationContainer>
);
}