diff --git a/src/view/screens/home/FeedsTabBar.tsx b/src/view/com/pager/FeedsTabBar.tsx similarity index 53% rename from src/view/screens/home/FeedsTabBar.tsx rename to src/view/com/pager/FeedsTabBar.tsx index d3403410..9831218e 100644 --- a/src/view/screens/home/FeedsTabBar.tsx +++ b/src/view/com/pager/FeedsTabBar.tsx @@ -1,51 +1,44 @@ import React from 'react' -import {Animated, StyleSheet} from 'react-native' +import {Animated, StyleSheet, TouchableOpacity} from 'react-native' import {observer} from 'mobx-react-lite' -import {TabBar} from 'view/com/util/TabBar' -import {RenderTabBarFnProps} from 'view/com/util/pager/Pager' +import {TabBar} from 'view/com/pager/TabBar' +import {RenderTabBarFnProps} from 'view/com/pager/Pager' +import {UserAvatar} from '../util/UserAvatar' import {useStores} from 'state/index' import {usePalette} from 'lib/hooks/usePalette' -import {useSafeAreaInsets} from 'react-native-safe-area-context' import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' -import {clamp} from 'lodash' - -const BOTTOM_BAR_HEIGHT = 48 export const FeedsTabBar = observer( (props: RenderTabBarFnProps & {onPressSelected: () => void}) => { const store = useStores() - const safeAreaInsets = useSafeAreaInsets() const pal = usePalette('default') const interp = useAnimatedValue(0) - const pad = React.useMemo( - () => ({ - paddingBottom: clamp(safeAreaInsets.bottom, 15, 20), - }), - [safeAreaInsets], - ) - React.useEffect(() => { Animated.timing(interp, { - toValue: store.shell.minimalShellMode ? 0 : 1, + toValue: store.shell.minimalShellMode ? 1 : 0, duration: 100, useNativeDriver: true, isInteraction: false, }).start() }, [interp, store.shell.minimalShellMode]) const transform = { - transform: [ - {translateY: Animated.multiply(interp, -1 * BOTTOM_BAR_HEIGHT)}, - ], + transform: [{translateY: Animated.multiply(interp, -100)}], } + const onPressAvi = React.useCallback(() => { + store.shell.openDrawer() + }, [store]) + return ( - + + + + @@ -56,17 +49,16 @@ export const FeedsTabBar = observer( const styles = StyleSheet.create({ tabBar: { position: 'absolute', + zIndex: 1, left: 0, right: 0, - bottom: 0, + top: 0, flexDirection: 'row', alignItems: 'center', - paddingHorizontal: 10, - borderTopWidth: 1, - paddingTop: 0, - paddingBottom: 30, + paddingHorizontal: 18, }, tabBarAvi: { - marginRight: 4, + marginTop: 1, + marginRight: 18, }, }) diff --git a/src/view/screens/home/FeedsTabBar.web.tsx b/src/view/com/pager/FeedsTabBar.web.tsx similarity index 83% rename from src/view/screens/home/FeedsTabBar.web.tsx rename to src/view/com/pager/FeedsTabBar.web.tsx index 59ea4298..fc593288 100644 --- a/src/view/screens/home/FeedsTabBar.web.tsx +++ b/src/view/com/pager/FeedsTabBar.web.tsx @@ -1,8 +1,8 @@ import React from 'react' import {observer} from 'mobx-react-lite' -import {TabBar} from 'view/com/util/TabBar' +import {TabBar} from 'view/com/pager/TabBar' import {CenteredView} from 'view/com/util/Views' -import {RenderTabBarFnProps} from 'view/com/util/pager/Pager' +import {RenderTabBarFnProps} from 'view/com/pager/Pager' import {usePalette} from 'lib/hooks/usePalette' export const FeedsTabBar = observer( diff --git a/src/view/com/util/pager/Pager.tsx b/src/view/com/pager/Pager.tsx similarity index 100% rename from src/view/com/util/pager/Pager.tsx rename to src/view/com/pager/Pager.tsx diff --git a/src/view/com/util/pager/Pager.web.tsx b/src/view/com/pager/Pager.web.tsx similarity index 100% rename from src/view/com/util/pager/Pager.web.tsx rename to src/view/com/pager/Pager.web.tsx diff --git a/src/view/com/util/TabBar.tsx b/src/view/com/pager/TabBar.tsx similarity index 98% rename from src/view/com/util/TabBar.tsx rename to src/view/com/pager/TabBar.tsx index 545a6b74..0b45d95f 100644 --- a/src/view/com/util/TabBar.tsx +++ b/src/view/com/pager/TabBar.tsx @@ -5,7 +5,7 @@ import { TouchableWithoutFeedback, View, } from 'react-native' -import {Text} from './text/Text' +import {Text} from '../util/text/Text' import {usePalette} from 'lib/hooks/usePalette' import {isDesktopWeb} from 'platform/detection' diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx index 45cf2cc2..4154cbe7 100644 --- a/src/view/com/posts/Feed.tsx +++ b/src/view/com/posts/Feed.tsx @@ -8,9 +8,8 @@ import { View, ViewStyle, } from 'react-native' -import {CenteredView, FlatList} from '../util/Views' +import {FlatList} from '../util/Views' import {PostFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' -import {ViewHeader} from '../util/ViewHeader' import {ErrorMessage} from '../util/error/ErrorMessage' import {FeedModel} from 'state/models/feed-view' import {FeedSlice} from './FeedSlice' @@ -19,9 +18,9 @@ import {s} from 'lib/styles' import {useAnalytics} from 'lib/analytics' import {usePalette} from 'lib/hooks/usePalette' -const HEADER_ITEM = {_reactKey: '__header__'} +const LOADING_ITEM = {_reactKey: '__loading__'} const EMPTY_FEED_ITEM = {_reactKey: '__empty__'} -const ERROR_FEED_ITEM = {_reactKey: '__error__'} +const ERROR_ITEM = {_reactKey: '__error__'} export const Feed = observer(function Feed({ feed, @@ -49,19 +48,21 @@ export const Feed = observer(function Feed({ const [isRefreshing, setIsRefreshing] = React.useState(false) const data = React.useMemo(() => { - let feedItems: any[] = [HEADER_ITEM] + let feedItems: any[] = [] if (feed.hasLoaded) { if (feed.hasError) { - feedItems = feedItems.concat([ERROR_FEED_ITEM]) + feedItems = feedItems.concat([ERROR_ITEM]) } if (feed.isEmpty) { feedItems = feedItems.concat([EMPTY_FEED_ITEM]) } else { feedItems = feedItems.concat(feed.slices) } + } else if (feed.isLoading) { + feedItems = feedItems.concat([LOADING_ITEM]) } return feedItems - }, [feed.hasError, feed.hasLoaded, feed.isEmpty, feed.slices]) + }, [feed.hasError, feed.hasLoaded, feed.isLoading, feed.isEmpty, feed.slices]) // events // = @@ -96,15 +97,15 @@ export const Feed = observer(function Feed({ return renderEmptyState() } return - } else if (item === ERROR_FEED_ITEM) { + } else if (item === ERROR_ITEM) { return ( ) - } else if (item === HEADER_ITEM) { - return + } else if (item === LOADING_ITEM) { + return } return }, @@ -125,11 +126,6 @@ export const Feed = observer(function Feed({ return ( - {feed.isLoading && data.length === 0 && ( - - - - )} {data.length > 0 && ( export const HomeScreen = withAuthRequired((_opts: Props) => { @@ -69,7 +68,7 @@ export const HomeScreen = withAuthRequired((_opts: Props) => { doPoll(true), }) const isScreenFocused = useIsFocused() - const winDim = useWindowDimensions() - const containerStyle = React.useMemo( - () => ({height: winDim.height - (isDesktopWeb ? 0 : TAB_BAR_HEIGHT)}), - [winDim], - ) const doPoll = React.useCallback( (knownActive = false) => { @@ -125,7 +119,7 @@ const FeedPage = observer( ) const scrollToTop = React.useCallback(() => { - scrollElRef.current?.scrollToOffset({offset: 0}) + scrollElRef.current?.scrollToOffset({offset: -HEADER_OFFSET}) }, [scrollElRef]) const onSoftReset = React.useCallback(() => { @@ -169,7 +163,7 @@ const FeedPage = observer( }, [feed, scrollToTop]) return ( - + {feed.hasNewLatest && !feed.isRefreshing && ( diff --git a/src/view/shell/BottomBar.tsx b/src/view/shell/BottomBar.tsx index 1cbf2de8..bfbd7f0a 100644 --- a/src/view/shell/BottomBar.tsx +++ b/src/view/shell/BottomBar.tsx @@ -34,24 +34,23 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => { const minimalShellInterp = useAnimatedValue(0) const safeAreaInsets = useSafeAreaInsets() const {track} = useAnalytics() - const {isAtHome, isAtSearch, isAtNotifications, noBorder} = - useNavigationState(state => { + const {isAtHome, isAtSearch, isAtNotifications} = useNavigationState( + state => { const res = { isAtHome: getTabState(state, 'Home') !== TabState.Outside, isAtSearch: getTabState(state, 'Search') !== TabState.Outside, isAtNotifications: getTabState(state, 'Notifications') !== TabState.Outside, - noBorder: getTabState(state, 'Home') === TabState.InsideAtRoot, } if (!res.isAtHome && !res.isAtNotifications && !res.isAtSearch) { // HACK for some reason useNavigationState will give us pre-hydration results // and not update after, so we force isAtHome if all came back false // -prf res.isAtHome = true - res.noBorder = true } return res - }) + }, + ) React.useEffect(() => { if (store.shell.minimalShellMode) { @@ -107,7 +106,6 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {