acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Merge remote-tracking branch 'origin/main' into eric/app-864-integrate-post-tags-into-app

Browse Source 
* origin/main:
  Fix four gallery images for Firefox (#1710)
  Performance optimization  (#1676)
  Scope drawer drag workaround to feed pagers (#1694)
  Toggle lightbox controls on tap (#1687)
  Fix profile preview jump (#1693)
This commit is contained in:
Eric Bailey
2023-10-18 15:16:03 -04:00
parent 35dd618d83 c6e28f88e5
commit cb81f46d8a
34 changed files with 706 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Navigation.tsx
+14 -2
View File
@@ -483,9 +483,21 @@ function navigate<K extends keyof AllNavigatorParams>(
params?: AllNavigatorParams[K],
) {
if (navigationRef.isReady()) {
// @ts-ignore I dont know what would make typescript happy but I have a life -prf
navigationRef.navigate(name, params)
return Promise.race([
new Promise<void>(resolve => {
const handler = () => {
resolve()
navigationRef.removeListener('state', handler)
}
navigationRef.addListener('state', handler)
// @ts-ignore I dont know what would make typescript happy but I have a life -prf
navigationRef.navigate(name, params)
}),
timeout(1e3),
])
}
return Promise.resolve()
}
function resetToTab(tabName: 'HomeTab' | 'SearchTab' | 'NotificationsTab') {
src/lib/hooks/useMinimalShellMode.tsx
+45 -21
View File
@@ -1,36 +1,60 @@
import React from 'react'
import {autorun} from 'mobx'
import {useStores} from 'state/index'
import {Animated} from 'react-native'
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
import {
Easing,
interpolate,
useAnimatedStyle,
useSharedValue,
withTiming,
} from 'react-native-reanimated'
export function useMinimalShellMode() {
const store = useStores()
const minimalShellInterp = useAnimatedValue(0)
const footerMinimalShellTransform = {
opacity: Animated.subtract(1, minimalShellInterp),
transform: [{translateY: Animated.multiply(minimalShellInterp, 50)}],
}
const minimalShellInterp = useSharedValue(0)
const footerMinimalShellTransform = useAnimatedStyle(() => {
return {
opacity: interpolate(minimalShellInterp.value, [0, 1], [1, 0]),
transform: [
{translateY: interpolate(minimalShellInterp.value, [0, 1], [0, 25])},
],
}
})
const headerMinimalShellTransform = useAnimatedStyle(() => {
return {
opacity: interpolate(minimalShellInterp.value, [0, 1], [1, 0]),
transform: [
{translateY: interpolate(minimalShellInterp.value, [0, 1], [0, -25])},
],
}
})
const fabMinimalShellTransform = useAnimatedStyle(() => {
return {
transform: [
{translateY: interpolate(minimalShellInterp.value, [0, 1], [-44, 0])},
],
}
})
React.useEffect(() => {
return autorun(() => {
if (store.shell.minimalShellMode) {
Animated.timing(minimalShellInterp, {
toValue: 1,
duration: 150,
useNativeDriver: true,
isInteraction: false,
}).start()
minimalShellInterp.value = withTiming(1, {
duration: 125,
easing: Easing.bezier(0.25, 0.1, 0.25, 1),
})
} else {
Animated.timing(minimalShellInterp, {
toValue: 0,
duration: 150,
useNativeDriver: true,
isInteraction: false,
}).start()
minimalShellInterp.value = withTiming(0, {
duration: 125,
easing: Easing.bezier(0.25, 0.1, 0.25, 1),
})
}
})
}, [minimalShellInterp, store])
}, [minimalShellInterp, store.shell.minimalShellMode])
return {footerMinimalShellTransform}
return {
footerMinimalShellTransform,
headerMinimalShellTransform,
fabMinimalShellTransform,
}
}
src/view/com/feeds/FeedPage.tsx
+210
View File
@@ -0,0 +1,210 @@
import {
FontAwesomeIcon,
FontAwesomeIconStyle,
} from '@fortawesome/react-native-fontawesome'
import {useIsFocused} from '@react-navigation/native'
import {useAnalytics} from '@segment/analytics-react-native'
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {ComposeIcon2} from 'lib/icons'
import {colors, s} from 'lib/styles'
import {observer} from 'mobx-react-lite'
import React from 'react'
import {FlatList, View} from 'react-native'
import {useStores} from 'state/index'
import {PostsFeedModel} from 'state/models/feeds/posts'
import {useHeaderOffset, POLL_FREQ} from 'view/screens/Home'
import {Feed} from '../posts/Feed'
import {TextLink} from '../util/Link'
import {FAB} from '../util/fab/FAB'
import {LoadLatestBtn} from '../util/load-latest/LoadLatestBtn'
import useAppState from 'react-native-appstate-hook'
export const FeedPage = observer(function FeedPageImpl({
testID,
isPageFocused,
feed,
renderEmptyState,
renderEndOfFeed,
}: {
testID?: string
feed: PostsFeedModel
isPageFocused: boolean
renderEmptyState: () => JSX.Element
renderEndOfFeed?: () => JSX.Element
}) {
const store = useStores()
const pal = usePalette('default')
const {isDesktop} = useWebMediaQueries()
const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll(store)
const {screen, track} = useAnalytics()
const headerOffset = useHeaderOffset()
const scrollElRef = React.useRef<FlatList>(null)
const {appState} = useAppState({
onForeground: () => doPoll(true),
})
const isScreenFocused = useIsFocused()
const hasNew = feed.hasNewLatest && !feed.isRefreshing
React.useEffect(() => {
// called on first load
if (!feed.hasLoaded && isPageFocused) {
feed.setup()
}
}, [isPageFocused, feed])
const doPoll = React.useCallback(
(knownActive = false) => {
if (
(!knownActive && appState !== 'active') ||
!isScreenFocused ||
!isPageFocused
) {
return
}
if (feed.isLoading) {
return
}
store.log.debug('HomeScreen: Polling for new posts')
feed.checkForLatest()
},
[appState, isScreenFocused, isPageFocused, store, feed],
)
const scrollToTop = React.useCallback(() => {
scrollElRef.current?.scrollToOffset({offset: -headerOffset})
resetMainScroll()
}, [headerOffset, resetMainScroll])
const onSoftReset = React.useCallback(() => {
if (isPageFocused) {
scrollToTop()
feed.refresh()
}
}, [isPageFocused, scrollToTop, feed])
// fires when page within screen is activated/deactivated
// - check for latest
React.useEffect(() => {
if (!isPageFocused || !isScreenFocused) {
return
}
const softResetSub = store.onScreenSoftReset(onSoftReset)
const feedCleanup = feed.registerListeners()
const pollInterval = setInterval(doPoll, POLL_FREQ)
screen('Feed')
store.log.debug('HomeScreen: Updating feed')
feed.checkForLatest()
return () => {
clearInterval(pollInterval)
softResetSub.remove()
feedCleanup()
}
}, [store, doPoll, onSoftReset, screen, feed, isPageFocused, isScreenFocused])
const onPressCompose = React.useCallback(() => {
track('HomeScreen:PressCompose')
store.shell.openComposer({})
}, [store, track])
const onPressTryAgain = React.useCallback(() => {
feed.refresh()
}, [feed])
const onPressLoadLatest = React.useCallback(() => {
scrollToTop()
feed.refresh()
}, [feed, scrollToTop])
const ListHeaderComponent = React.useCallback(() => {
if (isDesktop) {
return (
<View
style={[
pal.view,
{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 18,
paddingVertical: 12,
},
]}>
<TextLink
type="title-lg"
href="/"
style={[pal.text, {fontWeight: 'bold'}]}
text={
<>
{store.session.isSandbox ? 'SANDBOX' : 'Bluesky'}{' '}
{hasNew && (
<View
style={{
top: -8,
backgroundColor: colors.blue3,
width: 8,
height: 8,
borderRadius: 4,
}}
/>
)}
</>
}
onPress={() => store.emitScreenSoftReset()}
/>
<TextLink
type="title-lg"
href="/settings/home-feed"
style={{fontWeight: 'bold'}}
accessibilityLabel="Feed Preferences"
accessibilityHint=""
text={
<FontAwesomeIcon
icon="sliders"
style={pal.textLight as FontAwesomeIconStyle}
/>
}
/>
</View>
)
}
return <></>
}, [isDesktop, pal, store, hasNew])
return (
<View testID={testID} style={s.h100pct}>
<Feed
testID={testID ? `${testID}-feed` : undefined}
key="default"
feed={feed}
scrollElRef={scrollElRef}
onPressTryAgain={onPressTryAgain}
onScroll={onMainScroll}
scrollEventThrottle={100}
renderEmptyState={renderEmptyState}
renderEndOfFeed={renderEndOfFeed}
ListHeaderComponent={ListHeaderComponent}
headerOffset={headerOffset}
/>
{(isScrolledDown || hasNew) && (
<LoadLatestBtn
onPress={onPressLoadLatest}
label="Load new posts"
showIndicator={hasNew}
/>
)}
<FAB
testID="composeFAB"
onPress={onPressCompose}
icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />}
accessibilityRole="button"
accessibilityLabel="New post"
accessibilityHint=""
/>
</View>
)
})
src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
+7
View File
@@ -34,11 +34,13 @@ const initialTransform = createTransform()
type Props = {
imageSrc: ImageSource
onRequestClose: () => void
onTap: () => void
onZoom: (isZoomed: boolean) => void
isScrollViewBeingDragged: boolean
}
const ImageItem = ({
imageSrc,
onTap,
onZoom,
onRequestClose,
isScrollViewBeingDragged,
@@ -227,6 +229,10 @@ const ImageItem = ({
panTranslation.value = {x: 0, y: 0}
})
const singleTap = Gesture.Tap().onEnd(() => {
runOnJS(onTap)()
})
const doubleTap = Gesture.Tap()
.numberOfTaps(2)
.onEnd(e => {
@@ -297,6 +303,7 @@ const ImageItem = ({
dismissSwipePan,
Gesture.Simultaneous(pinch, pan),
doubleTap,
singleTap,
)
const isLoading = !isLoaded || !imageDimensions
src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
+57 -60
View File
@@ -6,16 +6,9 @@
*
*/
import React, {useCallback, useState} from 'react'
import React, {useState} from 'react'
import {
Dimensions,
StyleSheet,
View,
NativeSyntheticEvent,
NativeTouchEvent,
TouchableWithoutFeedback,
} from 'react-native'
import {Dimensions, StyleSheet} from 'react-native'
import {Image} from 'expo-image'
import Animated, {
interpolate,
@@ -25,13 +18,13 @@ import Animated, {
useAnimatedStyle,
useSharedValue,
} from 'react-native-reanimated'
import {Gesture, GestureDetector} from 'react-native-gesture-handler'
import useImageDimensions from '../../hooks/useImageDimensions'
import {ImageSource, Dimensions as ImageDimensions} from '../../@types'
import {ImageLoading} from './ImageLoading'
const DOUBLE_TAP_DELAY = 300
const SWIPE_CLOSE_OFFSET = 75
const SWIPE_CLOSE_VELOCITY = 1
const SCREEN = Dimensions.get('screen')
@@ -41,15 +34,14 @@ const MIN_DOUBLE_TAP_SCALE = 2
type Props = {
imageSrc: ImageSource
onRequestClose: () => void
onTap: () => void
onZoom: (scaled: boolean) => void
isScrollViewBeingDragged: boolean
}
const AnimatedImage = Animated.createAnimatedComponent(Image)
let lastTapTS: number | null = null
const ImageItem = ({imageSrc, onZoom, onRequestClose}: Props) => {
const ImageItem = ({imageSrc, onTap, onZoom, onRequestClose}: Props) => {
const scrollViewRef = useAnimatedRef<Animated.ScrollView>()
const translationY = useSharedValue(0)
const [loaded, setLoaded] = useState(false)
@@ -71,12 +63,18 @@ const ImageItem = ({imageSrc, onZoom, onRequestClose}: Props) => {
const scrollHandler = useAnimatedScrollHandler({
onScroll(e) {
translationY.value = e.zoomScale > 1 ? 0 : e.contentOffset.y
const nextIsScaled = e.zoomScale > 1
translationY.value = nextIsScaled ? 0 : e.contentOffset.y
if (scaled !== nextIsScaled) {
runOnJS(handleZoom)(nextIsScaled)
}
},
onEndDrag(e) {
const velocityY = e.velocity?.y ?? 0
const nextIsScaled = e.zoomScale > 1
runOnJS(handleZoom)(nextIsScaled)
if (scaled !== nextIsScaled) {
runOnJS(handleZoom)(nextIsScaled)
}
if (!nextIsScaled && Math.abs(velocityY) > SWIPE_CLOSE_VELOCITY) {
runOnJS(onRequestClose)()
}
@@ -88,43 +86,46 @@ const ImageItem = ({imageSrc, onZoom, onRequestClose}: Props) => {
setScaled(nextIsScaled)
}
const handleDoubleTap = useCallback(
(event: NativeSyntheticEvent<NativeTouchEvent>) => {
const nowTS = new Date().getTime()
const scrollResponderRef = scrollViewRef?.current?.getScrollResponder()
function handleDoubleTap(absoluteX: number, absoluteY: number) {
const scrollResponderRef = scrollViewRef?.current?.getScrollResponder()
let nextZoomRect = {
x: 0,
y: 0,
width: SCREEN.width,
height: SCREEN.height,
}
if (lastTapTS && nowTS - lastTapTS < DOUBLE_TAP_DELAY) {
let nextZoomRect = {
x: 0,
y: 0,
width: SCREEN.width,
height: SCREEN.height,
}
const willZoom = !scaled
if (willZoom) {
nextZoomRect = getZoomRectAfterDoubleTap(
imageDimensions,
absoluteX,
absoluteY,
)
}
const willZoom = !scaled
if (willZoom) {
const {pageX, pageY} = event.nativeEvent
nextZoomRect = getZoomRectAfterDoubleTap(
imageDimensions,
pageX,
pageY,
)
}
// @ts-ignore
scrollResponderRef?.scrollResponderZoomTo({
...nextZoomRect, // This rect is in screen coordinates
animated: true,
})
}
// @ts-ignore
scrollResponderRef?.scrollResponderZoomTo({
...nextZoomRect, // This rect is in screen coordinates
animated: true,
})
} else {
lastTapTS = nowTS
}
},
[imageDimensions, scaled, scrollViewRef],
)
const singleTap = Gesture.Tap().onEnd(() => {
runOnJS(onTap)()
})
const doubleTap = Gesture.Tap()
.numberOfTaps(2)
.onEnd(e => {
const {absoluteX, absoluteY} = e
runOnJS(handleDoubleTap)(absoluteX, absoluteY)
})
const composedGesture = Gesture.Exclusive(doubleTap, singleTap)
return (
<View>
<GestureDetector gesture={composedGesture}>
<Animated.ScrollView
// @ts-ignore Something's up with the types here
ref={scrollViewRef}
@@ -136,21 +137,17 @@ const ImageItem = ({imageSrc, onZoom, onRequestClose}: Props) => {
contentContainerStyle={styles.imageScrollContainer}
onScroll={scrollHandler}>
{(!loaded || !imageDimensions) && <ImageLoading />}
<TouchableWithoutFeedback
onPress={handleDoubleTap}
accessibilityRole="image"
<AnimatedImage
contentFit="contain"
// NOTE: Don't pass imageSrc={imageSrc} or MobX will break.
source={{uri: imageSrc.uri}}
style={[styles.image, animatedStyle]}
accessibilityLabel={imageSrc.alt}
accessibilityHint="">
<AnimatedImage
contentFit="contain"
// NOTE: Don't pass imageSrc={imageSrc} or MobX will break.
source={{uri: imageSrc.uri}}
style={[styles.image, animatedStyle]}
onLoad={() => setLoaded(true)}
/>
</TouchableWithoutFeedback>
accessibilityHint=""
onLoad={() => setLoaded(true)}
/>
</Animated.ScrollView>
</View>
</GestureDetector>
)
}
src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx
+1
View File
@@ -7,6 +7,7 @@ import {ImageSource} from '../../@types'
type Props = {
imageSrc: ImageSource
onRequestClose: () => void
onTap: () => void
onZoom: (scaled: boolean) => void
isScrollViewBeingDragged: boolean
}
src/view/com/lightbox/ImageViewing/index.tsx
+16 -3
View File
@@ -43,24 +43,36 @@ function ImageViewing({
const [isScaled, setIsScaled] = useState(false)
const [isDragging, setIsDragging] = useState(false)
const [imageIndex, setImageIndex] = useState(initialImageIndex)
const [showControls, setShowControls] = useState(true)
const animatedHeaderStyle = useAnimatedStyle(() => ({
pointerEvents: showControls ? 'auto' : 'none',
opacity: withClampedSpring(showControls ? 1 : 0),
transform: [
{
translateY: withClampedSpring(isScaled ? -300 : 0),
translateY: withClampedSpring(showControls ? 0 : -30),
},
],
}))
const animatedFooterStyle = useAnimatedStyle(() => ({
pointerEvents: showControls ? 'auto' : 'none',
opacity: withClampedSpring(showControls ? 1 : 0),
transform: [
{
translateY: withClampedSpring(isScaled ? 300 : 0),
translateY: withClampedSpring(showControls ? 0 : 30),
},
],
}))
const onTap = useCallback(() => {
setShowControls(show => !show)
}, [])
const onZoom = useCallback((nextIsScaled: boolean) => {
setIsScaled(nextIsScaled)
if (nextIsScaled) {
setShowControls(false)
}
}, [])
const edges = useMemo(() => {
@@ -105,6 +117,7 @@ function ImageViewing({
{images.map(imageSrc => (
<View key={imageSrc.uri}>
<ImageItem
onTap={onTap}
onZoom={onZoom}
imageSrc={imageSrc}
onRequestClose={onRequestClose}
@@ -161,7 +174,7 @@ const EnhancedImageViewing = (props: Props) => (
function withClampedSpring(value: any) {
'worklet'
return withSpring(value, {overshootClamping: true})
return withSpring(value, {overshootClamping: true, stiffness: 300})
}
export default EnhancedImageViewing
src/view/com/modals/Modal.tsx
+16 -4
View File
@@ -1,11 +1,12 @@
import React, {useRef, useEffect} from 'react'
import {StyleSheet} from 'react-native'
import {SafeAreaView} from 'react-native-safe-area-context'
import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context'
import {observer} from 'mobx-react-lite'
import BottomSheet from '@gorhom/bottom-sheet'
import {useStores} from 'state/index'
import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
import {usePalette} from 'lib/hooks/usePalette'
import {timeout} from 'lib/async/timeout'
import {navigate} from '../../../Navigation'
import once from 'lodash.once'
@@ -36,11 +37,13 @@ import * as SwitchAccountModal from './SwitchAccount'
import * as LinkWarningModal from './LinkWarning'
const DEFAULT_SNAPPOINTS = ['90%']
const HANDLE_HEIGHT = 24
export const ModalsContainer = observer(function ModalsContainer() {
const store = useStores()
const bottomSheetRef = useRef<BottomSheet>(null)
const pal = usePalette('default')
const safeAreaInsets = useSafeAreaInsets()
const activeModal =
store.shell.activeModals[store.shell.activeModals.length - 1]
@@ -53,12 +56,16 @@ export const ModalsContainer = observer(function ModalsContainer() {
navigateOnce('Profile', {name: activeModal.did})
}
}
const onBottomSheetChange = (snapPoint: number) => {
const onBottomSheetChange = async (snapPoint: number) => {
if (snapPoint === -1) {
store.shell.closeModal()
} else if (activeModal?.name === 'profile-preview' && snapPoint === 1) {
// ensure we navigate to Profile and close the modal
navigateOnce('Profile', {name: activeModal.did})
await navigateOnce('Profile', {name: activeModal.did})
// There is no particular callback for when the view has actually been presented.
// This delay gives us a decent chance the navigation has flushed *and* images have loaded.
// It's acceptable because the data is already being fetched + it usually takes longer anyway.
// TODO: Figure out why avatar/cover don't always show instantly from cache.
await timeout(200)
store.shell.closeModal()
}
}
@@ -75,6 +82,7 @@ export const ModalsContainer = observer(function ModalsContainer() {
}
}, [store.shell.isModalActive, bottomSheetRef, activeModal?.name])
let needsSafeTopInset = false
let snapPoints: (string | number)[] = DEFAULT_SNAPPOINTS
let element
if (activeModal?.name === 'confirm') {
@@ -86,6 +94,7 @@ export const ModalsContainer = observer(function ModalsContainer() {
} else if (activeModal?.name === 'profile-preview') {
snapPoints = ProfilePreviewModal.snapPoints
element = <ProfilePreviewModal.Component {...activeModal} />
needsSafeTopInset = true // Need to align with the target profile screen.
} else if (activeModal?.name === 'server-input') {
snapPoints = ServerInputModal.snapPoints
element = <ServerInputModal.Component {...activeModal} />
@@ -164,10 +173,13 @@ export const ModalsContainer = observer(function ModalsContainer() {
)
}
const topInset = needsSafeTopInset ? safeAreaInsets.top - HANDLE_HEIGHT : 0
return (
<BottomSheet
ref={bottomSheetRef}
snapPoints={snapPoints}
topInset={topInset}
handleHeight={HANDLE_HEIGHT}
index={store.shell.isModalActive ? 0 : -1}
enablePanDownToClose
android_keyboardInputMode="adjustResize"
src/view/com/modals/ProfilePreview.tsx
+1 -10
View File
@@ -9,7 +9,6 @@ import {useAnalytics} from 'lib/analytics/analytics'
import {ProfileHeader} from '../profile/ProfileHeader'
import {InfoCircleIcon} from 'lib/icons'
import {useNavigationState} from '@react-navigation/native'
import {isIOS} from 'platform/detection'
import {s} from 'lib/styles'
export const snapPoints = [520, '100%']
@@ -36,11 +35,7 @@ export const Component = observer(function ProfilePreviewImpl({
return (
<View testID="profilePreview" style={[pal.view, s.flex1]}>
<View
style={[
styles.headerWrapper,
isLoading && isIOS && styles.headerPositionAdjust,
]}>
<View style={[styles.headerWrapper]}>
<ProfileHeader
view={model}
hideBackButton
@@ -70,10 +65,6 @@ const styles = StyleSheet.create({
headerWrapper: {
height: 440,
},
headerPositionAdjust: {
// HACK align the header for the profilescreen transition -prf
paddingTop: 23,
},
hintWrapper: {
height: 80,
},
src/view/com/pager/FeedsTabBar.web.tsx
+8 -20
View File
@@ -1,13 +1,14 @@
import React, {useMemo} from 'react'
import {Animated, StyleSheet} from 'react-native'
import {StyleSheet} from 'react-native'
import Animated from 'react-native-reanimated'
import {observer} from 'mobx-react-lite'
import {TabBar} from 'view/com/pager/TabBar'
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'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
export const FeedsTabBar = observer(function FeedsTabBarImpl(
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
@@ -31,26 +32,12 @@ const FeedsTabBarTablet = observer(function FeedsTabBarTabletImpl(
[store.me.savedFeeds.pinnedFeedNames],
)
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)},
],
}
const {headerMinimalShellTransform} = useMinimalShellMode()
return (
// @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]}>
<Animated.View
style={[pal.view, styles.tabBar, headerMinimalShellTransform]}>
<TabBar
key={items.join(',')}
{...props}
@@ -65,7 +52,8 @@ const styles = StyleSheet.create({
tabBar: {
position: 'absolute',
zIndex: 1,
left: '50%',
// @ts-ignore Web only -prf
left: 'calc(50% - 299px)',
width: 598,
top: 0,
flexDirection: 'row',
src/view/com/pager/FeedsTabBarMobile.tsx
+14 -22
View File
@@ -1,12 +1,10 @@
import React, {useMemo} from 'react'
import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {autorun} from 'mobx'
import {TabBar} from 'view/com/pager/TabBar'
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 {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
import {Link} from '../util/Link'
import {Text} from '../util/text/Text'
@@ -14,30 +12,17 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
import {s} from 'lib/styles'
import {HITSLOP_10} from 'lib/constants'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import Animated from 'react-native-reanimated'
export const FeedsTabBar = observer(function FeedsTabBarImpl(
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
) {
const store = useStores()
const pal = usePalette('default')
const interp = useAnimatedValue(0)
React.useEffect(() => {
return autorun(() => {
Animated.timing(interp, {
toValue: store.shell.minimalShellMode ? 1 : 0,
duration: 150,
useNativeDriver: true,
isInteraction: false,
}).start()
})
}, [interp, store])
const transform = {
opacity: Animated.subtract(1, interp),
transform: [{translateY: Animated.multiply(interp, -50)}],
}
const brandBlue = useColorSchemeStyle(s.brandBlue, s.blue3)
const {headerMinimalShellTransform} = useMinimalShellMode()
const onPressAvi = React.useCallback(() => {
store.shell.openDrawer()
@@ -48,13 +33,17 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl(
[store.me.savedFeeds.pinnedFeedNames],
)
const tabBarKey = useMemo(() => {
return items.join(',')
}, [items])
return (
<Animated.View
style={[
pal.view,
pal.border,
styles.tabBar,
transform,
headerMinimalShellTransform,
store.shell.minimalShellMode && styles.disabled,
]}>
<View style={[pal.view, styles.topBar]}>
@@ -92,8 +81,11 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl(
</View>
</View>
<TabBar
key={items.join(',')}
{...props}
key={tabBarKey}
onPressSelected={props.onPressSelected}
selectedPage={props.selectedPage}
onSelect={props.onSelect}
testID={props.testID}
items={items}
indicatorColor={pal.colors.link}
/>
src/view/com/pager/TabBar.tsx
+1
View File
@@ -64,6 +64,7 @@ export function TabBar({
)
const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
return (
<View testID={testID} style={[pal.view, styles.outer]}>
<DraggableScrollView
src/view/com/posts/Feed.tsx
+2 -2
View File
@@ -96,7 +96,7 @@ export const Feed = observer(function Feed({
}, [feed, track, setIsRefreshing])
const onEndReached = React.useCallback(async () => {
if (!feed.hasLoaded) return
if (!feed.hasLoaded || !feed.hasMore) return
track('Feed:onEndReached')
try {
@@ -178,7 +178,7 @@ export const Feed = observer(function Feed({
scrollEventThrottle={scrollEventThrottle}
indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'}
onEndReached={onEndReached}
onEndReachedThreshold={0.6}
onEndReachedThreshold={2}
removeClippedSubviews={true}
contentOffset={{x: 0, y: headerOffset * -1}}
extraData={extraData}
src/view/com/profile/ProfileHeader.tsx
+2 -2
View File
@@ -60,14 +60,14 @@ export const ProfileHeader = observer(function ProfileHeaderImpl({
if (!view || !view.hasLoaded) {
return (
<View style={pal.view}>
<LoadingPlaceholder width="100%" height={120} />
<LoadingPlaceholder width="100%" height={153} />
<View
style={[pal.view, {borderColor: pal.colors.background}, styles.avi]}>
<LoadingPlaceholder width={80} height={80} style={styles.br40} />
</View>
<View style={styles.content}>
<View style={[styles.buttonsLine]}>
<LoadingPlaceholder width={100} height={31} style={styles.br50} />
<LoadingPlaceholder width={167} height={31} style={styles.br50} />
</View>
<View>
<Text type="title-2xl" style={[pal.text, styles.title]}>
src/view/com/profile/ProfileHeaderSuggestedFollows.tsx
+2 -2
View File
@@ -223,9 +223,9 @@ const SuggestedFollow = observer(function SuggestedFollowImpl({
const onPress = React.useCallback(async () => {
try {
const {following} = await toggle()
const {following: isFollowing} = await toggle()
if (following) {
if (isFollowing) {
track('ProfileHeader:SuggestedFollowFollowed')
}
} catch (e: any) {
src/view/com/util/ViewHeader.tsx
+5 -29
View File
@@ -1,17 +1,17 @@
import React from 'react'
import {observer} from 'mobx-react-lite'
import {autorun} from 'mobx'
import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useNavigation} from '@react-navigation/native'
import {CenteredView} from './Views'
import {Text} from './text/Text'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {useAnalytics} from 'lib/analytics/analytics'
import {NavigationProp} from 'lib/routes/types'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import Animated from 'react-native-reanimated'
const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
@@ -150,32 +150,8 @@ const Container = observer(function ContainerImpl({
hideOnScroll: boolean
showBorder?: boolean
}) {
const store = useStores()
const pal = usePalette('default')
const interp = useAnimatedValue(0)
React.useEffect(() => {
return autorun(() => {
if (store.shell.minimalShellMode) {
Animated.timing(interp, {
toValue: 1,
duration: 100,
useNativeDriver: true,
isInteraction: false,
}).start()
} else {
Animated.timing(interp, {
toValue: 0,
duration: 100,
useNativeDriver: true,
isInteraction: false,
}).start()
}
})
}, [interp, store])
const transform = {
transform: [{translateY: Animated.multiply(interp, -100)}],
}
const {headerMinimalShellTransform} = useMinimalShellMode()
if (!hideOnScroll) {
return (
@@ -198,7 +174,7 @@ const Container = observer(function ContainerImpl({
styles.headerFloating,
pal.view,
pal.border,
transform,
headerMinimalShellTransform,
showBorder && styles.border,
]}>
{children}
src/view/com/util/fab/FABInner.tsx
+25 -26
View File
@@ -1,14 +1,13 @@
import React, {ComponentProps} from 'react'
import {observer} from 'mobx-react-lite'
import {autorun} from 'mobx'
import {Animated, StyleSheet, TouchableWithoutFeedback} from 'react-native'
import {StyleSheet, TouchableWithoutFeedback} from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import {gradients} from 'lib/styles'
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
import {useStores} from 'state/index'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {clamp} from 'lib/numbers'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import Animated from 'react-native-reanimated'
export interface FABProps
extends ComponentProps<typeof TouchableWithoutFeedback> {
@@ -22,30 +21,30 @@ export const FABInner = observer(function FABInnerImpl({
...props
}: FABProps) {
const insets = useSafeAreaInsets()
const {isTablet} = useWebMediaQueries()
const store = useStores()
const interp = useAnimatedValue(0)
React.useEffect(() => {
return autorun(() => {
Animated.timing(interp, {
toValue: store.shell.minimalShellMode ? 0 : 1,
duration: 100,
useNativeDriver: true,
isInteraction: false,
}).start()
})
}, [interp, store])
const transform = isTablet
? undefined
: {
transform: [{translateY: Animated.multiply(interp, -44)}],
}
const size = isTablet ? styles.sizeLarge : styles.sizeRegular
const right = isTablet ? 50 : 24
const bottom = isTablet ? 50 : clamp(insets.bottom, 15, 60) + 15
const {isMobile, isTablet} = useWebMediaQueries()
const {fabMinimalShellTransform} = useMinimalShellMode()
const size = React.useMemo(() => {
return isTablet ? styles.sizeLarge : styles.sizeRegular
}, [isTablet])
const tabletSpacing = React.useMemo(() => {
return isTablet
? {right: 50, bottom: 50}
: {
right: 24,
bottom: clamp(insets.bottom, 15, 60) + 15,
}
}, [insets.bottom, isTablet])
return (
<TouchableWithoutFeedback testID={testID} {...props}>
<Animated.View style={[styles.outer, size, {right, bottom}, transform]}>
<Animated.View
style={[
styles.outer,
size,
tabletSpacing,
isMobile && fabMinimalShellTransform,
]}>
<LinearGradient
colors={[gradients.blueLight.start, gradients.blueLight.end]}
start={{x: 0, y: 0}}
src/view/com/util/images/ImageLayoutGrid.tsx
+4 -4
View File
@@ -63,8 +63,8 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
case 4:
return (
<View style={styles.flexRow}>
<View style={{flex: 1}}>
<>
<View style={styles.flexRow}>
<View style={styles.smallItem}>
<GalleryItem {...props} index={0} imageStyle={styles.image} />
</View>
@@ -72,7 +72,7 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
<GalleryItem {...props} index={2} imageStyle={styles.image} />
</View>
</View>
<View style={{flex: 1}}>
<View style={styles.flexRow}>
<View style={styles.smallItem}>
<GalleryItem {...props} index={1} imageStyle={styles.image} />
</View>
@@ -80,7 +80,7 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
<GalleryItem {...props} index={3} imageStyle={styles.image} />
</View>
</View>
</View>
</>
)
default:
src/view/com/util/load-latest/LoadLatestBtn.tsx
+8 -23
View File
@@ -2,16 +2,12 @@ import React from 'react'
import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {colors} from 'lib/styles'
import {HITSLOP_20} from 'lib/constants'
import {isWeb} from 'platform/detection'
import {clamp} from 'lib/numbers'
import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import Animated from 'react-native-reanimated'
const AnimatedTouchableOpacity =
Animated.createAnimatedComponent(TouchableOpacity)
@@ -23,20 +19,11 @@ export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
onPress: () => void
label: string
showIndicator: boolean
minimalShellMode?: boolean // NOTE not used on mobile -prf
}) {
const store = useStores()
const pal = usePalette('default')
const {isDesktop, isTablet} = useWebMediaQueries()
const safeAreaInsets = useSafeAreaInsets()
const minMode = store.shell.minimalShellMode
const bottom = isTablet
? 50
: (minMode || isDesktop ? 16 : 60) +
(isWeb ? 20 : clamp(safeAreaInsets.bottom, 15, 60))
const animatedStyle = useAnimatedStyle(() => ({
bottom: withTiming(bottom, {duration: 150}),
}))
const {isDesktop, isTablet, isMobile} = useWebMediaQueries()
const {fabMinimalShellTransform} = useMinimalShellMode()
return (
<AnimatedTouchableOpacity
style={[
@@ -45,7 +32,7 @@ export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
isTablet && styles.loadLatestTablet,
pal.borderDark,
pal.view,
animatedStyle,
isMobile && fabMinimalShellTransform,
]}
onPress={onPress}
hitSlop={HITSLOP_20}
@@ -73,13 +60,11 @@ const styles = StyleSheet.create({
},
loadLatestTablet: {
// @ts-ignore web only
left: '50vw',
transform: [{translateX: -282}],
left: 'calc(50vw - 282px)',
},
loadLatestDesktop: {
// @ts-ignore web only
left: '50vw',
transform: [{translateX: -382}],
left: 'calc(50vw - 382px)',
},
indicator: {
position: 'absolute',
src/view/screens/Home.tsx
+9 -211
View File
@@ -1,33 +1,22 @@
import React from 'react'
import {FlatList, View, useWindowDimensions} from 'react-native'
import {useFocusEffect, useIsFocused} from '@react-navigation/native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
import {useWindowDimensions} from 'react-native'
import {useFocusEffect} from '@react-navigation/native'
import {AppBskyFeedGetFeed as GetCustomFeed} from '@atproto/api'
import {observer} from 'mobx-react-lite'
import useAppState from 'react-native-appstate-hook'
import isEqual from 'lodash.isequal'
import {NativeStackScreenProps, HomeTabNavigatorParams} from 'lib/routes/types'
import {PostsFeedModel} from 'state/models/feeds/posts'
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
import {TextLink} from 'view/com/util/Link'
import {Feed} from '../com/posts/Feed'
import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState'
import {FollowingEndOfFeed} from 'view/com/posts/FollowingEndOfFeed'
import {CustomFeedEmptyState} from 'view/com/posts/CustomFeedEmptyState'
import {LoadLatestBtn} from '../com/util/load-latest/LoadLatestBtn'
import {FeedsTabBar} from '../com/pager/FeedsTabBar'
import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
import {FAB} from '../com/util/fab/FAB'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
import {s, colors} from 'lib/styles'
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
import {useAnalytics} from 'lib/analytics/analytics'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {ComposeIcon2} from 'lib/icons'
import {FeedPage} from 'view/com/feeds/FeedPage'
const POLL_FREQ = 30e3 // 30sec
export const POLL_FREQ = 30e3 // 30sec
type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
export const HomeScreen = withAuthRequired(
@@ -98,7 +87,9 @@ export const HomeScreen = withAuthRequired(
(props: RenderTabBarFnProps) => {
return (
<FeedsTabBar
{...props}
key="FEEDS_TAB_BAR"
selectedPage={props.selectedPage}
onSelect={props.onSelect}
testID="homeScreenFeedTabs"
onPressSelected={onPressSelected}
/>
@@ -111,10 +102,6 @@ export const HomeScreen = withAuthRequired(
return <FollowingEmptyState />
}, [])
const renderFollowingEndOfFeed = React.useCallback(() => {
return <FollowingEndOfFeed />
}, [])
const renderCustomFeedEmptyState = React.useCallback(() => {
return <CustomFeedEmptyState />
}, [])
@@ -132,7 +119,7 @@ export const HomeScreen = withAuthRequired(
isPageFocused={selectedPage === 0}
feed={store.me.mainFeed}
renderEmptyState={renderFollowingEmptyState}
renderEndOfFeed={renderFollowingEndOfFeed}
renderEndOfFeed={FollowingEndOfFeed}
/>
{customFeeds.map((f, index) => {
return (
@@ -150,196 +137,7 @@ export const HomeScreen = withAuthRequired(
}),
)
const FeedPage = observer(function FeedPageImpl({
testID,
isPageFocused,
feed,
renderEmptyState,
renderEndOfFeed,
}: {
testID?: string
feed: PostsFeedModel
isPageFocused: boolean
renderEmptyState: () => JSX.Element
renderEndOfFeed?: () => JSX.Element
}) {
const store = useStores()
const pal = usePalette('default')
const {isDesktop} = useWebMediaQueries()
const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll(store)
const {screen, track} = useAnalytics()
const headerOffset = useHeaderOffset()
const scrollElRef = React.useRef<FlatList>(null)
const {appState} = useAppState({
onForeground: () => doPoll(true),
})
const isScreenFocused = useIsFocused()
const hasNew = feed.hasNewLatest && !feed.isRefreshing
React.useEffect(() => {
// called on first load
if (!feed.hasLoaded && isPageFocused) {
feed.setup()
}
}, [isPageFocused, feed])
const doPoll = React.useCallback(
(knownActive = false) => {
if (
(!knownActive && appState !== 'active') ||
!isScreenFocused ||
!isPageFocused
) {
return
}
if (feed.isLoading) {
return
}
store.log.debug('HomeScreen: Polling for new posts')
feed.checkForLatest()
},
[appState, isScreenFocused, isPageFocused, store, feed],
)
const scrollToTop = React.useCallback(() => {
scrollElRef.current?.scrollToOffset({offset: -headerOffset})
resetMainScroll()
}, [headerOffset, resetMainScroll])
const onSoftReset = React.useCallback(() => {
if (isPageFocused) {
scrollToTop()
feed.refresh()
}
}, [isPageFocused, scrollToTop, feed])
// fires when page within screen is activated/deactivated
// - check for latest
React.useEffect(() => {
if (!isPageFocused || !isScreenFocused) {
return
}
const softResetSub = store.onScreenSoftReset(onSoftReset)
const feedCleanup = feed.registerListeners()
const pollInterval = setInterval(doPoll, POLL_FREQ)
screen('Feed')
store.log.debug('HomeScreen: Updating feed')
feed.checkForLatest()
return () => {
clearInterval(pollInterval)
softResetSub.remove()
feedCleanup()
}
}, [store, doPoll, onSoftReset, screen, feed, isPageFocused, isScreenFocused])
const onPressCompose = React.useCallback(() => {
track('HomeScreen:PressCompose')
store.shell.openComposer({})
}, [store, track])
const onPressTryAgain = React.useCallback(() => {
feed.refresh()
}, [feed])
const onPressLoadLatest = React.useCallback(() => {
scrollToTop()
feed.refresh()
}, [feed, scrollToTop])
const ListHeaderComponent = React.useCallback(() => {
if (isDesktop) {
return (
<View
style={[
pal.view,
{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 18,
paddingVertical: 12,
},
]}>
<TextLink
type="title-lg"
href="/"
style={[pal.text, {fontWeight: 'bold'}]}
text={
<>
{store.session.isSandbox ? 'SANDBOX' : 'Bluesky'}{' '}
{hasNew && (
<View
style={{
top: -8,
backgroundColor: colors.blue3,
width: 8,
height: 8,
borderRadius: 4,
}}
/>
)}
</>
}
onPress={() => store.emitScreenSoftReset()}
/>
<TextLink
type="title-lg"
href="/settings/home-feed"
style={{fontWeight: 'bold'}}
accessibilityLabel="Feed Preferences"
accessibilityHint=""
text={
<FontAwesomeIcon
icon="sliders"
style={pal.textLight as FontAwesomeIconStyle}
/>
}
/>
</View>
)
}
return <></>
}, [isDesktop, pal, store, hasNew])
return (
<View testID={testID} style={s.h100pct}>
<Feed
testID={testID ? `${testID}-feed` : undefined}
key="default"
feed={feed}
scrollElRef={scrollElRef}
onPressTryAgain={onPressTryAgain}
onScroll={onMainScroll}
scrollEventThrottle={100}
renderEmptyState={renderEmptyState}
renderEndOfFeed={renderEndOfFeed}
ListHeaderComponent={ListHeaderComponent}
headerOffset={headerOffset}
/>
{(isScrolledDown || hasNew) && (
<LoadLatestBtn
onPress={onPressLoadLatest}
label="Load new posts"
showIndicator={hasNew}
minimalShellMode={store.shell.minimalShellMode}
/>
)}
<FAB
testID="composeFAB"
onPress={onPressCompose}
icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />}
accessibilityRole="button"
accessibilityLabel="New post"
accessibilityHint=""
/>
</View>
)
})
function useHeaderOffset() {
export function useHeaderOffset() {
const {isDesktop, isTablet} = useWebMediaQueries()
const {fontScale} = useWindowDimensions()
if (isDesktop) {
src/view/screens/Notifications.tsx
-1
View File
@@ -156,7 +156,6 @@ export const NotificationsScreen = withAuthRequired(
onPress={onPressLoadLatest}
label="Load new notifications"
showIndicator={hasNew}
minimalShellMode={true}
/>
)}
</View>
src/view/shell/bottom-bar/BottomBar.tsx
+2 -6
View File
@@ -1,10 +1,6 @@
import React, {ComponentProps} from 'react'
import {
Animated,
GestureResponderEvent,
TouchableOpacity,
View,
} from 'react-native'
import {GestureResponderEvent, TouchableOpacity, View} from 'react-native'
import Animated from 'react-native-reanimated'
import {StackActions} from '@react-navigation/native'
import {BottomTabBarProps} from '@react-navigation/bottom-tabs'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
src/view/shell/bottom-bar/BottomBarWeb.tsx
+1 -1
View File
@@ -2,8 +2,8 @@ import React from 'react'
import {observer} from 'mobx-react-lite'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
import {Animated} from 'react-native'
import {useNavigationState} from '@react-navigation/native'
import Animated from 'react-native-reanimated'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {getCurrentRoute, isTab} from 'lib/routes/helpers'
import {styles} from './BottomBarStyles'