diff --git a/src/components/Post/ShowMoreTextButton.tsx b/src/components/Post/ShowMoreTextButton.tsx
new file mode 100644
--- /dev/null
+++ b/src/components/Post/ShowMoreTextButton.tsx
@@ -0,0 +1,56 @@
+import {useCallback, useMemo} from 'react'
+import {LayoutAnimation, type TextStyle} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {HITSLOP_10} from '#/lib/constants'
+import {atoms as a, flatten, type TextStyleProp, useTheme} from '#/alf'
+import {Button} from '#/components/Button'
+import {Text} from '#/components/Typography'
+
+export function ShowMoreTextButton({
+ onPress: onPressProp,
+ style,
+}: TextStyleProp & {onPress: () => void}) {
+ const t = useTheme()
+ const {_} = useLingui()
+
+ const onPress = useCallback(() => {
+ LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+ onPressProp()
+ }, [onPressProp])
+
+ const textStyle = useMemo(() => {
+ return flatten([a.leading_snug, a.text_sm, style]) as TextStyle & {
+ fontSize: number
+ lineHeight: number
+ }
+ }, [style])
+
+ return (
+
+ )
+}
diff --git a/src/components/Post/Embed/ListEmbed.tsx b/src/components/Post/Embed/ListEmbed.tsx
--- a/src/components/Post/Embed/ListEmbed.tsx
+++ b/src/components/Post/Embed/ListEmbed.tsx
@@ -6,8 +6,8 @@
import {atoms as a, useTheme} from '#/alf'
import * as ListCard from '#/components/ListCard'
import {ContentHider} from '#/components/moderation/ContentHider'
-import {EmbedType} from '#/types/bsky/post'
-import {CommonProps} from './types'
+import {type EmbedType} from '#/types/bsky/post'
+import {type CommonProps} from './types'
export function ListEmbed({
embed,
diff --git a/src/screens/PostThread/components/ThreadItemPost.tsx b/src/screens/PostThread/components/ThreadItemPost.tsx
--- a/src/screens/PostThread/components/ThreadItemPost.tsx
+++ b/src/screens/PostThread/components/ThreadItemPost.tsx
@@ -6,13 +6,11 @@
AtUri,
RichText as RichTextAPI,
} from '@atproto/api'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
+import {Trans} from '@lingui/macro'
import {useActorStatus} from '#/lib/actor-status'
import {MAX_POST_LINES} from '#/lib/constants'
import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
-import {usePalette} from '#/lib/hooks/usePalette'
import {makeProfileLink} from '#/lib/routes/links'
import {countLines} from '#/lib/strings/helpers'
import {
@@ -24,7 +22,6 @@
import {useSession} from '#/state/session'
import {type OnPostSuccessData} from '#/state/shell/composer'
import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
-import {TextLink} from '#/view/com/util/Link'
import {PostMeta} from '#/view/com/util/PostMeta'
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
import {
@@ -40,6 +37,7 @@
import {PostHider} from '#/components/moderation/PostHider'
import {type AppModerationCause} from '#/components/Pills'
import {Embed, PostEmbedViewContext} from '#/components/Post/Embed'
+import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton'
import {PostControls} from '#/components/PostControls'
import {RichText} from '#/components/RichText'
import * as Skele from '#/components/Skeleton'
@@ -187,8 +185,6 @@
postShadow: Shadow
}) {
const t = useTheme()
- const pal = usePalette('default')
- const {_} = useLingui()
const {openComposer} = useOpenComposer()
const {currentAccount} = useSession()
@@ -304,22 +300,22 @@
additionalCauses={additionalPostAlerts}
/>
{richText?.text ? (
-
- ) : undefined}
- {limitLines ? (
-
+ <>
+
+ {limitLines && (
+
+ )}
+ >
) : undefined}
{post.embed && (
diff --git a/src/screens/PostThread/components/ThreadItemTreePost.tsx b/src/screens/PostThread/components/ThreadItemTreePost.tsx
--- a/src/screens/PostThread/components/ThreadItemTreePost.tsx
+++ b/src/screens/PostThread/components/ThreadItemTreePost.tsx
@@ -1,4 +1,4 @@
-import React, {memo, useMemo} from 'react'
+import {memo, useCallback, useMemo, useState} from 'react'
import {View} from 'react-native'
import {
type AppBskyFeedDefs,
@@ -6,12 +6,10 @@
AtUri,
RichText as RichTextAPI,
} from '@atproto/api'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
+import {Trans} from '@lingui/macro'
import {MAX_POST_LINES} from '#/lib/constants'
import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
-import {usePalette} from '#/lib/hooks/usePalette'
import {makeProfileLink} from '#/lib/routes/links'
import {countLines} from '#/lib/strings/helpers'
import {
@@ -23,7 +21,6 @@
import {useSession} from '#/state/session'
import {type OnPostSuccessData} from '#/state/shell/composer'
import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
-import {TextLink} from '#/view/com/util/Link'
import {PostMeta} from '#/view/com/util/PostMeta'
import {
OUTER_SPACE,
@@ -39,6 +36,7 @@
import {PostHider} from '#/components/moderation/PostHider'
import {type AppModerationCause} from '#/components/Pills'
import {Embed, PostEmbedViewContext} from '#/components/Post/Embed'
+import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton'
import {PostControls} from '#/components/PostControls'
import {RichText} from '#/components/RichText'
import * as Skele from '#/components/Skeleton'
@@ -255,8 +253,6 @@
onPostSuccess?: (data: OnPostSuccessData) => void
threadgateRecord?: AppBskyFeedThreadgate.Record
}): React.ReactNode {
- const pal = usePalette('default')
- const {_} = useLingui()
const {openComposer} = useOpenComposer()
const {currentAccount} = useSession()
@@ -271,18 +267,18 @@
}),
[record],
)
- const [limitLines, setLimitLines] = React.useState(
+ const [limitLines, setLimitLines] = useState(
() => countLines(richText?.text) >= MAX_POST_LINES,
)
const threadRootUri = record.reply?.root?.uri || post.uri
- const postHref = React.useMemo(() => {
+ const postHref = useMemo(() => {
const urip = new AtUri(post.uri)
return makeProfileLink(post.author, 'post', urip.rkey)
}, [post.uri, post.author])
const threadgateHiddenReplies = useMergedThreadgateHiddenReplies({
threadgateRecord,
})
- const additionalPostAlerts: AppModerationCause[] = React.useMemo(() => {
+ const additionalPostAlerts: AppModerationCause[] = useMemo(() => {
const isPostHiddenByThreadgate = threadgateHiddenReplies.has(post.uri)
const isControlledByViewer =
new AtUri(threadRootUri).host === currentAccount?.did
@@ -297,7 +293,7 @@
: []
}, [post, currentAccount?.did, threadgateHiddenReplies, threadRootUri])
- const onPressReply = React.useCallback(() => {
+ const onPressReply = useCallback(() => {
openComposer({
replyTo: {
uri: post.uri,
@@ -311,7 +307,7 @@
})
}, [openComposer, post, record, onPostSuccess, moderation])
- const onPressShowMore = React.useCallback(() => {
+ const onPressShowMore = useCallback(() => {
setLimitLines(false)
}, [setLimitLines])
@@ -348,7 +344,7 @@
additionalCauses={additionalPostAlerts}
/>
{richText?.text ? (
-
+ <>
-
- ) : undefined}
- {limitLines ? (
-
+ {limitLines && (
+
+ )}
+ >
) : undefined}
{post.embed && (
diff --git a/src/screens/VideoFeed/components/Scrubber.tsx b/src/screens/VideoFeed/components/Scrubber.tsx
--- a/src/screens/VideoFeed/components/Scrubber.tsx
+++ b/src/screens/VideoFeed/components/Scrubber.tsx
@@ -3,13 +3,13 @@
import {
Gesture,
GestureDetector,
- NativeGesture,
+ type NativeGesture,
} from 'react-native-gesture-handler'
import Animated, {
interpolate,
runOnJS,
runOnUI,
- SharedValue,
+ type SharedValue,
useAnimatedReaction,
useAnimatedStyle,
useSharedValue,
@@ -20,7 +20,7 @@
useSafeAreaInsets,
} from 'react-native-safe-area-context'
import {useEventListener} from 'expo'
-import {VideoPlayer} from 'expo-video'
+import {type VideoPlayer} from 'expo-video'
import {tokens} from '#/alf'
import {atoms as a} from '#/alf'
diff --git a/src/view/com/notifications/NotificationFeedItem.tsx b/src/view/com/notifications/NotificationFeedItem.tsx
--- a/src/view/com/notifications/NotificationFeedItem.tsx
+++ b/src/view/com/notifications/NotificationFeedItem.tsx
@@ -30,6 +30,7 @@
import {useNavigation} from '@react-navigation/native'
import {useQueryClient} from '@tanstack/react-query'
+import {MAX_POST_LINES} from '#/lib/constants'
import {useAnimatedValue} from '#/lib/hooks/useAnimatedValue'
import {usePalette} from '#/lib/hooks/usePalette'
import {makeProfileLink} from '#/lib/routes/links'
@@ -918,7 +919,8 @@
{text?.length > 0 && (
+ style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}
+ numberOfLines={MAX_POST_LINES}>
{text}
)}
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -44,7 +44,7 @@
import {type PostSource} from '#/state/unstable-post-source'
import {PostThreadFollowBtn} from '#/view/com/post-thread/PostThreadFollowBtn'
import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
-import {Link, TextLink} from '#/view/com/util/Link'
+import {Link} from '#/view/com/util/Link'
import {formatCount} from '#/view/com/util/numeric/format'
import {PostMeta} from '#/view/com/util/PostMeta'
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
@@ -62,6 +62,7 @@
import {PostHider} from '#/components/moderation/PostHider'
import {type AppModerationCause} from '#/components/Pills'
import {Embed, PostEmbedViewContext} from '#/components/Post/Embed'
+import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton'
import {PostControls} from '#/components/PostControls'
import * as Prompt from '#/components/Prompt'
import {RichText} from '#/components/RichText'
@@ -685,15 +686,13 @@
authorHandle={post.author.handle}
shouldProxyLinks={true}
/>
+ {limitLines && (
+
+ )}
- ) : undefined}
- {limitLines ? (
-
) : undefined}
{post.embed && (
diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx
--- a/src/view/com/post/Post.tsx
+++ b/src/view/com/post/Post.tsx
@@ -1,4 +1,4 @@
-import React, {useMemo, useState} from 'react'
+import {useCallback, useMemo, useState} from 'react'
import {type StyleProp, StyleSheet, View, type ViewStyle} from 'react-native'
import {
type AppBskyFeedDefs,
@@ -9,8 +9,7 @@
RichText as RichTextAPI,
} from '@atproto/api'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
+import {Trans} from '@lingui/macro'
import {useQueryClient} from '@tanstack/react-query'
import {MAX_POST_LINES} from '#/lib/constants'
@@ -27,7 +26,7 @@
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {precacheProfile} from '#/state/queries/profile'
import {useSession} from '#/state/session'
-import {Link, TextLink} from '#/view/com/util/Link'
+import {Link} from '#/view/com/util/Link'
import {PostMeta} from '#/view/com/util/PostMeta'
import {Text} from '#/view/com/util/text/Text'
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
@@ -37,6 +36,7 @@
import {LabelsOnMyPost} from '#/components/moderation/LabelsOnMe'
import {PostAlerts} from '#/components/moderation/PostAlerts'
import {Embed, PostEmbedViewContext} from '#/components/Post/Embed'
+import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton'
import {PostControls} from '#/components/PostControls'
import {ProfileHoverCard} from '#/components/ProfileHoverCard'
import {RichText} from '#/components/RichText'
@@ -115,7 +115,6 @@
}) {
const queryClient = useQueryClient()
const pal = usePalette('default')
- const {_} = useLingui()
const {openComposer} = useOpenComposer()
const [limitLines, setLimitLines] = useState(
() => countLines(richText?.text) >= MAX_POST_LINES,
@@ -128,7 +127,7 @@
replyAuthorDid = urip.hostname
}
- const onPressReply = React.useCallback(() => {
+ const onPressReply = useCallback(() => {
openComposer({
replyTo: {
uri: post.uri,
@@ -141,18 +140,18 @@
})
}, [openComposer, post, record, moderation])
- const onPressShowMore = React.useCallback(() => {
+ const onPressShowMore = useCallback(() => {
setLimitLines(false)
}, [setLimitLines])
- const onBeforePress = React.useCallback(() => {
+ const onBeforePress = useCallback(() => {
precacheProfile(queryClient, post.author)
}, [queryClient, post.author])
const {currentAccount} = useSession()
const isMe = replyAuthorDid === currentAccount?.did
- const [hover, setHover] = React.useState(false)
+ const [hover, setHover] = useState(false)
return (
{richText.text ? (
-
+
+ {limitLines && (
+
+ )}
- ) : undefined}
- {limitLines ? (
-
) : undefined}
{post.embed ? (