diff --git a/src/screens/VideoFeed/components/Header.tsx b/src/screens/VideoFeed/components/Header.tsx
index b40f9865b6..c9a194646b 100644
--- a/src/screens/VideoFeed/components/Header.tsx
+++ b/src/screens/VideoFeed/components/Header.tsx
@@ -1,11 +1,20 @@
-import {View} from 'react-native'
+import {useCallback} from 'react'
+import {GestureResponderEvent, View} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
+import {HITSLOP_30} from '#/lib/constants'
+import {NavigationProp} from '#/lib/routes/types'
import {sanitizeHandle} from '#/lib/strings/handles'
import {useFeedSourceInfoQuery} from '#/state/queries/feed'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {VideoFeedSourceContext} from '#/screens/VideoFeed/types'
import {atoms as a, useBreakpoints} from '#/alf'
+import {Button, ButtonProps} from '#/components/Button'
+import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow'
import * as Layout from '#/components/Layout'
+import {BUTTON_VISUAL_ALIGNMENT_OFFSET} from '#/components/Layout/const'
import {Text} from '#/components/Typography'
export function HeaderPlaceholder() {
@@ -73,7 +82,7 @@ export function Header({
return (
-
+
{content}
)
@@ -124,3 +133,43 @@ export function FeedHeader({
)
}
+
+// TODO: This customization should be a part of the layout component
+export function BackButton({onPress, style, ...props}: Partial) {
+ const {_} = useLingui()
+ const navigation = useNavigation()
+
+ const onPressBack = useCallback(
+ (evt: GestureResponderEvent) => {
+ onPress?.(evt)
+ if (evt.defaultPrevented) return
+ if (navigation.canGoBack()) {
+ navigation.goBack()
+ } else {
+ navigation.navigate('Home')
+ }
+ },
+ [onPress, navigation],
+ )
+
+ return (
+
+
+
+ )
+}