@multiplayer-app/session-recorder-react-native 0.0.1-beta.4 → 0.0.1-beta.6

package/react-native.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  dependencies: {
+    'react-native-session-recorder': {
+      platforms: {
+        android: {
+          sourceDir: '../android',
+          packageImportPath: 'import com.multiplayer.sessionrecorder.SessionRecorderPackage;'
+        },
+        ios: {
+          podspecPath: '../ios/SessionRecorderNative.podspec'
+        }
+      }
+    }
+  }
+}

package/src/components/SessionRecorderWidget/FinalPopover.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react'
-import { View, Text, Pressable, TextInput, Linking, Alert } from 'react-native'
+import { View, Text, Pressable, TextInput, Alert } from 'react-native'
 import { WidgetTextOverridesConfig } from '../../types'
 import { sharedStyles } from './styles'
+import ModalHeader from './ModalHeader'
 
 interface FinalPopoverProps {
   textOverrides: WidgetTextOverridesConfig
@@ -11,13 +12,7 @@ interface FinalPopoverProps {
   isSubmitting: boolean
 }
 
-const FinalPopover: React.FC<FinalPopoverProps> = ({
-  textOverrides,
-  onStopRecording,
-  onCancelSession,
-  onClose,
-  isSubmitting
-}) => {
+const FinalPopover: React.FC<FinalPopoverProps> = ({ textOverrides, onStopRecording, onCancelSession, isSubmitting }) => {
   const [comment, setComment] = useState('')
 
   const handleStopRecording = async () => {
@@ -30,17 +25,11 @@ const FinalPopover: React.FC<FinalPopoverProps> = ({
 
   return (
     <View style={sharedStyles.popoverContent}>
-      <View style={sharedStyles.popoverHeader}>
-        <Pressable onPress={() => Linking.openURL('https://www.multiplayer.app')}>
-          <Text style={sharedStyles.logoText}>Multiplayer</Text>
-        </Pressable>
+      <ModalHeader>
         <Pressable onPress={onCancelSession} style={sharedStyles.cancelButton}>
           <Text style={sharedStyles.cancelButtonText}>{textOverrides.cancelButtonText}</Text>
         </Pressable>
-        <Pressable onPress={onClose} style={sharedStyles.closeButton}>
-          <Text style={sharedStyles.closeButtonText}>×</Text>
-        </Pressable>
-      </View>
+      </ModalHeader>
 
       <View style={sharedStyles.popoverBody}>
         <Text style={sharedStyles.title}>{textOverrides.finalTitle}</Text>

package/src/components/SessionRecorderWidget/FloatingButton.tsx

@@ -8,20 +8,21 @@ interface FloatingButtonProps {
   sessionState: SessionState | null
   onPress: () => void
 }
-const buttonSize = 60
+
+const buttonSize = 52
 const rightOffset = 20
 const topOffset = Platform.OS === 'ios' ? 60 : 40
 
 const FloatingButton: React.FC<FloatingButtonProps> = ({ sessionState, onPress }) => {
-  const position = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current // For tracking position
-  const lastPosition = useRef({ top: topOffset, right: rightOffset }) // Track the last saved position
-  const storageService = useRef(StorageService.getInstance()).current // Singleton instance
+  const position = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current
+  const lastPosition = useRef({ top: topOffset, right: rightOffset })
+  const storageService = useRef(StorageService.getInstance()).current
 
   const screenBounds = useMemo(() => {
     const { width, height } = Dimensions.get('window')
 
     return {
-      minTop: topOffset, // Account for status bar
+      minTop: topOffset,
       maxTop: height - buttonSize,
       minRight: 0,
       maxRight: width - buttonSize
@@ -32,14 +33,12 @@ const FloatingButton: React.FC<FloatingButtonProps> = ({ sessionState, onPress }
   useEffect(() => {
     const savedPosition = storageService.getFloatingButtonPosition()
     if (savedPosition) {
-      // Convert from x,y coordinates to top,right coordinates
-      const { width, height } = Dimensions.get('window')
+      const { width } = Dimensions.get('window')
       const top = savedPosition.y
       const right = width - savedPosition.x - buttonSize
       lastPosition.current = { top, right }
       position.setValue({ x: right, y: top })
     } else {
-      // Set default position
       position.setValue({ x: lastPosition.current.right, y: lastPosition.current.top })
     }
   }, [])
@@ -48,7 +47,6 @@ const FloatingButton: React.FC<FloatingButtonProps> = ({ sessionState, onPress }
     PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: (evt, gestureState) => {
-        // Only start dragging if movement is significant enough
         const distance = Math.sqrt(gestureState.dx * gestureState.dx + gestureState.dy * gestureState.dy)
         return distance > 5
       },
@@ -59,7 +57,7 @@ const FloatingButton: React.FC<FloatingButtonProps> = ({ sessionState, onPress }
       onPanResponderMove: (evt, gestureState) => {
         // Calculate new position based on gesture movement
         const newTop = lastPosition.current.top + gestureState.dy
-        const newRight = lastPosition.current.right - gestureState.dx // Invert dx for right positioning
+        const newRight = lastPosition.current.right - gestureState.dx
 
         // Update position during drag
         position.setValue({ x: newRight, y: newTop })
@@ -74,7 +72,7 @@ const FloatingButton: React.FC<FloatingButtonProps> = ({ sessionState, onPress }
         } else {
           // Calculate new position after dragging
           const newTop = lastPosition.current.top + gestureState.dy
-          const newRight = lastPosition.current.right - gestureState.dx // Invert dx for right positioning
+          const newRight = lastPosition.current.right - gestureState.dx
 
           // Clamp to screen bounds
           const clampedTop = Math.max(screenBounds.minTop, Math.min(screenBounds.maxTop, newTop))
@@ -99,31 +97,20 @@ const FloatingButton: React.FC<FloatingButtonProps> = ({ sessionState, onPress }
   ).current
 
   // Memoized button icon and color for performance
-  const buttonIcon = useMemo(() => {
-    switch (sessionState) {
-      case SessionState.started:
-        return <CapturingIcon size={24} color='white' />
-      case SessionState.paused:
-        return <PausedIcon size={24} color='white' />
-      default:
-        return <RecordIcon size={19} color='white' />
-    }
-  }, [sessionState])
-
-  const buttonColor = useMemo(() => {
+  const content = useMemo(() => {
     switch (sessionState) {
       case SessionState.started:
-        return '#FF4444'
+        return { icon: <CapturingIcon size={28} color='white' />, color: '#FF4444' }
       case SessionState.paused:
-        return '#FFA500'
+        return { icon: <PausedIcon size={28} color='white' />, color: '#FFA500' }
       default:
-        return '#007AFF'
+        return { icon: <RecordIcon size={28} color='#718096' />, color: '#ffffff' }
     }
   }, [sessionState])
 
   return (
     <Animated.View style={[styles.draggableButton, { top: position.y, right: position.x }]} {...panResponder.panHandlers}>
-      <View style={[styles.floatingButton, { backgroundColor: buttonColor }]}>{buttonIcon}</View>
+      <View style={[styles.floatingButton, { backgroundColor: content.color }]}>{content.icon}</View>
     </Animated.View>
   )
 }

package/src/components/SessionRecorderWidget/InitialPopover.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
-import { View, Text, Pressable, Switch, Linking, Alert } from 'react-native'
+import { View, Text, Pressable, Alert, Switch } from 'react-native'
 import { SessionType } from '@multiplayer-app/session-recorder-common'
 import { WidgetTextOverridesConfig } from '../../types'
 import { sharedStyles } from './styles'
+import ModalHeader from './ModalHeader'
 
 interface InitialPopoverProps {
   textOverrides: WidgetTextOverridesConfig
@@ -34,14 +35,7 @@ const InitialPopover: React.FC<InitialPopoverProps> = ({
 
   return (
     <View style={sharedStyles.popoverContent}>
-      <View style={sharedStyles.popoverHeader}>
-        <Pressable onPress={() => Linking.openURL('https://www.multiplayer.app')}>
-          <Text style={sharedStyles.logoText}>Multiplayer</Text>
-        </Pressable>
-        <Pressable onPress={onClose} style={sharedStyles.closeButton}>
-          <Text style={sharedStyles.closeButtonText}>×</Text>
-        </Pressable>
-      </View>
+      <ModalHeader />
 
       <View style={sharedStyles.popoverBody}>
         {showContinuousRecording && (

package/src/components/SessionRecorderWidget/ModalContainer.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
-import { Animated, View, Pressable, StyleSheet, Dimensions, Modal } from 'react-native'
+import { Animated, Pressable, StyleSheet, Dimensions, Modal, SafeAreaView } from 'react-native'
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
 
 const { height: SCREEN_HEIGHT } = Dimensions.get('window')
 const MODAL_HEIGHT = SCREEN_HEIGHT * 0.7
@@ -12,28 +13,86 @@ interface ModalContainerProps {
 
 const ModalContainer: React.FC<ModalContainerProps> = ({ isVisible, onClose, children }) => {
   const fadeAnim = useRef(new Animated.Value(0)).current
+  const translateY = useRef(new Animated.Value(0)).current
   const [animatedFinished, setAnimatedFinished] = useState(false)
 
+  const SWIPE_THRESHOLD = 100 // Distance to trigger close
+  const MAX_SWIPE_DISTANCE = 200 // Maximum swipe distance
+
+  const animateClose = () => {
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 250,
+        useNativeDriver: true
+      }),
+      Animated.timing(translateY, {
+        toValue: MODAL_HEIGHT,
+        duration: 250,
+        useNativeDriver: true
+      })
+    ]).start(() => {
+      onClose()
+    })
+  }
+
   useEffect(() => {
-    Animated.timing(fadeAnim, {
-      toValue: isVisible ? 1 : 0,
-      duration: 300,
-      useNativeDriver: true
-    }).start()
-  }, [isVisible, fadeAnim])
+    if (isVisible) {
+      // Start from bottom and animate to position
+      translateY.setValue(MODAL_HEIGHT)
+      Animated.parallel([
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true
+        }),
+        Animated.timing(translateY, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true
+        })
+      ]).start()
+    }
+  }, [isVisible, fadeAnim, translateY])
+
+  const panGesture = Gesture.Pan()
+    .onUpdate((event) => {
+      translateY.setValue(event.translationY)
+    })
+    .onEnd((event) => {
+      const { translationY, velocityY } = event
+
+      // If swiped down with sufficient distance or velocity, close modal
+      if (translationY > SWIPE_THRESHOLD || velocityY > 500) {
+        animateClose()
+      } else {
+        // Snap back to original position
+        Animated.spring(translateY, {
+          toValue: 0,
+          useNativeDriver: true,
+          tension: 100,
+          friction: 8
+        }).start()
+      }
+    })
+    .activeOffsetY(10)
+    .runOnJS(true)
 
   return (
     <>
       {isVisible && (
         <Animated.View style={{ ...styles.backdrop, opacity: fadeAnim }}>
-          <Pressable style={styles.backdropPressable} onPress={onClose} />
+          <Pressable style={styles.backdropPressable} onPress={animateClose} />
         </Animated.View>
       )}
-      <Modal visible={isVisible} transparent animationType='slide' onRequestClose={onClose}>
-        <View style={styles.modal}>
-          <View style={styles.modalHandle} />
-          {children}
-        </View>
+      <Modal visible={isVisible} transparent animationType='none' onRequestClose={onClose}>
+        <GestureHandlerRootView style={{ flex: 1 }}>
+          <GestureDetector gesture={panGesture}>
+            <Animated.View style={[styles.modal, { transform: [{ translateY }] }]}>
+              <SafeAreaView style={styles.safeArea}>{children}</SafeAreaView>
+            </Animated.View>
+          </GestureDetector>
+        </GestureHandlerRootView>
       </Modal>
     </>
   )
@@ -51,29 +110,18 @@ const styles = StyleSheet.create({
   backdropPressable: {
     flex: 1
   },
+  safeArea: {
+    flex: 1
+  },
   modal: {
     position: 'absolute',
     bottom: 0,
     left: 0,
     right: 0,
-    height: MODAL_HEIGHT,
+    height: 'auto',
     backgroundColor: 'white',
     borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    elevation: 10,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: -2 },
-    shadowOpacity: 0.25,
-    shadowRadius: 4
-  },
-  modalHandle: {
-    width: 40,
-    height: 4,
-    backgroundColor: '#D1D5DB',
-    borderRadius: 2,
-    alignSelf: 'center',
-    marginTop: 8,
-    marginBottom: 8
+    borderTopRightRadius: 20
   }
 })
 

package/src/components/SessionRecorderWidget/ModalHeader.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { View, Pressable, Linking } from 'react-native'
+import { sharedStyles } from './styles'
+import { LogoIcon } from './icons'
+
+interface ModalHeaderProps {
+  children?: React.ReactNode
+}
+
+const ModalHeader: React.FC<ModalHeaderProps> = ({ children }) => {
+  return (
+    <View style={sharedStyles.popoverHeader}>
+      <View style={sharedStyles.modalHandle} />
+      <View style={sharedStyles.popoverHeaderContent}>
+        <Pressable onPress={() => Linking.openURL('https://www.multiplayer.app')}>
+          <LogoIcon size={42} />
+        </Pressable>
+        {children}
+      </View>
+    </View>
+  )
+}
+
+export default ModalHeader

package/src/components/SessionRecorderWidget/icons.tsx

@@ -41,3 +41,12 @@ export const CheckmarkIcon: React.FC<IconProps> = ({ size = 24, color = 'white'
     />
   </Svg>
 )
+
+export const LogoIcon: React.FC<IconProps> = ({ size = 30, color = '#473CFB' }) => (
+  <Svg width={size} height={size * 0.8} viewBox='0 0 30 24' fill='none'>
+    <Path
+      d='M28.8324 8.83643L23.5495 6.85854L21.4856 6.08553L23.6001 0.4375L15 3.65769L6.39963 0.4375L8.51441 6.08585L6.45046 6.85885L1.16757 8.83674L0.625 9.03974L9.10095 12.0981C10.0891 12.4548 10.9201 13.1265 11.4758 13.9952C11.6632 14.2883 11.8194 14.6036 11.9398 14.9369L15 23.4076L18.0602 14.9369C18.1806 14.6036 18.3368 14.288 18.5242 13.9952C19.0802 13.1265 19.9112 12.4545 20.8991 12.0981L29.375 9.03974L28.8324 8.83674V8.83643ZM19.779 10.6434C18.2872 11.1816 17.1126 12.3563 16.5744 13.848L15.014 18.173L11.5182 8.83643L10.7776 6.85854L10.2456 5.43757L9.57367 3.64272L12.3068 4.66612L18.1631 6.85885L20.8233 7.85481L23.4457 8.83674L24.104 9.08308L19.779 10.6438V10.6434Z'
+      fill={color}
+    />
+  </Svg>
+)

package/src/components/SessionRecorderWidget/styles.ts

@@ -4,31 +4,37 @@ export const sharedStyles = StyleSheet.create({
   // Popover styles
   popoverContent: {
     flex: 1,
-    paddingHorizontal: 20
+    paddingHorizontal: 0
   },
   popoverHeader: {
+    flexDirection: 'column',
+    paddingBottom: 8,
+    paddingHorizontal: 16,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    backgroundColor: '#e3ecfd',
+    shadowColor: '#e3ecfd',
+    shadowOffset: { width: 0, height: 10, },
+    shadowOpacity: 1,
+    shadowRadius: 5,
+    elevation: 3,
+  },
+  modalHandle: {
+    marginTop: 8,
+    marginBottom: 16,
+    width: 40,
+    height: 4,
+    backgroundColor: '#D1D5DB',
+    borderRadius: 2,
+    alignSelf: 'center',
+  },
+  popoverHeaderContent: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingVertical: 16,
-    borderBottomWidth: 1,
-    borderBottomColor: '#E5E7EB'
-  },
-  logoText: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: '#007AFF'
-  },
-  closeButton: {
-    width: 30,
-    height: 30,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  closeButtonText: {
-    fontSize: 24,
-    color: '#6B7280'
+    alignItems: 'flex-start',
   },
+
+
   cancelButton: {
     paddingHorizontal: 12,
     paddingVertical: 6,
@@ -42,34 +48,34 @@ export const sharedStyles = StyleSheet.create({
   },
   popoverBody: {
     flex: 1,
-    paddingVertical: 20
+    padding: 16,
+    paddingTop: 32,
   },
   title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    color: '#111827',
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#2d3748',
     marginBottom: 12
   },
   description: {
-    fontSize: 16,
-    color: '#6B7280',
-    lineHeight: 24,
+    fontSize: 14,
+    color: '#718096',
     marginBottom: 24
   },
   popoverFooter: {
     marginTop: 'auto',
-    paddingTop: 20
+    paddingTop: 48
   },
   actionButton: {
     paddingVertical: 16,
     paddingHorizontal: 24,
-    borderRadius: 8,
+    borderRadius: 12,
     alignItems: 'center'
   },
   actionButtonText: {
     color: 'white',
     fontSize: 16,
-    fontWeight: '600'
+    fontWeight: '500'
   },
 
   // Continuous recording styles
@@ -80,8 +86,15 @@ export const sharedStyles = StyleSheet.create({
     marginBottom: 20,
     paddingVertical: 12,
     paddingHorizontal: 16,
-    backgroundColor: '#F9FAFB',
-    borderRadius: 8
+    borderWidth: 1,
+    borderColor: '#e1e8f1',
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.06,
+    shadowRadius: 3,
+    elevation: 3,
   },
   continuousRecordingLabel: {
     fontSize: 16,
@@ -126,12 +139,12 @@ export const sharedStyles = StyleSheet.create({
 
   // Button color variants
   startButton: {
-    backgroundColor: '#007AFF'
+    backgroundColor: '#473cfb'
   },
   stopButton: {
-    backgroundColor: '#FF4444'
+    backgroundColor: '#473cfb'
   },
   saveButton: {
-    backgroundColor: '#34C759'
+    backgroundColor: '#473cfb'
   }
 })

package/src/components/index.ts

@@ -1 +1,3 @@
-export * from './GestureCaptureWrapper'
+export * from './GestureCaptureWrapper'
+export * from './ScreenRecorderView'
+export * from './SessionRecorderWidget'

package/src/config/defaults.ts

@@ -23,6 +23,7 @@ export const DEFAULT_MASKING_CONFIG: MaskingConfig = {
   maskHeadersList: sensitiveHeaders,
   headersToInclude: [],
   headersToExclude: [],
+  inputMasking: true,
 }
 
 export const DEFAULT_WIDGET_TEXT_CONFIG: WidgetTextOverridesConfig = {

package/src/config/masking.ts

@@ -23,5 +23,6 @@ export const getMaskingConfig = (masking?: MaskingConfig): MaskingConfig => {
     isContentMaskingEnabled: isValidBoolean(masking.isContentMaskingEnabled, baseMasking.isContentMaskingEnabled ?? true),
     maskBody: isValidFunction(masking.maskBody, mask(maskBodyFieldsList)),
     maskHeaders: isValidFunction(masking.maskHeaders, mask(maskHeadersList)),
+    inputMasking: isValidBoolean(masking.inputMasking, baseMasking.inputMasking ?? true),
   }
 }

package/src/native/ScreenMasking.ts

@@ -0,0 +1,34 @@
+import { NativeModules } from 'react-native'
+
+export interface MaskingOptions {
+  /** Quality of the captured image (0.1 to 1.0) */
+  quality?: number
+  /** Whether to mask all input fields automatically */
+  inputMasking?: boolean
+}
+
+
+export interface SessionRecorderNativeModule {
+  /**
+   * Capture the current screen and apply masking to sensitive elements
+   * @returns Promise that resolves to base64 encoded image
+   */
+  captureAndMask(): Promise<string>
+
+  /**
+   * Capture the current screen and apply masking with custom options
+   * @param options Custom masking options
+   * @returns Promise that resolves to base64 encoded image
+   */
+  captureAndMaskWithOptions(options: MaskingOptions): Promise<string>
+}
+
+// Get the native module
+const { SessionRecorder } = NativeModules
+
+// Validate that the native module is available
+if (!SessionRecorder) {
+  console.warn('SessionRecorder native module is not available. Auto-linking may not have completed yet.')
+}
+
+export default SessionRecorder as SessionRecorderNativeModule

package/src/native/SessionRecorderNative.ts

@@ -0,0 +1,34 @@
+import { NativeModules } from 'react-native'
+
+export interface MaskingOptions {
+  /** Quality of the captured image (0.1 to 1.0) */
+  quality?: number
+  /** Whether to mask all input fields automatically */
+  inputMasking?: boolean
+}
+
+
+export interface SessionRecorderNativeModule {
+  /**
+   * Capture the current screen and apply masking to sensitive elements
+   * @returns Promise that resolves to base64 encoded image
+   */
+  captureAndMask(): Promise<string>
+
+  /**
+   * Capture the current screen and apply masking with custom options
+   * @param options Custom masking options
+   * @returns Promise that resolves to base64 encoded image
+   */
+  captureAndMaskWithOptions(options: MaskingOptions): Promise<string>
+}
+
+// Get the native module
+const { SessionRecorderNative } = NativeModules
+
+// Validate that the native module is available
+if (!SessionRecorderNative) {
+  console.warn('SessionRecorderNative module is not available. Auto-linking may not have completed yet.')
+}
+
+export default SessionRecorderNative as SessionRecorderNativeModule

package/src/recorder/screenRecorder.ts

@@ -10,6 +10,7 @@ import {
   generateScreenHash,
   logger,
 } from '../utils'
+import { screenMaskingService, ScreenMaskingConfig } from '../services/screenMaskingService'
 
 export class ScreenRecorder implements EventRecorder {
   private config?: RecorderConfig
@@ -18,7 +19,7 @@ export class ScreenRecorder implements EventRecorder {
   private captureInterval?: NodeJS.Timeout
   private captureCount: number = 0
   private maxCaptures: number = 100 // Limit captures to prevent memory issues
-  private captureQuality: number = 0.3
+  private captureQuality: number = 0.1
   private captureFormat: 'png' | 'jpg' = 'jpg'
   private screenDimensions: { width: number; height: number } | null = null
   private currentScreen: string | null = null
@@ -30,11 +31,24 @@ export class ScreenRecorder implements EventRecorder {
   private enableChangeDetection: boolean = true
   private hashSampleSize: number = 100
   private currentImageNodeId: number | null = null
+  private maskingConfig?: ScreenMaskingConfig
 
   init(config: RecorderConfig, eventRecorder?: EventRecorder): void {
     this.config = config
     this.eventRecorder = eventRecorder
     this._getScreenDimensions()
+
+    // Initialize masking configuration
+    this.maskingConfig = {
+      enabled: true,
+      inputMasking: this.config?.masking?.inputMasking ?? true,
+      defaultOptions: {
+        quality: this.captureQuality,
+      },
+    }
+
+    // Update the masking service configuration
+    screenMaskingService.updateConfig(this.maskingConfig)
   }
 
   start(): void {
@@ -135,6 +149,21 @@ export class ScreenRecorder implements EventRecorder {
 
   private async _captureScreenBase64(): Promise<string | null> {
     try {
+      // Try native masking first if available
+      if (screenMaskingService.isScreenMaskingAvailable()) {
+        logger.info('ScreenRecorder', 'Using native masking for screen capture')
+        const maskedImage = await screenMaskingService.captureMaskedScreen({
+          quality: this.captureQuality,
+        })
+
+        if (maskedImage) {
+          return maskedImage
+        }
+
+        logger.warn('ScreenRecorder', 'Native masking failed, falling back to view-shot')
+      }
+
+      // Fallback to react-native-view-shot
       if (!this.viewShotRef) {
         logger.warn('ScreenRecorder', 'ViewShot ref not available for screen capture')
         return null
@@ -451,7 +480,7 @@ export class ScreenRecorder implements EventRecorder {
   // Get current configuration
   getConfiguration(): Record<string, any> {
     return {
-      captureInterval: this.captureInterval ? 5000 : 0, // Default 5 seconds
+      captureInterval: this.captureInterval ? 2000 : 0, // Default 5 seconds
       captureQuality: this.captureQuality,
       captureFormat: this.captureFormat,
       maxCaptures: this.maxCaptures,