Simon/linkwarden
1
0
Fork 0
mirror of https://github.com/linkwarden/linkwarden.git synced 2026-03-03 03:47:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(mobile): fix image not loading on iOS

Browse Source
This commit is contained in:
daniel31x13
2025-11-23 12:42:43 -05:00
parent dd4c925a56
commit a7c1aeb876
1 changed files with 52 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
apps/mobile/components/Formats/ImageFormat.tsx
View File

@@ -5,6 +5,7 @@ import useAuthStore from "@/store/auth";
import { ArchivedFormat } from "@linkwarden/types";
import { Link as LinkType } from "@linkwarden/prisma/client";
import WebView from "react-native-webview";
import { Image, Platform, ScrollView } from "react-native";
type Props = {
link: LinkType;
@@ -19,6 +20,17 @@ export default function ImageFormat({ link, setIsLoading, format }: Props) {
const { auth } = useAuthStore();
const [content, setContent] = useState<string>("");
const [dimension, setDimension] = useState<{
width: number;
height: number;
}>();
useEffect(() => {
if (content)
Image.getSize(content, (width, height) => {
setDimension({ width, height });
});
}, [content]);
useEffect(() => {
async function loadCacheOrFetch() {
@@ -59,15 +71,34 @@ export default function ImageFormat({ link, setIsLoading, format }: Props) {
loadCacheOrFetch();
}, [link]);
return (
content && (
<WebView
style={{
flex: 1,
}}
source={{
baseUrl: content,
html: `
if (Platform.OS === "ios")
return (
content &&
dimension && (
<ScrollView maximumZoomScale={10}>
<Image
source={{ uri: content }}
onLoadEnd={() => setIsLoading(false)}
style={{
width: "100%",
height: "auto",
aspectRatio: dimension.width / dimension.height,
}}
resizeMode="contain"
/>
</ScrollView>
)
);
else
return (
content && (
<WebView
style={{
flex: 1,
}}
source={{
baseUrl: content,
html: `
<!DOCTYPE html>
<html>
<head>
@@ -90,16 +121,16 @@ export default function ImageFormat({ link, setIsLoading, format }: Props) {
</body>
</html>
`,
}}
scalesPageToFit
originWhitelist={["*"]}
mixedContentMode="always"
javaScriptEnabled={true}
allowFileAccess={true}
allowFileAccessFromFileURLs={true}
allowUniversalAccessFromFileURLs={true}
onLoadEnd={() => setIsLoading(false)}
/>
)
);
}}
scalesPageToFit
originWhitelist={["*"]}
mixedContentMode="always"
javaScriptEnabled={true}
allowFileAccess={true}
allowFileAccessFromFileURLs={true}
allowUniversalAccessFromFileURLs={true}
onLoadEnd={() => setIsLoading(false)}
/>
)
);
}