diff --git a/src/lib/styles.ts b/src/lib/styles.ts
index 409c77548..37d169679 100644
--- a/src/lib/styles.ts
+++ b/src/lib/styles.ts
@@ -1,5 +1,6 @@
import {StyleProp, StyleSheet, TextStyle} from 'react-native'
import {Theme, TypographyVariant} from './ThemeContext'
+import {isMobileWeb} from 'platform/detection'
// 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest
export const colors = {
@@ -162,7 +163,7 @@ export const s = StyleSheet.create({
// dimensions
w100pct: {width: '100%'},
h100pct: {height: '100%'},
- hContentRegion: {height: '100%'},
+ hContentRegion: isMobileWeb ? {flex: 1} : {height: '100%'},
// text align
textLeft: {textAlign: 'left'},
diff --git a/src/view/com/pager/FeedsTabBar.web.tsx b/src/view/com/pager/FeedsTabBar.web.tsx
index 5cee2fd6d..d80b140ce 100644
--- a/src/view/com/pager/FeedsTabBar.web.tsx
+++ b/src/view/com/pager/FeedsTabBar.web.tsx
@@ -1,30 +1,76 @@
import React from 'react'
+import {Animated, StyleSheet} from 'react-native'
import {observer} from 'mobx-react-lite'
import {TabBar} from 'view/com/pager/TabBar'
-import {CenteredView} from 'view/com/util/Views'
import {RenderTabBarFnProps} from 'view/com/pager/Pager'
+import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
+import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {FeedsTabBar as FeedsTabBarMobile} from './FeedsTabBarMobile'
export const FeedsTabBar = observer(
- (props: RenderTabBarFnProps & {onPressSelected: () => void}) => {
- const pal = usePalette('default')
+ (
+ props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
+ ) => {
const {isDesktop} = useWebMediaQueries()
-
if (!isDesktop) {
return <FeedsTabBarMobile {...props} />
+ } else {
+ return <FeedsTabBarDesktop {...props} />
}
+ },
+)
+
+const FeedsTabBarDesktop = observer(
+ (
+ props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
+ ) => {
+ const store = useStores()
+ const pal = usePalette('default')
+ const interp = useAnimatedValue(0)
+ React.useEffect(() => {
+ Animated.timing(interp, {
+ toValue: store.shell.minimalShellMode ? 1 : 0,
+ duration: 100,
+ useNativeDriver: true,
+ isInteraction: false,
+ }).start()
+ }, [interp, store.shell.minimalShellMode])
+ const transform = {
+ transform: [
+ {translateX: '-50%'},
+ {translateY: Animated.multiply(interp, -100)},
+ ],
+ }
return (
- <CenteredView>
+ // @ts-ignore the type signature for transform wrong here, translateX and translateY need to be in separate objects -prf
+ <Animated.View style={[pal.view, styles.tabBar, transform]}>
<TabBar
{...props}
items={['Following', "What's hot"]}
indicatorPosition="bottom"
indicatorColor={pal.colors.link}
/>
- </CenteredView>
+ </Animated.View>
)
},
)
+
+const styles = StyleSheet.create({
+ tabBar: {
+ position: 'absolute',
+ zIndex: 1,
+ left: '50%',
+ width: 640,
+ top: 0,
+ flexDirection: 'row',
+ alignItems: 'center',
+ paddingHorizontal: 18,
+ },
+ tabBarAvi: {
+ marginTop: 1,
+ marginRight: 18,
+ },
+})
diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx
index 40a6f48c8..a1e25a6ad 100644
--- a/src/view/com/post-thread/PostThread.tsx
+++ b/src/view/com/post-thread/PostThread.tsx
@@ -21,14 +21,14 @@ import {ComposePrompt} from '../composer/Prompt'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {Text} from '../util/text/Text'
import {s} from 'lib/styles'
-import {isDesktopWeb} from 'platform/detection'
+import {isDesktopWeb, isMobileWeb} from 'platform/detection'
import {usePalette} from 'lib/hooks/usePalette'
import {useNavigation} from '@react-navigation/native'
import {NavigationProp} from 'lib/routes/types'
const REPLY_PROMPT = {_reactKey: '__reply__', _isHighlightedPost: false}
-const BOTTOM_BORDER = {
- _reactKey: '__bottom_border__',
+const BOTTOM_COMPONENT = {
+ _reactKey: '__bottom_component__',
_isHighlightedPost: false,
}
type YieldedItem = PostThreadItemModel | typeof REPLY_PROMPT
@@ -48,7 +48,7 @@ export const PostThread = observer(function PostThread({
const navigation = useNavigation<NavigationProp>()
const posts = React.useMemo(() => {
if (view.thread) {
- return Array.from(flattenThread(view.thread)).concat([BOTTOM_BORDER])
+ return Array.from(flattenThread(view.thread)).concat([BOTTOM_COMPONENT])
}
return []
}, [view.thread])
@@ -103,12 +103,23 @@ export const PostThread = observer(function PostThread({
({item}: {item: YieldedItem}) => {
if (item === REPLY_PROMPT) {
return <ComposePrompt onPressCompose={onPressReply} />
- } else if (item === BOTTOM_BORDER) {
+ } else if (item === BOTTOM_COMPONENT) {
// HACK
// due to some complexities with how flatlist works, this is the easiest way
// I could find to get a border positioned directly under the last item
+ // -
+ // addendum -- it's also the best way to get mobile web to add padding
+ // at the bottom of the thread since paddingbottom is ignored. yikes.
// -prf
- return <View style={[styles.bottomBorder, pal.border]} />
+ return (
+ <View
+ style={[
+ styles.bottomBorder,
+ pal.border,
+ isMobileWeb && styles.bottomSpacer,
+ ]}
+ />
+ )
} else if (item instanceof PostThreadItemModel) {
return <PostThreadItem item={item} onPostReply={onRefresh} />
}
@@ -224,4 +235,7 @@ const styles = StyleSheet.create({
bottomBorder: {
borderBottomWidth: 1,
},
+ bottomSpacer: {
+ height: 200,
+ },
})
diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx
index aa27d7f88..d4bb377e5 100644
--- a/src/view/com/util/Views.web.tsx
+++ b/src/view/com/util/Views.web.tsx
@@ -35,6 +35,8 @@ export function CenteredView({
export const FlatList = React.forwardRef(function <ItemT>(
{
contentContainerStyle,
+ style,
+ contentOffset,
...props
}: React.PropsWithChildren<FlatListProps<ItemT>>,
ref: React.Ref<RNFlatList>,
@@ -43,10 +45,25 @@ export const FlatList = React.forwardRef(function <ItemT>(
contentContainerStyle,
styles.containerScroll,
)
+ if (contentOffset && contentOffset?.y !== 0) {
+ // NOTE
+ // we use paddingTop & contentOffset to space around the floating header
+ // but reactnative web puts the paddingTop on the wrong element (style instead of the contentContainer)
+ // so we manually correct it here
+ // -prf
+ style = addStyle(style, {
+ paddingTop: 0,
+ })
+ contentContainerStyle = addStyle(contentContainerStyle, {
+ paddingTop: Math.abs(contentOffset.y),
+ })
+ }
return (
<RNFlatList
- contentContainerStyle={contentContainerStyle}
ref={ref}
+ contentContainerStyle={contentContainerStyle}
+ style={style}
+ contentOffset={contentOffset}
{...props}
/>
)
diff --git a/src/view/com/util/error/ErrorScreen.tsx b/src/view/com/util/error/ErrorScreen.tsx
index 0221ea153..c66ee7903 100644
--- a/src/view/com/util/error/ErrorScreen.tsx
+++ b/src/view/com/util/error/ErrorScreen.tsx
@@ -8,6 +8,7 @@ import {Text} from '../text/Text'
import {colors} from 'lib/styles'
import {useTheme} from 'lib/ThemeContext'
import {usePalette} from 'lib/hooks/usePalette'
+import {CenteredView} from '../Views'
export function ErrorScreen({
title,
@@ -25,7 +26,7 @@ export function ErrorScreen({
const theme = useTheme()
const pal = usePalette('error')
return (
- <View testID={testID} style={[styles.outer, pal.view]}>
+ <CenteredView testID={testID} style={[styles.outer, pal.view]}>
<View style={styles.errorIconContainer}>
<View
style={[
@@ -72,7 +73,7 @@ export function ErrorScreen({
</TouchableOpacity>
</View>
)}
- </View>
+ </CenteredView>
)
}
diff --git a/src/view/com/util/load-latest/LoadLatestBtn.tsx b/src/view/com/util/load-latest/LoadLatestBtn.tsx
new file mode 100644
index 000000000..ae9cb9361
--- /dev/null
+++ b/src/view/com/util/load-latest/LoadLatestBtn.tsx
@@ -0,0 +1 @@
+export * from './LoadLatestBtnMobile'
diff --git a/src/view/com/util/LoadLatestBtn.web.tsx b/src/view/com/util/load-latest/LoadLatestBtn.web.tsx
index c85f44f30..22a8fbada 100644
--- a/src/view/com/util/LoadLatestBtn.web.tsx
+++ b/src/view/com/util/load-latest/LoadLatestBtn.web.tsx
@@ -1,8 +1,10 @@
import React from 'react'
import {StyleSheet, TouchableOpacity} from 'react-native'
-import {Text} from './text/Text'
+import {Text} from '../text/Text'
import {usePalette} from 'lib/hooks/usePalette'
import {UpIcon} from 'lib/icons'
+import {LoadLatestBtn as LoadLatestBtnMobile} from './LoadLatestBtnMobile'
+import {isMobileWeb} from 'platform/detection'
const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
@@ -14,6 +16,9 @@ export const LoadLatestBtn = ({
label: string
}) => {
const pal = usePalette('default')
+ if (isMobileWeb) {
+ return <LoadLatestBtnMobile onPress={onPress} label={label} />
+ }
return (
<TouchableOpacity
style={[pal.view, pal.borderDark, styles.loadLatest]}
diff --git a/src/view/com/util/LoadLatestBtn.tsx b/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx
index 88b6dffd9..75a812760 100644
--- a/src/view/com/util/LoadLatestBtn.tsx
+++ b/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx
@@ -3,7 +3,7 @@ import {StyleSheet, TouchableOpacity} from 'react-native'
import {observer} from 'mobx-react-lite'
import LinearGradient from 'react-native-linear-gradient'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {Text} from './text/Text'
+import {Text} from '../text/Text'
import {colors, gradients} from 'lib/styles'
import {clamp} from 'lodash'
import {useStores} from 'state/index'
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index ca9c25f55..1361fc3f2 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -1,5 +1,5 @@
import React from 'react'
-import {FlatList, View, Platform} from 'react-native'
+import {FlatList, View} from 'react-native'
import {useFocusEffect, useIsFocused} from '@react-navigation/native'
import {observer} from 'mobx-react-lite'
import useAppState from 'react-native-appstate-hook'
@@ -8,7 +8,7 @@ import {PostsFeedModel} from 'state/models/feeds/posts'
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
import {Feed} from '../com/posts/Feed'
import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState'
-import {LoadLatestBtn} from '../com/util/LoadLatestBtn'
+import {LoadLatestBtn} from '../com/util/load-latest/LoadLatestBtn'
import {FeedsTabBar} from '../com/pager/FeedsTabBar'
import {Pager, RenderTabBarFnProps} from 'view/com/pager/Pager'
import {FAB} from '../com/util/fab/FAB'
@@ -17,9 +17,9 @@ import {s} from 'lib/styles'
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
import {useAnalytics} from 'lib/analytics'
import {ComposeIcon2} from 'lib/icons'
-import {isDesktopWeb, isMobileWeb} from 'platform/detection'
+import {isDesktopWeb} from 'platform/detection'
-const HEADER_OFFSET = isDesktopWeb ? 0 : isMobileWeb ? 20 : 40
+const HEADER_OFFSET = isDesktopWeb ? 50 : 40
type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
export const HomeScreen = withAuthRequired((_opts: Props) => {
@@ -191,7 +191,7 @@ const FeedPage = observer(
onPressTryAgain={onPressTryAgain}
onScroll={onMainScroll}
renderEmptyState={renderEmptyState}
- headerOffset={Platform.OS === 'web' ? 0 : HEADER_OFFSET} // only offset on mobile
+ headerOffset={HEADER_OFFSET}
/>
{feed.hasNewLatest && !feed.isRefreshing && (
<LoadLatestBtn onPress={onPressLoadLatest} label="posts" />
diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx
index 8fc47b248..76ad81611 100644
--- a/src/view/screens/Notifications.tsx
+++ b/src/view/screens/Notifications.tsx
@@ -10,7 +10,7 @@ import {withAuthRequired} from 'view/com/auth/withAuthRequired'
import {ViewHeader} from '../com/util/ViewHeader'
import {Feed} from '../com/notifications/Feed'
import {InvitedUsers} from '../com/notifications/InvitedUsers'
-import {LoadLatestBtn} from 'view/com/util/LoadLatestBtn'
+import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn'
import {useStores} from 'state/index'
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
import {s} from 'lib/styles'
|
