Remove vertical scrollbars from views on native (#3429)

* remove vertical scrollbars * add to a few missing lists * gate this change * use `hide_vertical_scroll_indicators` * fix gate lint * fix bool
bluesky-social · Apr 12, 2024 · c3821fd · c3821fd
1 parent 6218eb0
commit c3821fd
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 50 deletions.
diff --git a/src/lib/statsig/gates.ts b/src/lib/statsig/gates.ts
@@ -3,6 +3,7 @@ export type Gate =
   | 'autoexpand_suggestions_on_profile_follow'
   | 'disable_min_shell_on_foregrounding'
   | 'disable_poll_on_discover'
+  | 'hide_vertical_scroll_indicators'
   | 'new_profile_scroll_component'
   | 'new_search'
   | 'receive_updates'

diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
@@ -1,18 +1,19 @@
 import React from 'react'
 import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {TabletOrDesktop, Mobile} from 'view/com/util/layouts/Breakpoints'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useSuggestedFeedsQuery} from '#/state/queries/suggested-feeds'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {ErrorMessage} from 'view/com/util/error/ErrorMessage'
+import {Button} from 'view/com/util/forms/Button'
+import {Mobile, TabletOrDesktop} from 'view/com/util/layouts/Breakpoints'
+import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
 import {Text} from 'view/com/util/text/Text'
 import {ViewHeader} from 'view/com/util/ViewHeader'
-import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
-import {Button} from 'view/com/util/forms/Button'
 import {RecommendedFeedsItem} from './RecommendedFeedsItem'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {usePalette} from 'lib/hooks/usePalette'
-import {ErrorMessage} from 'view/com/util/error/ErrorMessage'
-import {Trans, msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useSuggestedFeedsQuery} from '#/state/queries/suggested-feeds'
 
 type Props = {
   next: () => void
@@ -130,6 +131,7 @@ export function RecommendedFeeds({next}: Props) {
               renderItem={({item}) => <RecommendedFeedsItem item={item} />}
               keyExtractor={item => item.uri}
               style={{flex: 1}}
+              showsVerticalScrollIndicator={false}
             />
           ) : isLoading ? (
             <View style={{flex: 1}}>

diff --git a/src/view/com/auth/onboarding/RecommendedFollows.tsx b/src/view/com/auth/onboarding/RecommendedFollows.tsx
@@ -1,21 +1,22 @@
 import React from 'react'
 import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {AppBskyActorDefs, moderateProfile} from '@atproto/api'
-import {TabletOrDesktop, Mobile} from 'view/com/util/layouts/Breakpoints'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {logger} from '#/logger'
+import {useModerationOpts} from '#/state/queries/preferences'
+import {useSuggestedFollowsQuery} from '#/state/queries/suggested-follows'
+import {useGetSuggestedFollowersByActor} from '#/state/queries/suggested-follows'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {Button} from 'view/com/util/forms/Button'
+import {Mobile, TabletOrDesktop} from 'view/com/util/layouts/Breakpoints'
+import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
 import {Text} from 'view/com/util/text/Text'
 import {ViewHeader} from 'view/com/util/ViewHeader'
-import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
-import {Button} from 'view/com/util/forms/Button'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {usePalette} from 'lib/hooks/usePalette'
 import {RecommendedFollowsItem} from './RecommendedFollowsItem'
-import {useSuggestedFollowsQuery} from '#/state/queries/suggested-follows'
-import {useGetSuggestedFollowersByActor} from '#/state/queries/suggested-follows'
-import {useModerationOpts} from '#/state/queries/preferences'
-import {logger} from '#/logger'
-import {Trans, msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
 
 type Props = {
   next: () => void
@@ -202,6 +203,7 @@ export function RecommendedFollows({next}: Props) {
               )}
               keyExtractor={item => item.did}
               style={{flex: 1}}
+              showsVerticalScrollIndicator={false}
             />
           )}
           <Button

diff --git a/src/view/com/util/List.tsx b/src/view/com/util/List.tsx
@@ -1,11 +1,14 @@
 import React, {memo} from 'react'
 import {FlatListProps, RefreshControl} from 'react-native'
-import {FlatList_INTERNAL} from './Views'
-import {addStyle} from 'lib/styles'
-import {useScrollHandlers} from '#/lib/ScrollContext'
 import {runOnJS, useSharedValue} from 'react-native-reanimated'
+
 import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
 import {usePalette} from '#/lib/hooks/usePalette'
+import {useScrollHandlers} from '#/lib/ScrollContext'
+import {useGate} from 'lib/statsig/statsig'
+import {addStyle} from 'lib/styles'
+import {isWeb} from 'platform/detection'
+import {FlatList_INTERNAL} from './Views'
 
 export type ListMethods = FlatList_INTERNAL
 export type ListProps<ItemT> = Omit<
@@ -37,7 +40,8 @@ function ListImpl<ItemT>(
   const isScrolledDown = useSharedValue(false)
   const contextScrollHandlers = useScrollHandlers()
   const pal = usePalette('default')
-
+  const showsVerticalScrollIndicator =
+    !useGate('hide_vertical_scroll_indicators') || isWeb
   function handleScrolledDownChange(didScrollDown: boolean) {
     onScrolledDownChange?.(didScrollDown)
   }
@@ -93,6 +97,7 @@ function ListImpl<ItemT>(
       scrollEventThrottle={1}
       style={style}
       ref={ref}
+      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
     />
   )
 }

diff --git a/src/view/com/util/Views.jsx b/src/view/com/util/Views.jsx
@@ -2,8 +2,22 @@ import React from 'react'
 import {View} from 'react-native'
 import Animated from 'react-native-reanimated'
 
+import {useGate} from 'lib/statsig/statsig'
+
 export const FlatList_INTERNAL = Animated.FlatList
-export const ScrollView = Animated.ScrollView
 export function CenteredView(props) {
   return <View {...props} />
 }
+
+export function ScrollView(props) {
+  const showsVerticalScrollIndicator = !useGate(
+    'hide_vertical_scroll_indicators',
+  )
+
+  return (
+    <Animated.ScrollView
+      {...props}
+      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+    />
+  )
+}
diff --git a/src/view/screens/ModerationBlockedAccounts.tsx b/src/view/screens/ModerationBlockedAccounts.tsx
@@ -7,23 +7,26 @@ import {
   View,
 } from 'react-native'
 import {AppBskyActorDefs as ActorDefs} from '@atproto/api'
-import {Text} from '../com/util/text/Text'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useFocusEffect} from '@react-navigation/native'
+import {NativeStackScreenProps} from '@react-navigation/native-stack'
+
+import {cleanError} from '#/lib/strings/errors'
+import {logger} from '#/logger'
+import {useMyBlockedAccountsQuery} from '#/state/queries/my-blocked-accounts'
+import {useSetMinimalShellMode} from '#/state/shell'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {NativeStackScreenProps} from '@react-navigation/native-stack'
 import {CommonNavigatorParams} from 'lib/routes/types'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {useFocusEffect} from '@react-navigation/native'
-import {ViewHeader} from '../com/util/ViewHeader'
+import {useGate} from 'lib/statsig/statsig'
+import {isWeb} from 'platform/detection'
+import {ProfileCard} from 'view/com/profile/ProfileCard'
 import {CenteredView} from 'view/com/util/Views'
 import {ErrorScreen} from '../com/util/error/ErrorScreen'
-import {ProfileCard} from 'view/com/profile/ProfileCard'
-import {logger} from '#/logger'
-import {useSetMinimalShellMode} from '#/state/shell'
-import {Trans, msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useMyBlockedAccountsQuery} from '#/state/queries/my-blocked-accounts'
-import {cleanError} from '#/lib/strings/errors'
+import {Text} from '../com/util/text/Text'
+import {ViewHeader} from '../com/util/ViewHeader'
 
 type Props = NativeStackScreenProps<
   CommonNavigatorParams,
@@ -35,6 +38,9 @@ export function ModerationBlockedAccounts({}: Props) {
   const setMinimalShellMode = useSetMinimalShellMode()
   const {isTabletOrDesktop} = useWebMediaQueries()
   const {screen} = useAnalytics()
+  const showsVerticalScrollIndicator =
+    !useGate('hide_vertical_scroll_indicators') || isWeb
+
   const [isPTRing, setIsPTRing] = React.useState(false)
   const {
     data,
@@ -163,6 +169,7 @@ export function ModerationBlockedAccounts({}: Props) {
           )}
           // @ts-ignore our .web version only -prf
           desktopFixedHeight
+          showsVerticalScrollIndicator={showsVerticalScrollIndicator}
         />
       )}
     </CenteredView>

diff --git a/src/view/screens/ModerationMutedAccounts.tsx b/src/view/screens/ModerationMutedAccounts.tsx
@@ -7,23 +7,26 @@ import {
   View,
 } from 'react-native'
 import {AppBskyActorDefs as ActorDefs} from '@atproto/api'
-import {Text} from '../com/util/text/Text'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useFocusEffect} from '@react-navigation/native'
+import {NativeStackScreenProps} from '@react-navigation/native-stack'
+
+import {cleanError} from '#/lib/strings/errors'
+import {logger} from '#/logger'
+import {useMyMutedAccountsQuery} from '#/state/queries/my-muted-accounts'
+import {useSetMinimalShellMode} from '#/state/shell'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {NativeStackScreenProps} from '@react-navigation/native-stack'
 import {CommonNavigatorParams} from 'lib/routes/types'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {useFocusEffect} from '@react-navigation/native'
-import {ViewHeader} from '../com/util/ViewHeader'
+import {useGate} from 'lib/statsig/statsig'
+import {isWeb} from 'platform/detection'
+import {ProfileCard} from 'view/com/profile/ProfileCard'
 import {CenteredView} from 'view/com/util/Views'
 import {ErrorScreen} from '../com/util/error/ErrorScreen'
-import {ProfileCard} from 'view/com/profile/ProfileCard'
-import {logger} from '#/logger'
-import {useSetMinimalShellMode} from '#/state/shell'
-import {Trans, msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useMyMutedAccountsQuery} from '#/state/queries/my-muted-accounts'
-import {cleanError} from '#/lib/strings/errors'
+import {Text} from '../com/util/text/Text'
+import {ViewHeader} from '../com/util/ViewHeader'
 
 type Props = NativeStackScreenProps<
   CommonNavigatorParams,
@@ -35,6 +38,8 @@ export function ModerationMutedAccounts({}: Props) {
   const setMinimalShellMode = useSetMinimalShellMode()
   const {isTabletOrDesktop} = useWebMediaQueries()
   const {screen} = useAnalytics()
+  const showsVerticalScrollIndicator =
+    !useGate('hide_vertical_scroll_indicators') || isWeb
   const [isPTRing, setIsPTRing] = React.useState(false)
   const {
     data,
@@ -162,6 +167,7 @@ export function ModerationMutedAccounts({}: Props) {
           )}
           // @ts-ignore our .web version only -prf
           desktopFixedHeight
+          showsVerticalScrollIndicator={showsVerticalScrollIndicator}
         />
       )}
     </CenteredView>