Fix AbsoluteFill blocking touch events and fix ViewShot drawable bug by resolving require() assets to explicit file URI
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -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 */}
|
||||||
|
|||||||
Reference in New Issue
Block a user