fix hashtag screen side borders (#4983)
parent
69e896c221
commit
497aacf113
|
@ -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,
|
||||||
|
|
|
@ -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,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
Loading…
Reference in New Issue