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'
|
| 'autoexpand_suggestions_on_profile_follow'
|
||||||
| 'disable_min_shell_on_foregrounding'
|
| 'disable_min_shell_on_foregrounding'
|
||||||
| 'disable_poll_on_discover'
|
| 'disable_poll_on_discover'
|
||||||
|
| 'hide_vertical_scroll_indicators'
|
||||||
| 'new_profile_scroll_component'
|
| 'new_profile_scroll_component'
|
||||||
| 'new_search'
|
| 'new_search'
|
||||||
| 'receive_updates'
|
| 'receive_updates'
|
||||||
|
|
|
@ -1,18 +1,19 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native'
|
import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native'
|
||||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
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 {Text} from 'view/com/util/text/Text'
|
||||||
import {ViewHeader} from 'view/com/util/ViewHeader'
|
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 {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 = {
|
type Props = {
|
||||||
next: () => void
|
next: () => void
|
||||||
|
@ -130,6 +131,7 @@ export function RecommendedFeeds({next}: Props) {
|
||||||
renderItem={({item}) => <RecommendedFeedsItem item={item} />}
|
renderItem={({item}) => <RecommendedFeedsItem item={item} />}
|
||||||
keyExtractor={item => item.uri}
|
keyExtractor={item => item.uri}
|
||||||
style={{flex: 1}}
|
style={{flex: 1}}
|
||||||
|
showsVerticalScrollIndicator={false}
|
||||||
/>
|
/>
|
||||||
) : isLoading ? (
|
) : isLoading ? (
|
||||||
<View style={{flex: 1}}>
|
<View style={{flex: 1}}>
|
||||||
|
|
|
@ -1,21 +1,22 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native'
|
import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native'
|
||||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
|
||||||
import {AppBskyActorDefs, moderateProfile} from '@atproto/api'
|
import {AppBskyActorDefs, moderateProfile} from '@atproto/api'
|
||||||
import {TabletOrDesktop, Mobile} from 'view/com/util/layouts/Breakpoints'
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||||
import {Text} from 'view/com/util/text/Text'
|
import {msg, Trans} from '@lingui/macro'
|
||||||
import {ViewHeader} from 'view/com/util/ViewHeader'
|
import {useLingui} from '@lingui/react'
|
||||||
import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
|
|
||||||
import {Button} from 'view/com/util/forms/Button'
|
import {logger} from '#/logger'
|
||||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
import {useModerationOpts} from '#/state/queries/preferences'
|
||||||
import {usePalette} from 'lib/hooks/usePalette'
|
|
||||||
import {RecommendedFollowsItem} from './RecommendedFollowsItem'
|
|
||||||
import {useSuggestedFollowsQuery} from '#/state/queries/suggested-follows'
|
import {useSuggestedFollowsQuery} from '#/state/queries/suggested-follows'
|
||||||
import {useGetSuggestedFollowersByActor} from '#/state/queries/suggested-follows'
|
import {useGetSuggestedFollowersByActor} from '#/state/queries/suggested-follows'
|
||||||
import {useModerationOpts} from '#/state/queries/preferences'
|
import {usePalette} from 'lib/hooks/usePalette'
|
||||||
import {logger} from '#/logger'
|
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||||
import {Trans, msg} from '@lingui/macro'
|
import {Button} from 'view/com/util/forms/Button'
|
||||||
import {useLingui} from '@lingui/react'
|
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 = {
|
type Props = {
|
||||||
next: () => void
|
next: () => void
|
||||||
|
@ -202,6 +203,7 @@ export function RecommendedFollows({next}: Props) {
|
||||||
)}
|
)}
|
||||||
keyExtractor={item => item.did}
|
keyExtractor={item => item.did}
|
||||||
style={{flex: 1}}
|
style={{flex: 1}}
|
||||||
|
showsVerticalScrollIndicator={false}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<Button
|
<Button
|
||||||
|
|
|
@ -1,11 +1,14 @@
|
||||||
import React, {memo} from 'react'
|
import React, {memo} from 'react'
|
||||||
import {FlatListProps, RefreshControl} from 'react-native'
|
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 {runOnJS, useSharedValue} from 'react-native-reanimated'
|
||||||
|
|
||||||
import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
|
import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
|
||||||
import {usePalette} from '#/lib/hooks/usePalette'
|
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 ListMethods = FlatList_INTERNAL
|
||||||
export type ListProps<ItemT> = Omit<
|
export type ListProps<ItemT> = Omit<
|
||||||
|
@ -37,7 +40,8 @@ function ListImpl<ItemT>(
|
||||||
const isScrolledDown = useSharedValue(false)
|
const isScrolledDown = useSharedValue(false)
|
||||||
const contextScrollHandlers = useScrollHandlers()
|
const contextScrollHandlers = useScrollHandlers()
|
||||||
const pal = usePalette('default')
|
const pal = usePalette('default')
|
||||||
|
const showsVerticalScrollIndicator =
|
||||||
|
!useGate('hide_vertical_scroll_indicators') || isWeb
|
||||||
function handleScrolledDownChange(didScrollDown: boolean) {
|
function handleScrolledDownChange(didScrollDown: boolean) {
|
||||||
onScrolledDownChange?.(didScrollDown)
|
onScrolledDownChange?.(didScrollDown)
|
||||||
}
|
}
|
||||||
|
@ -93,6 +97,7 @@ function ListImpl<ItemT>(
|
||||||
scrollEventThrottle={1}
|
scrollEventThrottle={1}
|
||||||
style={style}
|
style={style}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
|
showsVerticalScrollIndicator={showsVerticalScrollIndicator}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,8 +2,22 @@ import React from 'react'
|
||||||
import {View} from 'react-native'
|
import {View} from 'react-native'
|
||||||
import Animated from 'react-native-reanimated'
|
import Animated from 'react-native-reanimated'
|
||||||
|
|
||||||
|
import {useGate} from 'lib/statsig/statsig'
|
||||||
|
|
||||||
export const FlatList_INTERNAL = Animated.FlatList
|
export const FlatList_INTERNAL = Animated.FlatList
|
||||||
export const ScrollView = Animated.ScrollView
|
|
||||||
export function CenteredView(props) {
|
export function CenteredView(props) {
|
||||||
return <View {...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,
|
View,
|
||||||
} from 'react-native'
|
} from 'react-native'
|
||||||
import {AppBskyActorDefs as ActorDefs} from '@atproto/api'
|
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 {usePalette} from 'lib/hooks/usePalette'
|
||||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||||
import {NativeStackScreenProps} from '@react-navigation/native-stack'
|
|
||||||
import {CommonNavigatorParams} from 'lib/routes/types'
|
import {CommonNavigatorParams} from 'lib/routes/types'
|
||||||
import {useAnalytics} from 'lib/analytics/analytics'
|
import {useGate} from 'lib/statsig/statsig'
|
||||||
import {useFocusEffect} from '@react-navigation/native'
|
import {isWeb} from 'platform/detection'
|
||||||
import {ViewHeader} from '../com/util/ViewHeader'
|
import {ProfileCard} from 'view/com/profile/ProfileCard'
|
||||||
import {CenteredView} from 'view/com/util/Views'
|
import {CenteredView} from 'view/com/util/Views'
|
||||||
import {ErrorScreen} from '../com/util/error/ErrorScreen'
|
import {ErrorScreen} from '../com/util/error/ErrorScreen'
|
||||||
import {ProfileCard} from 'view/com/profile/ProfileCard'
|
import {Text} from '../com/util/text/Text'
|
||||||
import {logger} from '#/logger'
|
import {ViewHeader} from '../com/util/ViewHeader'
|
||||||
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'
|
|
||||||
|
|
||||||
type Props = NativeStackScreenProps<
|
type Props = NativeStackScreenProps<
|
||||||
CommonNavigatorParams,
|
CommonNavigatorParams,
|
||||||
|
@ -35,6 +38,9 @@ export function ModerationBlockedAccounts({}: Props) {
|
||||||
const setMinimalShellMode = useSetMinimalShellMode()
|
const setMinimalShellMode = useSetMinimalShellMode()
|
||||||
const {isTabletOrDesktop} = useWebMediaQueries()
|
const {isTabletOrDesktop} = useWebMediaQueries()
|
||||||
const {screen} = useAnalytics()
|
const {screen} = useAnalytics()
|
||||||
|
const showsVerticalScrollIndicator =
|
||||||
|
!useGate('hide_vertical_scroll_indicators') || isWeb
|
||||||
|
|
||||||
const [isPTRing, setIsPTRing] = React.useState(false)
|
const [isPTRing, setIsPTRing] = React.useState(false)
|
||||||
const {
|
const {
|
||||||
data,
|
data,
|
||||||
|
@ -163,6 +169,7 @@ export function ModerationBlockedAccounts({}: Props) {
|
||||||
)}
|
)}
|
||||||
// @ts-ignore our .web version only -prf
|
// @ts-ignore our .web version only -prf
|
||||||
desktopFixedHeight
|
desktopFixedHeight
|
||||||
|
showsVerticalScrollIndicator={showsVerticalScrollIndicator}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</CenteredView>
|
</CenteredView>
|
||||||
|
|
|
@ -7,23 +7,26 @@ import {
|
||||||
View,
|
View,
|
||||||
} from 'react-native'
|
} from 'react-native'
|
||||||
import {AppBskyActorDefs as ActorDefs} from '@atproto/api'
|
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 {usePalette} from 'lib/hooks/usePalette'
|
||||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||||
import {NativeStackScreenProps} from '@react-navigation/native-stack'
|
|
||||||
import {CommonNavigatorParams} from 'lib/routes/types'
|
import {CommonNavigatorParams} from 'lib/routes/types'
|
||||||
import {useAnalytics} from 'lib/analytics/analytics'
|
import {useGate} from 'lib/statsig/statsig'
|
||||||
import {useFocusEffect} from '@react-navigation/native'
|
import {isWeb} from 'platform/detection'
|
||||||
import {ViewHeader} from '../com/util/ViewHeader'
|
import {ProfileCard} from 'view/com/profile/ProfileCard'
|
||||||
import {CenteredView} from 'view/com/util/Views'
|
import {CenteredView} from 'view/com/util/Views'
|
||||||
import {ErrorScreen} from '../com/util/error/ErrorScreen'
|
import {ErrorScreen} from '../com/util/error/ErrorScreen'
|
||||||
import {ProfileCard} from 'view/com/profile/ProfileCard'
|
import {Text} from '../com/util/text/Text'
|
||||||
import {logger} from '#/logger'
|
import {ViewHeader} from '../com/util/ViewHeader'
|
||||||
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'
|
|
||||||
|
|
||||||
type Props = NativeStackScreenProps<
|
type Props = NativeStackScreenProps<
|
||||||
CommonNavigatorParams,
|
CommonNavigatorParams,
|
||||||
|
@ -35,6 +38,8 @@ export function ModerationMutedAccounts({}: Props) {
|
||||||
const setMinimalShellMode = useSetMinimalShellMode()
|
const setMinimalShellMode = useSetMinimalShellMode()
|
||||||
const {isTabletOrDesktop} = useWebMediaQueries()
|
const {isTabletOrDesktop} = useWebMediaQueries()
|
||||||
const {screen} = useAnalytics()
|
const {screen} = useAnalytics()
|
||||||
|
const showsVerticalScrollIndicator =
|
||||||
|
!useGate('hide_vertical_scroll_indicators') || isWeb
|
||||||
const [isPTRing, setIsPTRing] = React.useState(false)
|
const [isPTRing, setIsPTRing] = React.useState(false)
|
||||||
const {
|
const {
|
||||||
data,
|
data,
|
||||||
|
@ -162,6 +167,7 @@ export function ModerationMutedAccounts({}: Props) {
|
||||||
)}
|
)}
|
||||||
// @ts-ignore our .web version only -prf
|
// @ts-ignore our .web version only -prf
|
||||||
desktopFixedHeight
|
desktopFixedHeight
|
||||||
|
showsVerticalScrollIndicator={showsVerticalScrollIndicator}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</CenteredView>
|
</CenteredView>
|
||||||
|
|
Loading…
Reference in New Issue