Fix Android elevation bug causing overlays to render behind the canvas
This commit is contained in:
@@ -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,
|
||||||
|
|||||||
@@ -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%',
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user