Fixed #576

fastlane/metadata/en-US/release_notes.txt

@@ -1,3 +1,4 @@
 Enjoy toooting! This version includes following improvements and fixes:
 - Align filter experience with v4.0 and above
 - Supports enlarging user's avatar and banner
+- Fix iPad weird sizing (not optimisation)

fastlane/metadata/zh-Hans/release_notes.txt

@@ -1,3 +1,4 @@
 toooting愉快！此版本包括以下改进和修复：
 - 改进过滤体验，与v4.0以上版本一致
 - 支持查看用户的头像和横幅图片
+- 修复iPad部分尺寸问题（非优化）

src/screens/Actions.tsx

@@ -24,7 +24,7 @@ const ScreenActions = ({
   const insets = useSafeAreaInsets()
 
   const DEFAULT_VALUE = 350
-  const screenHeight = Dimensions.get('screen').height
+  const screenHeight = Dimensions.get('window').height
   const panY = useSharedValue(DEFAULT_VALUE)
   useEffect(() => {
     panY.value = withTiming(0)

src/screens/Announcements.tsx

@@ -61,7 +61,7 @@ const ScreenAnnouncements: React.FC<RootStackScreenProps<'Screen-Announcements'>
       <View
         key={index}
         style={{
-          width: Dimensions.get('screen').width,
+          width: Dimensions.get('window').width,
           padding: StyleConstants.Spacing.Global.PagePadding,
           marginVertical: StyleConstants.Spacing.Global.PagePadding,
           justifyContent: 'center'
@@ -200,7 +200,7 @@ const ScreenAnnouncements: React.FC<RootStackScreenProps<'Screen-Announcements'>
     return (
       <View
         style={{
-          width: Dimensions.get('screen').width,
+          width: Dimensions.get('window').width,
           justifyContent: 'center',
           alignItems: 'center'
         }}

src/screens/Compose/DraftsList.tsx

@@ -142,12 +142,12 @@ const ComposeDraftsList: React.FC<ScreenComposeStackScreenProps<'Screen-Compose-
                           key={index}
                           style={{
                             width:
-                              (Dimensions.get('screen').width -
+                              (Dimensions.get('window').width -
                                 StyleConstants.Spacing.Global.PagePadding * 2 -
                                 StyleConstants.Spacing.S * 3) /
                               4,
                             height:
-                              (Dimensions.get('screen').width -
+                              (Dimensions.get('window').width -
                                 StyleConstants.Spacing.Global.PagePadding * 2 -
                                 StyleConstants.Spacing.S * 3) /
                               4,

src/screens/ImagesViewer.tsx

@@ -34,8 +34,8 @@ const ScreenImagesViewer = ({
     return null
   }
 
-  const SCREEN_WIDTH = Dimensions.get('screen').width
+  const WINDOW_WIDTH = Dimensions.get('window').width
-  const SCREEN_HEIGHT = Dimensions.get('screen').height
+  const WINDOW_HEIGHT = Dimensions.get('window').height
 
   const insets = useSafeAreaInsets()
 
@@ -85,13 +85,13 @@ const ScreenImagesViewer = ({
     }: {
       item: RootStackScreenProps<'Screen-ImagesViewer'>['route']['params']['imageUrls'][0]
     }) => {
-      const screenRatio = SCREEN_WIDTH / SCREEN_HEIGHT
+      const screenRatio = WINDOW_WIDTH / WINDOW_HEIGHT
       const imageRatio = item.width && item.height ? item.width / item.height : 1
       const imageWidth = item.width || 100
       const imageHeight = item.height || 100
 
-      const maxWidthScale = item.width ? (item.width / SCREEN_WIDTH / PixelRatio.get()) * 4 : 0
+      const maxWidthScale = item.width ? (item.width / WINDOW_WIDTH / PixelRatio.get()) * 4 : 0
-      const maxHeightScale = item.height ? (item.height / SCREEN_WIDTH / PixelRatio.get()) * 4 : 0
+      const maxHeightScale = item.height ? (item.height / WINDOW_WIDTH / PixelRatio.get()) * 4 : 0
       const max = Math.max.apply(Math, [maxWidthScale, maxHeightScale, 4])
 
       return (
@@ -109,8 +109,8 @@ const ScreenImagesViewer = ({
           children={
             <View
               style={{
-                width: SCREEN_WIDTH,
+                width: WINDOW_WIDTH,
-                height: SCREEN_HEIGHT,
+                height: WINDOW_HEIGHT,
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'center'
@@ -121,12 +121,12 @@ const ScreenImagesViewer = ({
                 dimension={{
                   width:
                     screenRatio > imageRatio
-                      ? (SCREEN_HEIGHT / imageHeight) * imageWidth
+                      ? (WINDOW_HEIGHT / imageHeight) * imageWidth
-                      : SCREEN_WIDTH,
+                      : WINDOW_WIDTH,
                   height:
                     screenRatio > imageRatio
-                      ? SCREEN_HEIGHT
+                      ? WINDOW_HEIGHT
-                      : (SCREEN_WIDTH / imageWidth) * imageHeight
+                      : (WINDOW_WIDTH / imageWidth) * imageHeight
                 }}
               />
             </View>
@@ -217,8 +217,8 @@ const ScreenImagesViewer = ({
           }}
           initialScrollIndex={initialIndex}
           getItemLayout={(_, index) => ({
-            length: SCREEN_WIDTH,
+            length: WINDOW_WIDTH,
-            offset: SCREEN_WIDTH * index,
+            offset: WINDOW_WIDTH * index,
             index
           })}
         />

src/screens/Tabs/Public/Root.tsx

@@ -88,7 +88,7 @@ const Root: React.FC<NativeStackScreenProps<TabPublicStackParamList, 'Tab-Public
       renderTabBar={() => null}
       onIndexChange={index => setSegment(index)}
       navigationState={{ index: segment, routes }}
-      initialLayout={{ width: Dimensions.get('screen').width }}
+      initialLayout={{ width: Dimensions.get('window').width }}
     />
   )
 }

src/screens/Tabs/Shared/Account/Attachments.tsx

@@ -23,7 +23,7 @@ const AccountAttachments: React.FC<Props> = ({ account }) => {
 
   const DISPLAY_AMOUNT = 6
 
-  const width = (Dimensions.get('screen').width - StyleConstants.Spacing.Global.PagePadding * 2) / 4
+  const width = (Dimensions.get('window').width - StyleConstants.Spacing.Global.PagePadding * 2) / 4
 
   const queryKeyParams: QueryKeyTimeline[1] = {
     page: 'Account',

src/screens/Tabs/Shared/Account/Header.tsx

@@ -34,7 +34,7 @@ const AccountHeader: React.FC<Props> = ({ account }) => {
       <GracefullyImage
         uri={{ original: account?.header, static: account?.header_static }}
         style={{
-          height: Dimensions.get('screen').width / 3 + topInset,
+          height: Dimensions.get('window').width / 3 + topInset,
           backgroundColor: colors.disabled
         }}
       />

src/screens/Tabs/Shared/Account/Nav.tsx

@@ -4,11 +4,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { Dimensions, StyleSheet, View } from 'react-native'
-import Animated, {
+import Animated, { Extrapolate, interpolate, useAnimatedStyle } from 'react-native-reanimated'
-  Extrapolate,
-  interpolate,
-  useAnimatedStyle
-} from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export interface Props {
@@ -22,7 +18,7 @@ const AccountNav = React.memo(
     const headerHeight = useSafeAreaInsets().top + 44
 
     const nameY =
-      Dimensions.get('screen').width / 3 +
+      Dimensions.get('window').width / 3 +
       StyleConstants.Avatar.L -
       StyleConstants.Spacing.Global.PagePadding * 2 +
       StyleConstants.Spacing.M -
@@ -35,12 +31,7 @@ const AccountNav = React.memo(
     })
     const styleMarginTop = useAnimatedStyle(() => {
       return {
-        marginTop: interpolate(
+        marginTop: interpolate(scrollY.value, [nameY, nameY + 20], [50, 0], Extrapolate.CLAMP)
-          scrollY.value,
-          [nameY, nameY + 20],
-          [50, 0],
-          Extrapolate.CLAMP
-        )
       }
     })
 
@@ -61,8 +52,7 @@ const AccountNav = React.memo(
             flex: 1,
             alignItems: 'center',
             overflow: 'hidden',
-            marginTop:
+            marginTop: useSafeAreaInsets().top + (44 - StyleConstants.Font.Size.L) / 2
-              useSafeAreaInsets().top + (44 - StyleConstants.Font.Size.L) / 2
           }}
         >
           <Animated.View style={[{ flexDirection: 'row' }, styleMarginTop]}>