Fix Android elevation bug causing overlays to render behind the canvas

This commit is contained in:
2026-06-01 12:28:26 +02:00
parent bd34367d63
commit 4077e44207
3 changed files with 10 additions and 21 deletions
+1
View File
@@ -153,6 +153,7 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
zIndex: 100, zIndex: 100,
elevation: 21,
}, },
emojiText: { emojiText: {
fontSize: 48, fontSize: 48,
+7 -21
View File
@@ -1,37 +1,21 @@
import React from 'react'; import React from 'react';
import { StyleSheet, ImageBackground, View } from 'react-native'; import { StyleSheet, View, Image } from 'react-native';
import { Asset } from 'expo-asset';
import { useState, useEffect } from 'react';
interface FrameOverlayProps { interface FrameOverlayProps {
frameAsset: any; // require() asset frameAsset: any; // require() asset
isCapturing?: boolean; 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) { export default function FrameOverlay({ frameAsset, isCapturing = false }: FrameOverlayProps) {
const [localUri, setLocalUri] = useState<string | null>(null); if (!frameAsset) return null;
useEffect(() => {
if (frameAsset) {
Asset.fromModule(frameAsset).downloadAsync().then(asset => {
setLocalUri(asset.localUri || asset.uri);
});
}
}, [frameAsset]);
if (!localUri) return null;
return ( return (
<View style={styles.container} pointerEvents={isCapturing ? "auto" : "none"} collapsable={false}> <View style={styles.container} pointerEvents={isCapturing ? "auto" : "none"} collapsable={false}>
<ImageBackground <Image
source={{ uri: localUri }} source={frameAsset}
style={styles.frameImage} style={styles.frameImage}
resizeMode="stretch" resizeMode="stretch"
fadeDuration={0}
/> />
</View> </View>
); );
@@ -44,6 +28,8 @@ const styles = StyleSheet.create({
left: 0, left: 0,
right: 0, right: 0,
bottom: 0, bottom: 0,
zIndex: 50,
elevation: 20,
}, },
frameImage: { frameImage: {
width: '100%', width: '100%',
+2
View File
@@ -931,6 +931,8 @@ const styles = StyleSheet.create({
// ── Date Overlay ── // ── Date Overlay ──
dateOverlay: { dateOverlay: {
position: 'absolute', position: 'absolute',
elevation: 22,
zIndex: 12,
}, },
dateOverlayText: { dateOverlayText: {
fontSize: 11, fontSize: 11,