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 boolzio/stable
parent
6218eb0eea
commit
c3821fdc31
|
@ -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'
|
||||
|
|
|
@ -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}}>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue