fix: modify the incorrect padding on some Android models.

Author: dohooo

.changeset/calm-ducks-speak.md

@@ -0,0 +1,5 @@
+---
+"xlog": patch
+---
+
+fix: modify the incorrect padding on some Android models.

src/context/global-state-context.ts

@@ -10,6 +10,10 @@ interface GlobalStateContextType {
   }
   language: Language
   setLanguage: (language: Language) => void
+  dimensions: {
+    width: number
+    height: number
+  }
 }
 
 export const GlobalStateContext = createContext<GlobalStateContextType | null>(null);

src/pages/Feed/index.tsx

@@ -1,7 +1,7 @@
 import type { FC } from "react";
 import { useContext, useState } from "react";
 import { Dimensions, StyleSheet } from "react-native";
-import Animated, { Extrapolate, interpolate, useAnimatedStyle } from "react-native-reanimated";
+import Animated, { Extrapolation, interpolate, useAnimatedStyle } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import type { NativeStackScreenProps } from "@react-navigation/native-stack";
@@ -10,7 +10,7 @@ import { LinearGradient } from "expo-linear-gradient";
 import { Stack } from "tamagui";
 
 import { MasonryFeedList } from "@/components/FeedList";
-import { GlobalStateContext } from "@/context/global-state-context";
+import { GlobalStateContext, useGlobalState } from "@/context/global-state-context";
 import { useColors } from "@/hooks/use-colors";
 import type { HomeBottomTabsParamList } from "@/navigation/types";
 
@@ -25,8 +25,6 @@ export interface Props {
   isShorts?: boolean
 }
 
-const { height } = Dimensions.get("window");
-
 export const FeedListLinearGradientBackground: FC = () => {
   const { pick } = useColors();
   return (
@@ -47,32 +45,34 @@ export const FeedPage: FC<NativeStackScreenProps<HomeBottomTabsParamList, "Feed"
   const [daysInterval, setDaysInterval] = useState<number>(7);
   const { isExpandedAnimValue, onScroll } = useContext(GlobalStateContext).homeFeed;
   const { top } = useSafeAreaInsets();
+  const { dimensions: { height } } = useGlobalState();
 
   const containerAnimStyles = useAnimatedStyle(() => {
     const headerHeight = interpolate(
       isExpandedAnimValue.value,
       [0, 1],
       [0, homeTabHeaderHeight + top],
-      Extrapolate.CLAMP,
-    ) + extraGapBetweenIOSAndAndroid;
+      Extrapolation.CLAMP,
+    );
 
     return {
       height: height - headerHeight,
     };
-  }, [top, isExpandedAnimValue]);
+  }, [top, isExpandedAnimValue, height]);
 
   const innerMaskContainerAnimStyles = useAnimatedStyle(() => {
     const paddingTop = interpolate(
       isExpandedAnimValue.value,
       [0, 1],
       [0, top],
-      Extrapolate.CLAMP,
-    ) + extraGapBetweenIOSAndAndroid;
+      Extrapolation.CLAMP,
+    );
 
     return {
       paddingTop,
+      height,
     };
-  }, [top, isExpandedAnimValue]);
+  }, [top, isExpandedAnimValue, height]);
 
   return (
     <Stack flex={1}>
@@ -115,7 +115,6 @@ const styles = StyleSheet.create({
   },
   innerMaskContainer: {
     width: "100%",
-    height,
     position: "absolute",
     bottom: 0,
   },

src/providers/global-state-provider.tsx

@@ -1,4 +1,5 @@
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
+import { View } from "react-native";
 
 import { GlobalStateContext } from "@/context/global-state-context";
 import { useScrollVisibilityHandler } from "@/hooks/use-scroll-visibility-handler";
@@ -14,12 +15,21 @@ interface GlobalStateProviderProps extends React.PropsWithChildren {
 export function GlobalStateProvider({ children }: GlobalStateProviderProps) {
   const [language, _setLanguage] = React.useState<keyof typeof LANGUAGES>(i18n.language as keyof typeof LANGUAGES);
   const { isExpandedAnimValue, onScroll } = useScrollVisibilityHandler({ scrollThreshold: homeTabHeaderHeight });
+  const [dimensions, setDimensions] = React.useState<{
+    width: number
+    height: number
+  }>(null!);
 
-  const setLanguage = (language: Language) => {
+  const setLanguage = useCallback((language: Language) => {
     _setLanguage(language);
     cacheStorage.set(LANGUAGE_STORAGE_KEY, language);
     i18n.changeLanguage(language);
-  };
+  }, []);
+
+  const updateDimensions = useCallback((e: any) => {
+    const { width, height } = e.nativeEvent.layout;
+    setDimensions({ width, height });
+  }, []);
 
   const homeFeed = useMemo(() => {
     return {
@@ -29,8 +39,10 @@ export function GlobalStateProvider({ children }: GlobalStateProviderProps) {
   }, [isExpandedAnimValue, onScroll]);
 
   return (
-    <GlobalStateContext.Provider value={{ homeFeed, language, setLanguage }}>
-      {children}
+    <GlobalStateContext.Provider value={{ homeFeed, language, dimensions, setLanguage }}>
+      <View style={{ flex: 1 }} onLayout={updateDimensions}>
+        {dimensions && children}
+      </View>
     </GlobalStateContext.Provider>
   );
 }