auto update screen if window height change

enevtihq · Dec 25, 2022 · 9aafaa6 · 9aafaa6
1 parent e62a02b
commit 9aafaa6
Show file tree

Hide file tree

Showing 15 changed files with 148 additions and 152 deletions.
diff --git a/src/components/organism/collection/AppCollection.tsx b/src/components/organism/collection/AppCollection.tsx
@@ -104,7 +104,7 @@ export default function AppCollection({ onScrollWorklet, navigation, route }: Ap
     [collection],
   );
   const headerPercentage = React.useMemo(
-    () => COLLECTION_HEADER_VIEW_HEIGHT + (mintingAvailable ? MINTING_AVAILABLE_VIEW_HEIGHT : 0),
+    () => COLLECTION_HEADER_VIEW_HEIGHT() + (mintingAvailable ? MINTING_AVAILABLE_VIEW_HEIGHT : 0),
     [mintingAvailable],
   );
   const totalHeaderHeight = React.useMemo(() => hp(headerPercentage), [hp, headerPercentage]);

diff --git a/src/components/organism/collection/AppCollectionHeader.tsx b/src/components/organism/collection/AppCollectionHeader.tsx
@@ -36,7 +36,7 @@ import {
 import AppLikeReadyInstance from 'enevti-app/utils/app/likeReady';
 import { RootState } from 'enevti-app/store/state';
 
-export const COLLECTION_HEADER_VIEW_HEIGHT =
+export const COLLECTION_HEADER_VIEW_HEIGHT = () =>
   30 + (Dimensions.get('screen').width * 0.5625 * 100) / Dimensions.get('screen').height + STATUS_BAR_HEIGHT();
 
 interface AppCollectionHeaderProps {
@@ -69,7 +69,7 @@ export default function AppCollectionHeader({
   const coverWidth = React.useMemo(() => wp('100%'), [wp]);
   const coverHeight = React.useMemo(() => insets.top + coverWidth * 0.5625, [coverWidth, insets]);
   const totalHeight = React.useMemo(
-    () => COLLECTION_HEADER_VIEW_HEIGHT + (mintingAvailable ? MINTING_AVAILABLE_VIEW_HEIGHT : 0),
+    () => COLLECTION_HEADER_VIEW_HEIGHT() + (mintingAvailable ? MINTING_AVAILABLE_VIEW_HEIGHT : 0),
     [mintingAvailable],
   );
 

diff --git a/src/components/organism/collection/tabs/CollectionActivityComponent.tsx b/src/components/organism/collection/tabs/CollectionActivityComponent.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { Platform, RefreshControl, StyleSheet, FlatList, View, Dimensions } from 'react-native';
+import { Platform, RefreshControl, StyleSheet, FlatList, View, useWindowDimensions, ScaledSize } from 'react-native';
 import { useTheme } from 'react-native-paper';
 import Animated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { TOP_TABBAR_HEIGHT_PERCENTAGE } from 'enevti-app/components/atoms/view/AppTopTabBar';
 import { HEADER_HEIGHT_PERCENTAGE } from 'enevti-app/components/atoms/view/AppHeader';
-import { DimensionFunction, SafeAreaInsets } from 'enevti-app/utils/layout/imageRatio';
+import { DimensionFunction, SafeAreaInsets, windowFullHeight } from 'enevti-app/utils/layout/imageRatio';
 import useDimension from 'enevti-app/utils/hook/useDimension';
 import AppListItem, { LIST_ITEM_VERTICAL_MARGIN_PERCENTAGE } from 'enevti-app/components/molecules/list/AppListItem';
 import AppNFTRenderer from 'enevti-app/components/molecules/nft/AppNFTRenderer';
@@ -62,6 +62,7 @@ function Component(
   const { t } = useTranslation();
   const theme = useTheme();
   const insets = useSafeAreaInsets();
+  const dimension = useWindowDimensions();
   const mounted = React.useRef<boolean>(false);
   const [displayed, setDisplayed] = React.useState<boolean>(false);
   const [refreshing, setRefreshing] = React.useState<boolean>(false);
@@ -77,8 +78,8 @@ function Component(
   );
 
   const styles = React.useMemo(
-    () => makeStyles(hp, wp, displayed, collectionHeaderHeight, insets),
-    [hp, wp, displayed, collectionHeaderHeight, insets],
+    () => makeStyles(hp, wp, displayed, collectionHeaderHeight, insets, dimension),
+    [hp, wp, displayed, collectionHeaderHeight, insets, dimension],
   );
   const isScrollEnabled = React.useMemo(() => (refreshing ? false : scrollEnabled), [refreshing, scrollEnabled]);
   const itemHeight = React.useMemo(
@@ -237,6 +238,7 @@ const makeStyles = (
   displayed: boolean,
   collectionHeaderHeight: number,
   insets: SafeAreaInsets,
+  dimension: ScaledSize,
 ) =>
   StyleSheet.create({
     loaderContainer: {
@@ -247,12 +249,7 @@ const makeStyles = (
     },
     contentContainerStyle: {
       paddingTop: hp(TOP_TABBAR_HEIGHT_PERCENTAGE) + collectionHeaderHeight,
-      minHeight:
-        Dimensions.get('screen').height +
-        collectionHeaderHeight -
-        hp(HEADER_HEIGHT_PERCENTAGE) -
-        insets.top -
-        insets.bottom,
+      minHeight: windowFullHeight(dimension, insets) + collectionHeaderHeight - hp(HEADER_HEIGHT_PERCENTAGE),
       display: displayed ? undefined : 'none',
     },
     collectionItem: {

diff --git a/src/components/organism/collection/tabs/MintedItemsComponent.tsx b/src/components/organism/collection/tabs/MintedItemsComponent.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { Dimensions, Platform, RefreshControl, StyleSheet, View } from 'react-native';
+import { Platform, RefreshControl, ScaledSize, StyleSheet, useWindowDimensions, View } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { FlatGrid, FlatGridProps } from 'react-native-super-grid';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { NFTBase } from 'enevti-app/types/core/chain/nft';
 import { TOP_TABBAR_HEIGHT_PERCENTAGE } from 'enevti-app/components/atoms/view/AppTopTabBar';
 import { HEADER_HEIGHT_PERCENTAGE } from 'enevti-app/components/atoms/view/AppHeader';
-import { DimensionFunction, SafeAreaInsets } from 'enevti-app/utils/layout/imageRatio';
+import { DimensionFunction, SafeAreaInsets, windowFullHeight } from 'enevti-app/utils/layout/imageRatio';
 import useDimension from 'enevti-app/utils/hook/useDimension';
 import AppNFTCard from 'enevti-app/components/molecules/nft/AppNFTCard';
 import { MINT_BUTTON_HEIGHT } from 'enevti-app/components/organism/collection/AppCollectionMintButton';
@@ -55,6 +55,7 @@ function Component(
   const dispatch = useDispatch();
   const { hp, wp } = useDimension();
   const insets = useSafeAreaInsets();
+  const dimension = useWindowDimensions();
   const mounted = React.useRef<boolean>(false);
   const [displayed, setDisplayed] = React.useState<boolean>(false);
   const [refreshing, setRefreshing] = React.useState<boolean>(false);
@@ -71,8 +72,8 @@ function Component(
   );
 
   const styles = React.useMemo(
-    () => makeStyles(hp, displayed, collectionHeaderHeight, insets),
-    [hp, displayed, collectionHeaderHeight, insets],
+    () => makeStyles(hp, displayed, collectionHeaderHeight, insets, dimension),
+    [hp, displayed, collectionHeaderHeight, insets, dimension],
   );
   const isScrollEnabled = React.useMemo(() => (refreshing ? false : scrollEnabled), [refreshing, scrollEnabled]);
   const spacing = React.useMemo(() => wp('1%'), [wp]);
@@ -177,6 +178,7 @@ const makeStyles = (
   displayed: boolean,
   collectionHeaderHeight: number,
   insets: SafeAreaInsets,
+  dimension: ScaledSize,
 ) =>
   StyleSheet.create({
     loaderContainer: {
@@ -187,12 +189,7 @@ const makeStyles = (
     },
     contentContainerStyle: {
       paddingTop: hp(TOP_TABBAR_HEIGHT_PERCENTAGE) + collectionHeaderHeight,
-      minHeight:
-        Dimensions.get('screen').height +
-        collectionHeaderHeight -
-        hp(HEADER_HEIGHT_PERCENTAGE) -
-        insets.top -
-        insets.bottom,
+      minHeight: windowFullHeight(dimension, insets) + collectionHeaderHeight - hp(HEADER_HEIGHT_PERCENTAGE),
       display: displayed ? undefined : 'none',
     },
   });

diff --git a/src/components/organism/collection/tabs/MomentCreatedListComponent.tsx b/src/components/organism/collection/tabs/MomentCreatedListComponent.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import { Dimensions, Platform, RefreshControl, StyleSheet, View } from 'react-native';
+import { Platform, RefreshControl, ScaledSize, StyleSheet, useWindowDimensions, View } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { TOP_TABBAR_HEIGHT_PERCENTAGE } from 'enevti-app/components/atoms/view/AppTopTabBar';
 import { HEADER_HEIGHT_PERCENTAGE } from 'enevti-app/components/atoms/view/AppHeader';
-import { DimensionFunction, SafeAreaInsets } from 'enevti-app/utils/layout/imageRatio';
+import { DimensionFunction, SafeAreaInsets, windowFullHeight } from 'enevti-app/utils/layout/imageRatio';
 import useDimension from 'enevti-app/utils/hook/useDimension';
 import { Collection } from 'enevti-app/types/core/chain/collection';
 import { MINT_BUTTON_HEIGHT } from 'enevti-app/components/organism/collection/AppCollectionMintButton';
@@ -52,6 +52,7 @@ function Component(
   const dispatch = useDispatch();
   const { hp, wp } = useDimension();
   const insets = useSafeAreaInsets();
+  const dimension = useWindowDimensions();
   const mounted = React.useRef<boolean>(false);
   const [displayed, setDisplayed] = React.useState<boolean>(false);
   const [refreshing, setRefreshing] = React.useState<boolean>(false);
@@ -67,8 +68,8 @@ function Component(
   );
 
   const styles = React.useMemo(
-    () => makeStyles(hp, wp, displayed, collectionHeaderHeight, insets),
-    [hp, wp, displayed, collectionHeaderHeight, insets],
+    () => makeStyles(hp, wp, displayed, collectionHeaderHeight, insets, dimension),
+    [hp, wp, displayed, collectionHeaderHeight, insets, dimension],
   );
   const isScrollEnabled = React.useMemo(() => (refreshing ? false : scrollEnabled), [refreshing, scrollEnabled]);
   const spacing = React.useMemo(() => wp('0.583%'), [wp]);
@@ -179,6 +180,7 @@ const makeStyles = (
   displayed: boolean,
   collectionHeaderHeight: number,
   insets: SafeAreaInsets,
+  dimension: ScaledSize,
 ) =>
   StyleSheet.create({
     loaderContainer: {
@@ -189,12 +191,7 @@ const makeStyles = (
     },
     contentContainerStyle: {
       paddingTop: hp(TOP_TABBAR_HEIGHT_PERCENTAGE) + collectionHeaderHeight,
-      minHeight:
-        Dimensions.get('screen').height +
-        collectionHeaderHeight -
-        hp(HEADER_HEIGHT_PERCENTAGE) -
-        insets.top -
-        insets.bottom,
+      minHeight: windowFullHeight(dimension, insets) + collectionHeaderHeight - hp(HEADER_HEIGHT_PERCENTAGE),
       display: displayed ? undefined : 'none',
     },
     collectionRightContent: {

diff --git a/src/components/organism/moment/AppMomentView.tsx b/src/components/organism/moment/AppMomentView.tsx
@@ -1,4 +1,4 @@
-import { Dimensions, Pressable, StyleSheet, View } from 'react-native';
+import { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native';
 import Video from 'react-native-video';
 import React from 'react';
 import { FlatList } from '@stream-io/flat-list-mvcp';
@@ -33,9 +33,6 @@ import AppTextBody5 from 'enevti-app/components/atoms/text/AppTextBody5';
 import { useTheme } from 'react-native-paper';
 import { Theme } from 'enevti-app/theme/default';
 
-const DIM_CONFIG = 'window';
-const MOMENT_HEIGHT = Dimensions.get('window').height;
-
 interface AppMomentViewProps {
   navigation: StackNavigationProp<RootStackParamList>;
   route: RouteProp<RootStackParamList, 'Moment'>;
@@ -52,7 +49,8 @@ export default function AppMomentView({
   const dispatch = useDispatch();
   const theme = useTheme() as Theme;
   const insets = useSafeAreaInsets();
-  const styles = React.useMemo(() => makeStyles(theme, insets), [theme, insets]);
+  const dimension = useWindowDimensions();
+  const styles = React.useMemo(() => makeStyles(theme, insets, dimension.height), [theme, insets, dimension.height]);
 
   const [controlVisible, setControlVisible] = React.useState<boolean>(true);
   const [muted, setMuted] = React.useState<boolean>(false);
@@ -151,9 +149,9 @@ export default function AppMomentView({
               <View style={styles.audioIndicatorItem}>
                 <AppIconComponent
                   name={muted ? iconMap.volumeOff : iconMap.volumeOn}
-                  size={hp(3, { dim: DIM_CONFIG })}
+                  size={hp(3)}
                   color={darkTheme.colors.text}
-                  style={{ padding: hp(2, { dim: DIM_CONFIG }) }}
+                  style={{ padding: hp(2) }}
                 />
               </View>
             </Animated.View>
@@ -197,40 +195,42 @@ export default function AppMomentView({
             </Pressable>
           </Animated.View>
           <Animated.View style={[styles.rightContainer, controlAnimatedStyle]}>
-            <View style={{ marginBottom: hp(3) }}>
-              <AppIconButton
-                icon={item.liked ? iconMap.likeActive : iconMap.likeInactive}
-                color={item.liked ? darkTheme.colors.primary : darkTheme.colors.text}
-                size={wp(8)}
-                onPress={() => {}}
-              />
-              <AppTextHeading3
-                style={[styles.textCenter, { color: item.liked ? darkTheme.colors.primary : darkTheme.colors.text }]}>
-                {item.like}
-              </AppTextHeading3>
-            </View>
-            <View style={{ marginBottom: hp(3) }}>
-              <AppIconButton icon={iconMap.comment} color={darkTheme.colors.text} size={wp(8)} onPress={() => {}} />
-              <AppTextHeading3 style={[styles.textCenter, { color: darkTheme.colors.text }]}>
-                {item.comment}
-              </AppTextHeading3>
-            </View>
-            <View
-              style={{
-                width: wp(12),
-              }}>
-              <AppNFTRenderer
-                nft={item.nft!}
-                style={styles.nft}
-                width={wp(12)}
-                imageSize={'xs'}
-                onPress={() => {
-                  navigation.push('NFTDetails', { arg: item.nft!.id, mode: 'id' });
-                }}
-              />
-              <AppTextBody5
-                numberOfLines={1}
-                style={styles.nftLabel}>{`${item.nft?.symbol}#${item.nft?.serial}`}</AppTextBody5>
+            <View style={styles.rightContent}>
+              <View style={{ marginBottom: hp(3) }}>
+                <AppIconButton
+                  icon={item.liked ? iconMap.likeActive : iconMap.likeInactive}
+                  color={item.liked ? darkTheme.colors.primary : darkTheme.colors.text}
+                  size={wp(8)}
+                  onPress={() => {}}
+                />
+                <AppTextHeading3
+                  style={[styles.textCenter, { color: item.liked ? darkTheme.colors.primary : darkTheme.colors.text }]}>
+                  {item.like}
+                </AppTextHeading3>
+              </View>
+              <View style={{ marginBottom: hp(3) }}>
+                <AppIconButton icon={iconMap.comment} color={darkTheme.colors.text} size={wp(8)} onPress={() => {}} />
+                <AppTextHeading3 style={[styles.textCenter, { color: darkTheme.colors.text }]}>
+                  {item.comment}
+                </AppTextHeading3>
+              </View>
+              <View
+                style={{
+                  width: wp(12),
+                }}>
+                <AppNFTRenderer
+                  nft={item.nft!}
+                  style={styles.nft}
+                  width={wp(12)}
+                  imageSize={'xs'}
+                  onPress={() => {
+                    navigation.push('NFTDetails', { arg: item.nft!.id, mode: 'id' });
+                  }}
+                />
+                <AppTextBody5
+                  numberOfLines={1}
+                  style={styles.nftLabel}>{`${item.nft?.symbol}#${item.nft?.serial}`}</AppTextBody5>
+              </View>
             </View>
           </Animated.View>
         </View>
@@ -257,6 +257,7 @@ export default function AppMomentView({
       styles.ownerContainer,
       styles.ownerLabel,
       styles.rightContainer,
+      styles.rightContent,
       styles.textCenter,
     ],
   );
@@ -265,11 +266,11 @@ export default function AppMomentView({
 
   const getItemLayout = React.useCallback(
     (_, index) => ({
-      length: MOMENT_HEIGHT,
-      offset: MOMENT_HEIGHT * index,
+      length: dimension.height,
+      offset: dimension.height * index,
       index,
     }),
-    [],
+    [dimension.height],
   );
 
   const onViewableItemsChanged = React.useCallback(
@@ -320,7 +321,7 @@ export default function AppMomentView({
   );
 }
 
-const makeStyles = (theme: Theme, insets: SafeAreaInsets) =>
+const makeStyles = (theme: Theme, insets: SafeAreaInsets, momentHeight: number) =>
   StyleSheet.create({
     nft: {
       borderRadius: theme.roundness,
@@ -361,7 +362,11 @@ const makeStyles = (theme: Theme, insets: SafeAreaInsets) =>
       paddingRight: wp(3),
       paddingBottom: hp(3.5),
       justifyContent: 'flex-end',
+      alignItems: 'flex-end',
+    },
+    rightContent: {
       alignItems: 'center',
+      justifyContent: 'center',
     },
     textCenter: {
       textAlign: 'center',
@@ -372,8 +377,8 @@ const makeStyles = (theme: Theme, insets: SafeAreaInsets) =>
       alignSelf: 'center',
     },
     momentItemContainer: {
-      height: MOMENT_HEIGHT,
-      width: wp(100, { dim: DIM_CONFIG }),
+      height: momentHeight,
+      width: wp(100),
     },
     container: {
       flex: 1,

diff --git a/src/components/organism/nftDetails/AppNFTDetailsHeader.tsx b/src/components/organism/nftDetails/AppNFTDetailsHeader.tsx
@@ -13,12 +13,12 @@ import { NFT } from 'enevti-app/types/core/chain/nft';
 import { STATUS_BAR_HEIGHT } from 'enevti-app/components/atoms/view/AppStatusBar';
 import { IPFStoURL } from 'enevti-app/service/ipfs';
 
-const NFT_WIDTH = Dimensions.get('screen').width * 0.8;
+const NFT_WIDTH = () => Dimensions.get('screen').width * 0.8;
 export const NFT_DETAILS_HEADER_VIEW_HEIGHT =
   HEADER_HEIGHT_PERCENTAGE +
   5.5 +
   STATUS_BAR_HEIGHT() +
-  ((NFT_WIDTH + Dimensions.get('screen').width * 0.125) / Dimensions.get('screen').height) * 100;
+  ((NFT_WIDTH() + Dimensions.get('screen').width * 0.125) / Dimensions.get('screen').height) * 100;
 
 interface AppNFTDetailsHeaderProps {
   nft: NFT;
@@ -32,7 +32,7 @@ export default function AppNFTDetailsHeader({ nft }: AppNFTDetailsHeaderProps) {
   const styles = React.useMemo(() => makeStyles(), []);
 
   const nftContainerPaddingTop = React.useMemo(() => insets.top + hp(HEADER_HEIGHT_PERCENTAGE), [insets.top, hp]);
-  const nftWidth = React.useMemo(() => NFT_WIDTH, []);
+  const nftWidth = React.useMemo(() => NFT_WIDTH(), []);
   const nftContainerWidth = React.useMemo(() => wp('100%'), [wp]);
   const totalHeight = React.useMemo(() => NFT_DETAILS_HEADER_VIEW_HEIGHT, []);