chore: adaptive news images size (#264)

ice-blockchain · Feb 6, 2024 · d4e3e4c · d4e3e4c
1 parent 2725631
commit d4e3e4c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/src/screens/News/components/FeaturedNewsArticle/index.tsx b/src/screens/News/components/FeaturedNewsArticle/index.tsx
@@ -11,6 +11,7 @@ import {ClockIcon} from '@svg/ClockIcon';
 import {EyeIcon} from '@svg/EyeIcon';
 import {NewsFeaturedNewBadge} from '@svg/NewsFeaturedNewBadge';
 import {t} from '@translations/i18n';
+import {getImageUriForSize} from '@utils/file';
 import {formatNumber} from '@utils/numbers';
 import {font} from '@utils/styles';
 import React, {memo} from 'react';
@@ -19,7 +20,7 @@ import LinearGradient from 'react-native-linear-gradient';
 import Animated, {SharedValue} from 'react-native-reanimated';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import {useSelector} from 'react-redux';
-import {rem} from 'rn-units';
+import {rem, screenWidth} from 'rn-units';
 
 import {useLayoutAnimation} from './hooks/useLayoutAnimation';
 
@@ -70,7 +71,7 @@ export const FeaturedNewsArticle = memo(
         <Image
           style={StyleSheet.absoluteFill}
           source={{
-            uri: imageUrl,
+            uri: getImageUriForSize(imageUrl, {width: screenWidth}),
           }}
         />
 

diff --git a/src/screens/News/components/NewsArticle/index.tsx b/src/screens/News/components/NewsArticle/index.tsx
@@ -10,6 +10,7 @@ import {ClockIcon} from '@svg/ClockIcon';
 import {EyeIcon} from '@svg/EyeIcon';
 import {NewsNewBadge} from '@svg/NewsNewBadge';
 import {t} from '@translations/i18n';
+import {getImageUriForSize} from '@utils/file';
 import {formatNumber} from '@utils/numbers';
 import {font} from '@utils/styles';
 import React, {memo} from 'react';
@@ -23,6 +24,8 @@ type Props = {
   newsArticleId: string;
 };
 
+const IMAGE_WIDTH = rem(80);
+
 export const NewsArticle = memo(({newsArticleId}: Props) => {
   const newsArticle = useSelector(NewsSelectors.getNewsArticle(newsArticleId));
 
@@ -43,7 +46,7 @@ export const NewsArticle = memo(({newsArticleId}: Props) => {
         <Image
           style={styles.image}
           source={{
-            uri: imageUrl,
+            uri: getImageUriForSize(imageUrl, {width: IMAGE_WIDTH}),
           }}
         />
 
@@ -135,7 +138,7 @@ const styles = StyleSheet.create({
   },
 
   image: {
-    width: rem(80),
+    width: IMAGE_WIDTH,
     height: rem(72),
     justifyContent: 'center',
     alignItems: 'center',