shakebug-react-native 2.4.15 → 2.4.16

package/src/Screens/AddDetailsScreen.js

@@ -1,475 +1,836 @@
-import { View, Text, TouchableOpacity, Image, TextInput, PanResponder, Alert, StyleSheet, Keyboard, LogBox, Platform, StatusBar, NativeModules, BackHandler, DeviceEventEmitter, Dimensions, SafeAreaView } from 'react-native'
-import React, { useState, useRef, useEffect } from 'react'
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Image,
+  TextInput,
+  Alert,
+  StyleSheet,
+  Keyboard,
+  LogBox,
+  Platform,
+  StatusBar,
+  NativeModules,
+  BackHandler,
+  SafeAreaView,
+  ScrollView,
+  Dimensions,
+} from 'react-native';
+import React, { useState, useRef, useEffect } from 'react';
 import { launchImageLibrary } from '../../ImageOrVedioPicker/src/index';
 import { AddIssueApi } from '../APIs/AddIssue';
-import { logger, consoleTransport } from "react-native-logs";
-import VideoPlayer from '../../VideoPlayer/index'
+import { logger, consoleTransport } from 'react-native-logs';
+import VideoPlayer from '../../VideoPlayer/index';
 import { useNavigation } from '../Componanats/NavigationContext';
-import { Localization } from '../Componanats/localization';
-import { ActivityIndicator } from 'react-native';
-import { UIManager } from 'react-native';
-import { ScrollView } from 'react-native';
+import { Localization, getLocalizedString } from '../Componanats/localization';
 import KeyboardAvoidingWrapper from '../Componanats/KeyboardAvoidingWrapper';
 import { useGlobalState } from '../Componanats/GlobalStateContext';
 import CustomeAlert from '../Componanats/CustomAlert';
 import LoadingModal from '../Componanats/LoadingModal';
 import NetInfo from '../../NetInfo/src';
-import DeviceInfo from '../../DeviceInfo';
-
-console.ignoredYellowBox = ["Warning: Each", "Warning: Failed", "Non-serializable"];
-
-LogBox.ignoreLogs([
-    'Non-serializable values were found in the navigation state',
-]);
+import { useTheme } from '../Componanats/Theme';
+import ZoomableImage from '../Componanats/ZoomableImage';
+import {
+  BackChevronIcon,
+  MailIcon,
+  CameraIcon,
+  CamcorderIcon,
+  PhotoGalleryIcon,
+  CloseCircleIcon,
+} from '../Componanats/Icons';
+import { getBottomSpace, getTopSpace, isIPhoneWithNotch } from '../Componanats/SafeAreaHelper';
+
+console.ignoredYellowBox = ['Warning: Each', 'Warning: Failed', 'Non-serializable'];
+LogBox.ignoreLogs(['Non-serializable values were found in the navigation state']);
 
 const { CreateThumbnail } = NativeModules;
 
 const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScreenTitle }) => {
+  const { setIsScreenShot, setIsRecordingStart } = useGlobalState();
+  const resolvedColor = (themeColor && themeColor !== '#313A46')
+    ? themeColor
+    : (global.ShakebugThemeColor || themeColor || '#313A46');
+  const ThemeColor = resolvedColor;
+  const theme = useTheme(resolvedColor);
+  const { goBack, navigate, goToScreenAtIndex, navigationState } = useNavigation();
+
+  const { height: screenHeight, width: screenWidth } = Dimensions.get('window');
+  const bottomInset = getBottomSpace();
+  const topSpace = getTopSpace();
+
+  const [mediaRatio, setMediaRatio] = useState(null);
+
+  useEffect(() => {
+    if (path && type !== 'Recordvideo') {
+      const uri = (Platform.OS === 'android' && typeof path === 'string' && !path.startsWith('file://') && !path.startsWith('content://') && !path.startsWith('http'))
+        ? `file://${path}`
+        : path;
+      Image.getSize(
+        uri,
+        (w, h) => {
+          if (w > 0 && h > 0) {
+            setMediaRatio(w / h);
+          }
+        },
+        () => { }
+      );
+    }
+  }, [path, type]);
+
+  // Manage proper dimensions for media preview and bottom anchoring
+  const bottomSpace = Platform.OS === 'ios' ? (isIPhoneWithNotch() ? 24 : 10) : 46;
+  const availableWidth = screenWidth - 32;
+
+  // Attached media card spans full width matching description and email inputs
+  const cardWidth = availableWidth;
+
+  const [desc, setDesc] = useState('');
+  const [email, setEmail] = useState('');
+  const [descBorder, setDescBorder] = useState('');
+  const [EmailBorder, setEmailBorder] = useState('');
+  const [path, setPath] = useState(media);
+  const [type, setType] = useState(mediaType);
+  const [isLoading, setIsLoading] = useState(false);
+  const [poster, setPoster] = useState('');
+  const title = SDKScreenTitle ? SDKScreenTitle.split(',')[1] : null;
+  const [isErrorInAPI, setErrorInAPI] = useState(false);
+  const [isBugReported, setIsBugReported] = useState(false);
+  const [apiMessage, setAPIMessage] = useState('');
+  const [isInternet, setIsInternet] = useState(null);
+
+  const descRef = useRef();
+
+  const handleBack = () => {
+    StatusBar.setHidden(false);
+    global.isScreenShotDetected = false;
+    setIsScreenShot(false);
+    setIsRecordingStart(false);
+
+    const isVideo =
+      mediaType === 'video' ||
+      mediaType === 'Recordvideo' ||
+      type === 'video' ||
+      type === 'Recordvideo';
+
+    const firstScreenIndex = navigationState
+      ? navigationState.findIndex((s) => s.name === 'FirstScreen')
+      : -1;
+
+    if (isVideo || firstScreenIndex === -1) {
+      // Exit SDK and return to host application
+      global.isTrigger = false;
+      global.isShakebugOpen = false;
+      global.isScreenShotDetected = false;
+      global.isScreeenShotTaken = false;
+      global.isShakebugSDKOpen = false;
+      global.IsBackground = 'true';
+      goToScreenAtIndex(0);
+    } else {
+      // Return to FirstScreen (annotation editor for screenshot/image)
+      global.IsBackground = 'false';
+      goToScreenAtIndex(firstScreenIndex);
+    }
+  };
 
-    const { setIsScreenShot, setIsRecordingStart } = useGlobalState()
-
-    const { goBack, navigate, goToScreenAtIndex } = useNavigation();
-
-    const ThemeColor = themeColor ? themeColor : "#1dd3e3";
-
-    const [desc, setDesc] = useState("")
-    const [email, setEmail] = useState("")
-    const [descBorder, setDescBorder] = useState("black")
-    const [EmailBorder, setEmailBorder] = useState('black')
-    const [path, setPath] = useState(media)
-    const [type, setType] = useState(mediaType)
-    const [isLoading, setIsLoading] = useState(false)
-    const [poster, setPoster] = useState("")
-    const title = SDKScreenTitle ? SDKScreenTitle.split(",")[1] : null
-    const [isErrorInAPI, setErrorInAPI] = useState(false)
-    const [isBugReported, setIsBugReported] = useState(false)
-    const [apiMessage, setAPIMessage] = useState("")
-    const [isInternet, setIsInternet] = useState(null)
-
-    // For handel system back navigation
-    useEffect(() => {
-
-        const unsubscribeNetInfo = NetInfo.addEventListener(stat => {
-            setIsInternet(stat.isConnected)
-        })
-
-        StatusBar.setHidden(false)
-        const backAction = () => {
-            global.isScreenShotDetected = false
-            setIsScreenShot(false)
-            setIsRecordingStart(false)
-            if (mediaType == "Recordvideo") {
-                global.isShakebugSDKOpen = false
-                global.IsBackground = 'true'
-                goToScreenAtIndex(0)
-            }
-            else {
-                global.IsBackground = 'false'
-                goToScreenAtIndex(1)
-            }
-
-            return true; // Return true to prevent default behavior (exit app)
-        };
-
-        const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
-
-        return () => {
-            backHandler.remove();
-            if (unsubscribeNetInfo) {
-                unsubscribeNetInfo();
-            }
-        }; // Clean up the event listener on unmount
-    }, []);
-
-
-    useEffect(() => {
-        if (mediaType != "img") {
-            setIsLoading(true)
-            generateThumbnail()
-        }
-        if (type == "img") {
-            setIsLoading(false)
-        }
-    }, [type])
-
-    // For ganrate thumbanill image of video
-    const generateThumbnail = async () => {
-        if (type != "img") {
-            try {
-
-                const { create: createThumbnail } = CreateThumbnail;
-                const cleanVideoPath = path ? path.replace('file://', '') : '';
-
-                const thumbnail = await createThumbnail({
-                    url: `file://${cleanVideoPath}`,
-                    timeStamp: 1000,
-                })
+  useEffect(() => {
+    const unsubscribeNetInfo = NetInfo.addEventListener((stat) => {
+      setIsInternet(stat.isConnected);
+    });
 
-                if (thumbnail) {
-                    setPoster(thumbnail?.path)
-                    setIsLoading(false)
-                }
-            } catch (error) {
-                console.log(error);
+    StatusBar.setHidden(false);
 
-                setIsLoading(false)
-                throw new Error(error.message);
-            }
-        }
+    const backAction = () => {
+      handleBack();
+      return true;
     };
 
-    const ref = useRef();
-    const descRef = useRef()
-
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
 
-    const defaultConfig = {
-        levels: {
-            debug: 0,
-            info: 1,
-            warn: 2,
-            error: 3,
-        },
-        severity: "debug",
-        transport: consoleTransport,
-        transportOptions: {
-            colors: {
-                info: "blueBright",
-                warn: "yellowBright",
-                error: "redBright",
-            },
-        },
-        async: true,
-        dateFormat: "time",
-        printLevel: false,
-        printDate: false,
-        fixedExtLvlLength: false,
-        enabled: global.makeLogEnabled == true ? true : false,
+    return () => {
+      backHandler.remove();
+      if (unsubscribeNetInfo) {
+        unsubscribeNetInfo();
+      }
     };
+  }, []);
 
+  useEffect(() => {
+    if (mediaType !== 'img') {
+      setIsLoading(true);
+      generateThumbnail();
+    }
+    if (type === 'img') {
+      setIsLoading(false);
+    }
+  }, [type, path]);
 
-    var log = logger.createLogger(defaultConfig);
-
-    // For open Video picker
-    const openVideoPicker = () => {
-        global.IsBackground = "false"
-        setIsLoading(true)
-
-        const options = {
-            mediaType: 'video',
-            includeBase64: false,
-            selectionLimit: 1
-        };
-
-        launchImageLibrary(options, async (response) => {
-            if (response.didCancel) {
-                setIsLoading(false)
-                global.IsBackground = "false"
-                // console.log('User cancelled image picker');
-            } else if (response.error || response.errorCode) {
-                setIsLoading(false)
-                global.IsBackground = "true"
-                // console.log('Image picker error: ', response.error);
-            } else {
-                global.IsBackground = "true"
-                let videoUri = await response.uri || response.assets?.[0]?.uri;
-                if (response.assets?.[0]?.type?.slice(0, 5).trim() == "video") {
-                    if (mediaType == "img")
-                        navigate("TrimVideoScreen", { video: `${videoUri}`, Type: "imgReplacedWithVideo", themeColor: ThemeColor, SDKScreenTitle: SDKScreenTitle, UpdateStatusBar: UpdateStatusBar, updateParent: updateParent })
-                    else
-                        navigate("TrimVideoScreen", { video: `${videoUri}`, Type: "videoReplacedWithVideo", themeColor: ThemeColor, SDKScreenTitle: SDKScreenTitle, UpdateStatusBar: UpdateStatusBar, updateParent: updateParent })
-                    setIsLoading(false)
-                }
-                else {
-                    setIsLoading(false)
-                    setAPIMessage("Invalid selection, Please choose a valid video file")
-                    setErrorInAPI(true)
-                }
+  const generateThumbnail = async () => {
+    if (type !== 'img') {
+      try {
+        const { create: createThumbnail } = CreateThumbnail;
+        const cleanVideoPath = path ? path.replace('file://', '') : '';
 
-            }
+        const thumbnail = await createThumbnail({
+          url: `file://${cleanVideoPath}`,
+          timeStamp: 1000,
         });
-    };
 
-    // For open image picker
-    const openImagePicker = () => {
-        global.IsBackground = "false"
-        setIsLoading(true)
-        const options = {
-            mediaType: 'photo',
-            includeBase64: false,
-            selectionLimit: 1
-        };
-        launchImageLibrary(options, async (response) => {
-            if (response.didCancel) {
-                setIsLoading(false)
-                global.IsBackground = "true"
-                // console.log('User cancelled image picker');
-            } else if (response.error || response.errorCode) {
-                setIsLoading(false)
-                global.IsBackground = "true"
-                // console.log('Image picker error: ', response.error);
-            } else {
-                global.IsBackground = "true"
-                if (response.assets?.[0]?.type?.slice(0, 5).trim() == "image") {
-                    let imageuri = await response.uri || response.assets?.[0]?.uri;
-                    setIsLoading(false)
-                    if (imageuri != "" || imageuri != undefined) {
-                        setPath(imageuri)
-                        setType("img")
-
-                        if (mediaType != "Recordvideo")
-                            // For update image in FirstScreen
-                            updateParent(
-                                imageuri
-                            )
-                    }
-                }
-                else {
-                    setIsLoading(false)
-                    setAPIMessage("Invalid selection, Please choose a valid image file")
-                    setErrorInAPI(true)
-                }
-
-            }
-        });
+        if (thumbnail) {
+          setPoster(thumbnail?.path);
+          setIsLoading(false);
+        }
+      } catch (error) {
+        setIsLoading(false);
+      }
     }
+  };
+
+  const defaultConfig = {
+    levels: { debug: 0, info: 1, warn: 2, error: 3 },
+    severity: 'debug',
+    transport: consoleTransport,
+    transportOptions: {
+      colors: { info: 'blueBright', warn: 'yellowBright', error: 'redBright' },
+    },
+    async: true,
+    dateFormat: 'time',
+    printLevel: false,
+    printDate: false,
+    fixedExtLvlLength: false,
+    enabled: global.makeLogEnabled === true,
+  };
+
+  const log = logger.createLogger(defaultConfig);
+
+  const openVideoPicker = () => {
+    global.IsBackground = 'false';
+    setIsLoading(true);
+
+    const options = {
+      mediaType: 'video',
+      includeBase64: false,
+      selectionLimit: 1,
+    };
 
-    // For report bug
-    const ReportBugFunc = async () => {
-        setIsLoading(true)
-        let EmailReg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-        if (desc.trim() == "" || desc.trim() == undefined) {
-            setDescBorder("red")
-            setIsLoading(false)
-        }
-        else if (email != "" && !EmailReg.test(email)) {
-            setEmailBorder("red")
-            setIsLoading(false)
+    launchImageLibrary(options, async (response) => {
+      if (response.didCancel) {
+        setIsLoading(false);
+        global.IsBackground = 'false';
+      } else if (response.error || response.errorCode) {
+        setIsLoading(false);
+        global.IsBackground = 'true';
+      } else {
+        global.IsBackground = 'true';
+        let videoUri = (await response.uri) || response.assets?.[0]?.uri;
+        if (response.assets?.[0]?.type?.slice(0, 5).trim() === 'video') {
+          if (mediaType === 'img') {
+            navigate('TrimVideoScreen', {
+              video: `${videoUri}`,
+              Type: 'imgReplacedWithVideo',
+              themeColor: ThemeColor,
+              SDKScreenTitle: SDKScreenTitle,
+              UpdateStatusBar: () => StatusBar.setHidden(false),
+              updateParent: updateParent,
+            });
+          } else {
+            navigate('TrimVideoScreen', {
+              video: `${videoUri}`,
+              Type: 'videoReplacedWithVideo',
+              themeColor: ThemeColor,
+              SDKScreenTitle: SDKScreenTitle,
+              UpdateStatusBar: () => StatusBar.setHidden(false),
+              updateParent: updateParent,
+            });
+          }
+          setIsLoading(false);
+        } else {
+          setIsLoading(false);
+          setAPIMessage('Invalid selection, Please choose a valid video file');
+          setErrorInAPI(true);
         }
-        else {
-
-            let isVideo = type == 'img' ? 0 : 1;
-
-
-            if (isInternet != false) {
-                try {
-                    const { success, message } = await AddIssueApi(global.session_id, global.application_id, path, isVideo, desc, email);
-                    if (success) {
-                        setIsLoading(false)
-                        setIsBugReported(true)
-                        setAPIMessage(Localization[global.ShakebugLanguage].BugSubmited)
-                        log.debug("------------------------------------------------------------------------------------------")
-                        log.info('API response:', message);
-                        log.debug("------------------------------------------------------------------------------------------")
-                    } else {
-                        setIsLoading(false)
-                        setAPIMessage("Something went wrong! Please try again later!")
-                        setErrorInAPI(true)
-                        log.debug("------------------------------------------------------------------------------------------")
-                        log.warn('API response:', message);
-                        log.debug("------------------------------------------------------------------------------------------")
-                    }
-                }
-                catch (err) {
-                    setAPIMessage("Something went wrong! Please try again later!")
-                    setErrorInAPI(true)
-                    setIsLoading(false)
-                    log.error("err", err)
-                }
-            }
-            else {
-                setErrorInAPI(true)
-                setAPIMessage(Localization[global.ShakebugLanguage].InterNetConnetionError)
+      }
+    });
+  };
+
+  const openImagePicker = () => {
+    global.IsBackground = 'false';
+    setIsLoading(true);
+    const options = {
+      mediaType: 'photo',
+      includeBase64: false,
+      selectionLimit: 1,
+    };
+    launchImageLibrary(options, async (response) => {
+      if (response.didCancel) {
+        setIsLoading(false);
+        global.IsBackground = 'true';
+      } else if (response.error || response.errorCode) {
+        setIsLoading(false);
+        global.IsBackground = 'true';
+      } else {
+        global.IsBackground = 'true';
+        if (response.assets?.[0]?.type?.slice(0, 5).trim() === 'image') {
+          let imageuri = (await response.uri) || response.assets?.[0]?.uri;
+          setIsLoading(false);
+          if (imageuri != '' && imageuri != undefined) {
+            setPath(imageuri);
+            setType('img');
+
+            if (mediaType !== 'Recordvideo' && updateParent) {
+              updateParent(imageuri);
             }
-
-
-            // Manage submit bug api
-
-
+          }
+        } else {
+          setIsLoading(false);
+          setAPIMessage('Invalid selection, Please choose a valid image file');
+          setErrorInAPI(true);
         }
+      }
+    });
+  };
+
+  const EmailReg =
+    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
+  const ReportBugFunc = async () => {
+    Keyboard.dismiss();
+
+    if (!desc || desc.trim() === '') {
+      setDescBorder('red');
+      setIsLoading(false);
+      setAPIMessage(getLocalizedString('DescriptionError'));
+      setErrorInAPI(true);
+      return;
     }
 
-    UpdateStatusBar = () => {
-        StatusBar.setHidden(false)
+    const trimmedEmail = email ? email.trim() : '';
+    if (trimmedEmail !== '' && !EmailReg.test(trimmedEmail)) {
+      setEmailBorder('red');
+      setIsLoading(false);
+      setAPIMessage(getLocalizedString('EmailError'));
+      setErrorInAPI(true);
+      return;
     }
 
-    return (
-        <View style={{ flex: 1, backgroundColor: '#fff' }}>
-            <StatusBar backgroundColor={ThemeColor} hidden={false} barStyle="dark-content" />
-            <SafeAreaView style={{ flex: 0, backgroundColor: ThemeColor }} />
-            {Platform.OS === 'android' && StatusBar.currentHeight ? (
-                <View style={{ height: StatusBar.currentHeight, backgroundColor: ThemeColor }} />
-            ) : null}
-            <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
-                <View style={{
-                    flex: 1,
-                    backgroundColor: "#fff",
-                    paddingBottom: Platform.OS === 'android' ? 48 : 0 // Standard bottom navigation bar height
-                }}>
-                <KeyboardAvoidingWrapper>
-                    <>
-                        <View style={{ height: '6%', padding: 5, paddingHorizontal: 15, backgroundColor: ThemeColor, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
-                            <TouchableOpacity
-                                style={{
-                                    width: '10%',
-                                    alignItems: 'center'
-                                }}
-                                onPress={() => {
-                                    StatusBar.setHidden(false)
-                                    global.isScreenShotDetected = false
-                                    setIsScreenShot(false)
-                                    setIsRecordingStart(false)
-                                    if (mediaType == "Recordvideo") {
-                                        global.isShakebugSDKOpen = false
-                                        global.IsBackground = 'true'
-                                        goToScreenAtIndex(0)
-                                    }
-                                    else {
-                                        global.IsBackground = 'false'
-                                        goToScreenAtIndex(1)
-                                    }
-                                }}
-                            >
-                                <Image source={require('../Assets/images/close.png')} resizeMode='contain' style={{ width: 30, height: 30 }} />
-                            </TouchableOpacity>
-                            <Text style={{ width: '80%', textAlign: 'center', fontSize: 18, fontWeight: '300', color: 'white' }}>
-                                {title}
-                            </Text>
-                            <TouchableOpacity
-                                style={{
-                                    width: '10%',
-                                    alignItems: 'center'
-                                }}
-                                onPress={() => {
-                                    Keyboard.dismiss()
-                                    ReportBugFunc()
-
-                                }}
-                            >
-                                <Image source={require('../Assets/images/next.png')} resizeMode='contain' style={{ width: 25, height: 25 }} />
-                            </TouchableOpacity>
-                        </View>
-
-                        <TouchableOpacity
-                            style={{ marginHorizontal: 20, marginTop: '3%', borderWidth: descBorder == 'red' ? 2 : 1, height: "20%", paddingHorizontal: 10, borderRadius: 6, borderColor: descBorder, alignItems: 'center' }}
-                            activeOpacity={1}
-                            onPress={() => descRef.current.focus()}
-                        >
-                            <TextInput
-                                ref={descRef}
-                                placeholder={Localization[global.ShakebugLanguage].Description}
-                                placeholderTextColor={"#b2b2b2"}
-                                multiline
-                                style={{
-                                    fontSize: 16,
-                                    color: '#000',
-                                    width: '100%',
-                                    paddingVertical: 8,
-
-                                }}
-                                value={desc}
-                                onChangeText={(e) => {
-                                    setDesc(e)
-                                    setDescBorder("black")
-                                }}
-                            />
-
-                            {descBorder == "red" ? (<View
-                                style={{
-                                    position: 'absolute',
-                                    bottom: 10,
-                                    right: 10,
-                                    alignItems: 'center',
-                                    flexDirection: 'row'
-                                }}
-                            >
-                                <View style={{ width: 20, height: 20, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center', borderRadius: 50 }}>
-                                    <Text style={{ fontSize: 16, fontWeight: '900', textAlign: 'center', textAlignVertical: 'center', color: 'white' }}>!</Text>
-                                </View>
-                                <Text style={{ color: 'red', fontWeight: '500', marginLeft: 5 }}>{Localization[global.ShakebugLanguage].DescriptionError}</Text>
-                            </View>) : null}
-                        </TouchableOpacity>
-
-                        <View style={{ marginHorizontal: 20, marginTop: '2%', borderWidth: EmailBorder == "red" ? 2 : 1, borderColor: EmailBorder, height: '7%', paddingHorizontal: 10, borderRadius: 6 }}>
-                            <TextInput
-                                placeholder={Localization[global.ShakebugLanguage].Email}
-                                placeholderTextColor={"#b2b2b2"}
-                                style={{
-                                    fontSize: 16,
-                                    color: '#000',
-                                    height: '100%',
-                                    width: '100%',
-                                    textAlignVertical: 'center',
-                                }}
-                                value={email}
-                                onChangeText={(val) => {
-                                    setEmail(val)
-                                    setEmailBorder("black")
-                                }}
-                            />
-
-                        </View>
-                        <Text style={{ fontSize: 12, color: 'red', fontWeight: '500', marginRight: '6%', textAlign: 'right' }}>{EmailBorder == "red" ? Localization[global.ShakebugLanguage].EmailError : ""}</Text>
-
-                        <TouchableOpacity activeOpacity={1} onPress={Keyboard.dismiss} style={{ height: Platform.OS == 'ios' ? Dimensions.get('window').height * 0.50 : '50%', width: '100%', marginTop: '0%', justifyContent: 'center', alignItems: 'center' }}>
-                            {type == "img" ?
-                                path != "" && <Image source={{ uri: path }} resizeMode='contain' style={{ width: '100%', height: '100%' }} />
-                                :
-                                <View style={{ width: '100%', height: '100%' }}>
-                                    {poster != "" && <VideoPlayer videoUri={path} img={poster} themeColor={ThemeColor} goToScreenAtIndex={goToScreenAtIndex} goBack={goBack} SDKScreenTitle={SDKScreenTitle} UpdateStatusBar={UpdateStatusBar} />}
-                                </View>}
-                        </TouchableOpacity>
-
-                        <View style={{ marginTop: '2%', width: '100%'}}>
-                            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginHorizontal: 20 }}>
-                                <TouchableOpacity onPress={() => openImagePicker()}>
-                                    <Text style={{ fontSize: 16, color: ThemeColor, fontWeight: '300' }}>{Localization[global.ShakebugLanguage].ReplaceImage}</Text>
-                                </TouchableOpacity>
-                                <TouchableOpacity
-                                    onPress={() => {
-                                        if (global.AllowVideo == false) {
-                                            setAPIMessage(`You have reached your max video limitation. \n\n Used Videos: ${global.used_video} \nAllowed Videos: ${global.total_video}\n\nPlease visit https://www.shakebug.com website and upgrade your plan.`)
-                                            setErrorInAPI(true)
-                                        }
-                                        else {
-                                            openVideoPicker()
-                                        }
-                                    }}
-                                >
-                                    <Text style={{ fontSize: 16, color: ThemeColor, fontWeight: '300' }}>{Localization[global.ShakebugLanguage].ReplaceVideo}</Text>
-                                </TouchableOpacity>
-                            </View>
-
-                            <View style={{ alignItems: 'flex-end', marginHorizontal: 15, marginTop: '0.5%' }}>
-                                <Text style={{ fontSize: 12, color: "gray", fontWeight: '300' }}>© <Text>ShakeBug v{global.sdk_version}</Text></Text>
-                            </View>
-
-                        </View>
-
-
-                        <CustomeAlert
-                            isVisible={isErrorInAPI || isBugReported}
-                            text={apiMessage}
-                            color={ThemeColor}
-                            OnPrees={() => {
-                                if (isBugReported) {
-                                    global.isScreenShotDetected = false;
-                                    setIsScreenShot(false)
-                                    setIsRecordingStart(false)
-                                    goToScreenAtIndex(0)
-                                }
-                                setIsBugReported(false)
-                                setErrorInAPI(false)
-                                setIsLoading(false)
-                            }}
-                        />
-                    </>
-                </KeyboardAvoidingWrapper>
+    setIsLoading(true);
+    let isVideo = type === 'img' ? 0 : 1;
+
+    if (isInternet !== false) {
+      try {
+        const { success, message } = await AddIssueApi(
+          global.session_id,
+          global.application_id,
+          path,
+          isVideo,
+          desc,
+          email
+        );
+        if (success) {
+          setIsLoading(false);
+          setIsBugReported(true);
+          setAPIMessage(getLocalizedString('BugSubmited'));
+          log.info('API response:', message);
+        } else {
+          setIsLoading(false);
+          setAPIMessage('Something went wrong! Please try again later!');
+          setErrorInAPI(true);
+          log.warn('API response:', message);
+        }
+      } catch (err) {
+        setAPIMessage('Something went wrong! Please try again later!');
+        setErrorInAPI(true);
+        setIsLoading(false);
+        log.error('err', err);
+      }
+    } else {
+      setErrorInAPI(true);
+      setAPIMessage(getLocalizedString('InterNetConnetionError'));
+      setIsLoading(false);
+    }
+  };
+
+  const isImageMedia = type === 'img';
+
+  return (
+    <View style={{ flex: 1, backgroundColor: theme.detailsBg }}>
+      <StatusBar backgroundColor={theme.headerBg} hidden={false} barStyle="light-content" />
+
+      {/* Top Header with Safe Area */}
+      <SafeAreaView style={{ backgroundColor: theme.headerBg }}>
+        {Platform.OS === 'android' && StatusBar.currentHeight ? (
+          <View style={{ height: StatusBar.currentHeight, backgroundColor: theme.headerBg }} />
+        ) : null}
+        <View style={[styles.header, { backgroundColor: theme.headerBg }]}>
+          {/* Back chevron < */}
+          {type === 'img' ? (<TouchableOpacity
+            style={styles.headerBtn}
+            onPress={handleBack}
+            hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+            activeOpacity={0.7}
+          >
+            <BackChevronIcon color="#ffffff" size={22} />
+          </TouchableOpacity>) : (
+            <TouchableOpacity
+              style={styles.headerBtn}
+              onPress={handleBack}
+              hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+              activeOpacity={0.7}
+            >
+              <CloseCircleIcon color="#ffffff" size={22} />
+            </TouchableOpacity>
+          )}
+
+          {/* Screen Title */}
+          <Text style={styles.headerTitle} numberOfLines={1}>
+            {title || getLocalizedString('SecondScreenTitle') || getLocalizedString('AddDetails') || 'Add details'}
+          </Text>
+
+          {/* Send pill button */}
+          <TouchableOpacity
+            style={[styles.sendButton, { borderWidth: 1, borderColor: "#ffffff" }]}
+            onPress={() => {
+              Keyboard.dismiss();
+              ReportBugFunc();
+            }}
+            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+            activeOpacity={0.8}
+          >
+            <Text style={[styles.sendButtonText, { color: "#ffffff" }]}>
+              {getLocalizedString('Send')}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </SafeAreaView>
+
+      {/* Form Content */}
+      <View style={[styles.body, { backgroundColor: theme.detailsBg }]}>
+        <KeyboardAvoidingWrapper
+          style={{ backgroundColor: theme.detailsBg }}
+          contentContainerStyle={{ flexGrow: 1, paddingBottom: 4 }}
+          scrollEnabled={true}
+          bounces={false}
+        >
+          <View style={styles.formContainer}>
+            {/* Description Input Card */}
+            <TouchableOpacity
+              style={[
+                styles.descriptionCard,
+                {
+                  backgroundColor: theme.inputBg,
+                  borderColor:
+                    descBorder === 'red' ? '#ef4444' : theme.inputBorder,
+                  borderWidth: descBorder === 'red' ? 2 : 1,
+                },
+              ]}
+              activeOpacity={1}
+              onPress={() => descRef.current?.focus()}
+            >
+              <TextInput
+                ref={descRef}
+                placeholder={getLocalizedString('Description')}
+                placeholderTextColor={theme.placeholderColor}
+                multiline
+                style={[styles.descriptionInput, { color: theme.textColor }]}
+                value={desc}
+                cursorColor={theme.isDark ? '#ffffff' : ThemeColor}
+                selectionColor={theme.isDark ? 'rgba(255,255,255,0.3)' : 'rgba(49,58,70,0.3)'}
+                keyboardAppearance={theme.isDark ? 'dark' : 'light'}
+                onChangeText={(e) => {
+                  setDesc(e);
+                  if (descBorder) setDescBorder('');
+                }}
+              />
+            </TouchableOpacity>
+
+            {/* Email Input Card with Envelope Icon */}
+            <View
+              style={[
+                styles.emailCard,
+                {
+                  backgroundColor: theme.inputBg,
+                  borderColor:
+                    EmailBorder === 'red' ? '#ef4444' : theme.inputBorder,
+                  borderWidth: EmailBorder === 'red' ? 1.5 : 1,
+                },
+              ]}
+            >
+              <View style={styles.emailIconWrapper}>
+                <MailIcon
+                  color={
+                    EmailBorder === 'red'
+                      ? '#ef4444'
+                      : theme.placeholderColor
+                  }
+                  size={18}
+                />
+              </View>
+              <TextInput
+                placeholder={getLocalizedString('Email')}
+                placeholderTextColor={theme.placeholderColor}
+                keyboardType="email-address"
+                autoCapitalize="none"
+                style={[styles.emailInput, { color: theme.textColor }]}
+                value={email}
+                cursorColor={theme.isDark ? '#ffffff' : ThemeColor}
+                selectionColor={
+                  theme.isDark
+                    ? 'rgba(255,255,255,0.3)'
+                    : 'rgba(49,58,70,0.3)'
+                }
+                keyboardAppearance={theme.isDark ? 'dark' : 'light'}
+                onChangeText={(val) => {
+                  setEmail(val);
+                  if (EmailBorder) setEmailBorder('');
+                }}
+              />
             </View>
 
-        </SafeAreaView>
-        <LoadingModal visible={isLoading} color={ThemeColor} />
-        </View>
-    )
-}
+            {/* ATTACHED MEDIA Label */}
+            <Text
+              style={[
+                styles.sectionLabel,
+                { color: theme.textSecondary },
+              ]}
+            >
+              {getLocalizedString('AttachedMedia')}
+            </Text>
+
+            {/* Attached Media Container Card with Badges - Expands to fill available vertical space */}
+            <View
+              style={[
+                styles.mediaCard,
+                {
+                  width: cardWidth,
+                  backgroundColor: theme.isDark ? '#2b2f38' : '#f8fafc',
+                  borderColor: theme.borderColor,
+                },
+              ]}
+            >
+              {/* Floating Top Badges (pointerEvents="none" so touches pass directly to ZoomableImage) */}
+              <View style={styles.badgesRow} pointerEvents="none">
+                {/* Left Badge: Screenshot or Video */}
+                <View style={styles.mediaBadge}>
+                  <View style={styles.badgeIconWrapper}>
+                    {isImageMedia ? (
+                      <CameraIcon color="#ffffff" size={13} />
+                    ) : (
+                      <CamcorderIcon color="#ffffff" size={13} />
+                    )}
+                  </View>
+                  <Text style={styles.badgeText}>
+                    {isImageMedia
+                      ? getLocalizedString('Screenshot')
+                      : 'Video'}
+                  </Text>
+                </View>
+
+                {/* Right Badge: Pinch to zoom (for image only, when card width allows) */}
+                {isImageMedia && cardWidth >= 220 ? (
+                  <View style={styles.mediaBadge}>
+                    <Text style={styles.badgeText}>
+                      {getLocalizedString('PinchToZoom')}
+                    </Text>
+                  </View>
+                ) : null}
+              </View>
+
+              {/* Media Preview View */}
+              {isImageMedia ? (
+                <ZoomableImage uri={path} style={styles.zoomableImageContainer} resizeMode="contain" />
+              ) : (
+                <View style={styles.videoPlayerContainer}>
+                  {poster !== '' && (
+                    <VideoPlayer
+                      videoUri={path}
+                      img={poster}
+                      themeColor={ThemeColor}
+                      goToScreenAtIndex={goToScreenAtIndex}
+                      goBack={goBack}
+                      SDKScreenTitle={SDKScreenTitle}
+                      UpdateStatusBar={() => StatusBar.setHidden(false)}
+                    />
+                  )}
+                </View>
+              )}
+            </View>
 
-export default AddDetailsScreen
+            {/* Bottom Actions and Version Footer - Anchored at the bottom */}
+            <View style={styles.bottomSection}>
+              {/* Replace Action Buttons */}
+              <View style={styles.replaceButtonsRow}>
+                {/* Replace Image Button */}
+                <TouchableOpacity
+                  style={[
+                    styles.replaceButton,
+                    {
+                      backgroundColor: theme.detailsBg,
+                      borderColor: theme.buttonBorder,
+                    },
+                  ]}
+                  activeOpacity={0.8}
+                  onPress={openImagePicker}
+                >
+                  <View style={styles.replaceButtonIconWrapper}>
+                    <PhotoGalleryIcon color={theme.textSecondary} size={18} />
+                  </View>
+                  <Text
+                    style={[
+                      styles.replaceButtonText,
+                      { color: theme.textSecondary },
+                    ]}
+                  >
+                    {getLocalizedString('ReplaceImage')}
+                  </Text>
+                </TouchableOpacity>
+
+                {/* Replace Video Button */}
+                <TouchableOpacity
+                  style={[
+                    styles.replaceButton,
+                    {
+                      backgroundColor: theme.detailsBg,
+                      borderColor: theme.buttonBorder,
+                    },
+                  ]}
+                  activeOpacity={0.8}
+                  onPress={() => {
+                    if (global.AllowVideo === false) {
+                      setAPIMessage(
+                        `You have reached your max video limitation. \n\n Used Videos: ${global.used_video} \nAllowed Videos: ${global.total_video}\n\nPlease visit https://www.shakebug.com website and upgrade your plan.`
+                      );
+                      setErrorInAPI(true);
+                    } else {
+                      openVideoPicker();
+                    }
+                  }}
+                >
+                  <View style={styles.replaceButtonIconWrapper}>
+                    <CamcorderIcon color={theme.textSecondary} size={18} />
+                  </View>
+                  <Text
+                    style={[
+                      styles.replaceButtonText,
+                      { color: theme.textSecondary },
+                    ]}
+                  >
+                    {getLocalizedString('ReplaceVideo')}
+                  </Text>
+                </TouchableOpacity>
+              </View>
+
+              {/* Version Footer */}
+              <View style={styles.footerContainer}>
+                <Text style={[styles.footerText, { color: theme.textSecondary }]}>
+                  ©ShakeBug v{global.sdk_version || '2.4.16'}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </KeyboardAvoidingWrapper>
+      </View>
+
+      {/* Bottom Safe Area Spacer */}
+      <View style={{ height: bottomSpace, width: '100%', backgroundColor: theme.detailsBg }} />
+
+      <CustomeAlert
+        isVisible={isErrorInAPI || isBugReported}
+        text={apiMessage}
+        color={ThemeColor}
+        OnPrees={() => {
+          if (isBugReported) {
+            global.isTrigger = false;
+            global.isShakebugOpen = false;
+            global.isScreenShotDetected = false;
+            global.isScreeenShotTaken = false;
+            global.isShakebugSDKOpen = false;
+            global.IsBackground = 'true';
+            setIsScreenShot(false);
+            setIsRecordingStart(false);
+            goToScreenAtIndex(0);
+          }
+          setIsBugReported(false);
+          setErrorInAPI(false);
+          setIsLoading(false);
+        }}
+      />
+
+      <LoadingModal visible={isLoading} color={ThemeColor} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    height: 52,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+  },
+  headerBtn: {
+    width: 44,
+    height: 44,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#ffffff',
+    textAlign: 'center',
+    flex: 1,
+  },
+  sendButton: {
+    // backgroundColor: '#ffffff',
+    borderRadius: 20,
+    paddingHorizontal: 18,
+    paddingVertical: 6,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  sendButtonText: {
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  body: {
+    flex: 1,
+  },
+  formContainer: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 0,
+  },
+  descriptionCard: {
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    height: 120,
+    marginBottom: 10,
+    justifyContent: 'flex-start',
+  },
+  descriptionInput: {
+    fontSize: 15,
+    width: '100%',
+    height: '100%',
+    padding: 0,
+    textAlignVertical: 'top',
+  },
+  emailCard: {
+    borderRadius: 12,
+    height: 45,
+    paddingHorizontal: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  emailIconWrapper: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 10,
+  },
+  emailInput: {
+    fontSize: 15,
+    flex: 1,
+    height: '100%',
+    padding: 0,
+  },
+  sectionLabel: {
+    fontSize: 12,
+    fontWeight: '700',
+    letterSpacing: 0.5,
+    marginTop: 8,
+    marginBottom: 6,
+  },
+  mediaCard: {
+    flex: 1,
+    minHeight: 180,
+    borderRadius: 14,
+    borderWidth: 1,
+    overflow: 'hidden',
+    position: 'relative',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    alignSelf: 'center',
+    marginBottom: 8,
+  },
+  badgesRow: {
+    position: 'absolute',
+    top: 10,
+    left: 10,
+    right: 10,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    zIndex: 10,
+    elevation: 4,
+  },
+  mediaBadge: {
+    backgroundColor: 'rgba(30, 41, 59, 0.78)',
+    borderRadius: 12,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  badgeIconWrapper: {
+    marginRight: 5,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  badgeText: {
+    color: '#ffffff',
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  zoomableImageContainer: {
+    width: '100%',
+    height: '100%',
+  },
+  videoPlayerContainer: {
+    width: '100%',
+    height: '100%',
+  },
+  bottomSection: {
+    width: '100%',
+    marginTop: 'auto',
+  },
+  replaceButtonsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 4,
+    marginBottom: 4,
+  },
+  replaceButton: {
+    flex: 1,
+    height: 42,
+    borderRadius: 12,
+    borderWidth: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: 4,
+  },
+  replaceButtonIconWrapper: {
+    marginRight: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  replaceButtonText: {
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  footerContainer: {
+    alignItems: 'center',
+    marginTop: 2,
+    marginBottom: 4,
+  },
+  footerText: {
+    fontSize: 12,
+    fontWeight: '400',
+  },
+});
+
+export default AddDetailsScreen;