From 4077e442076e6e6c293c606f3d74f1b1dfd7126e Mon Sep 17 00:00:00 2001
From: orfelorfel23 <jannik.mueller.jannik+git@googlemail.com>
Date: Mon, 1 Jun 2026 12:28:26 +0200
Subject: [PATCH] Fix Android elevation bug causing overlays to render behind
 the canvas

---
 src/components/DraggableSticker.tsx |  1 +
 src/components/FrameOverlay.tsx     | 28 +++++++---------------------
 src/screens/PreviewScreen.tsx       |  2 ++
 3 files changed, 10 insertions(+), 21 deletions(-)

diff --git a/src/components/DraggableSticker.tsx b/src/components/DraggableSticker.tsx
index dd0bb19b..b4902074 100644
--- a/src/components/DraggableSticker.tsx
+++ b/src/components/DraggableSticker.tsx
@@ -153,6 +153,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     zIndex: 100,
+    elevation: 21,
   },
   emojiText: {
     fontSize: 48,
diff --git a/src/components/FrameOverlay.tsx b/src/components/FrameOverlay.tsx
index d24c781b..a616f21d 100644
--- a/src/components/FrameOverlay.tsx
+++ b/src/components/FrameOverlay.tsx
@@ -1,37 +1,21 @@
 import React from 'react';
-import { StyleSheet, ImageBackground, View } from 'react-native';
-import { Asset } from 'expo-asset';
-import { useState, useEffect } from 'react';
+import { StyleSheet, View, Image } from 'react-native';
 
 interface FrameOverlayProps {
   frameAsset: any; // require() asset
   isCapturing?: boolean;
 }
 
-/**
- * Renders a frame PNG overlay on top of the photo.
- * The frame PNG must have a transparent center (alpha=0) so the photo shows through.
- * Positioned absolutely to cover the entire photo canvas.
- */
 export default function FrameOverlay({ frameAsset, isCapturing = false }: FrameOverlayProps) {
-  const [localUri, setLocalUri] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (frameAsset) {
-      Asset.fromModule(frameAsset).downloadAsync().then(asset => {
-        setLocalUri(asset.localUri || asset.uri);
-      });
-    }
-  }, [frameAsset]);
-
-  if (!localUri) return null;
+  if (!frameAsset) return null;
 
   return (
     <View style={styles.container} pointerEvents={isCapturing ? "auto" : "none"} collapsable={false}>
-      <ImageBackground
-        source={{ uri: localUri }}
+      <Image
+        source={frameAsset}
         style={styles.frameImage}
         resizeMode="stretch"
+        fadeDuration={0}
       />
     </View>
   );
@@ -44,6 +28,8 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
+    zIndex: 50,
+    elevation: 20,
   },
   frameImage: {
     width: '100%',
diff --git a/src/screens/PreviewScreen.tsx b/src/screens/PreviewScreen.tsx
index f450b9d5..8fa51956 100644
--- a/src/screens/PreviewScreen.tsx
+++ b/src/screens/PreviewScreen.tsx
@@ -931,6 +931,8 @@ const styles = StyleSheet.create({
   // ── Date Overlay ──
   dateOverlay: {
     position: 'absolute',
+    elevation: 22,
+    zIndex: 12,
   },
   dateOverlayText: {
     fontSize: 11,