diff --git a/src/lib/icons.tsx b/src/lib/icons.tsx index 1fcbac41..f82ea260 100644 --- a/src/lib/icons.tsx +++ b/src/lib/icons.tsx @@ -665,37 +665,21 @@ export function ComposeIcon2({ style, size, strokeWidth = 1.5, - backgroundColor, }: { style?: StyleProp size?: string | number strokeWidth?: number - backgroundColor: string }) { return ( - - diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx index f919c620..5751faa6 100644 --- a/src/view/com/posts/Feed.tsx +++ b/src/view/com/posts/Feed.tsx @@ -168,7 +168,7 @@ export const Feed = observer(function Feed({ onScroll={onScroll} onRefresh={onRefresh} onEndReached={onEndReached} - onEndReachedThreshold={0.25} + onEndReachedThreshold={0.6} removeClippedSubviews={true} contentInset={{top: headerOffset}} contentOffset={{x: 0, y: headerOffset * -1}} diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index 087b1f39..519d224e 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/src/view/com/profile/ProfileHeader.tsx @@ -29,6 +29,8 @@ import {UserBanner} from '../util/UserBanner' import {usePalette} from 'lib/hooks/usePalette' import {useAnalytics} from 'lib/analytics' +const BACK_HITSLOP = {left: 30, top: 30, right: 30, bottom: 30} + export const ProfileHeader = observer(function ProfileHeader({ view, onRefreshAll, @@ -285,10 +287,12 @@ export const ProfileHeader = observer(function ProfileHeader({ ) : undefined} - - - - + + + + + + { const store = useStores() @@ -45,7 +43,7 @@ export const FAB = observer( start={{x: 0, y: 0}} end={{x: 1, y: 1}} style={styles.inner}> - + {icon} @@ -57,7 +55,7 @@ const styles = StyleSheet.create({ outer: { position: 'absolute', zIndex: 1, - right: 22, + right: 28, bottom: 94, width: 60, height: 60, diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx index fe195c7b..ffd1b1d6 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader.tsx @@ -10,7 +10,7 @@ import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' import {useAnalytics} from 'lib/analytics' import {isDesktopWeb} from '../../../platform/detection' -const BACK_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10} +const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20} export const ViewHeader = observer(function ViewHeader({ title, diff --git a/src/view/com/util/ViewSelector.tsx b/src/view/com/util/ViewSelector.tsx index b786c229..e1280fd8 100644 --- a/src/view/com/util/ViewSelector.tsx +++ b/src/view/com/util/ViewSelector.tsx @@ -100,6 +100,7 @@ export function ViewSelector({ onScroll={onScroll} onRefresh={onRefresh} onEndReached={onEndReached} + onEndReachedThreshold={0.6} contentContainerStyle={s.contentContainer} removeClippedSubviews={true} /> diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index 09006a27..de4179e7 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -6,18 +6,21 @@ import {ViewHeader} from '../com/util/ViewHeader' import {Feed} from '../com/posts/Feed' import {LoadLatestBtn} from '../com/util/LoadLatestBtn' import {WelcomeBanner} from '../com/util/WelcomeBanner' +import {FAB} from '../com/util/FAB' import {useStores} from 'state/index' import {ScreenParams} from '../routes' -import {s} from 'lib/styles' +import {s, colors} from 'lib/styles' import {useOnMainScroll} from 'lib/hooks/useOnMainScroll' import {useAnalytics} from 'lib/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {ComposeIcon2} from 'lib/icons' const HEADER_HEIGHT = 42 export const Home = observer(function Home({navIdx, visible}: ScreenParams) { const store = useStores() const onMainScroll = useOnMainScroll(store) - const {screen} = useAnalytics() + const {screen, track} = useAnalytics() const scrollElRef = React.useRef(null) const [wasVisible, setWasVisible] = React.useState(false) const {appState} = useAppState({ @@ -84,13 +87,17 @@ export const Home = observer(function Home({navIdx, visible}: ScreenParams) { screen, ]) - const onPressTryAgain = () => { + const onPressCompose = React.useCallback(() => { + track('HomeScreen:PressCompose') + store.shell.openComposer({}) + }, [store, track]) + const onPressTryAgain = React.useCallback(() => { store.me.mainFeed.refresh() - } - const onPressLoadLatest = () => { + }, [store]) + const onPressLoadLatest = React.useCallback(() => { store.me.mainFeed.refresh() scrollToTop() - } + }, [store, scrollToTop]) return ( @@ -112,6 +119,11 @@ export const Home = observer(function Home({navIdx, visible}: ScreenParams) { {store.me.mainFeed.hasNewLatest && !store.me.mainFeed.isRefreshing && ( )} + } + /> ) }) diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index 7739814f..fa0c0410 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -13,9 +13,11 @@ import {ErrorScreen} from '../com/util/error/ErrorScreen' import {ErrorMessage} from '../com/util/error/ErrorMessage' import {EmptyState} from '../com/util/EmptyState' import {Text} from '../com/util/text/Text' +import {FAB} from '../com/util/FAB' import {s, colors} from 'lib/styles' import {useOnMainScroll} from 'lib/hooks/useOnMainScroll' import {useAnalytics} from 'lib/analytics' +import {ComposeIcon2} from 'lib/icons' const LOADING_ITEM = {_reactKey: '__loading__'} const END_ITEM = {_reactKey: '__end__'} @@ -23,7 +25,7 @@ const EMPTY_ITEM = {_reactKey: '__empty__'} export const Profile = observer(({navIdx, visible, params}: ScreenParams) => { const store = useStores() - const {screen} = useAnalytics() + const {screen, track} = useAnalytics() useEffect(() => { screen('Profile') @@ -65,6 +67,10 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => { // events // = + const onPressCompose = React.useCallback(() => { + track('ProfileScreen:PressCompose') + store.shell.openComposer({}) + }, [store, track]) const onSelectView = (index: number) => { uiState.setSelectedViewIndex(index) } @@ -186,6 +192,11 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => { ) : ( {renderHeader()} )} + } + /> ) }) diff --git a/src/view/shell/mobile/BottomBar.tsx b/src/view/shell/mobile/BottomBar.tsx index 2c3ead32..73c2501a 100644 --- a/src/view/shell/mobile/BottomBar.tsx +++ b/src/view/shell/mobile/BottomBar.tsx @@ -19,7 +19,6 @@ import { HomeIconSolid, MagnifyingGlassIcon2, MagnifyingGlassIcon2Solid, - ComposeIcon2, BellIcon, BellIconSolid, UserIcon, @@ -85,10 +84,6 @@ export const BottomBar = observer(() => { } } }, [store, track]) - const onPressCompose = React.useCallback(() => { - track('MobileShell:ComposeButtonPressed') - store.shell.openComposer({}) - }, [store, track]) const onPressNotifications = React.useCallback(() => { track('MobileShell:NotificationsButtonPressed') if (store.nav.tab.fixedTabPurpose === TabPurpose.Notifs) { @@ -161,19 +156,6 @@ export const BottomBar = observer(() => { } onPress={onPressSearch} /> - - - - } - onPress={onPressCompose} - />