Fix scroll bar in middle of screen issue for SceneWrapper ScrollView

EdgeApp · Jan 17, 2024 · 0ed050f · 0ed050f
1 parent c61f51b
commit 0ed050f
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 0 deletions.
diff --git a/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap
@@ -206,6 +206,11 @@ exports[`CreateWalletAccountSelect renders 1`] = `
     }
     onScroll={[Function]}
     scrollEventThrottle={0.0001}
+    scrollIndicatorInsets={
+      {
+        "right": 1,
+      }
+    }
     style={
       {
         "height": 1334,

diff --git a/src/__tests__/scenes/__snapshots__/CurrencyNotificationScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CurrencyNotificationScene.test.tsx.snap
@@ -206,6 +206,11 @@ exports[`CurrencyNotificationComponent should render with loading props 1`] = `
     }
     onScroll={[Function]}
     scrollEventThrottle={0.0001}
+    scrollIndicatorInsets={
+      {
+        "right": 1,
+      }
+    }
     style={
       {
         "height": 1334,

diff --git a/src/__tests__/scenes/__snapshots__/CurrencySettings.ui.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CurrencySettings.ui.test.tsx.snap
@@ -206,6 +206,11 @@ exports[`CurrencySettings should render 1`] = `
     }
     onScroll={[Function]}
     scrollEventThrottle={0.0001}
+    scrollIndicatorInsets={
+      {
+        "right": 1,
+      }
+    }
     style={
       {
         "height": 1334,

diff --git a/src/__tests__/scenes/__snapshots__/SettingsScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/SettingsScene.test.tsx.snap
@@ -206,6 +206,11 @@ exports[`MyComponent should render Locked SettingsOverview 1`] = `
     }
     onScroll={[Function]}
     scrollEventThrottle={0.0001}
+    scrollIndicatorInsets={
+      {
+        "right": 1,
+      }
+    }
     style={
       {
         "height": 1334,
@@ -3626,6 +3631,11 @@ exports[`MyComponent should render UnLocked SettingsOverview 1`] = `
     }
     onScroll={[Function]}
     scrollEventThrottle={0.0001}
+    scrollIndicatorInsets={
+      {
+        "right": 1,
+      }
+    }
     style={
       {
         "height": 1334,

diff --git a/src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap
@@ -206,6 +206,11 @@ exports[`TransactionDetailsScene should render 1`] = `
     }
     onScroll={[Function]}
     scrollEventThrottle={0.0001}
+    scrollIndicatorInsets={
+      {
+        "right": 1,
+      }
+    }
     style={
       {
         "height": 1334,
@@ -1954,6 +1959,11 @@ exports[`TransactionDetailsScene should render with negative nativeAmount and fi
     }
     onScroll={[Function]}
     scrollEventThrottle={0.0001}
+    scrollIndicatorInsets={
+      {
+        "right": 1,
+      }
+    }
     style={
       {
         "height": 1334,

diff --git a/src/components/common/SceneWrapper.tsx b/src/components/common/SceneWrapper.tsx
@@ -189,6 +189,8 @@ export function SceneWrapper(props: SceneWrapperProps): JSX.Element {
           keyboardShouldPersistTaps={keyboardShouldPersistTaps}
           contentContainerStyle={insetStyle}
           onScroll={hasTabs || hasHeader ? handleScroll : () => {}}
+          // Fixes middle-floating scrollbar issue
+          scrollIndicatorInsets={{ right: 1 }}
         >
           <MaybeView when={!scroll && !avoidKeyboard} style={[styles.sceneContainer, layoutStyle, insetStyle, { padding }]}>
             {isFuncChildren ? children(info) : children}