shakebug-react-native 2.4.14 → 2.4.16

package/src/Screens/FirstScreen.js

@@ -1,630 +1,1040 @@
-import { Alert, Image, ImageBackground, Linking, PermissionsAndroid, Platform, SafeAreaView, StatusBar, Text, TouchableOpacity, View, TextInput, Keyboard, PanResponder, Animated, StyleSheet, KeyboardAvoidingView, BackHandler, Dimensions, Modal } from 'react-native'
-import React, { useEffect, useRef, useState } from 'react'
+import {
+  Alert,
+  Image,
+  ImageBackground,
+  Platform,
+  SafeAreaView,
+  StatusBar,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+  TextInput,
+  Keyboard,
+  PanResponder,
+  Animated,
+  StyleSheet,
+  KeyboardAvoidingView,
+  BackHandler,
+  Dimensions,
+  Modal,
+} from 'react-native';
+import React, { useEffect, useRef, useState } from 'react';
 import { ClearCanvas, RNDrawingView } from './StrockView.js';
-import { ShakebugCapture, captureScreen } from '../index';
-import { launchImageLibrary } from '../../ImageOrVedioPicker/src/index';
-import { logger, consoleTransport } from "react-native-logs";
-import { NativeModules } from 'react-native';
+import { ShakebugCapture } from '../index';
 import { useNavigation } from '../Componanats/NavigationContext';
-import { Localization } from '../Componanats/localization';
-import { ActivityIndicator } from 'react-native';
-import DeviceInfo from '../../DeviceInfo';
+import { Localization, getLocalizedString } from '../Componanats/localization';
 import { useGlobalState } from '../Componanats/GlobalStateContext.js';
 import CustomeAlert from '../Componanats/CustomAlert.js';
 import LoadingModal from '../Componanats/LoadingModal.js';
+import { useTheme } from '../Componanats/Theme.js';
+import { ForwardChevronIcon, CloseCircleIcon } from '../Componanats/Icons.js';
+import { getBottomSpace, isIPhoneWithNotch } from '../Componanats/SafeAreaHelper.js';
 
-console.disableYellowBox = true;
-console.ignoredYellowBox = ["Warning: Each", "Warning: Failed", "Possible"];
+const normalizeUri = (uri) => {
+  if (!uri || typeof uri !== 'string') return uri;
+  if (
+    Platform.OS === 'android' &&
+    !uri.startsWith('file://') &&
+    !uri.startsWith('content://') &&
+    !uri.startsWith('http')
+  ) {
+    return `file://${uri}`;
+  }
+  return uri;
+};
 
-const FirstScreen = ({ img, themeColor, SDKScreenTitle }) => {
+// Individual Draggable Text Annotation Component
+const DraggableTextItem = ({
+  item,
+  imageRect,
+  isDeleteActive,
+  onLongPress,
+  onTap,
+  onDelete,
+  onDismissDelete,
+  isLoading,
+}) => {
+  const textLayoutRef = useRef({ width: 80, height: 28 });
+  const initialYClamped = (() => {
+    const cH = imageRect.height || 400;
+    const initialY = 0.35 * cH;
+    const minY = 4 - initialY;
+    const maxY = Math.max(minY, cH - 4 - initialY - 32);
+    return Math.max(minY, Math.min(maxY, item.initialOffsetY || 0));
+  })();
+  const pan = useRef(new Animated.ValueXY({ x: 0, y: initialYClamped })).current;
+  const panPosRef = useRef({ x: 0, y: initialYClamped });
+  const dragStartPosRef = useRef({ x: 0, y: initialYClamped });
+  const longPressTimerRef = useRef(null);
+  const isDraggingRef = useRef(false);
+  const isLongPressTriggeredRef = useRef(false);
 
-  const { setIsScreenShot, setIsRecordingStart } = useGlobalState()
+  const getClampedTranslation = (targetX, targetY) => {
+    const cW = imageRect.width;
+    const cH = imageRect.height;
+    const tW = textLayoutRef.current.width || 80;
+    const tH = textLayoutRef.current.height || 28;
 
-  const ThemeColor = themeColor ? themeColor : "#1dd3e3";
+    // Constrain horizontally within image edges (min 4px margin from each side)
+    const maxDeltaX = Math.max(0, (cW - tW) / 2 - 4);
+    const minX = -maxDeltaX;
+    const maxX = maxDeltaX;
 
-  const { goBack, navigate, goToScreenAtIndex, focusedScreen } = useNavigation();
+    // Constrain vertically within image bounds (base position top: '35%')
+    const initialY = 0.35 * cH;
+    const minY = 4 - initialY;
+    const maxY = Math.max(minY, cH - 4 - initialY - tH);
 
-  const [selectd, setSelected] = useState(2)
-  let canvasRef = useRef()
-  const ref = useRef();
-  const [image, setImage] = useState(img);
-  const [addTextView, setAddTextView] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const [text, setText] = useState("")
-  const [margin, setMargin] = useState(0)
-  const [isDraw, setIsDraw] = useState(true)
-  const [isShow, setIsShow] = useState(false)
-  const [isAlert, setIsAlert] = useState(false)
-  const [isAlertText, setIsAlertText] = useState("")
-  const [isShowModal, setIsShowModal] = useState(true)
+    const clampedX = Math.max(minX, Math.min(maxX, targetX));
+    const clampedY = Math.max(minY, Math.min(maxY, targetY));
 
-  const isFocused = focusedScreen == "AddDetailsScreen"
+    return { clampedX, clampedY };
+  };
 
-  let title = SDKScreenTitle ? SDKScreenTitle.split(",")[0] : ""
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onStartShouldSetPanResponderCapture: () => false,
+      onMoveShouldSetPanResponder: (evt, gestureState) => {
+        return Math.abs(gestureState.dx) > 3 || Math.abs(gestureState.dy) > 3;
+      },
+      onMoveShouldSetPanResponderCapture: (evt, gestureState) => {
+        return Math.abs(gestureState.dx) > 3 || Math.abs(gestureState.dy) > 3;
+      },
+      onPanResponderGrant: () => {
+        isDraggingRef.current = false;
+        isLongPressTriggeredRef.current = false;
+        dragStartPosRef.current = { ...panPosRef.current };
 
-  useEffect(() => {
-    StatusBar.setHidden(false, 'slide');
+        // 500ms long press timer to reveal remove (X) icon
+        if (longPressTimerRef.current) {
+          clearTimeout(longPressTimerRef.current);
+        }
+        longPressTimerRef.current = setTimeout(() => {
+          if (!isDraggingRef.current) {
+            isLongPressTriggeredRef.current = true;
+            onLongPress(item.id);
+          }
+        }, 500);
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        if (Math.abs(gestureState.dx) > 3 || Math.abs(gestureState.dy) > 3) {
+          isDraggingRef.current = true;
+          if (longPressTimerRef.current) {
+            clearTimeout(longPressTimerRef.current);
+            longPressTimerRef.current = null;
+          }
+        }
+        const targetX = dragStartPosRef.current.x + gestureState.dx;
+        const targetY = dragStartPosRef.current.y + gestureState.dy;
+        const { clampedX, clampedY } = getClampedTranslation(targetX, targetY);
+        pan.setValue({ x: clampedX, y: clampedY });
+        panPosRef.current = { x: clampedX, y: clampedY };
+      },
+      onPanResponderRelease: (evt, gestureState) => {
+        if (longPressTimerRef.current) {
+          clearTimeout(longPressTimerRef.current);
+          longPressTimerRef.current = null;
+        }
 
-    global.isScreenShotDetected = true;
-    const backAction = () => {
-      global.isTrigger = false
-      global.isShakebugOpen = false
-      global.isScreenShotDetected = false
-      global.isScreeenShotTaken = false
-      global.isShakebugSDKOpen = false
-      setIsScreenShot(false)
-      setIsRecordingStart(false)
-      goToScreenAtIndex(0)
-      return true; // Return true to prevent default behavior (exit app)
-    };
+        if (isLongPressTriggeredRef.current) {
+          return;
+        }
 
-    const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
+        // Single tap without dragging
+        if (!isDraggingRef.current && Math.abs(gestureState.dx) < 4 && Math.abs(gestureState.dy) < 4) {
+          if (isDeleteActive) {
+            onDismissDelete();
+          } else {
+            onTap(item);
+          }
+        }
+      },
+      onPanResponderTerminate: () => {
+        if (longPressTimerRef.current) {
+          clearTimeout(longPressTimerRef.current);
+          longPressTimerRef.current = null;
+        }
+      },
+    })
+  ).current;
 
-    return () => backHandler.remove(); // Clean up the event listener on unmount
+  return (
+    <Animated.View
+      style={[
+        styles.textCard,
+        {
+          transform: [
+            { translateX: pan.x },
+            { translateY: pan.y },
+          ],
+        },
+      ]}
+    >
+      <View
+        {...panResponder.panHandlers}
+        onLayout={(e) => {
+          const { width, height } = e.nativeEvent.layout;
+          if (width > 0 && height > 0) {
+            textLayoutRef.current = { width: width + 10, height: height + 10 };
+          }
+        }}
+        style={[
+          styles.textCardBadge,
+          {
+            borderColor: isDeleteActive ? item.color : 'rgba(0, 0, 0, 0.12)',
+            borderWidth: isDeleteActive ? 1.5 : 1,
+          },
+        ]}
+      >
+        <Text
+          style={[
+            styles.annotationText,
+            {
+              color: item.color,
+            },
+          ]}
+        >
+          {item.text}
+        </Text>
+      </View>
 
-  }, []);
+      {/* Remove text button (X) */}
+      {isDeleteActive && !isLoading ? (
+        <TouchableOpacity
+          activeOpacity={0.6}
+          onPress={() => onDelete(item.id)}
+          style={styles.removeTextBtn}
+          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+        >
+          <Image
+            source={require('../Assets/images/RemoveTextView.png')}
+            style={styles.removeIcon}
+            resizeMode="contain"
+          />
+        </TouchableOpacity>
+      ) : null}
+    </Animated.View>
+  );
+};
 
-  const { RNCameraPermission } = NativeModules
+const FirstScreen = ({ img, themeColor, SDKScreenTitle }) => {
+  const { setIsScreenShot, setIsRecordingStart } = useGlobalState();
+  const resolvedColor = (themeColor && themeColor !== '#2E2E2E')
+    ? themeColor
+    : (global.ShakebugThemeColor || themeColor || '#2E2E2E');
+  const ThemeColor = resolvedColor;
+  const theme = useTheme(resolvedColor);
+  const { navigate, goToScreenAtIndex } = useNavigation();
 
-  const [keyboardOpen, setKeyboardOpen] = useState(true);
+  // Color selection: 1 = black, 2 = red, 3 = green, 4 = blue, 5 = yellow
+  const [selected, setSelected] = useState(1);
+  const canvasRef = useRef();
+  const ref = useRef();
+  const textInputRef = useRef(null);
+  const [image, setImage] = useState(img);
+  const [addTextView, setAddTextView] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [textItems, setTextItems] = useState([]);
+  const [editingItemId, setEditingItemId] = useState(null);
+  const [activeDeleteId, setActiveDeleteId] = useState(null);
+  const [draftText, setDraftText] = useState('');
+  const [isDraw, setIsDraw] = useState(true);
+  const [isAlert, setIsAlert] = useState(false);
+  const [isAlertText, setIsAlertText] = useState('');
+  const bottomInset = getBottomSpace();
+  const [imageSize, setImageSize] = useState({
+    width: Dimensions.get('screen').width,
+    height: Dimensions.get('screen').height,
+  });
+  const [containerSize, setContainerSize] = useState({
+    width: Dimensions.get('window').width,
+    height: Dimensions.get('window').height - 100,
+  });
 
-  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,
-  };
+  // Load exact image aspect ratio
+  useEffect(() => {
+    if (image) {
+      const uri = normalizeUri(image);
+      Image.getSize(
+        uri,
+        (w, h) => {
+          if (w > 0 && h > 0) {
+            setImageSize({ width: w, height: h });
+          }
+        },
+        () => {
+          const { width, height } = Dimensions.get('screen');
+          setImageSize({ width, height });
+        }
+      );
+    }
+  }, [image]);
 
-  var log = logger.createLogger(defaultConfig);
+  // Compute exact fitted rectangle of the screenshot so ShakebugCapture captures ONLY the image
+  // and drawings/text are strictly bounded within the image
+  const getImageRect = () => {
+    const maxW = containerSize.width || Dimensions.get('window').width;
+    // Leave 80px space for floating toolbar at the bottom so screenshot never overlaps or goes behind it
+    const maxH = Math.max(
+      100,
+      (containerSize.height || (Dimensions.get('window').height - 100)) - 80
+    );
 
-  // For geting event while keybord open and close
-  Keyboard.addListener('keyboardDidShow', () => {
-    setKeyboardOpen(true);
-  })
+    const imgRatio = (imageSize.width > 0 && imageSize.height > 0)
+      ? (imageSize.width / imageSize.height)
+      : (Dimensions.get('screen').width / Dimensions.get('screen').height);
 
-  Keyboard.addListener('keyboardDidHide', () => {
-    setKeyboardOpen(false);
-  })
+    let renderW = maxW;
+    let renderH = maxW / imgRatio;
 
-  UpdateStatusBar = () => {
-    StatusBar.setHidden(false)
-  }
+    if (renderH > maxH) {
+      renderH = maxH;
+      renderW = maxH * imgRatio;
+    }
 
-  // open Video picker to choose video
-  const openVideoPicker = () => {
-    setIsLoading(true)
-    const options = {
-      mediaType: 'video',
-      includeBase64: false,
-      selectionLimit: 1
+    return {
+      width: Math.round(renderW),
+      height: Math.round(renderH),
     };
+  };
 
-    launchImageLibrary(options, async (response) => {
-      if (response.didCancel) {
-        setIsLoading(false)
-      } else if (response.error || response.errorCode) {
-        setIsLoading(false)
-        // console.log('Image picker error: ', response.error);
-      } else {
-        let vedioUri = await response.uri || response.assets?.[0]?.uri;
-        if (response.assets?.[0]?.type?.slice(0, 5).trim() == "video") {
-          setIsLoading(false)
-          navigate("TrimVideoScreen", { video: `${vedioUri}`, Type: "video", themeColor: `${ThemeColor}`, SDKScreenTitle: `${SDKScreenTitle}`, UpdateStatusBar: UpdateStatusBar, updateParent: updateImage })
-        }
-        else {
-          setIsLoading(false)
-          setIsAlertText("Invalid selection, Please choose a valid video file")
-          setIsAlert(true)
-        }
-      }
-    });
+  const imageRect = getImageRect();
+
+  // Auto-focus text input reliably on both Android and iOS
+  useEffect(() => {
+    if (addTextView) {
+      const timer = setTimeout(() => {
+        textInputRef.current?.focus();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [addTextView]);
 
+  const title = SDKScreenTitle
+    ? SDKScreenTitle.split(',')[0]
+    : getLocalizedString('FirstScreenTitle');
+
+  const handleExit = () => {
+    global.isTrigger = false;
+    global.isShakebugOpen = false;
+    global.isScreenShotDetected = false;
+    global.isScreeenShotTaken = false;
+    global.isShakebugSDKOpen = false;
+    setIsScreenShot(false);
+    setIsRecordingStart(false);
+    goToScreenAtIndex(0);
   };
 
-  // For update image while change from Add details screen
-  const updateImage = (data) => {
-    ClearCanvas(canvasRef)
-    setText("")
-    setImage(data)
-  }
+  useEffect(() => {
+    StatusBar.setHidden(false, 'slide');
+    global.isScreenShotDetected = true;
+
+    const backAction = () => {
+      handleExit();
+      return true;
+    };
+
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
+    return () => backHandler.remove();
+  }, []);
+
+  const [keyboardOpen, setKeyboardOpen] = useState(true);
 
   useEffect(() => {
-    global.IsBackground = 'false'
-    Keyboard.addListener('keyboardDidShow', () => {
-      setMargin("-10%")
-    })
-  }, [])
+    const showSub = Keyboard.addListener('keyboardDidShow', () => setKeyboardOpen(true));
+    const hideSub = Keyboard.addListener('keyboardDidHide', () => setKeyboardOpen(false));
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, []);
 
-  const ScreenRecord = (ismic) => {
-    global.isMic = ismic;
-    global.isRecordingStart = true;
-    setIsScreenShot(false)
-    goToScreenAtIndex(0)
-  }
+  const updateImage = (data) => {
+    handleClearAll();
+    setImage(data);
+  };
 
-  const RecordVideo = async () => {
-    Alert.alert(
-      Localization[global.ShakebugLanguage].RecordAudio,
-      "",
-      [
-        {
-          text: Localization[global.ShakebugLanguage].No,
-          onPress: (() => {
-            setIsLoading(true)
-            if (Platform.OS == 'ios') {
-              RNCameraPermission.checkCameraPermissionStatus().then(res => {
-                if (res == "denied") {
-                  Alert.alert(
-                    "",
-                    Localization[global.ShakebugLanguage].AudioPermission,
-                    [
-                      {
-                        text: Localization[global.ShakebugLanguage].No,
-                        style: 'cancel'
-                      },
-                      {
-                        text: Localization[global.ShakebugLanguage].Yes,
-                        style: 'default',
-                        onPress: (() => {
-                          Linking.openSettings()
-                        })
-                      }
-                    ]
-                  )
-                }
-                else if (res == "granted") {
-                  setIsLoading(true)
-                  ScreenRecord(false)
-                }
-              })
-            }
-            else {
-              ScreenRecord(false)
-            }
-
-          }),
-          style: 'cancel'
-        },
-        {
-          'text': Localization[global.ShakebugLanguage].Yes,
-          onPress: (() => {
-
-            if (Platform.OS == 'android') {
-              PermissionsAndroid.request(
-                PermissionsAndroid.PERMISSIONS.RECORD_AUDIO
-              ).then(res => {
-                if (res == 'granted') {
-                  setIsLoading(true)
-                  ScreenRecord(true)
-                }
-                else if (res == 'denied') {
-                  setIsLoading(true)
-                  ScreenRecord(false)
-                }
-                else {
-                  Alert.alert(
-                    "",
-                    Localization[global.ShakebugLanguage].AudioPermission,
-                    [
-                      {
-                        text: Localization[global.ShakebugLanguage].No,
-                        onPress: (() => {
-                          setIsLoading(true)
-                          ScreenRecord(false)
-                        }),
-                        style: 'cancel'
-                      },
-                      {
-                        text: Localization[global.ShakebugLanguage].Yes,
-                        onPress: (() => {
-                          setIsLoading(true)
-                          Linking.openSettings()
-                        })
-                      }
-                    ]
-                  )
-                }
-              })
-            }
-            else {
-              setIsLoading(true)
-              RNCameraPermission.checkCameraPermissionStatus().then(res => {
-                if (res == "denied") {
-                  Alert.alert(
-                    "",
-                    Localization[global.ShakebugLanguage].AudioPermission,
-                    [
-                      {
-                        text: Localization[global.ShakebugLanguage].No,
-                        style: 'cancel'
-                      },
-                      {
-                        text: Localization[global.ShakebugLanguage].Yes,
-                        style: 'default',
-                        onPress: (() => {
-                          Linking.openSettings()
-                        })
-                      }
-                    ]
-                  )
-                }
-                else if (res == "granted") {
-                  setIsLoading(true)
-                  ScreenRecord(true)
-                }
-              })
-            }
-          })
-        }
-      ]
-    )
+  const getColorHex = (id) => {
+    switch (id) {
+      case 1:
+        return '#000000';
+      case 2:
+        return '#ef4444';
+      case 3:
+        return '#22c55e';
+      case 4:
+        return '#3b82f6';
+      case 5:
+        return '#eab308';
+      default:
+        return '#000000';
+    }
+  };
 
-  }
+  const currentColorHex = getColorHex(selected);
 
-  const pan = useRef(new Animated.ValueXY()).current;
+  const handleOpenNewText = () => {
+    setActiveDeleteId(null);
+    setEditingItemId(null);
+    setDraftText('');
+    setAddTextView(true);
+  };
 
-  const BOUNDARY_X_MIN = 0;
-  const BOUNDARY_X_MAX = Dimensions.get('window').width * 0.6; // Set your max boundary for x
-  const BOUNDARY_Y_MIN = 0;
-  const BOUNDARY_Y_MAX = Dimensions.get('window').height * 0.75; // Set your max boundary for y
+  const handleEditTextItem = (item) => {
+    setActiveDeleteId(null);
+    setEditingItemId(item.id);
+    setDraftText(item.text);
+    setAddTextView(true);
+  };
 
-  const panResponder = useRef(
-    PanResponder.create({
-      onStartShouldSetPanResponder: () => true,
-      onPanResponderMove: (event, gestureState) => {
-        // Calculate the new x and y values within the boundaries
-        let newX = Math.max(BOUNDARY_X_MIN, Math.min(BOUNDARY_X_MAX, gestureState.dx + pan.x._offset));
-        let newY = Math.max(BOUNDARY_Y_MIN, Math.min(BOUNDARY_Y_MAX, gestureState.dy + pan.y._offset));
+  const handleDeleteItem = (id) => {
+    setTextItems((prev) => prev.filter((it) => it.id !== id));
+    if (activeDeleteId === id) {
+      setActiveDeleteId(null);
+    }
+  };
 
-        pan.setValue({ x: newX - pan.x._offset, y: newY - pan.y._offset });
-      },
-      onPanResponderRelease: () => {
-        pan.flattenOffset();
-      },
-      onPanResponderGrant: () => {
-        pan.setOffset({
-          x: pan.x._value,
-          y: pan.y._value
-        });
-        pan.setValue({ x: 0, y: 0 });
+  const handleSaveText = () => {
+    Keyboard.dismiss();
+    const trimmed = draftText.trim();
+    if (trimmed.length > 0) {
+      if (editingItemId) {
+        setTextItems((prev) =>
+          prev.map((it) => (it.id === editingItemId ? { ...it, text: trimmed } : it))
+        );
+      } else {
+        const offsets = [0, 45, -45, 90, -90, 135];
+        const initialOffsetY = offsets[textItems.length % offsets.length];
+        const newItem = {
+          id: `text_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`,
+          text: trimmed,
+          color: currentColorHex,
+          initialOffsetY,
+        };
+        setTextItems((prev) => [...prev, newItem]);
       }
-    })
+    } else if (editingItemId) {
+      setTextItems((prev) => prev.filter((it) => it.id !== editingItemId));
+    }
+    setEditingItemId(null);
+    setDraftText('');
+    setAddTextView(false);
+  };
 
-  ).current;
+  const handleClearAll = () => {
+    ClearCanvas(canvasRef);
+    setTextItems([]);
+    setActiveDeleteId(null);
+    setEditingItemId(null);
+    setDraftText('');
+  };
 
-  // backgroundColor: "#181818"
+  const handleNext = async () => {
+    try {
+      setActiveDeleteId(null);
+      setIsLoading(true);
+      setTimeout(async () => {
+        try {
+          const ImgUrl = await ref.current.capture();
+          setIsLoading(false);
+          if (ImgUrl != undefined && ImgUrl != null) {
+            global.IsBackground = 'true';
+            navigate('AddDetailsScreen', {
+              media: `${ImgUrl}`,
+              updateParent: updateImage,
+              mediaType: 'img',
+              themeColor: ThemeColor,
+              SDKScreenTitle: `${SDKScreenTitle}`,
+            });
+          }
+        } catch (err) {
+          setIsLoading(false);
+        }
+      }, 60);
+    } catch (e) {
+      setIsLoading(false);
+    }
+  };
 
   return (
-    <View style={{ flex: 1, backgroundColor: '#fff' }}>
-      <StatusBar backgroundColor={ThemeColor} 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: "#e4fdfd",
-          paddingBottom: Platform.OS === 'android' ? 48 : 0 // Standard bottom navigation bar height
-        }}>
-
-          <View style={{ height: '6%', padding: 5, paddingHorizontal: 15, backgroundColor: ThemeColor, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
-            <TouchableOpacity
-              style={{
-                width: '10%',
-                alignItems: 'center'
-              }}
-              onPress={() => {
-                global.isTrigger = false
-                global.isShakebugOpen = false
-                global.IsBackground = 'true'
-                global.isScreeenShotTaken = false
-                setIsScreenShot(false)
-                setIsRecordingStart(false)
-                goToScreenAtIndex(0)
-                global.isScreenShotDetected = false
-                global.isShakebugSDKOpen = false
-              }}
-            >
-              <Image source={require('../Assets/images/close.png')} resizeMode='contain' style={{ width: 35, height: 35 }} />
-            </TouchableOpacity>
-            <Text style={{ width: '80%', height: '80%', fontSize: 18, fontWeight: '300', color: 'white', textAlign: 'center' }}>
-              {title}
-            </Text>
-            <TouchableOpacity
-              style={{
-                width: '10%',
-                alignItems: 'center'
-              }}
-              onPress={async () => {
-                const ImgUrl = await ref.current.capture()
-                if (ImgUrl != undefined || ImgUrl != null) {
-                  global.IsBackground = 'true'
-                  navigate("AddDetailsScreen", { media: `${ImgUrl}`, updateParent: updateImage, mediaType: 'img', themeColor: ThemeColor, SDKScreenTitle: `${SDKScreenTitle}` })
-                }
-
-              }}
-            >
-              <Image source={require('../Assets/images/next.png')} resizeMode='contain' style={{ width: 25, height: 25 }} />
-            </TouchableOpacity>
-          </View>
-          <View style={{ position: 'relative', height: Platform.OS == 'android' ? '78%' : '79%', backgroundColor: '#e4fdfd', width: '100%', alignItems: 'center', paddingTop: 8 }}>
-            <ShakebugCapture ref={ref} options={{ format: "png", quality: 1 }} collapsable={false} style={{ width: Platform.OS == 'android' ? "77%" : '73%', height: '100%' }}>
+    <View style={{ flex: 1, backgroundColor: theme.backgroundColor }}>
+      <StatusBar backgroundColor={theme.headerBg} barStyle="light-content" />
 
-              {text.trim().length > 0 ?
-                <Animated.View
-                  style={[
-                    styles.card,
-                    {
-                      transform: pan.getTranslateTransform(),
-                      opacity: 1,
-                      borderWidth: isShow ? 1 : 0
-                    },
-                  ]}
+      {/* 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 }]}>
+          {/* Close circle button */}
+          <TouchableOpacity
+            style={styles.headerBtn}
+            onPress={handleExit}
+            hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+            activeOpacity={0.7}
+          >
+            <CloseCircleIcon color="#ffffff" size={26} />
+          </TouchableOpacity>
 
-                >
-                  <TouchableOpacity
-                    style={{
-                      width: '100%',
-                      height: '100%'
-                    }}
-                    activeOpacity={1}
-                    onPress={() => setIsShow(!isShow)}
-                  >
-                    <Text
-                      onLongPress={() => {
-                        setIsShow(!isShow)
-                      }}
-                      {...panResponder.panHandlers}
-                      style={{
-                        fontSize: 20,
-                        fontWeight: 'bold',
-                        backgroundColor: 'white',
-                        borderRadius: 8,
-                        padding: 5,
-                        color: selectd == 1 ? "black" : selectd == 2 ? 'red' : selectd == 3 ? 'green' : selectd == 4 ? '#1dd3e3' : selectd == 5 ? "yellow" : 'black',
-                      }}>{text}</Text>
-                  </TouchableOpacity>
+          {/* Screen Title */}
+          <Text style={styles.headerTitle} numberOfLines={1}>
+            {title || getLocalizedString('AnnotateYourBug')}
+          </Text>
 
-                  {isShow ? <TouchableOpacity
-                    activeOpacity={1}
-                    onPress={() => setText("")}
-                    style={{ position: 'absolute', top: '-25%', left: '-15%', width: 20, height: 20, zIndex: 1 }}>
-                    <Image source={require("../Assets/images/RemoveTextView.png")} style={{ width: '100%', height: '100%' }} resizeMode='contain' />
-                  </TouchableOpacity> : null}
-                </Animated.View>
-                : null}
-              <ImageBackground
-                source={image ? { uri: image } : undefined}
-                style={{
-                  alignItems: 'center',
-                  width: "100%",
-                  height: "100%"
-                }}
-                resizeMode='contain'
-              >
+          {/* Next chevron button */}
+          <TouchableOpacity
+            style={styles.headerBtn}
+            onPress={handleNext}
+            hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+            activeOpacity={0.7}
+          >
+            <ForwardChevronIcon color="#ffffff" size={22} />
+          </TouchableOpacity>
+        </View>
+      </SafeAreaView>
 
-                <RNDrawingView
-                  ref={canvasRef}
-                  style={{ width: '100%', height: '100%' }}
-                  color={selectd == 1 ? "black" : selectd == 2 ? 'red' : selectd == 3 ? 'green' : selectd == 4 ? '#1dd3e3' : selectd == 5 ? "yellow" : 'black'}
-                  strokeWidth={Platform.OS == 'android' ? 5 : 3}
-                />
+      {/* Main Body */}
+      <View
+        style={[
+          styles.bodyContainer,
+          {
+            backgroundColor: theme.backgroundColor,
+            paddingBottom: 0,
+          },
+        ]}
+        onLayout={(e) => {
+          const { width, height } = e.nativeEvent.layout;
+          if (width > 0 && height > 0) {
+            setContainerSize({ width, height });
+          }
+        }}
+      >
+        {/* Screenshot Preview Card */}
+        <View style={styles.screenshotCard}>
+          <ShakebugCapture
+            ref={ref}
+            options={{ format: 'png', quality: 1 }}
+            collapsable={false}
+            style={[
+              styles.captureContainer,
+              {
+                width: imageRect.width,
+                height: '97%',
+              },
+            ]}
+          >
+            <ImageBackground
+              source={image ? { uri: normalizeUri(image) } : undefined}
+              style={{ width: '100%', height: '97%', marginTop: '3%' }}
+              resizeMode="cover"
+            >
+              <RNDrawingView
+                ref={canvasRef}
+                style={styles.drawingView}
+                color={currentColorHex}
+                strokeWidth={Platform.OS === 'android' ? 5 : 3}
+              />
+            </ImageBackground>
 
-              </ImageBackground>
-            </ShakebugCapture>
+            {/* Tap outside to dismiss remove button */}
+            {activeDeleteId !== null && (
+              <TouchableWithoutFeedback onPress={() => setActiveDeleteId(null)}>
+                <View style={[StyleSheet.absoluteFillObject, { zIndex: 10 }]} />
+              </TouchableWithoutFeedback>
+            )}
 
-          </View>
-          <View style={{ margin: 10, marginHorizontal: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', height: '5%', backgroundColor: "#e4fdfd" }}>
-            <TouchableOpacity
-              style={{ backgroundColor: ThemeColor, padding: 8, width: '45%', alignItems: 'center' }}
-              onPress={() => {
-                global.IsBackground = 'false'
-                if (global.AllowVideo == false) {
-                  setIsAlertText(`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.`)
-                  setIsAlert(true)
-                }
-                else {
-                  DeviceInfo.isEmulator()
-                    .then(res => {
-                      if (res != true || Platform.OS != 'ios') {
-                        RecordVideo()
-                      }
-                      else {
-                        setIsAlertText("Only real device is supported for recording video")
-                        setIsAlert(true)
-                      }
-                    })
-                }
-              }}
-            >
-              <Text style={{ color: 'white' }}>{Localization[global.ShakebugLanguage].RecordVideo}</Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={{ backgroundColor: ThemeColor, padding: 8, width: '45%', alignItems: 'center' }}
-              onPress={() => {
-                if (global.AllowVideo == false) {
-                  setIsAlertText(`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.`)
-                  setIsAlert(true)
-                }
-                else {
-                  openVideoPicker()
-                }
-              }}
-            >
-              <Text style={{ color: 'white' }}>{Localization[global.ShakebugLanguage].ChooseVideo}</Text>
-            </TouchableOpacity>
-          </View>
+            {/* Render all draggable text items */}
+            {textItems.map((item) => (
+              <DraggableTextItem
+                key={item.id}
+                item={item}
+                imageRect={imageRect}
+                isDeleteActive={activeDeleteId === item.id}
+                onLongPress={(id) => setActiveDeleteId(id)}
+                onTap={handleEditTextItem}
+                onDelete={handleDeleteItem}
+                onDismissDelete={() => setActiveDeleteId(null)}
+                isLoading={isLoading}
+              />
+            ))}
+          </ShakebugCapture>
+        </View>
 
-          <View style={{ width: "100%", flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 15, height: Platform.OS == 'ios' ? '7%' : '8.5%', paddingVertical: 12, backgroundColor: "#181818" }}>
-            <TouchableOpacity
-              onPress={() => {
-                setIsDraw(true)
-                setSelected(1)
-              }}
-            >
-              <Image source={selectd == 1 ? require('../Assets/images/borderdBlack.png') : require('../Assets/images/black.png')} resizeMode='contain' style={{ width: 40, height: 40 }} />
-            </TouchableOpacity>
-            <TouchableOpacity
-              onPress={() => setSelected(2)}
-            >
-              <Image source={selectd == 2 ? require('../Assets/images/borderdRed.png') : require('../Assets/images/red.png')} resizeMode='contain' style={{ width: 40, height: 40 }} />
-            </TouchableOpacity>
-            <TouchableOpacity
-              onPress={() => setSelected(3)}
-            >
-              <Image source={selectd == 3 ? require('../Assets/images/borderdGreen.png') : require('../Assets/images/green.png')} resizeMode='contain' style={{ width: 40, height: 40 }} />
-            </TouchableOpacity>
-            <TouchableOpacity
-              onPress={() => setSelected(4)}
-            >
-              <Image source={selectd == 4 ? require('../Assets/images/borderdBlue.png') : require('../Assets/images/blue.png')} resizeMode='contain' style={{ width: 40, height: 40 }} />
-            </TouchableOpacity>
-            <TouchableOpacity
-              onPress={() => setSelected(5)}
-            >
-              <Image source={selectd == 5 ? require('../Assets/images/borderdYellow.png') : require('../Assets/images/yellow.png')} resizeMode='contain' style={{ width: 40, height: 40 }} />
-            </TouchableOpacity>
+          {/* Floating Annotation Pill Toolbar matching Reference Image */}
+          <View style={styles.floatingToolbar}>
+            {[
+              { id: 1, color: '#000000' },
+              { id: 2, color: '#ef4444' },
+              { id: 3, color: '#22c55e' },
+              { id: 4, color: '#3b82f6' },
+              { id: 5, color: '#eab308' },
+            ].map((c) => {
+              const isSelected = selected === c.id;
+              return (
+                <TouchableOpacity
+                  key={c.id}
+                  onPress={() => {
+                    setIsDraw(true);
+                    setSelected(c.id);
+                  }}
+                  style={styles.colorBtn}
+                  hitSlop={{ top: 8, bottom: 8, left: 4, right: 4 }}
+                  activeOpacity={0.8}
+                >
+                  {isSelected ? (
+                    <View style={styles.colorRingActive}>
+                      <View style={[styles.colorDotActive, { backgroundColor: c.color }]} />
+                    </View>
+                  ) : (
+                    <View style={[styles.colorDot, { backgroundColor: c.color }]} />
+                  )}
+                </TouchableOpacity>
+              );
+            })}
+
+            {/* Divider */}
+            <View style={styles.toolbarDivider} />
+
+            {/* Aa Text Button (squircle card) */}
             <TouchableOpacity
-              onPress={() => setAddTextView(true)}
+              onPress={handleOpenNewText}
+              style={styles.textToolBtn}
+              hitSlop={{ top: 8, bottom: 8, left: 6, right: 6 }}
+              activeOpacity={0.7}
             >
-              <Image source={require('../Assets/images/text_icon.png')} resizeMode='contain' style={{ width: 40, height: 40 }} />
-            </TouchableOpacity>
-
-            <TouchableOpacity style={{ backgroundColor: ThemeColor, padding: 5 }} onPress={() => ClearCanvas(canvasRef)}>
-              <Image source={require('../Assets/images/clear.png')} resizeMode='contain' style={{ width: 30, height: 30 }} />
+              <Text style={styles.textToolLabel}>Aa</Text>
             </TouchableOpacity>
-          </View>
-        </View >
 
-        {addTextView ? (<View style={{ flex: 1, position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, backgroundColor: 'black', opacity: 0.93, alignItems: 'center' }}>
-          <KeyboardAvoidingView
-            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-            style={styles.container}
-          >
-            <View style={styles.innerContainer}>
-              <TextInput
-                style={{
-                  width: '90%',
-                  alignSelf: 'center',
-                  height: '70%',
-                  paddingHorizontal: 10,
-                  textAlign: 'center',
-                  textAlignVertical: 'center',
-                  marginTop: 30,
-                  fontSize: 18,
-                  color: selectd == 1 ? "white" : selectd == 2 ? 'red' : selectd == 3 ? 'green' : selectd == 4 ? '#1dd3e3' : selectd == 5 ? "yellow" : 'black'
-                }}
-                autoFocus
-                multiline
-                placeholder="Type here..."
-                placeholderTextColor="#b2b2b2"
-                cursorColor={selectd == 1 ? "white" : selectd == 2 ? 'red' : selectd == 3 ? 'green' : selectd == 4 ? '#1dd3e3' : selectd == 5 ? "yellow" : 'black'}
-                value={text}
-                onChangeText={(e) => setText(e)}
-              />
-            </View>
+            {/* Undo / Clear Drawing Button (squircle card) */}
             <TouchableOpacity
-              style={keyboardOpen ? styles.buttonShifted : styles.button}
-              onPress={() => {
-                setIsShow(false)
-                setAddTextView(false)
-              }}
+              onPress={handleClearAll}
+              style={styles.undoBtn}
+              hitSlop={{ top: 8, bottom: 8, left: 6, right: 6 }}
+              activeOpacity={0.7}
             >
-              <Text style={{ color: 'white' }}>{Localization[global.ShakebugLanguage].Done}</Text>
+              <Image
+                source={require('../Assets/images/undo.png')}
+                style={styles.undoIcon}
+                resizeMode="contain"
+              />
             </TouchableOpacity>
-          </KeyboardAvoidingView>
-        </View>) : null}
+          </View>
 
         <CustomeAlert
           isVisible={isAlert}
           text={isAlertText}
           color={ThemeColor}
           OnPrees={() => {
-            setIsAlert(false)
-            setIsAlertText("")
+            setIsAlert(false);
+            setIsAlertText('');
           }}
         />
 
-      </SafeAreaView>
-      <LoadingModal visible={isLoading} color={ThemeColor} />
+        <LoadingModal visible={isLoading} color={ThemeColor} />
+      </View>
+
+      {/* Fullscreen Text Input Overlay when 'Aa' clicked */}
+      {addTextView && (
+        <View style={styles.textModalBackdrop}>
+          <KeyboardAvoidingView
+            behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+            style={styles.textModalSafeArea}
+          >
+            <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
+              <View style={StyleSheet.absoluteFillObject} />
+            </TouchableWithoutFeedback>
+
+            {/* Top Bar with 'Cancel' and 'Done' buttons */}
+            <SafeAreaView style={styles.textModalTopBarWrapper}>
+              {Platform.OS === 'android' && StatusBar.currentHeight ? (
+                <View style={{ height: StatusBar.currentHeight }} />
+              ) : null}
+              <View style={styles.textModalTopBar}>
+                <TouchableOpacity
+                  style={styles.modalCancelBtn}
+                  activeOpacity={0.7}
+                  onPress={() => {
+                    Keyboard.dismiss();
+                    setEditingItemId(null);
+                    setDraftText('');
+                    setAddTextView(false);
+                  }}
+                  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                >
+                  <Text style={styles.modalCancelBtnText}>
+                    {getLocalizedString('Cancel') || 'Cancel'}
+                  </Text>
+                </TouchableOpacity>
+
+                <Text style={styles.modalHeaderTitle}>
+                  {editingItemId ? 'Edit Text' : 'Add Text'}
+                </Text>
+
+                <TouchableOpacity
+                  style={[
+                    styles.modalDoneBtn,
+                    {
+                      backgroundColor: ThemeColor,
+                    },
+                  ]}
+                  activeOpacity={0.8}
+                  onPress={handleSaveText}
+                  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                >
+                  <Text style={styles.modalDoneBtnText}>
+                    {getLocalizedString('Done') || 'Done'}
+                  </Text>
+                </TouchableOpacity>
+              </View>
+            </SafeAreaView>
+
+            {/* Centered Keyboard-avoiding text input */}
+            <View style={styles.textModalInputContainer} pointerEvents="box-none">
+              <View
+                style={[
+                  styles.textInputCard,
+                  {
+                    borderColor:
+                      currentColorHex === '#000000'
+                        ? '#334155'
+                        : currentColorHex,
+                  },
+                ]}
+              >
+                <TextInput
+                  ref={textInputRef}
+                  style={[
+                    styles.textInputControl,
+                    {
+                      color: currentColorHex,
+                    },
+                  ]}
+                  autoFocus
+                  multiline
+                  placeholder="Type annotation here..."
+                  placeholderTextColor="#94a3b8"
+                  cursorColor={currentColorHex}
+                  selectionColor={currentColorHex}
+                  value={draftText}
+                  onChangeText={(val) => setDraftText(val)}
+                />
+
+                {draftText.length > 0 ? (
+                  <TouchableOpacity
+                    onPress={() => setDraftText('')}
+                    style={styles.clearDraftBtn}
+                    hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+                  >
+                    <Text style={styles.clearDraftBtnText}>Clear text</Text>
+                  </TouchableOpacity>
+                ) : null}
+              </View>
+            </View>
+          </KeyboardAvoidingView>
+        </View>
+      )}
     </View>
-  )
-}
+  );
+};
 
 const styles = StyleSheet.create({
-  card: {
-    width: 'auto',
-    height: 'auto',
+  header: {
+    height: 52,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+  },
+  headerBtn: {
+    width: 40,
+    height: 40,
     justifyContent: 'center',
-    alignItems: 'flex-start',
-    paddingHorizontal: 6,
+    alignItems: 'center',
+  },
+  closeCircle: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    borderWidth: 1.5,
+    borderColor: 'rgba(255, 255, 255, 0.75)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255, 255, 255, 0.08)',
+  },
+  closeCross: {
+    color: '#ffffff',
+    fontSize: 14,
+    fontWeight: '700',
+    marginTop: Platform.OS === 'ios' ? 1 : 0,
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#ffffff',
+    textAlign: 'center',
+    flex: 1,
+  },
+  nextChevron: {
+    color: '#ffffff',
+    fontSize: 34,
+    fontWeight: '300',
+    textAlign: 'center',
+    lineHeight: 38,
+  },
+  bodyContainer: {
+    flex: 1,
+    position: 'relative',
+    alignItems: 'center',
+    paddingBottom: 0,
+  },
+  screenshotCard: {
+    flex: 1,
+    width: '100%',
+    paddingBottom: 80,
+    marginVertical: 0,
+    overflow: 'hidden',
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  captureContainer: {
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  screenshotImage: {
+    width: '100%',
+    height: '97%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'transparent',
+  },
+  drawingView: {
+    width: '100%',
+    height: '97%'
+  },
+  floatingToolbar: {
+    position: 'absolute',
+    bottom: Platform.OS === 'ios' ? (isIPhoneWithNotch() ? 28 : 16) : 54,
+    alignSelf: 'center',
+    backgroundColor: '#2C3038',
+    borderRadius: 24,
+    paddingHorizontal: 12,
     paddingVertical: 6,
-    borderRadius: 8,
-    marginBottom: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.35,
+    shadowRadius: 8,
+    elevation: 10,
+    zIndex: 10,
+  },
+  colorBtn: {
+    width: 34,
+    height: 34,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: 2.5,
+  },
+  colorDot: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+  },
+  colorRingActive: {
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    borderWidth: 2,
+    borderColor: '#ffffff',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+  },
+  colorDotActive: {
+    width: 26,
+    height: 26,
+    borderRadius: 13,
+  },
+  toolbarDivider: {
+    width: 1,
+    height: 18,
+    backgroundColor: 'rgba(255, 255, 255, 0.18)',
+    marginHorizontal: 8,
+  },
+  textToolBtn: {
+    width: 34,
+    height: 34,
+    borderRadius: 9,
+    backgroundColor: '#454950',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textToolLabel: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  undoBtn: {
+    width: 34,
+    height: 34,
+    borderRadius: 9,
+    backgroundColor: '#454950',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: 6,
+  },
+  undoIcon: {
+    width: 20,
+    height: 20,
+    tintColor: '#ffffff',
+  },
+  textCard: {
     position: 'absolute',
-    zIndex: 1,
-    backgroundColor: '#fff',
+    top: '35%',
+    alignSelf: 'center',
+    zIndex: 99,
     elevation: 8,
+    paddingTop: 10,
+    paddingRight: 10,
+    maxWidth: '85%',
+  },
+  textCardBadge: {
+    backgroundColor: '#ffffff',
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.8,
-    shadowRadius: 1,
+    shadowOpacity: 0.2,
+    shadowRadius: 3,
+    elevation: 4,
   },
-  container: {
-    width: '100%',
+  annotationText: {
+    fontSize: 14,
+    fontWeight: '600',
+    textAlign: 'center',
+    lineHeight: 18,
+  },
+  removeTextBtn: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: '#ffffff',
     justifyContent: 'center',
     alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.25,
+    shadowRadius: 2,
+    elevation: 12,
+    zIndex: 100,
+  },
+  removeIcon: {
+    width: 14,
+    height: 14,
+  },
+  modalHeaderTitle: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  clearDraftBtn: {
+    marginTop: 8,
+    alignSelf: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+  },
+  clearDraftBtnText: {
+    color: '#94a3b8',
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  textModalBackdrop: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: 'rgba(0, 0, 0, 0.75)',
+    zIndex: 99999,
+    elevation: 99999,
+  },
+  textModalSafeArea: {
+    flex: 1,
+    justifyContent: 'flex-start',
   },
-  innerContainer: {
+  textModalTopBarWrapper: {
+    width: '100%',
+    backgroundColor: 'transparent',
+    zIndex: 10,
+  },
+  textModalTopBar: {
+    flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    width: '100%',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
   },
-  input: {
-    width: '90%',
-    height: '80%',
-    marginBottom: 10,
-    paddingHorizontal: 10,
-    textAlign: 'center',
-    marginTop: 10,
-    color: "white"
+  modalCancelBtn: {
+    paddingHorizontal: 14,
+    paddingVertical: 8,
   },
-  button: {
-    width: '90%',
-    marginTop: "20%",
-    backgroundColor: 'black',
-    borderWidth: 1,
-    borderColor: 'white',
-    padding: 10,
+  modalCancelBtnText: {
+    color: 'rgba(255, 255, 255, 0.9)',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  modalDoneBtn: {
+    paddingHorizontal: 22,
+    paddingVertical: 8,
     borderRadius: 20,
-    alignItems: 'center'
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  modalDoneBtnText: {
+    fontSize: 15,
+    fontWeight: '700',
+    color: '#ffffff',
   },
-  buttonShifted: {
+  textModalInputContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingBottom: Platform.OS === 'android' ? 100 : 40,
+  },
+  textInputCard: {
+    backgroundColor: '#ffffff',
+    borderRadius: 16,
+    paddingHorizontal: 20,
+    paddingVertical: 16,
     width: '90%',
-    backgroundColor: 'black',
-    borderWidth: 1,
-    borderColor: 'white',
-    padding: 10,
-    borderRadius: 20,
-    alignItems: 'center'
+    maxWidth: 360,
+    minHeight: 100,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.35,
+    shadowRadius: 8,
+    elevation: 8,
+  },
+  textInputControl: {
+    width: '100%',
+    fontSize: 20,
+    fontWeight: '700',
+    textAlign: 'center',
+    paddingVertical: 4,
   },
 });
-export default FirstScreen
+
+export default FirstScreen;