Fix AbsoluteFill blocking touch events and fix ViewShot drawable bug by resolving require() assets to explicit file URI

This commit is contained in:
2026-06-01 11:14:33 +02:00
parent ff8e368fca
commit 13e4c734d6
2 changed files with 18 additions and 6 deletions
+17 -5
View File
@@ -1,8 +1,10 @@
import React from 'react'; import React from 'react';
import { StyleSheet, ImageBackground, View } from 'react-native'; import { StyleSheet, ImageBackground, View } from 'react-native';
import { Asset } from 'expo-asset';
import { useState, useEffect } from 'react';
interface FrameOverlayProps { interface FrameOverlayProps {
frameAsset: number | any; // require() asset frameAsset: any; // require() asset
isCapturing?: boolean; isCapturing?: boolean;
} }
@@ -12,14 +14,24 @@ interface FrameOverlayProps {
* Positioned absolutely to cover the entire photo canvas. * Positioned absolutely to cover the entire photo canvas.
*/ */
export default function FrameOverlay({ frameAsset, isCapturing = false }: FrameOverlayProps) { export default function FrameOverlay({ frameAsset, isCapturing = false }: FrameOverlayProps) {
if (!frameAsset) return null; 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;
return ( return (
<View style={styles.container} pointerEvents={isCapturing ? "auto" : "none"} collapsable={false}> <View style={styles.container} pointerEvents={isCapturing ? "auto" : "none"} collapsable={false}>
<Image <ImageBackground
source={frameAsset} source={{ uri: localUri }}
style={styles.frameImage} style={styles.frameImage}
resizeMode="cover" resizeMode="stretch"
/> />
</View> </View>
); );
+1 -1
View File
@@ -462,7 +462,7 @@ export default function PreviewScreen({
style={styles.viewShotContainer} style={styles.viewShotContainer}
collapsable={false} collapsable={false}
> >
<View style={StyleSheet.absoluteFill} collapsable={false}> <View style={{ flex: 1, width: '100%', height: '100%' }} collapsable={false}>
{renderCollageView()} {renderCollageView()}
{/* Frame Overlay */} {/* Frame Overlay */}