fixup! Fix Tx List Margins

EdgeApp · Jan 29, 2024 · a53c674 · a53c674
1 parent 0cd3a4e
commit a53c674
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/components/scenes/TransactionListScene.tsx b/src/components/scenes/TransactionListScene.tsx
@@ -6,6 +6,7 @@ import * as React from 'react'
 import { ListRenderItemInfo, RefreshControl, View } from 'react-native'
 import { getVersion } from 'react-native-device-info'
 import Animated from 'react-native-reanimated'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { SPECIAL_CURRENCY_INFO } from '../../constants/WalletAndCurrencyConstants'
 import { useHandler } from '../../hooks/useHandler'
@@ -275,6 +276,9 @@ function TransactionListComponent(props: Props) {
     backgroundColors[0] = scaledColor
   }
 
+  // TODO: Include this fix in the SceneWrapper component
+  const safeAreaInsets = useSafeAreaInsets()
+
   return (
     <SceneWrapper
       accentColors={accentColors}
@@ -294,7 +298,7 @@ function TransactionListComponent(props: Props) {
             ref={flashListRef}
             contentContainerStyle={{
               paddingTop: insetStyle.paddingTop + theme.rem(0.5),
-              paddingBottom: insetStyle.paddingBottom + theme.rem(0.5),
+              paddingBottom: insetStyle.paddingBottom + theme.rem(0.5) + safeAreaInsets.bottom,
               paddingLeft: insetStyle.paddingLeft + theme.rem(0.5),
               paddingRight: insetStyle.paddingRight + theme.rem(0.5)
             }}

diff --git a/src/components/themed/TransactionListTop.tsx b/src/components/themed/TransactionListTop.tsx
@@ -504,6 +504,8 @@ const getStyles = cacheStyles((theme: Theme) => ({
   },
 
   // TODO: Fix SceneHeader to be UI4 compatible
+  // This negative margin will cause the SceneHeader's divider-line to touch
+  // the right edge of the screen. This is design roll-off from UI3.
   tempSceneHeader: {
     marginRight: -theme.rem(0.5),
     overflow: 'visible'