diff options
Diffstat (limited to 'src/view/com/util/images/AutoSizedImage.tsx')
-rw-r--r-- | src/view/com/util/images/AutoSizedImage.tsx | 59 |
1 files changed, 31 insertions, 28 deletions
diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx index 4728f42df..a60ddb89c 100644 --- a/src/view/com/util/images/AutoSizedImage.tsx +++ b/src/view/com/util/images/AutoSizedImage.tsx @@ -1,4 +1,4 @@ -import React, {useState, useEffect, useMemo} from 'react' +import React, {useState, useEffect} from 'react' import { Image, ImageStyle, @@ -8,6 +8,7 @@ import { Text, TouchableWithoutFeedback, View, + ViewStyle, } from 'react-native' import {colors} from '../../../lib/styles' @@ -30,39 +31,29 @@ export function AutoSizedImage({ const [error, setError] = useState<string | undefined>() const [imgInfo, setImgInfo] = useState<Dim | undefined>() const [containerInfo, setContainerInfo] = useState<Dim | undefined>() - const calculatedStyle = useMemo(() => { - if (imgInfo && containerInfo) { - // imgInfo.height / imgInfo.width = x / containerInfo.width - // x = imgInfo.height / imgInfo.width * containerInfo.width - return { - height: Math.min( - MAX_HEIGHT, - (imgInfo.height / imgInfo.width) * containerInfo.width, - ), - } - } - return undefined - }, [imgInfo, containerInfo]) useEffect(() => { let aborted = false - Image.getSize( - uri, - (width: number, height: number) => { - if (!aborted) { - setImgInfo({width, height}) - } - }, - (error: any) => { - if (!aborted) { - setError(String(error)) - } - }, - ) + if (!imgInfo) { + Image.getSize( + uri, + (width: number, height: number) => { + console.log('gotSize') + if (!aborted) { + setImgInfo({width, height}) + } + }, + (error: any) => { + if (!aborted) { + setError(String(error)) + } + }, + ) + } return () => { aborted = true } - }, [uri]) + }, [uri, imgInfo]) const onLayout = (evt: LayoutChangeEvent) => { setContainerInfo({ @@ -71,6 +62,18 @@ export function AutoSizedImage({ }) } + let calculatedStyle: StyleProp<ViewStyle> | undefined + if (imgInfo && containerInfo) { + // imgInfo.height / imgInfo.width = x / containerInfo.width + // x = imgInfo.height / imgInfo.width * containerInfo.width + calculatedStyle = { + height: Math.min( + MAX_HEIGHT, + (imgInfo.height / imgInfo.width) * containerInfo.width, + ), + } + } + return ( <View style={style}> <TouchableWithoutFeedback onPress={onPress}> |