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

bleed profile banner into safe area

Browse Source 
(cherry picked from commit 50b3a4d0c6fd94b583ffe4efa65de35c81ae7f4e)
This commit is contained in:
Samuel Newman
2024-12-05 14:10:31 +00:00
parent 89c6ca94fe
commit d503524316
11 changed files with 260 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.native.tsx
+4 -1
View File
@@ -53,6 +53,7 @@ import {
import {readLastActiveAccount} from '#/state/session/util'
import {Provider as ShellStateProvider} from '#/state/shell'
import {Provider as ComposerProvider} from '#/state/shell/composer'
import {Provider as LightStatusBarProvider} from '#/state/shell/light-status-bar'
import {Provider as LoggedOutViewProvider} from '#/state/shell/logged-out'
import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
@@ -208,7 +209,9 @@ function App() {
<SafeAreaProvider
initialMetrics={initialWindowMetrics}>
<IntentDialogProvider>
<InnerApp />
<LightStatusBarProvider>
<InnerApp />
</LightStatusBarProvider>
</IntentDialogProvider>
</SafeAreaProvider>
</StarterPackProvider>
src/App.web.tsx
+4 -1
View File
@@ -40,6 +40,7 @@ import {
import {readLastActiveAccount} from '#/state/session/util'
import {Provider as ShellStateProvider} from '#/state/shell'
import {Provider as ComposerProvider} from '#/state/shell/composer'
import {Provider as LightStatusBarProvider} from '#/state/shell/light-status-bar'
import {Provider as LoggedOutViewProvider} from '#/state/shell/logged-out'
import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
@@ -181,7 +182,9 @@ function App() {
<PortalProvider>
<StarterPackProvider>
<IntentDialogProvider>
<InnerApp />
<LightStatusBarProvider>
<InnerApp />
</LightStatusBarProvider>
</IntentDialogProvider>
</StarterPackProvider>
</PortalProvider>
src/components/Layout/Header/index.tsx
+2 -1
View File
@@ -175,7 +175,8 @@ export function TitleText({
gtMobile && a.text_xl,
style,
]}
numberOfLines={2}>
numberOfLines={2}
emoji>
{children}
</Text>
)
src/screens/Profile/Header/GrowableBanner.tsx
+12 -3
View File
@@ -10,6 +10,7 @@ import Animated, {
useAnimatedReaction,
useAnimatedStyle,
} from 'react-native-reanimated'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {BlurView} from 'expo-blur'
import {useIsFetching} from '@tanstack/react-query'
@@ -32,7 +33,7 @@ export function GrowableBanner({
}) {
const pagerContext = usePagerHeaderContext()
// pagerContext should only be present on iOS, but better safe than sorry
// plain non-growable mode for Android/Web
if (!pagerContext || !isIOS) {
return (
<View style={[a.w_full, a.h_full]}>
@@ -60,6 +61,7 @@ function GrowableBannerInner({
backButton?: React.ReactNode
children: React.ReactNode
}) {
const {top: topInset} = useSafeAreaInsets()
const isFetching = useIsProfileFetching()
const animateSpinner = useShouldAnimateSpinner({isFetching, scrollY})
@@ -104,7 +106,7 @@ function GrowableBannerInner({
const animatedBackButtonStyle = useAnimatedStyle(() => ({
transform: [
{
translateY: interpolate(scrollY.get(), [-150, 60], [-150, 60], {
translateY: interpolate(scrollY.get(), [-150, 10], [-150, 10], {
extrapolateRight: Extrapolation.CLAMP,
}),
},
@@ -128,7 +130,14 @@ function GrowableBannerInner({
animatedProps={animatedBlurViewProps}
/>
</Animated.View>
<View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
<View
style={[
a.absolute,
a.inset_0,
{top: topInset - (isIOS ? 15 : 0)},
a.justify_center,
a.align_center,
]}>
<Animated.View style={[animatedSpinnerStyle]}>
<ActivityIndicator
key={animateSpinner ? 'spin' : 'stop'}
src/screens/Profile/Header/Shell.tsx
+17 -12
View File
@@ -1,15 +1,14 @@
import React, {memo} from 'react'
import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
import {MeasuredDimensions, runOnJS, runOnUI} from 'react-native-reanimated'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {AppBskyActorDefs, ModerationDecision} from '@atproto/api'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useNavigation} from '@react-navigation/native'
import {BACK_HITSLOP} from '#/lib/constants'
import {measureHandle, useHandleRef} from '#/lib/hooks/useHandleRef'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {NavigationProp} from '#/lib/routes/types'
import {isIOS} from '#/platform/detection'
import {Shadow} from '#/state/cache/types'
@@ -18,7 +17,8 @@ import {useSession} from '#/state/session'
import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {UserBanner} from '#/view/com/util/UserBanner'
import {atoms as a, useTheme} from '#/alf'
import {atoms as a, platform, useTheme} from '#/alf'
import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeftIcon} from '#/components/icons/Arrow'
import {LabelsOnMe} from '#/components/moderation/LabelsOnMe'
import {ProfileHeaderAlerts} from '#/components/moderation/ProfileHeaderAlerts'
import {GrowableAvatar} from './GrowableAvatar'
@@ -43,7 +43,8 @@ let ProfileHeaderShell = ({
const {_} = useLingui()
const {openLightbox} = useLightboxControls()
const navigation = useNavigation<NavigationProp>()
const {isDesktop} = useWebMediaQueries()
const {top: topInset} = useSafeAreaInsets()
const aviRef = useHandleRef()
const onPressBack = React.useCallback(() => {
@@ -103,7 +104,7 @@ let ProfileHeaderShell = ({
<GrowableBanner
backButton={
<>
{!isDesktop && !hideBackButton && (
{!hideBackButton && (
<TouchableWithoutFeedback
testID="profileHeaderBackBtn"
onPress={onPressBack}
@@ -111,12 +112,17 @@ let ProfileHeaderShell = ({
accessibilityRole="button"
accessibilityLabel={_(msg`Back`)}
accessibilityHint="">
<View style={styles.backBtnWrapper}>
<FontAwesomeIcon
size={18}
icon="angle-left"
color="white"
/>
<View
style={[
styles.backBtnWrapper,
{
top: platform({
web: 10,
default: topInset,
}),
},
]}>
<ArrowLeftIcon size="lg" fill="white" />
</View>
</TouchableWithoutFeedback>
)}
@@ -186,7 +192,6 @@ export {ProfileHeaderShell}
const styles = StyleSheet.create({
backBtnWrapper: {
position: 'absolute',
top: 10,
left: 10,
width: 30,
height: 30,
src/screens/Profile/Header/index.tsx
+125 -7
View File
@@ -1,14 +1,28 @@
import React, {memo} from 'react'
import {StyleSheet, View} from 'react-native'
import React, {memo, useState} from 'react'
import {LayoutChangeEvent, StyleSheet, View} from 'react-native'
import Animated, {
runOnJS,
useAnimatedReaction,
useAnimatedStyle,
withTiming,
} from 'react-native-reanimated'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {
AppBskyActorDefs,
AppBskyLabelerDefs,
ModerationOpts,
RichText as RichTextAPI,
} from '@atproto/api'
import {useIsFocused} from '@react-navigation/native'
import {sanitizeDisplayName} from '#/lib/strings/display-names'
import {sanitizeHandle} from '#/lib/strings/handles'
import {isNative} from '#/platform/detection'
import {useLightStatusBar} from '#/state/shell/light-status-bar'
import {usePagerHeaderContext} from '#/view/com/pager/PagerHeaderContext'
import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import {useTheme} from '#/alf'
import {atoms as a, useTheme} from '#/alf'
import {Header} from '#/components/Layout'
import {ProfileHeaderLabeler} from './ProfileHeaderLabeler'
import {ProfileHeaderStandard} from './ProfileHeaderStandard'
@@ -43,20 +57,124 @@ interface Props {
moderationOpts: ModerationOpts
hideBackButton?: boolean
isPlaceholderProfile?: boolean
setMinimumHeight: (height: number) => void
}
let ProfileHeader = (props: Props): React.ReactNode => {
let ProfileHeader = ({setMinimumHeight, ...props}: Props): React.ReactNode => {
let content
if (props.profile.associated?.labeler) {
if (!props.labeler) {
return <ProfileHeaderLoading />
content = <ProfileHeaderLoading />
} else {
content = <ProfileHeaderLabeler {...props} labeler={props.labeler} />
}
return <ProfileHeaderLabeler {...props} labeler={props.labeler} />
} else {
content = <ProfileHeaderStandard {...props} />
}
return <ProfileHeaderStandard {...props} />
return (
<>
{isNative && (
<MinimalHeader
onLayout={evt => setMinimumHeight(evt.nativeEvent.layout.height)}
profile={props.profile}
hideBackButton={props.hideBackButton}
/>
)}
{content}
</>
)
}
ProfileHeader = memo(ProfileHeader)
export {ProfileHeader}
const MinimalHeader = React.memo(function MinimalHeader({
onLayout,
profile,
hideBackButton,
}: {
onLayout: (e: LayoutChangeEvent) => void
profile: AppBskyActorDefs.ProfileViewDetailed
hideBackButton?: boolean
}) {
const t = useTheme()
const insets = useSafeAreaInsets()
const ctx = usePagerHeaderContext()
const [visible, setVisible] = useState(false)
const [minimalHeaderHeight, setMinimalHeaderHeight] = React.useState(0)
const isScreenFocused = useIsFocused()
if (!ctx) throw new Error('MinimalHeader cannot be used on web')
const {scrollY, headerHeight} = ctx
const animatedStyle = useAnimatedStyle(() => {
// if we don't yet have the min header height in JS, hide
if (!_WORKLET || minimalHeaderHeight === 0) {
return {
opacity: 0,
}
}
const pastThreshold = scrollY.get() > 100
return {
opacity: pastThreshold ? withTiming(1) : withTiming(0),
transform: [
{
translateY: Math.min(
scrollY.get(),
headerHeight - minimalHeaderHeight,
),
},
],
}
})
useAnimatedReaction(
() => scrollY.get() > 100,
(value, prev) => {
if (prev !== value) {
runOnJS(setVisible)(value)
}
},
)
useLightStatusBar(isScreenFocused && !visible)
return (
<Animated.View
aria-hidden={!visible}
accessibilityElementsHidden={!visible}
importantForAccessibility={visible ? 'auto' : 'no-hide-descendants'}
onLayout={evt => {
setMinimalHeaderHeight(evt.nativeEvent.layout.height)
onLayout(evt)
}}
style={[
a.absolute,
a.z_50,
t.atoms.bg,
{
top: 0,
left: 0,
right: 0,
paddingTop: insets.top,
},
animatedStyle,
]}>
<Header.Outer>
{!hideBackButton && <Header.BackButton />}
<Header.Content align="left">
<Header.TitleText>
{sanitizeDisplayName(profile.displayName || profile.handle)}
</Header.TitleText>
<Header.SubtitleText>
{sanitizeHandle(profile.handle, '@')}
</Header.SubtitleText>
</Header.Content>
</Header.Outer>
</Animated.View>
)
})
MinimalHeader.displayName = 'MinimalHeader'
const styles = StyleSheet.create({
avi: {
position: 'absolute',
src/state/shell/light-status-bar.tsx
+45
View File
@@ -0,0 +1,45 @@
import {createContext, useContext, useEffect, useState} from 'react'
import {isWeb} from '#/platform/detection'
import {IS_DEV} from '#/env'
const LightStatusBarRefCountContext = createContext<number>(0)
const SetLightStatusBarRefCountContext = createContext<React.Dispatch<
React.SetStateAction<number>
> | null>(null)
export function useLightStatusBarRefCount() {
return useContext(LightStatusBarRefCountContext)
}
export function useLightStatusBar(enabled: boolean) {
const setRefCount = useContext(SetLightStatusBarRefCountContext)
useEffect(() => {
// noop on web -sfn
if (isWeb) return
if (!setRefCount) {
if (IS_DEV)
console.error(
'useLightStatusBar was used without a SetLightStatusBarRefCountContext provider',
)
return
}
if (enabled) {
setRefCount(prev => prev + 1)
return () => setRefCount(prev => prev - 1)
}
}, [enabled, setRefCount])
}
export function Provider({children}: React.PropsWithChildren<{}>) {
const [refCount, setRefCount] = useState(0)
return (
<SetLightStatusBarRefCountContext.Provider value={setRefCount}>
<LightStatusBarRefCountContext.Provider value={refCount}>
{children}
</LightStatusBarRefCountContext.Provider>
</SetLightStatusBarRefCountContext.Provider>
)
}
src/view/com/pager/PagerHeaderContext.tsx
+18 -11
View File
@@ -1,40 +1,47 @@
import React, {useContext} from 'react'
import {SharedValue} from 'react-native-reanimated'
import {isIOS} from '#/platform/detection'
import {isNative} from '#/platform/detection'
export const PagerHeaderContext =
React.createContext<SharedValue<number> | null>(null)
export const PagerHeaderContext = React.createContext<{
scrollY: SharedValue<number>
headerHeight: number
} | null>(null)
/**
* Passes the scrollY value to the pager header's banner, so it can grow on
* overscroll on iOS. Not necessary to use this context provider on other platforms.
* Passes information about the
*
* @platform ios
* @platform ios, android
*/
export function PagerHeaderProvider({
scrollY,
headerHeight,
children,
}: {
scrollY: SharedValue<number>
headerHeight: number
children: React.ReactNode
}) {
const value = React.useMemo(
() => ({scrollY, headerHeight}),
[scrollY, headerHeight],
)
return (
<PagerHeaderContext.Provider value={scrollY}>
<PagerHeaderContext.Provider value={value}>
{children}
</PagerHeaderContext.Provider>
)
}
export function usePagerHeaderContext() {
const scrollY = useContext(PagerHeaderContext)
if (isIOS) {
if (!scrollY) {
const ctx = useContext(PagerHeaderContext)
if (isNative) {
if (!ctx) {
throw new Error(
'usePagerHeaderContext must be used within a HeaderProvider',
)
}
return {scrollY}
return ctx
} else {
return null
}
src/view/com/pager/PagerWithHeader.tsx
+20 -5
View File
@@ -38,7 +38,11 @@ export interface PagerWithHeaderProps {
| ((props: PagerWithHeaderChildParams) => JSX.Element)
items: string[]
isHeaderReady: boolean
renderHeader?: () => JSX.Element
renderHeader?: ({
setMinimumHeight,
}: {
setMinimumHeight: (height: number) => void
}) => JSX.Element
initialPage?: number
onPageSelected?: (index: number) => void
onCurrentPageSelected?: (index: number) => void
@@ -83,7 +87,9 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
const renderTabBar = React.useCallback(
(props: RenderTabBarFnProps) => {
return (
<PagerHeaderProvider scrollY={scrollY}>
<PagerHeaderProvider
scrollY={scrollY}
headerHeight={headerOnlyHeight}>
<PagerTabBar
headerOnlyHeight={headerOnlyHeight}
items={items}
@@ -237,7 +243,11 @@ let PagerTabBar = ({
items: string[]
testID?: string
scrollY: SharedValue<number>
renderHeader?: () => JSX.Element
renderHeader?: ({
setMinimumHeight,
}: {
setMinimumHeight: (height: number) => void
}) => JSX.Element
onHeaderOnlyLayout: (height: number) => void
onTabBarLayout: (e: LayoutChangeEvent) => void
onCurrentPageSelected?: (index: number) => void
@@ -246,8 +256,13 @@ let PagerTabBar = ({
dragProgress: SharedValue<number>
dragState: SharedValue<'idle' | 'dragging' | 'settling'>
}): React.ReactNode => {
const [minimumHeaderHeight, setMinimumHeaderHeight] = React.useState(0)
const headerTransform = useAnimatedStyle(() => {
const translateY = Math.min(scrollY.get(), headerOnlyHeight) * -1
const translateY =
Math.min(
scrollY.get(),
Math.max(headerOnlyHeight - minimumHeaderHeight, 0),
) * -1
return {
transform: [
{
@@ -267,7 +282,7 @@ let PagerTabBar = ({
ref={headerRef}
pointerEvents={isIOS ? 'auto' : 'box-none'}
collapsable={false}>
{renderHeader?.()}
{renderHeader?.({setMinimumHeight: setMinimumHeaderHeight})}
{
// It wouldn't be enough to place `onLayout` on the parent node because
// this would risk measuring before `isHeaderReady` has turned `true`.
src/view/screens/Profile.tsx
+8 -2
View File
@@ -43,6 +43,7 @@ import {ListRef} from '#/view/com/util/List'
import {ProfileHeader, ProfileHeaderLoading} from '#/screens/Profile/Header'
import {ProfileFeedSection} from '#/screens/Profile/Sections/Feed'
import {ProfileLabelsSection} from '#/screens/Profile/Sections/Labels'
import {atoms as a} from '#/alf'
import * as Layout from '#/components/Layout'
import {ScreenHider} from '#/components/moderation/ScreenHider'
import {ProfileStarterPacks} from '#/components/StarterPack/ProfileStarterPacks'
@@ -56,7 +57,7 @@ interface SectionRef {
type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'>
export function ProfileScreen(props: Props) {
return (
<Layout.Screen testID="profileScreen">
<Layout.Screen testID="profileScreen" style={[a.pt_0]}>
<ProfileScreenInner {...props} />
</Layout.Screen>
)
@@ -329,7 +330,11 @@ function ProfileScreenLoaded({
// rendering
// =
const renderHeader = () => {
const renderHeader = ({
setMinimumHeight,
}: {
setMinimumHeight: (height: number) => void
}) => {
return (
<ExpoScrollForwarderView scrollViewTag={scrollViewTag}>
<ProfileHeader
@@ -339,6 +344,7 @@ function ProfileScreenLoaded({
moderationOpts={moderationOpts}
hideBackButton={hideBackButton}
isPlaceholderProfile={showPlaceholder}
setMinimumHeight={setMinimumHeight}
/>
</ExpoScrollForwarderView>
)
src/view/shell/index.tsx
+5 -1
View File
@@ -18,6 +18,7 @@ import {
useIsDrawerSwipeDisabled,
useSetDrawerOpen,
} from '#/state/shell'
import {useLightStatusBarRefCount} from '#/state/shell/light-status-bar'
import {useCloseAnyActiveElement} from '#/state/util'
import {Lightbox} from '#/view/com/lightbox/Lightbox'
import {ModalsContainer} from '#/view/com/modals/Modal'
@@ -154,6 +155,7 @@ function ShellInner() {
export const Shell: React.FC = function ShellImpl() {
const {fullyExpandedCount} = useDialogStateControlContext()
const lightStatusBarRefCount = useLightStatusBarRefCount()
const t = useTheme()
useIntentHandler()
@@ -165,7 +167,9 @@ export const Shell: React.FC = function ShellImpl() {
<View testID="mobileShellView" style={[a.h_full, t.atoms.bg]}>
<StatusBar
style={
t.name !== 'light' || (isIOS && fullyExpandedCount > 0)
t.name !== 'light' ||
(isIOS && fullyExpandedCount > 0) ||
lightStatusBarRefCount > 0
? 'light'
: 'dark'
}