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

fix: Tap on floating bubble ends the call

Browse Source 
Changed tap behavior on the floating call bubble to end the call
instead of maximizing it. Removed the separate small end call button
since it's no longer needed.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sergei 2026-01-24 20:41:36 -08:00
parent aec300bd98
commit 560722e8af
1 changed files with 4 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/FloatingCallBubble.tsx
View File

@ -3,7 +3,7 @@
* *
* Shows a floating bubble during active voice calls. * Shows a floating bubble during active voice calls.
* Can be dragged around the screen. * Can be dragged around the screen.
* Tapping it returns to the full voice call screen. * Tapping it ends the call.
*/ */
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
@ -15,9 +15,7 @@ import {
Animated, Animated,
PanResponder, PanResponder,
Dimensions, Dimensions,
Platform,
} from 'react-native'; } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { AppColors, FontSizes, Spacing } from '@/constants/theme'; import { AppColors, FontSizes, Spacing } from '@/constants/theme';
import { useVoiceCall } from '@/contexts/VoiceCallContext'; import { useVoiceCall } from '@/contexts/VoiceCallContext';
@ -26,7 +24,7 @@ const BUBBLE_SIZE = 70;
const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window'); const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
export function FloatingCallBubble() { export function FloatingCallBubble() {
const { callState, maximizeCall, endCall } = useVoiceCall(); const { callState, endCall } = useVoiceCall();
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
// Animation values // Animation values
@ -168,10 +166,10 @@ export function FloatingCallBubble() {
]} ]}
/> />
{/* Main bubble */} {/* Main bubble - tap to end call */}
<TouchableOpacity <TouchableOpacity
style={styles.bubble} style={styles.bubble}
onPress={maximizeCall} onPress={endCall}
activeOpacity={0.9} activeOpacity={0.9}
> >
<View style={styles.avatarContainer}> <View style={styles.avatarContainer}>
@ -182,10 +180,6 @@ export function FloatingCallBubble() {
</View> </View>
</TouchableOpacity> </TouchableOpacity>
{/* End call button */}
<TouchableOpacity style={styles.endButton} onPress={endCall}>
<Ionicons name="call" size={14} color={AppColors.white} style={{ transform: [{ rotate: '135deg' }] }} />
</TouchableOpacity>
</Animated.View> </Animated.View>
); );
} }
@ -244,20 +238,4 @@ const styles = StyleSheet.create({
color: AppColors.white, color: AppColors.white,
fontVariant: ['tabular-nums'], fontVariant: ['tabular-nums'],
}, },
endButton: {
position: 'absolute',
top: -4,
right: -4,
width: 24,
height: 24,
borderRadius: 12,
backgroundColor: AppColors.error,
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
}); });