TW-874: Rework of the element width count

madfish-solutions · Aug 10, 2023 · 032b8f4 · 032b8f4
1 parent e3024ac
commit 032b8f4
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 42 deletions.
diff --git a/src/screens/d-apps/d-apps.styles.ts b/src/screens/d-apps/d-apps.styles.ts
@@ -33,9 +33,12 @@ export const useDAppsStyles = createUseStyles(({ colors, typography }) => ({
     marginTop: formatSize(12)
   },
   flatListContentContainer: {
-    marginHorizontal: formatSize(16),
+    paddingHorizontal: formatSize(16),
     paddingBottom: formatSize(16)
   },
+  flatListColumnWrapper: {
+    justifyContent: 'space-between'
+  },
   marginRight: {
     marginRight: formatSize(16)
   }

diff --git a/src/screens/d-apps/d-apps.tsx b/src/screens/d-apps/d-apps.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { FlatList, ListRenderItem, Text, View } from 'react-native';
+import { FlatList, LayoutChangeEvent, ListRenderItem, Text, View } from 'react-native';
 import { isTablet } from 'react-native-device-info';
 import { useDispatch } from 'react-redux';
 
@@ -32,6 +32,8 @@ const keyExtractor = (item: CustomDAppInfo) => item.name;
 const getItemLayout = createGetItemLayout<CustomDAppInfo>(formatSize(7));
 const ListEmptyComponent = <DataPlaceholder text="No records found." />;
 
+const gridSize = formatSize(48);
+
 export const DApps = () => {
   const dispatch = useDispatch();
   const partnersPromotionEnabled = useIsPartnersPromoEnabledSelector();
@@ -53,6 +55,7 @@ export const DApps = () => {
   const dAppsList = useDAppsListSelector();
 
   const [searchQuery, setSearchQuery] = useState<string>();
+  const [layoutWidth, setLayoutWidth] = useState(1);
 
   usePageAnalytic(ScreensEnum.DApps);
 
@@ -74,49 +77,50 @@ export const DApps = () => {
     return dAppsList;
   }, [searchQuery, dAppsList]);
 
+  const handleLayout = useCallback(({ nativeEvent }: LayoutChangeEvent) => {
+    setLayoutWidth(nativeEvent.layout.width || 1);
+  }, []);
+
+  const elementWidth = useMemo(() => (layoutWidth - gridSize) / 2, [layoutWidth]);
+
   const renderItem: ListRenderItem<CustomDAppInfo> = useCallback(
-    item => (
-      <OthersDApp
-        item={item}
-        style={[item.index % 2 === 0 && styles.marginRight]}
-        testID={DAppsSelectors.othersDAppsItem}
-      />
-    ),
-    []
+    item => <OthersDApp item={item} elementWidth={elementWidth} testID={DAppsSelectors.othersDAppsItem} />,
+    [elementWidth]
   );
 
   return (
     <>
-      <InsetSubstitute type="top" />
+      <View onLayout={handleLayout}>
+        <InsetSubstitute type="top" />
 
-      <PromotionCarousel />
+        <PromotionCarousel />
 
-      <SearchInput
-        placeholder="Search Dapp"
-        onChangeText={setSearchQuery}
-        style={styles.searchInput}
-        testID={DAppsSelectors.searchDAppsInput}
-      />
+        <SearchInput
+          placeholder="Search Dapp"
+          onChangeText={setSearchQuery}
+          style={styles.searchInput}
+          testID={DAppsSelectors.searchDAppsInput}
+        />
 
-      <View style={styles.wrapper}>
-        <Text style={styles.text}>Integrated</Text>
+        <View style={styles.wrapper}>
+          <Text style={styles.text}>Integrated</Text>
 
-        <IntegratedElement
-          screenName={ScreensEnum.DApps}
-          iconName={IconNameEnum.TextToNft}
-          title="Text to NFT"
-          description="Turn text into AI generated NFT"
-          navigateFn={() => navigate(ScreensEnum.DApps)}
-          testID={DAppsSelectors.integratedDAppButton}
-        />
-      </View>
+          <IntegratedElement
+            screenName={ScreensEnum.DApps}
+            iconName={IconNameEnum.TextToNft}
+            title="Text to NFT"
+            description="Turn text into AI generated NFT"
+            navigateFn={() => navigate(ScreensEnum.DApps)}
+            testID={DAppsSelectors.integratedDAppButton}
+          />
+        </View>
 
-      <View style={styles.wrapper}>
-        <Text style={styles.text}>Others</Text>
+        <View style={styles.wrapper}>
+          <Text style={styles.text}>Others</Text>
 
-        <Disclaimer texts={texts} />
+          <Disclaimer texts={texts} />
+        </View>
       </View>
-
       <FlatList
         data={sortedDAppsList}
         renderItem={renderItem}
@@ -125,6 +129,7 @@ export const DApps = () => {
         numColumns={2}
         style={styles.flatList}
         contentContainerStyle={styles.flatListContentContainer}
+        columnWrapperStyle={styles.flatListColumnWrapper}
         ListEmptyComponent={ListEmptyComponent}
       />
     </>

diff --git a/src/screens/d-apps/others/others.tsx b/src/screens/d-apps/others/others.tsx
@@ -1,5 +1,5 @@
-import React, { FC, useMemo, useState } from 'react';
-import { ListRenderItemInfo, StyleProp, Text, ViewStyle, useWindowDimensions } from 'react-native';
+import React, { FC, useState } from 'react';
+import { ListRenderItemInfo, StyleProp, Text, ViewStyle } from 'react-native';
 import FastImage from 'react-native-fast-image';
 
 import { Divider } from 'src/components/divider/divider';
@@ -16,25 +16,21 @@ import { useOthersDAppStyles } from './others.styles';
 
 interface Props extends TestIdProps {
   item: ListRenderItemInfo<CustomDAppInfo>;
+  elementWidth: number;
   style?: StyleProp<ViewStyle>;
 }
 
-const gridSize = 32;
-
-export const OthersDApp: FC<Props> = ({ item, style, testID }) => {
+export const OthersDApp: FC<Props> = ({ item, elementWidth, style, testID }) => {
   const { name, logo, slug, dappUrl } = item.item;
   const styles = useOthersDAppStyles();
   const [imageLoadError, setImageLoadError] = useState(false);
-  const { width } = useWindowDimensions();
-
-  const elementWidth = useMemo(() => width / 2 - gridSize, [width]);
 
   return (
     <TouchableWithAnalytics
       testID={testID}
       testIDProperties={{ dapp: slug }}
       onPress={() => openUrl(dappUrl)}
-      style={[styles.root, style, { width: formatSize(elementWidth) }]}
+      style={[styles.root, style, { width: elementWidth }]}
     >
       {imageLoadError ? (
         <Icon name={IconNameEnum.NoNameToken} size={formatSize(24)} style={styles.logo} />