@trustchex/react-native-sdk 1.381.0 → 1.464.0

package/lib/module/Screens/Dynamic/VideoCallScreen.js

@@ -0,0 +1,678 @@
+"use strict";
+
+import React, { useEffect, useState, useRef, useContext } from 'react';
+import { Dimensions, Platform, StyleSheet, Text, TouchableOpacity, View, ActivityIndicator, PermissionsAndroid, StatusBar } from 'react-native';
+import { RTCView } from 'react-native-webrtc';
+import InCallManager from 'react-native-incall-manager';
+import LottieView from 'lottie-react-native';
+import { useTranslation } from 'react-i18next';
+import { useStatusBarWhiteBackground } from "../../Shared/Libs/status-bar.utils.js";
+import { WebRTCService } from "../../Shared/Services/WebRTCService.js";
+import { VideoSessionService } from "../../Shared/Services/VideoSessionService.js";
+import { DataUploadService } from "../../Shared/Services/DataUploadService.js";
+import AppContext from "../../Shared/Contexts/AppContext.js";
+import NavigationManager from "../../Shared/Components/NavigationManager.js";
+import StyledButton from "../../Shared/Components/StyledButton.js";
+import { trackVerificationStart, trackVerificationComplete } from "../../Shared/Libs/analytics.utils.js";
+import { useKeepAwake } from "../../Shared/Libs/native-keep-awake.utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  width,
+  height
+} = Dimensions.get('window');
+const VideoCallScreen = ({
+  navigation
+}) => {
+  useKeepAwake();
+  const appContext = useContext(AppContext);
+  const {
+    baseUrl,
+    identificationInfo,
+    onError
+  } = appContext;
+  const {
+    t
+  } = useTranslation();
+
+  // Configure status bar for white background
+  useStatusBarWhiteBackground();
+  const [hasGuideShown, setHasGuideShown] = useState(false);
+  const [localStream, setLocalStream] = useState(null);
+  const [remoteStream, setRemoteStream] = useState(null);
+  const [connectionState, setConnectionState] = useState('connecting');
+  const [queuePosition, setQueuePosition] = useState(null);
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [showLeaveButton, setShowLeaveButton] = useState(false);
+  const [uploadStatus, setUploadStatus] = useState('pending');
+  const [agentInstructions, setAgentInstructions] = useState([]);
+  const [localStreamKey, setLocalStreamKey] = useState(0);
+
+  // Update status bar when guide visibility changes
+  useEffect(() => {
+    if (hasGuideShown) {
+      // Video call view - use light icons
+      StatusBar.setBarStyle('light-content', true);
+    } else {
+      // Guide screen with white background - use dark icons
+      StatusBar.setBarStyle('dark-content', true);
+      if (Platform.OS === 'android') {
+        StatusBar.setBackgroundColor('#ffffff', true);
+      }
+    }
+  }, [hasGuideShown]);
+  const serviceRef = useRef(null);
+  const videoSessionServiceRef = useRef(null);
+  const dataUploadServiceRef = useRef(null);
+  const uploadPromiseMapRef = useRef(new Map());
+  const navigationManagerRef = useRef(null);
+  const joinedSessionIdRef = useRef(null);
+  const callConnectedRef = useRef(false);
+  const sessionEndedRef = useRef(false);
+  const handleRemoteCommand = command => {
+    switch (command.type) {
+      case 'toggleFlash':
+        serviceRef.current?.toggleFlash();
+        break;
+      case 'displayInstruction':
+        setAgentInstructions(prev => [...prev, {
+          id: command.itemId || Date.now().toString(),
+          text: command.text,
+          timestamp: Date.now()
+        }].slice(-3)); // Keep only last 3 instructions
+        break;
+    }
+  };
+  useEffect(() => {
+    // Don't initialize until guide is dismissed
+    if (!hasGuideShown) return;
+    const identificationId = identificationInfo.identificationId;
+    const verificationSessionId = identificationInfo.sessionId;
+    const existingVideoSessionId = identificationInfo.videoSessionId;
+    const hasCollectedData = !!identificationInfo.scannedDocument || !!identificationInfo.livenessDetection;
+    let mounted = true;
+    let queueUnsubscribe = null;
+    let callStartTime = null;
+    let heartbeatInterval = null;
+    let leaveButtonTimeout = null;
+
+    // Track video call started
+    trackVerificationStart('VIDEO_CALL');
+    const init = async () => {
+      if (!baseUrl) {
+        console.error('Missing base URL');
+        return;
+      }
+      if (!identificationId) {
+        console.error('Missing identification ID');
+        return;
+      }
+
+      // Upload collected data in background (don't block video call initialization)
+      // This allows the agent to see the data during the video call
+      const uploadCollectedData = async () => {
+        const uploadKey = `${identificationId}:${verificationSessionId || ''}`;
+
+        // If upload already in progress, return the same promise
+        const existingPromise = uploadPromiseMapRef.current.get(uploadKey);
+        if (existingPromise) {
+          return existingPromise;
+        }
+
+        // Create the upload promise
+        const uploadPromise = (async () => {
+          if (hasCollectedData) {
+            setUploadStatus('uploading');
+            try {
+              const uploadService = new DataUploadService(baseUrl);
+              dataUploadServiceRef.current = uploadService;
+              const uploaded = await uploadService.uploadCollectedData(identificationInfo);
+              if (!uploaded) {
+                console.warn('[VideoCallScreen] Upload service returned false');
+                if (mounted) {
+                  setUploadStatus('failed');
+                }
+                return false;
+              }
+              if (mounted) {
+                setUploadStatus('done');
+              }
+              return true;
+            } catch (error) {
+              console.error('[VideoCallScreen] Failed to upload collected data:', error);
+              if (mounted) {
+                setUploadStatus('failed');
+              }
+              return false;
+            } finally {
+              uploadPromiseMapRef.current.delete(uploadKey);
+            }
+          } else {
+            setUploadStatus('done');
+            return true;
+          }
+        })();
+
+        // Store the promise before awaiting
+        uploadPromiseMapRef.current.set(uploadKey, uploadPromise);
+        return uploadPromise;
+      };
+      const uploadedBeforeCall = await uploadCollectedData();
+      if (hasCollectedData && !uploadedBeforeCall) {
+        if (mounted) {
+          setErrorMessage('Failed to upload verification data before video call.');
+          setConnectionState('failed');
+        }
+        return;
+      }
+
+      // Fetch or create video session if videoSessionId is not available
+      let videoSessionId = existingVideoSessionId;
+      if (!videoSessionId) {
+        try {
+          // Build URL with both identificationId and verificationSessionId for better lookup.
+          // Avoid new URL() + searchParams.set — not implemented on Android Hermes.
+          let sessionUrl = `${baseUrl}/api/app/mobile/identifications/${identificationId}/video-session`;
+          if (verificationSessionId) {
+            sessionUrl += `?verificationSessionId=${encodeURIComponent(verificationSessionId)}`;
+          }
+          const response = await fetch(sessionUrl, {
+            method: 'GET',
+            headers: {
+              'Content-Type': 'application/json'
+            }
+          });
+          if (!response.ok) {
+            let errorMessage = 'Unknown error';
+            try {
+              const errorBody = await response.json();
+              errorMessage = errorBody.message || errorBody.error || response.statusText;
+              if (errorBody.details) {
+                errorMessage = `${errorMessage}: ${errorBody.details}`;
+              }
+            } catch {
+              errorMessage = response.statusText;
+            }
+            console.error('[VideoCallScreen] Server error response:', {
+              status: response.status,
+              message: errorMessage,
+              url: sessionUrl
+            });
+            throw new Error(`Failed to get video session: ${response.status} ${errorMessage}`);
+          }
+          const data = await response.json();
+          videoSessionId = data.videoSessionId;
+        } catch (error) {
+          console.error('[VideoCallScreen] Failed to get video session:', error);
+          if (mounted) {
+            setErrorMessage('Failed to initialize video session. Please try again.');
+            setConnectionState('failed');
+          }
+          return;
+        }
+      }
+      if (!videoSessionId) {
+        console.error('Missing video session ID');
+        if (mounted) {
+          setErrorMessage('Unable to start video call. Please try again.');
+          setConnectionState('failed');
+        }
+        return;
+      }
+
+      // Initialize video session service (mobile API is public, no auth token needed)
+      const videoSessionService = new VideoSessionService(baseUrl, identificationId);
+      videoSessionServiceRef.current = videoSessionService;
+
+      // Try to join the session
+      try {
+        await videoSessionService.joinSession(videoSessionId);
+        joinedSessionIdRef.current = videoSessionId;
+
+        // Send heartbeat every 10s while in queue
+        heartbeatInterval = setInterval(() => {
+          if (!callConnectedRef.current) {
+            videoSessionService.sendHeartbeat(videoSessionId);
+          } else {
+            clearInterval(heartbeatInterval);
+            heartbeatInterval = null;
+          }
+        }, 10_000);
+
+        // Show leave button after 60s if still waiting
+        leaveButtonTimeout = setTimeout(() => {
+          if (mounted && !callConnectedRef.current) {
+            setShowLeaveButton(true);
+          }
+        }, 60_000);
+      } catch (error) {
+        console.error('[VideoCallScreen] Failed to join session:', error);
+        if (mounted) {
+          setErrorMessage(error?.message || 'Failed to join video session');
+          setConnectionState('failed');
+        }
+        return;
+      }
+
+      // Subscribe to queue updates
+      queueUnsubscribe = videoSessionService.subscribeToQueueUpdates(videoSessionId, position => {
+        if (mounted) {
+          setQueuePosition(position);
+        }
+      }, error => {
+        console.error('[VideoCallScreen] Queue update error:', error);
+      });
+
+      // Initialize WebRTC service
+      const service = new WebRTCService({
+        baseUrl,
+        sessionId: videoSessionId,
+        identificationId,
+        onRemoteStream: stream => {
+          if (mounted) {
+            setRemoteStream(stream);
+          }
+        },
+        onConnectionStateChange: state => {
+          if (mounted) setConnectionState(state);
+          if (state === 'connected') {
+            callConnectedRef.current = true;
+            setShowLeaveButton(false);
+            if (leaveButtonTimeout) {
+              clearTimeout(leaveButtonTimeout);
+              leaveButtonTimeout = null;
+            }
+          }
+          if ((state === 'failed' || state === 'closed') && callConnectedRef.current && !sessionEndedRef.current) {
+            const durationMs = callStartTime ? Date.now() - callStartTime : 0;
+            trackVerificationComplete('VIDEO_CALL', false, durationMs / 1000);
+            service.cleanup();
+            if (mounted) {
+              if (appContext.currentWorkflowStep?.required) {
+                setErrorMessage(t('videoCallScreen.callNotCompleted'));
+                setConnectionState('failed');
+              } else {
+                navigation.navigate('ResultScreen');
+              }
+            }
+          }
+        },
+        onCommand: handleRemoteCommand,
+        onLocalStreamUpdate: newStream => {
+          setLocalStream(newStream);
+          setLocalStreamKey(k => k + 1);
+        },
+        onSessionEnded: state => {
+          sessionEndedRef.current = true;
+          // Track video call completed
+          const durationMs = callStartTime ? Date.now() - callStartTime : 0;
+          trackVerificationComplete('VIDEO_CALL', state === 'COMPLETED', durationMs / 1000);
+          // Always navigate to ResultScreen so data is submitted regardless of
+          // whether the agent ended the session as COMPLETED or FAILED
+          service.cleanup();
+          if (mounted) {
+            navigation.navigate('ResultScreen');
+          }
+        }
+      });
+      serviceRef.current = service;
+
+      // Request Permissions
+      if (Platform.OS === 'android') {
+        const granted = await PermissionsAndroid.requestMultiple([PermissionsAndroid.PERMISSIONS.CAMERA, PermissionsAndroid.PERMISSIONS.RECORD_AUDIO]);
+        if (granted['android.permission.CAMERA'] !== PermissionsAndroid.RESULTS.GRANTED || granted['android.permission.RECORD_AUDIO'] !== PermissionsAndroid.RESULTS.GRANTED) {
+          if (mounted) setConnectionState('permissions_denied');
+          return;
+        }
+      }
+      // For iOS, react-native-webrtc or VisionCamera usually triggers it,
+      // but explicit request via library is better if we had one.
+      // Assuming automatic or previously granted for now.
+
+      try {
+        const stream = await service.initialize();
+        if (mounted) {
+          setLocalStream(stream);
+          callStartTime = Date.now();
+        }
+
+        // Start InCallManager to route audio through speaker
+        InCallManager.start({
+          media: 'video'
+        });
+        InCallManager.setSpeakerphoneOn(true);
+      } catch (e) {
+        console.error('[VideoCallScreen] Failed to start call', e);
+        if (mounted) setConnectionState('failed');
+      }
+    };
+    init();
+    return () => {
+      mounted = false;
+      if (heartbeatInterval) clearInterval(heartbeatInterval);
+      if (leaveButtonTimeout) clearTimeout(leaveButtonTimeout);
+      queueUnsubscribe?.();
+      // If joined but call never connected, explicitly leave to drop from queue
+      if (joinedSessionIdRef.current && !callConnectedRef.current) {
+        videoSessionServiceRef.current?.leaveSession(joinedSessionIdRef.current);
+      }
+      serviceRef.current?.cleanup();
+      InCallManager.stop();
+    };
+  }, [baseUrl, identificationInfo.identificationId, identificationInfo.sessionId, identificationInfo.videoSessionId, hasGuideShown, appContext.currentWorkflowStep?.required, t, navigation, identificationInfo]);
+  const handleCloseSession = () => {
+    serviceRef.current?.cleanup();
+    // Call onError to notify parent and reset navigation to start over
+    onError?.('Video call session closed by user');
+    navigationManagerRef.current?.reset();
+  };
+  if (!identificationInfo || !identificationInfo.identificationId) {
+    return null;
+  }
+
+  // Show guide screen first
+  if (!hasGuideShown) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.guide,
+      children: [/*#__PURE__*/_jsx(LottieView, {
+        source: require('../../Shared/Animations/video-call.json'),
+        style: styles.guideAnimation,
+        loop: true,
+        autoPlay: true
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.guideHeader,
+        children: t('videoCallScreen.guideHeader')
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.guidePoints,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.guideText,
+          children: t('videoCallScreen.guideText')
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.guideText,
+          children: ["\u2022 ", t('videoCallScreen.guidePoint1')]
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.guideText,
+          children: ["\u2022 ", t('videoCallScreen.guidePoint2')]
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.guideText,
+          children: ["\u2022 ", t('videoCallScreen.guidePoint3')]
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.guideText,
+          children: ["\u2022 ", t('videoCallScreen.guidePoint4')]
+        })]
+      }), /*#__PURE__*/_jsx(StyledButton, {
+        mode: "contained",
+        onPress: () => {
+          setHasGuideShown(true);
+        },
+        children: t('general.letsGo')
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [errorMessage ? /*#__PURE__*/_jsxs(View, {
+      style: styles.errorContainer,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.errorText,
+        children: errorMessage
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.closeSessionButton,
+        onPress: handleCloseSession,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.buttonText,
+          children: t('videoCallScreen.closeSession')
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.closeSessionHint,
+        children: t('videoCallScreen.closeSessionHint')
+      })]
+    }) : remoteStream ? /*#__PURE__*/_jsx(RTCView, {
+      streamURL: remoteStream.toURL(),
+      style: styles.remoteVideo,
+      objectFit: "contain",
+      mirror: false
+    }) : connectionState === 'connected' ?
+    /*#__PURE__*/
+    // WebRTC connected but remote stream not yet received — show black background
+    // so the PIP local video and controls are visible without "waiting" overlay
+    _jsx(View, {
+      style: styles.remoteVideo
+    }) : /*#__PURE__*/_jsxs(View, {
+      style: styles.waitingContainer,
+      children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "large",
+        color: "#fff"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.waitingText,
+        children: t('videoCallScreen.waitingForAgent')
+      }), queuePosition !== null && /*#__PURE__*/_jsx(Text, {
+        style: styles.queueText,
+        children: t('videoCallScreen.queuePosition', {
+          position: queuePosition
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.statusText,
+        children: t(`videoCallScreen.${connectionState}`)
+      }), showLeaveButton && /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.leaveQueueButton,
+        onPress: handleCloseSession,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.leaveQueueButtonText,
+          children: t('videoCallScreen.leaveQueue')
+        })
+      })]
+    }), localStream && /*#__PURE__*/_jsx(View, {
+      style: styles.localVideoContainer,
+      children: /*#__PURE__*/_jsx(RTCView, {
+        streamURL: localStream.toURL(),
+        style: styles.localVideo,
+        objectFit: "cover",
+        mirror: true,
+        zOrder: 1
+      }, localStreamKey)
+    }), agentInstructions.length > 0 && /*#__PURE__*/_jsxs(View, {
+      style: styles.instructionsContainer,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.instructionsHeader,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.instructionsTitle,
+          children: t('videoCallScreen.agentInstructions')
+        })
+      }), agentInstructions.map(instruction => /*#__PURE__*/_jsxs(View, {
+        style: styles.instructionItem,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.instructionIcon,
+          children: "\uD83D\uDCCB"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.instructionText,
+          children: instruction.text
+        })]
+      }, instruction.id))]
+    }), /*#__PURE__*/_jsx(NavigationManager, {
+      ref: navigationManagerRef
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000'
+  },
+  remoteVideo: {
+    width: width,
+    height: height,
+    backgroundColor: '#000'
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20
+  },
+  errorText: {
+    color: '#fff',
+    fontSize: 18,
+    textAlign: 'center',
+    marginBottom: 30
+  },
+  retryButton: {
+    backgroundColor: '#d32f2f',
+    padding: 15,
+    borderRadius: 8,
+    minWidth: 120,
+    alignItems: 'center'
+  },
+  closeSessionButton: {
+    backgroundColor: '#d32f2f',
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    borderRadius: 8,
+    minWidth: 200,
+    alignItems: 'center'
+  },
+  closeSessionHint: {
+    color: '#aaa',
+    fontSize: 14,
+    textAlign: 'center',
+    marginTop: 16,
+    paddingHorizontal: 40
+  },
+  waitingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  waitingText: {
+    color: '#fff',
+    marginTop: 20,
+    fontSize: 18
+  },
+  queueText: {
+    color: '#fff',
+    marginTop: 10,
+    fontSize: 16,
+    fontWeight: 'bold'
+  },
+  statusText: {
+    color: '#aaa',
+    marginTop: 10,
+    fontSize: 14
+  },
+  localVideoContainer: {
+    position: 'absolute',
+    top: 50,
+    right: 20,
+    width: 100,
+    height: 150,
+    borderRadius: 10,
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: '#fff',
+    backgroundColor: '#333'
+  },
+  localVideo: {
+    flex: 1
+  },
+  instructionsContainer: {
+    position: 'absolute',
+    bottom: 40,
+    left: 20,
+    right: 20,
+    backgroundColor: 'rgba(59, 130, 246, 0.95)',
+    borderRadius: 12,
+    padding: 16,
+    maxHeight: 200
+  },
+  instructionsHeader: {
+    marginBottom: 12,
+    paddingBottom: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(255, 255, 255, 0.3)'
+  },
+  instructionsTitle: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: 'bold'
+  },
+  instructionItem: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    backgroundColor: 'rgba(255, 255, 255, 0.15)',
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 8
+  },
+  instructionIcon: {
+    fontSize: 18,
+    marginRight: 10
+  },
+  instructionText: {
+    flex: 1,
+    color: '#fff',
+    fontSize: 14,
+    lineHeight: 20
+  },
+  controlsContainer: {
+    position: 'absolute',
+    bottom: 40,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    alignItems: 'center'
+  },
+  controlButton: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: 'rgba(255,255,255,0.3)',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  endCallButton: {
+    backgroundColor: '#ff4444'
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 12
+  },
+  leaveQueueButton: {
+    marginTop: 24,
+    paddingVertical: 12,
+    paddingHorizontal: 32,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#fff'
+  },
+  leaveQueueButtonText: {
+    color: '#fff',
+    fontSize: 15
+  },
+  guide: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+    gap: 10,
+    backgroundColor: 'white'
+  },
+  guideAnimation: {
+    width: 250,
+    height: 250,
+    alignSelf: 'center'
+  },
+  guideHeader: {
+    color: 'black',
+    fontSize: 18,
+    textAlign: 'center',
+    fontWeight: 'bold'
+  },
+  guidePoints: {
+    gap: 10,
+    padding: 10
+  },
+  guideText: {
+    color: 'black',
+    fontSize: 14
+  }
+});
+export default VideoCallScreen;

package/lib/module/Screens/Static/OTPVerificationScreen.js

@@ -15,8 +15,11 @@ import { useTheme } from "../../Shared/Contexts/ThemeContext.js";
 import LottieView from 'lottie-react-native';
 import { getSimulatedDemoData } from "../../Shared/Libs/demo.utils.js";
 import { trackError, useScreenTracking } from "../../Shared/Libs/analytics.utils.js";
+import { useKeepAwake } from "../../Shared/Libs/native-keep-awake.utils.js";
+import { useStatusBarWhiteBackground } from "../../Shared/Libs/status-bar.utils.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const OTPVerificationScreen = () => {
+  useKeepAwake();
   const route = useRoute();
   const sessionId = route.params?.sessionId;
   const [code, setCode] = useState('');
@@ -33,6 +36,9 @@ const OTPVerificationScreen = () => {
   const primaryColor = theme.colors.primary;
   useScreenTracking('otp_verification');
 
+  // Configure status bar for white background
+  useStatusBarWhiteBackground();
+
   // Guard: If sessionId is not provided, show error
   if (!sessionId) {
     return /*#__PURE__*/_jsx(SafeAreaView, {