41 lines
910 B
TypeScript
41 lines
910 B
TypeScript
import React from 'react';
|
|
import { StyleSheet, Image, View } from 'react-native';
|
|
|
|
interface FrameOverlayProps {
|
|
frameAsset: any; // require() asset
|
|
}
|
|
|
|
/**
|
|
* 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 }: FrameOverlayProps) {
|
|
if (!frameAsset) return null;
|
|
|
|
return (
|
|
<View style={styles.container} pointerEvents="none" collapsable={false}>
|
|
<Image
|
|
source={frameAsset}
|
|
style={styles.frameImage}
|
|
resizeMode="cover"
|
|
fadeDuration={0}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
},
|
|
frameImage: {
|
|
width: '100%',
|
|
height: '100%',
|
|
},
|
|
});
|