zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

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
zio/stable
Hailey 2024-04-12 15:22:09 -07:00 committed by GitHub
parent 6218eb0eea
commit c3821fdc31
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 88 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/statsig/gates.ts
View File

@ -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'

20
src/view/com/auth/onboarding/RecommendedFeeds.tsx
View File

@ -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}}>

28
src/view/com/auth/onboarding/RecommendedFollows.tsx
View File

@ -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 {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 {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 {useModerationOpts} from '#/state/queries/preferences'
import {logger} from '#/logger'
import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
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 {RecommendedFollowsItem} from './RecommendedFollowsItem'
type Props = {
next: () => void
@ -202,6 +203,7 @@ export function RecommendedFollows({next}: Props) {
)}
keyExtractor={item => item.did}
style={{flex: 1}}
showsVerticalScrollIndicator={false}
/>
)}
<Button

13
src/view/com/util/List.tsx
View File

@ -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}
/>
)
}

16
src/view/com/util/Views.jsx
View File

@ -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}
/>
)
}

31
src/view/screens/ModerationBlockedAccounts.tsx
View File

@ -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>

30
src/view/screens/ModerationMutedAccounts.tsx
View File

@ -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>