sergei_t/wellnua-lite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Integrate VoiceFAB into tabs layout

Browse Source 
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
1 changed files with 97 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
app/(tabs)/_layout.tsx
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,81 +39,86 @@ 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 (
<Tabs <View style={{ flex: 1 }}>
screenOptions={{ <Tabs
tabBarActiveTintColor: AppColors.primary, screenOptions={{
tabBarInactiveTintColor: isDark ? '#9BA1A6' : '#687076', tabBarActiveTintColor: AppColors.primary,
tabBarStyle: { tabBarInactiveTintColor: isDark ? '#9BA1A6' : '#687076',
backgroundColor: isDark ? '#151718' : AppColors.background, tabBarStyle: {
borderTopColor: isDark ? '#2D3135' : AppColors.border, backgroundColor: isDark ? '#151718' : AppColors.background,
height: tabBarHeight, borderTopColor: isDark ? '#2D3135' : AppColors.border,
paddingBottom: bottomPadding, height: tabBarHeight,
paddingTop: 10, paddingBottom: bottomPadding,
}, paddingTop: 10,
tabBarLabelStyle: { },
fontSize: 11, tabBarLabelStyle: {
fontWeight: '500', fontSize: 11,
}, fontWeight: '500',
headerShown: false, },
tabBarButton: HapticTab, headerShown: false,
}} tabBarButton: HapticTab,
>
<Tabs.Screen
name="index"
options={{
title: 'Dashboard',
tabBarIcon: ({ color, size }) => (
<Feather name="grid" size={22} color={color} />
),
}} }}
/> >
{/* Hide old dashboard - now index shows WebView dashboard */} <Tabs.Screen
<Tabs.Screen name="index"
name="dashboard" options={{
options={{ title: 'Dashboard',
href: null, tabBarIcon: ({ color, size }) => (
}} <Feather name="grid" size={22} color={color} />
/> ),
{/* Chat with Julia AI */} }}
<Tabs.Screen />
name="chat" {/* Hide old dashboard - now index shows WebView dashboard */}
options={{ <Tabs.Screen
title: 'Julia', name="dashboard"
tabBarIcon: ({ color, size }) => ( options={{
<Feather name="message-circle" size={22} color={color} /> href: null,
), }}
}} />
/> {/* Chat with Julia AI */}
<Tabs.Screen <Tabs.Screen
name="profile" name="chat"
options={{ options={{
title: 'Profile', title: 'Julia',
tabBarIcon: ({ color, size }) => ( tabBarIcon: ({ color, size }) => (
<Feather name="user" size={22} color={color} /> <Feather name="message-circle" size={22} color={color} />
), ),
}} }}
/> />
{/* Hide explore tab */} <Tabs.Screen
<Tabs.Screen name="profile"
name="explore" options={{
options={{ title: 'Profile',
href: null, tabBarIcon: ({ color, size }) => (
}} <Feather name="user" size={22} color={color} />
/> ),
{/* Audio Debug - hidden */} }}
<Tabs.Screen />
name="audio-debug" {/* Hide explore tab */}
options={{ <Tabs.Screen
href: null, name="explore"
}} options={{
/> href: null,
{/* Beneficiaries - hidden from tab bar but keeps tab bar visible */} }}
<Tabs.Screen />
name="beneficiaries" {/* Audio Debug - hidden */}
options={{ <Tabs.Screen
href: null, name="audio-debug"
}} options={{
/> href: null,
</Tabs> }}
/>
{/* Beneficiaries - hidden from tab bar but keeps tab bar visible */}
<Tabs.Screen
name="beneficiaries"
options={{
href: null,
}}
/>
</Tabs>
{/* Voice FAB - shown when no call is active */}
<VoiceFAB onPress={handleVoiceFABPress} />
</View>
); );
} }