Integrate VoiceFAB into tabs layout

Add floating action button for voice calls to the tab bar layout:
- Import and render VoiceFAB component
- Add placeholder handler for voice call initiation
- Wrap Tabs in View to properly position FAB overlay
- FAB automatically hides when a call is active (via VoiceCallContext)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sergei 2026-01-27 16:25:35 -08:00
parent 6abc1f0382
commit 9b4d39fdc5

View File

@ -1,17 +1,32 @@
import { Tabs } from 'expo-router'; import { Tabs } from 'expo-router';
import React from 'react'; import React, { useCallback } from 'react';
import { Platform } from 'react-native'; import { Platform, View, Alert } from 'react-native';
import { Feather } from '@expo/vector-icons'; import { Feather } from '@expo/vector-icons';
import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { HapticTab } from '@/components/haptic-tab'; import { HapticTab } from '@/components/haptic-tab';
import { VoiceFAB } from '@/components/VoiceFAB';
import { AppColors } from '@/constants/theme'; import { AppColors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme'; import { useColorScheme } from '@/hooks/use-color-scheme';
import { useVoiceCall } from '@/contexts/VoiceCallContext';
export default function TabLayout() { export default function TabLayout() {
const colorScheme = useColorScheme(); const colorScheme = useColorScheme();
const isDark = colorScheme === 'dark'; const isDark = colorScheme === 'dark';
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
// VoiceFAB uses VoiceCallContext internally to hide when call is active
useVoiceCall(); // Ensure context is available
// Handle voice FAB press - initiate voice call
const handleVoiceFABPress = useCallback(() => {
// TODO: Integrate with LiveKit voice call when ready
// For now, show placeholder alert
Alert.alert(
'Voice Call',
'Voice call with Julia AI will be available soon.',
[{ text: 'OK' }]
);
}, []);
// Calculate tab bar height based on safe area // Calculate tab bar height based on safe area
// On iOS with home indicator, insets.bottom is ~34px // On iOS with home indicator, insets.bottom is ~34px
@ -24,6 +39,7 @@ export default function TabLayout() {
const tabBarHeight = 60 + bottomPadding; // 60px for content + safe area padding const tabBarHeight = 60 + bottomPadding; // 60px for content + safe area padding
return ( return (
<View style={{ flex: 1 }}>
<Tabs <Tabs
screenOptions={{ screenOptions={{
tabBarActiveTintColor: AppColors.primary, tabBarActiveTintColor: AppColors.primary,
@ -100,5 +116,9 @@ export default function TabLayout() {
}} }}
/> />
</Tabs> </Tabs>
{/* Voice FAB - shown when no call is active */}
<VoiceFAB onPress={handleVoiceFABPress} />
</View>
); );
} }