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:
parent
6abc1f0382
commit
9b4d39fdc5
@ -1,17 +1,32 @@
|
||||
import { Tabs } from 'expo-router';
|
||||
import React from 'react';
|
||||
import { Platform } from 'react-native';
|
||||
import React, { useCallback } from 'react';
|
||||
import { Platform, View, Alert } from 'react-native';
|
||||
import { Feather } from '@expo/vector-icons';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
|
||||
import { HapticTab } from '@/components/haptic-tab';
|
||||
import { VoiceFAB } from '@/components/VoiceFAB';
|
||||
import { AppColors } from '@/constants/theme';
|
||||
import { useColorScheme } from '@/hooks/use-color-scheme';
|
||||
import { useVoiceCall } from '@/contexts/VoiceCallContext';
|
||||
|
||||
export default function TabLayout() {
|
||||
const colorScheme = useColorScheme();
|
||||
const isDark = colorScheme === 'dark';
|
||||
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
|
||||
// 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
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
tabBarActiveTintColor: AppColors.primary,
|
||||
@ -100,5 +116,9 @@ export default function TabLayout() {
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
|
||||
{/* Voice FAB - shown when no call is active */}
|
||||
<VoiceFAB onPress={handleVoiceFABPress} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user