RD-T39 Fixing permissions issue for voice calls.

Author: ucswift

app.config.ts

@@ -78,9 +78,11 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
       'android.permission.POST_NOTIFICATIONS',
       'android.permission.FOREGROUND_SERVICE',
       'android.permission.FOREGROUND_SERVICE_MICROPHONE',
+      'android.permission.FOREGROUND_SERVICE_PHONE_CALL',
       'android.permission.FOREGROUND_SERVICE_CONNECTED_DEVICE',
       'android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK',
       'android.permission.READ_PHONE_STATE',
+      'android.permission.READ_PHONE_NUMBERS',
       'android.permission.MANAGE_OWN_CALLS',
     ],
   },

src/components/livekit/__tests__/livekit-bottom-sheet.test.tsx

@@ -531,12 +531,10 @@ describe('LiveKitBottomSheet', () => {
     });
 
     it('should track analytics event when bottom sheet is opened', () => {
-      const requestPermissions = jest.fn();
       mockUseLiveKitStore.mockReturnValue({
         ...defaultLiveKitState,
         isBottomSheetVisible: true,
         availableRooms: mockAvailableRooms,
-        requestPermissions,
       });
 
       render(<LiveKitBottomSheet />);
@@ -552,7 +550,6 @@ describe('LiveKitBottomSheet', () => {
         isTalking: false,
         hasBluetoothMicrophone: false,
         hasBluetoothSpeaker: false,
-        permissionsRequested: false,
       });
     });
 
@@ -568,15 +565,13 @@ describe('LiveKitBottomSheet', () => {
     });
 
     it('should track analytics event with connected state', () => {
-      const requestPermissions = jest.fn();
       mockUseLiveKitStore.mockReturnValue({
         ...defaultLiveKitState,
         isBottomSheetVisible: true,
         isConnected: true,
         currentRoomInfo: mockCurrentRoomInfo,
         availableRooms: mockAvailableRooms,
         isTalking: true,
-        requestPermissions,
       });
 
       render(<LiveKitBottomSheet />);
@@ -592,12 +587,10 @@ describe('LiveKitBottomSheet', () => {
         isTalking: true,
         hasBluetoothMicrophone: false,
         hasBluetoothSpeaker: false,
-        permissionsRequested: false,
       });
     });
 
     it('should track analytics event with bluetooth devices', () => {
-      const requestPermissions = jest.fn();
       const bluetoothAudioDevices = {
         microphone: { id: 'bt-mic', name: 'Bluetooth Mic', type: 'bluetooth' as const, isAvailable: true },
         speaker: { id: 'bt-speaker', name: 'Bluetooth Speaker', type: 'bluetooth' as const, isAvailable: true },
@@ -607,7 +600,6 @@ describe('LiveKitBottomSheet', () => {
         ...defaultLiveKitState,
         isBottomSheetVisible: true,
         availableRooms: mockAvailableRooms,
-        requestPermissions,
       });
 
       mockUseBluetoothAudioStore.mockReturnValue({
@@ -627,7 +619,6 @@ describe('LiveKitBottomSheet', () => {
         isTalking: false,
         hasBluetoothMicrophone: true,
         hasBluetoothSpeaker: true,
-        permissionsRequested: false,
       });
     });
   });

src/components/livekit/livekit-bottom-sheet.tsx

@@ -24,7 +24,7 @@ export enum BottomSheetView {
 }
 
 export const LiveKitBottomSheet = () => {
-  const { isBottomSheetVisible, setIsBottomSheetVisible, availableRooms, fetchVoiceSettings, connectToRoom, disconnectFromRoom, currentRoomInfo, currentRoom, isConnected, isConnecting, isTalking, requestPermissions } =
+  const { isBottomSheetVisible, setIsBottomSheetVisible, availableRooms, fetchVoiceSettings, connectToRoom, disconnectFromRoom, currentRoomInfo, currentRoom, isConnected, isConnecting, isTalking } =
     useLiveKitStore();
 
   const { selectedAudioDevices } = useBluetoothAudioStore();
@@ -34,7 +34,6 @@ export const LiveKitBottomSheet = () => {
   const [currentView, setCurrentView] = useState<BottomSheetView>(BottomSheetView.ROOM_SELECT);
   const [previousView, setPreviousView] = useState<BottomSheetView | null>(null);
   const [isMuted, setIsMuted] = useState(true); // Default to muted
-  const [permissionsRequested, setPermissionsRequested] = useState(false);
 
   // Use ref to track if component is mounted to prevent state updates after unmount
   const isMountedRef = useRef(true);
@@ -60,7 +59,6 @@ export const LiveKitBottomSheet = () => {
         isTalking: isTalking,
         hasBluetoothMicrophone: selectedAudioDevices?.microphone?.type === 'bluetooth',
         hasBluetoothSpeaker: selectedAudioDevices?.speaker?.type === 'bluetooth',
-        permissionsRequested: permissionsRequested,
       });
     }
   }, [
@@ -75,53 +73,10 @@ export const LiveKitBottomSheet = () => {
     isTalking,
     selectedAudioDevices?.microphone?.type,
     selectedAudioDevices?.speaker?.type,
-    permissionsRequested,
   ]);
 
-  // Request permissions when the component becomes visible
-  useEffect(() => {
-    if (isBottomSheetVisible && !permissionsRequested && isMountedRef.current) {
-      // Check if we're in a test environment
-      const isTestEnvironment = process.env.NODE_ENV === 'test' || process.env.JEST_WORKER_ID !== undefined;
-
-      if (isTestEnvironment) {
-        // In tests, handle permissions synchronously to avoid act warnings
-        try {
-          // Call requestPermissions but don't await it in tests
-          const result = requestPermissions();
-          // Only call .catch if the result is a promise
-          if (result && typeof result.catch === 'function') {
-            result.catch(() => {
-              // Silently handle any errors in test environment
-            });
-          }
-          setPermissionsRequested(true);
-        } catch (error) {
-          console.error('Failed to request permissions:', error);
-        }
-      } else {
-        // In production, use the async approach with timeout
-        const timeoutId = setTimeout(async () => {
-          if (isMountedRef.current && !permissionsRequested) {
-            try {
-              await requestPermissions();
-              if (isMountedRef.current) {
-                setPermissionsRequested(true);
-              }
-            } catch (error) {
-              if (isMountedRef.current) {
-                console.error('Failed to request permissions:', error);
-              }
-            }
-          }
-        }, 0);
-
-        return () => {
-          clearTimeout(timeoutId);
-        };
-      }
-    }
-  }, [isBottomSheetVisible, permissionsRequested, requestPermissions]);
+  // Note: Permissions are now requested in connectToRoom when the user actually tries to join a voice call
+  // This ensures permissions are granted before the Android foreground service starts
 
   // Sync mute state with LiveKit room
   useEffect(() => {

src/components/ui/skeleton/index.tsx

@@ -1,5 +1,5 @@
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect, useRef } from 'react';
 import { Animated, Easing, Platform, View } from 'react-native';
 
 import { skeletonStyle, skeletonTextStyle } from './styles';
@@ -18,34 +18,48 @@ type ISkeletonTextProps = React.ComponentProps<typeof View> &
   };
 
 const Skeleton = forwardRef<React.ElementRef<typeof View>, ISkeletonProps>(({ className, variant, children, startColor = 'bg-background-200', isLoaded = false, speed = 2, ...props }, ref) => {
-  const pulseAnim = new Animated.Value(1);
+  const pulseAnim = useRef(new Animated.Value(1)).current;
+  const animRef = useRef<Animated.CompositeAnimation | null>(null);
   const customTimingFunction = Easing.bezier(0.4, 0, 0.6, 1);
   const fadeDuration = 0.6;
-  const animationDuration = (fadeDuration * 10000) / speed; // Convert seconds to milliseconds
+  const animationDuration = (fadeDuration * 10000) / speed;
 
-  const pulse = Animated.sequence([
-    Animated.timing(pulseAnim, {
-      toValue: 1, // Start with opacity 1
-      duration: animationDuration / 2, // Third of the animation duration
-      easing: customTimingFunction,
-      useNativeDriver: Platform.OS !== 'web',
-    }),
-    Animated.timing(pulseAnim, {
-      toValue: 0.75,
-      duration: animationDuration / 2, // Third of the animation duration
-      easing: customTimingFunction,
-      useNativeDriver: Platform.OS !== 'web',
-    }),
-    Animated.timing(pulseAnim, {
-      toValue: 1,
-      duration: animationDuration / 2, // Third of the animation duration
-      easing: customTimingFunction,
-      useNativeDriver: Platform.OS !== 'web',
-    }),
-  ]);
+  useEffect(() => {
+    if (!isLoaded) {
+      const pulse = Animated.sequence([
+        Animated.timing(pulseAnim, {
+          toValue: 1,
+          duration: animationDuration / 2,
+          easing: customTimingFunction,
+          useNativeDriver: Platform.OS !== 'web',
+        }),
+        Animated.timing(pulseAnim, {
+          toValue: 0.75,
+          duration: animationDuration / 2,
+          easing: customTimingFunction,
+          useNativeDriver: Platform.OS !== 'web',
+        }),
+        Animated.timing(pulseAnim, {
+          toValue: 1,
+          duration: animationDuration / 2,
+          easing: customTimingFunction,
+          useNativeDriver: Platform.OS !== 'web',
+        }),
+      ]);
+      animRef.current = Animated.loop(pulse);
+      animRef.current.start();
+    } else {
+      animRef.current?.stop();
+      animRef.current = null;
+    }
+
+    return () => {
+      animRef.current?.stop();
+      animRef.current = null;
+    };
+  }, [isLoaded, animationDuration, pulseAnim, customTimingFunction]);
 
   if (!isLoaded) {
-    Animated.loop(pulse).start();
     return (
       <Animated.View
         style={{ opacity: pulseAnim }}
@@ -58,8 +72,6 @@ const Skeleton = forwardRef<React.ElementRef<typeof View>, ISkeletonProps>(({ cl
       />
     );
   } else {
-    Animated.loop(pulse).stop();
-
     return children;
   }
 });