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 { 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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user