fix hashtag screen side borders (#4983)

zio/stable
Hailey 2024-08-29 15:55:17 -07:00 committed by GitHub
parent 69e896c221
commit 497aacf113
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 16 deletions

View File

@ -178,7 +178,7 @@ let ListMaybePlaceholder = ({
return ( return (
<CenteredView <CenteredView
style={[ style={[
a.flex_1, a.h_full_vh,
a.align_center, a.align_center,
!gtMobile ? a.justify_between : a.gap_5xl, !gtMobile ? a.justify_between : a.gap_5xl,
t.atoms.border_contrast_low, t.atoms.border_contrast_low,

View File

@ -1,12 +1,11 @@
import React from 'react' import React from 'react'
import {ListRenderItemInfo, Pressable, StyleSheet, View} from 'react-native' import {ListRenderItemInfo, Pressable, View} from 'react-native'
import {PostView} from '@atproto/api/dist/client/types/app/bsky/feed/defs' import {PostView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
import {msg} from '@lingui/macro' import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {useFocusEffect} from '@react-navigation/native' import {useFocusEffect} from '@react-navigation/native'
import {NativeStackScreenProps} from '@react-navigation/native-stack' import {NativeStackScreenProps} from '@react-navigation/native-stack'
import {usePalette} from '#/lib/hooks/usePalette'
import {HITSLOP_10} from 'lib/constants' import {HITSLOP_10} from 'lib/constants'
import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
import {CommonNavigatorParams} from 'lib/routes/types' import {CommonNavigatorParams} from 'lib/routes/types'
@ -39,7 +38,6 @@ export default function HashtagScreen({
}: NativeStackScreenProps<CommonNavigatorParams, 'Hashtag'>) { }: NativeStackScreenProps<CommonNavigatorParams, 'Hashtag'>) {
const {tag, author} = route.params const {tag, author} = route.params
const {_} = useLingui() const {_} = useLingui()
const pal = usePalette('default')
const fullTag = React.useMemo(() => { const fullTag = React.useMemo(() => {
return `#${decodeURIComponent(tag)}` return `#${decodeURIComponent(tag)}`
@ -111,7 +109,7 @@ export default function HashtagScreen({
return ( return (
<> <>
<CenteredView sideBorders style={[pal.border, pal.view]}> <CenteredView sideBorders={true}>
<ViewHeader <ViewHeader
showOnDesktop showOnDesktop
title={headerTitle} title={headerTitle}
@ -138,8 +136,17 @@ export default function HashtagScreen({
onPageSelected={onPageSelected} onPageSelected={onPageSelected}
renderTabBar={props => ( renderTabBar={props => (
<CenteredView <CenteredView
sideBorders sideBorders={true}
style={[pal.border, pal.view, styles.tabBarContainer]}> // @ts-ignore web only
style={
isWeb
? {
position: isWeb ? 'sticky' : '',
top: 0,
zIndex: 1,
}
: undefined
}>
<TabBar items={sections.map(section => section.title)} {...props} /> <TabBar items={sections.map(section => section.title)} {...props} />
</CenteredView> </CenteredView>
)} )}
@ -234,12 +241,3 @@ function HashtagScreenTab({
</> </>
) )
} }
const styles = StyleSheet.create({
tabBarContainer: {
// @ts-ignore web only
position: isWeb ? 'sticky' : '',
top: 0,
zIndex: 1,
},
})