Fix scoll boxes on android

helium · Oct 14, 2024 · 1389498 · 1389498
1 parent 5fb3e50
commit 1389498
Show file tree

Hide file tree

Showing 41 changed files with 542 additions and 481 deletions.
diff --git a/android/.settings/org.eclipse.buildship.core.prefs b/android/.settings/org.eclipse.buildship.core.prefs
@@ -1,11 +1,11 @@
-arguments=--init-script /var/folders/_m/gmgx0cmn6rzb80znp6s3hl800000gn/T/db3b08fc4a9ef609cb16b96b200fa13e563f396e9bb1ed0905fdab7bc3bc513b.gradle --init-script /var/folders/_m/gmgx0cmn6rzb80znp6s3hl800000gn/T/52cde0cfcf3e28b8b7510e992210d9614505e0911af0c190bd590d7158574963.gradle
+arguments=--init-script /var/folders/tm/qsvqk80d0t30zlr71v0yf1m00000gn/T/db3b08fc4a9ef609cb16b96b200fa13e563f396e9bb1ed0905fdab7bc3bc513b.gradle --init-script /var/folders/tm/qsvqk80d0t30zlr71v0yf1m00000gn/T/52cde0cfcf3e28b8b7510e992210d9614505e0911af0c190bd590d7158574963.gradle
 auto.sync=false
 build.scans.enabled=false
 connection.gradle.distribution=GRADLE_DISTRIBUTION(WRAPPER)
 connection.project.dir=
 eclipse.preferences.version=1
 gradle.user.home=
-java.home=/Library/Java/JavaVirtualMachines/temurin-21.jdk/Contents/Home
+java.home=/Users/peronif5/Library/Java/JavaVirtualMachines/openjdk-21.0.2/Contents/Home
 jvm.arguments=
 offline.mode=false
 override.workspace.settings=true

diff --git a/android/app/src/debug/AndroidManifest.xml b/android/app/src/debug/AndroidManifest.xml
@@ -6,4 +6,4 @@
         android:usesCleartextTraffic="true"
         tools:targetApi="28"
         tools:ignore="GoogleAppIndexingWarning"/>
-</manifest>
+</manifest>
diff --git a/package.json b/package.json
@@ -172,7 +172,7 @@
     "react-native-localize": "2.2.3",
     "react-native-mail": "6.1.1",
     "react-native-markdown-display": "^7.0.0-alpha.2",
-    "react-native-navigation-bar-color": "2.0.2",
+    "react-native-navigation-bar-color": "^2.0.2",
     "react-native-network-info": "5.2.1",
     "react-native-onesignal": "5.2.2",
     "react-native-os": "^1.2.6",

diff --git a/src/App.tsx b/src/App.tsx
@@ -145,7 +145,6 @@ const App = () => {
                                           <GovernanceProvider>
                                             <AutoGasBanner />
                                             <RootNavigator />
-
                                             {/* place app specific modals here */}
                                             <InsufficientSolConversionModal />
                                           </GovernanceProvider>

diff --git a/src/components/GlobalError.tsx b/src/components/GlobalError.tsx
@@ -3,11 +3,11 @@ import useCopyText from '@hooks/useCopyText'
 import useHaptic from '@hooks/useHaptic'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ScrollView } from 'react-native'
 import Box from './Box'
 import ButtonPressable from './ButtonPressable'
 import SafeAreaBox from './SafeAreaBox'
 import Text from './Text'
+import ScrollBox from './ScrollBox'
 
 export const GlobalError = ({
   error,
@@ -41,14 +41,14 @@ export const GlobalError = ({
         >
           {t('crash.subTitle')}
         </Text>
-        <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+        <ScrollBox contentContainerStyle={{ flexGrow: 1 }}>
           <Text variant="textXsBold" color="error.500">
             {error.message}
           </Text>
           <Text variant="textXsRegular" color="error.500">
             {error.stack}
           </Text>
-        </ScrollView>
+        </ScrollBox>
         <ButtonPressable
           innerContainerProps={{
             justifyContent: 'center',

diff --git a/src/components/HeliumBottomSheet.tsx b/src/components/HeliumBottomSheet.tsx
@@ -7,7 +7,7 @@ import {
   useSpacing,
 } from '@theme/themeHooks'
 import { wh } from '@utils/layout'
-import { StyleProp, ViewStyle } from 'react-native'
+import { Platform, StyleProp, ViewStyle } from 'react-native'
 import { useSharedValue } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
@@ -21,6 +21,14 @@ const HeliumBottomSheet = forwardRef<BottomSheet, BottomSheetProps>(
     const bottomSheetStyle = useBackgroundStyle('primaryText')
     const listAnimatedPos = useSharedValue<number>(wh - 100)
 
+    const snapPoints = useMemo(() => {
+      if (Platform.OS === 'ios') {
+        return [wh - top - spacing[20]]
+      }
+
+      return [wh - top - spacing[20] - spacing[2]]
+    }, [top, spacing])
+
     const handleIndicatorStyle = useMemo(() => {
       return {
         width: 90,
@@ -56,7 +64,7 @@ const HeliumBottomSheet = forwardRef<BottomSheet, BottomSheetProps>(
       <BottomSheet
         ref={ref}
         index={-1}
-        snapPoints={[wh - top - spacing[20]]}
+        snapPoints={snapPoints}
         backgroundStyle={backgroundStyle}
         animatedPosition={listAnimatedPos}
         handleIndicatorStyle={handleIndicatorStyle}

diff --git a/src/components/ScrollBox.tsx b/src/components/ScrollBox.tsx
@@ -1,7 +1,8 @@
 import { createBox } from '@shopify/restyle'
 import { ReactNode } from 'react'
 import { Theme } from '@theme/theme'
-import { ScrollView, ScrollViewProps } from 'react-native'
+import { ScrollViewProps } from 'react-native'
+import { ScrollView } from 'react-native-gesture-handler'
 
 const ScrollBox = createBox<
   Theme,

diff --git a/src/components/SecretKeyWarningScreen.tsx b/src/components/SecretKeyWarningScreen.tsx
@@ -1,5 +1,5 @@
 import React, { memo, ReactNode, useCallback, useEffect, useState } from 'react'
-import { ScrollView, View } from 'react-native'
+import { View } from 'react-native'
 import InfoWarning from '@assets/images/customWarning.svg'
 import { useTranslation } from 'react-i18next'
 import Animated, {
@@ -14,6 +14,7 @@ import Text from './Text'
 import Box from './Box'
 import ButtonPressable from './ButtonPressable'
 import { BackScreen } from '.'
+import ScrollBox from './ScrollBox'
 
 const SecretKeyWarningScreen = ({ children }: { children: ReactNode }) => {
   const { t } = useTranslation()
@@ -66,7 +67,7 @@ const SecretKeyWarningScreen = ({ children }: { children: ReactNode }) => {
       {children}
       {!animationComplete && (
         <Animated.View style={style}>
-          <ScrollView
+          <ScrollBox
             style={{
               backgroundColor: primaryBackground,
               flexGrow: 1,
@@ -139,7 +140,7 @@ const SecretKeyWarningScreen = ({ children }: { children: ReactNode }) => {
                 </Text>
               </Box>
             </BackScreen>
-          </ScrollView>
+          </ScrollBox>
         </Animated.View>
       )}
     </View>

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
@@ -33,8 +33,6 @@ export const Select: React.FC<SelectProps> = ({
     <>
       <TouchableContainer
         padding="4"
-        borderWidth={1}
-        borderColor="border.primary"
         backgroundColor="cardBackground"
         backgroundColorPressed="secondaryBackground"
         borderRadius="2xl"

diff --git a/src/components/TreasuryWarningScreen.tsx b/src/components/TreasuryWarningScreen.tsx
@@ -6,7 +6,7 @@ import React, {
   useMemo,
   useState,
 } from 'react'
-import { ScrollView, View } from 'react-native'
+import { View } from 'react-native'
 import InfoWarning from '@assets/images/warning.svg'
 import { useTranslation } from 'react-i18next'
 import Animated, {
@@ -24,6 +24,7 @@ import {
   parseSolanaStatus,
   useGetSolanaStatusQuery,
 } from '../store/slices/solanaStatusApi'
+import ScrollBox from './ScrollBox'
 
 const TreausuryWarningScreen = ({ children }: { children: ReactNode }) => {
   const { t } = useTranslation()
@@ -75,7 +76,7 @@ const TreausuryWarningScreen = ({ children }: { children: ReactNode }) => {
       {children}
       {!animationComplete && (
         <Animated.View style={style}>
-          <ScrollView
+          <ScrollBox
             style={{
               backgroundColor: primaryBackground,
               flexGrow: 1,
@@ -130,7 +131,7 @@ const TreausuryWarningScreen = ({ children }: { children: ReactNode }) => {
                 marginTop="6"
               />
             </Box>
-          </ScrollView>
+          </ScrollBox>
         </Animated.View>
       )}
     </View>

diff --git a/src/features/account/AccountTokenScreen.tsx b/src/features/account/AccountTokenScreen.tsx
@@ -20,9 +20,9 @@ import React, { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { View } from 'react-native'
 import { FlatList } from 'react-native-gesture-handler'
-import ScrollBox from '@components/ScrollBox'
 import { WalletStackParamList } from '@services/WalletService/pages/WalletPage/WalletPageNavigator'
 import { PublicKey } from '@solana/web3.js'
+import ScrollBox from '@components/ScrollBox'
 import { useSolana } from '../../solana/SolanaProvider'
 import { useAccountStorage } from '../../storage/AccountStorageProvider'
 import { Activity } from '../../types/activity'

diff --git a/src/features/activity/ActivityDetailsScreen.tsx b/src/features/activity/ActivityDetailsScreen.tsx
@@ -17,9 +17,10 @@ import { ConfirmedSignatureInfo } from '@solana/web3.js'
 import { useColors } from '@theme/themeHooks'
 import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Linking, ScrollView } from 'react-native'
+import { Linking } from 'react-native'
 import { NavBarHeight } from '@components/ServiceNavBar'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import ScrollBox from '@components/ScrollBox'
 import { useCreateExplorerUrl } from '../../constants/urls'
 import { EnrichedTransaction } from '../../types/solana'
 import { ellipsizeAddress, solAddressIsValid } from '../../utils/accountUtils'
@@ -342,7 +343,7 @@ const ActivityDetailsScreen = () => {
   )
 
   return (
-    <ScrollView
+    <ScrollBox
       style={{ backgroundColor: colors.primaryBackground }}
       contentContainerStyle={{
         flexGrow: 1,
@@ -410,7 +411,7 @@ const ActivityDetailsScreen = () => {
           {accountOptions()}
         </BlurActionSheet>
       </BackScreen>
-    </ScrollView>
+    </ScrollBox>
   )
 }
 

diff --git a/src/features/activity/ActivityScreen.tsx b/src/features/activity/ActivityScreen.tsx
@@ -13,6 +13,7 @@ import FadeInOut from '@components/FadeInOut'
 import useHaptic from '@hooks/useHaptic'
 import { useColors, useSpacing } from '@theme/themeHooks'
 import { NavBarHeight } from '@components/ServiceNavBar'
+import ScrollBox from '@components/ScrollBox'
 import { ActivityNavigationProp } from './activityTypes'
 import ActivityListItem from './ActivityListItem'
 
@@ -160,30 +161,32 @@ const ActivityScreen = () => {
   const keyExtractor = useCallback((item, index) => item.signature + index, [])
 
   return (
-    <SectionList
-      style={{
-        backgroundColor: colors.primaryBackground,
-      }}
-      contentContainerStyle={contentContainer}
-      sections={SectionData}
-      keyExtractor={keyExtractor}
-      renderItem={renderItem}
-      renderSectionHeader={renderSectionHeader}
-      ListHeaderComponent={renderHeader}
-      refreshControl={
-        <RefreshControl
-          enabled
-          refreshing={loading}
-          onRefresh={refresh}
-          title=""
-          tintColor={colors.primaryText}
-        />
-      }
-      stickySectionHeadersEnabled={false}
-      onEndReachedThreshold={0.05}
-      // onEndReached={fetchMore}
-      ListFooterComponent={Footer}
-    />
+    <ScrollBox backgroundColor="primaryBackground">
+      <SectionList
+        style={{
+          backgroundColor: colors.primaryBackground,
+        }}
+        contentContainerStyle={contentContainer}
+        sections={SectionData}
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+        renderSectionHeader={renderSectionHeader}
+        ListHeaderComponent={renderHeader}
+        refreshControl={
+          <RefreshControl
+            enabled
+            refreshing={loading}
+            onRefresh={refresh}
+            title=""
+            tintColor={colors.primaryText}
+          />
+        }
+        stickySectionHeadersEnabled={false}
+        onEndReachedThreshold={0.05}
+        // onEndReached={fetchMore}
+        ListFooterComponent={Footer}
+      />
+    </ScrollBox>
   )
 }
 

diff --git a/src/features/collectables/HotspotList.tsx b/src/features/collectables/HotspotList.tsx
@@ -21,6 +21,7 @@ import { useTranslation } from 'react-i18next'
 import { RefreshControl } from 'react-native'
 import { FlatList } from 'react-native-gesture-handler'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import ScrollBox from '@components/ScrollBox'
 import { CompressedNFT, HotspotWithPendingRewards } from '../../types/solana'
 import { formatLargeNumber } from '../../utils/accountUtils'
 import HotspotCompressedListItem from './HotspotCompressedListItem'
@@ -243,32 +244,34 @@ const HotspotList = () => {
 
   return (
     <>
-      <FlatList
-        data={hotspotsWithMeta}
-        numColumns={2}
-        style={{
-          marginTop: spacing.xl,
-        }}
-        columnWrapperStyle={{
-          flexDirection: 'column',
-        }}
-        ListHeaderComponent={renderHeader}
-        refreshControl={
-          <RefreshControl
-            enabled
-            refreshing={loadingHotspots}
-            onRefresh={handleRefresh}
-            title=""
-            tintColor={primaryText}
-          />
-        }
-        renderItem={renderCollectable}
-        ListEmptyComponent={renderEmptyComponent}
-        onEndReachedThreshold={0.001}
-        onEndReached={handleOnEndReached}
-        keyExtractor={keyExtractor}
-        ListFooterComponent={Footer}
-      />
+      <ScrollBox>
+        <FlatList
+          data={hotspotsWithMeta}
+          numColumns={2}
+          style={{
+            marginTop: spacing.xl,
+          }}
+          columnWrapperStyle={{
+            flexDirection: 'column',
+          }}
+          ListHeaderComponent={renderHeader}
+          refreshControl={
+            <RefreshControl
+              enabled
+              refreshing={loadingHotspots}
+              onRefresh={handleRefresh}
+              title=""
+              tintColor={primaryText}
+            />
+          }
+          renderItem={renderCollectable}
+          ListEmptyComponent={renderEmptyComponent}
+          onEndReachedThreshold={0.001}
+          onEndReached={handleOnEndReached}
+          keyExtractor={keyExtractor}
+          ListFooterComponent={Footer}
+        />
+      </ScrollBox>
       <Box
         backgroundColor="fg.quinary-400"
         borderTopLeftRadius="4xl"

diff --git a/src/features/collectables/NftDetailsScreen.tsx b/src/features/collectables/NftDetailsScreen.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useMemo, memo } from 'react'
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
-import { ScrollView } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import 'text-encoding-polyfill'
 import { useTranslation } from 'react-i18next'
@@ -134,7 +133,7 @@ const NftDetailsScreen = () => {
           headerTopMargin="6xl"
           headerHorizontalPadding="5"
         >
-          <ScrollView>
+          <ScrollBox>
             <Box flex={1}>
               {content && (
                 <Box alignItems="center">
@@ -188,7 +187,7 @@ const NftDetailsScreen = () => {
                 <NftMetadata metadata={content?.metadata} />
               </Box>
             </Box>
-          </ScrollView>
+          </ScrollBox>
         </BackScreen>
       </ScrollBox>
     </ReAnimatedBox>