From c81d85384f2d703cf9f21c048909dcf6fd463fcd Mon Sep 17 00:00:00 2001
From: Kathy Luo <kathyluo18@gmail.com>
Date: Thu, 25 May 2023 12:34:05 +0200
Subject: [PATCH] fix(tokens): ensure header component is above scrollbar on
 overscroll (#3797)

### Description

Context
https://valora-app.slack.com/archives/C029Z1QMD7B/p1684931810127659

### Test plan


https://github.com/valora-inc/wallet/assets/20150449/61937fb0-3ef7-4c40-b0ba-8744cbc8036e


### Related issues

- Fixes RET-732

### Backwards compatibility

Y
---
 src/tokens/TokenBalances.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/tokens/TokenBalances.tsx b/src/tokens/TokenBalances.tsx
index 2b68090a62a..457fe051904 100644
--- a/src/tokens/TokenBalances.tsx
+++ b/src/tokens/TokenBalances.tsx
@@ -310,9 +310,10 @@ function TokenBalancesScreen({ navigation, route }: Props) {
       <AnimatedSectionList
         contentContainerStyle={{
           paddingBottom: insets.bottom,
+          opacity: listHeaderHeight > 0 ? 1 : 0,
         }}
-        // Workaround iOS setting an incorrect automatic inset at the top
-        scrollIndicatorInsets={{ top: 0.01 }}
+        // ensure header is above the scrollbar on ios overscroll
+        scrollIndicatorInsets={{ top: listHeaderHeight }}
         // @ts-ignore can't get the SectionList to accept a union type :(
         sections={sections}
         renderItem={renderAssetItem}