ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-23 13:22:02 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

using external image ratio calculator

Browse Source
This commit is contained in:
noumantahir 2021-12-19 19:37:15 +05:00
parent 1018da6937
commit 784813da90
2 changed files with 62 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/autoHeightImage/autoHeightImage.tsx Normal file
View File

@ -0,0 +1,60 @@
import React, { useEffect, useState } from "react";
import { Image } from "react-native";
import EStyleSheet from "react-native-extended-stylesheet";
import FastImage from "react-native-fast-image";
import { TouchableWithoutFeedback } from "react-native-gesture-handler";
export const AutoHeightImage = ({
contentWidth,
imgUrl,
isAnchored,
onPress
}:{
contentWidth:number,
imgUrl:string,
isAnchored:boolean,
onPress:()=>void,
}) => {
const [imgWidth, setImgWidth] = useState(contentWidth);
const [imgHeight, setImgHeight] = useState(imgWidth * (9/16))
const [onLoadCalled, setOnLoadCalled] = useState(false);
useEffect(() => {
_fetchImageBounds();
}, [])
const _fetchImageBounds = () => {
Image.getSize(imgUrl, (width, height)=>{
const newWidth = width < contentWidth ? width : contentWidth;
const newHeight = (height / width) * newWidth;
setImgHeight(newHeight);
setImgWidth(newWidth);
})
}
const imgStyle = {
width:imgWidth,
height:imgHeight,
backgroundColor: onLoadCalled ? 'transparent' : EStyleSheet.value('$primaryGray')
}
const _onLoad = () => {
setOnLoadCalled(true);
}
return (
<TouchableWithoutFeedback onPress={onPress} disabled={!isAnchored}>
<FastImage
style={imgStyle}
source={{uri:imgUrl}}
resizeMode={FastImage.resizeMode.contain}
onLoad={_onLoad}
/>
</TouchableWithoutFeedback>
)
}

50
src/components/postHtmlRenderer/postHtmlRenderer.tsx
View File

@ -1,11 +1,9 @@
import React, { memo, useState } from "react";
import React, { memo } from "react";
import RenderHTML, { CustomRendererProps, Element, TNode } from "react-native-render-html";
import styles from "./postHtmlRendererStyles";
import { LinkData, parseLinkData } from "./linkDataParser";
import VideoThumb from "./videoThumb";
import FastImage, { OnLoadEvent } from "react-native-fast-image";
import { TouchableOpacity, TouchableWithoutFeedback } from "react-native-gesture-handler";
import EStyleSheet from "react-native-extended-stylesheet";
import { AutoHeightImage } from "../autoHeightImage/autoHeightImage";
interface PostHtmlRendererProps {
@ -214,47 +212,3 @@ export const PostHtmlRenderer = memo(({
const AutoHeightImage = ({
contentWidth,
imgUrl,
isAnchored,
onPress
}:{
contentWidth:number,
imgUrl:string,
isAnchored:boolean,
onPress:()=>void,
}) => {
const [imgWidth, setImgWidth] = useState(contentWidth);
const [imgHeight, setImgHeight] = useState(imgWidth * (9/16))
const [onLoadCalled, setOnLoadCalled] = useState(false);
const imgStyle = {
width:imgWidth,
height:imgHeight,
backgroundColor: onLoadCalled ? 'transparent' : EStyleSheet.value('$primaryGray')
}
const _onLoad = (evt:OnLoadEvent) => {
const {width, height} = evt.nativeEvent;
const newWidth = width < contentWidth ? width : contentWidth;
const newHeight = (height / width) * newWidth;
setImgHeight(newHeight);
setImgWidth(newWidth);
setOnLoadCalled(true);
}
return (
<TouchableWithoutFeedback onPress={onPress} disabled={!isAnchored}>
<FastImage
style={imgStyle}
source={{uri:imgUrl}}
resizeMode={FastImage.resizeMode.contain}
onLoad={_onLoad}
/>
</TouchableWithoutFeedback>
)
}