diff --git a/apps/mobile/package.json b/apps/mobile/package.json index c94d1e9f14..1e15ba13a2 100644 --- a/apps/mobile/package.json +++ b/apps/mobile/package.json @@ -36,6 +36,7 @@ "expo-device": "~5.9.3", "expo-file-system": "~16.0.8", "expo-font": "~11.10.3", + "expo-linear-gradient": "^12.7.2", "expo-linking": "~6.2.2", "expo-notifications": "~0.27.6", "expo-secure-store": "~12.8.1", diff --git a/apps/mobile/src/components/Feed/Posts/PostListCaption.tsx b/apps/mobile/src/components/Feed/Posts/PostListCaption.tsx index fbddf4292b..dead4b2c96 100644 --- a/apps/mobile/src/components/Feed/Posts/PostListCaption.tsx +++ b/apps/mobile/src/components/Feed/Posts/PostListCaption.tsx @@ -1,7 +1,10 @@ -import { useMemo } from 'react'; -import { View } from 'react-native'; +import { LinearGradient } from 'expo-linear-gradient'; +import { useCallback, useMemo } from 'react'; +import React, { useState } from 'react'; +import { NativeSyntheticEvent, StyleSheet, TextLayoutEventData, View } from 'react-native'; import { graphql, useFragment } from 'react-relay'; +import { GalleryTouchableOpacity } from '~/components/GalleryTouchableOpacity'; import ProcessedText from '~/components/ProcessedText/ProcessedText'; import { PostListCaptionFragment$key } from '~/generated/PostListCaptionFragment.graphql'; import { removeNullValues } from '~/shared/relay/removeNullValues'; @@ -12,6 +15,13 @@ type Props = { }; export function PostListCaption({ feedPostRef }: Props) { + const [isExpanded, setIsExpanded] = useState(false); + const [textHeight, setTextHeight] = useState(0); + + const toggleExpanded = () => { + setIsExpanded((prev) => !prev); + }; + const feedPost = useFragment( graphql` fragment PostListCaptionFragment on Post { @@ -30,9 +40,56 @@ export function PostListCaption({ feedPostRef }: Props) { const nonNullMentions = useMemo(() => removeNullValues(feedPost.mentions), [feedPost.mentions]); + const handleTextLayout = useCallback((e: NativeSyntheticEvent) => { + const { lines } = e.nativeEvent; + if (lines.length >= 4) { + setTextHeight(e.nativeEvent.lines[3]?.height || 0); + } else { + setTextHeight(0); + } + }, []); + + const shouldShowGradient = textHeight > 0 && !isExpanded; + return ( - - - + + + + {shouldShowGradient ? ( + + ) : null} + + ); } + +const styles = StyleSheet.create({ + text: { + fontSize: 14, + lineHeight: 18, + }, + linearGradientContainer: { + position: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: 0, + }, +}); diff --git a/yarn.lock b/yarn.lock index 331f9595a3..c1d202b23e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17773,6 +17773,15 @@ __metadata: languageName: node linkType: hard +"expo-linear-gradient@npm:^12.7.2": + version: 12.7.2 + resolution: "expo-linear-gradient@npm:12.7.2" + peerDependencies: + expo: "*" + checksum: afe4daf423dcaa02900a1252eb670a75089b9c9837bff2bd7f76199b7ad76f4b48efadaeec773b4d328456d9e8e3d56f68f9f665312681e1537adadbd97b54ff + languageName: node + linkType: hard + "expo-linking@npm:~6.2.2": version: 6.2.2 resolution: "expo-linking@npm:6.2.2" @@ -24651,6 +24660,7 @@ __metadata: expo-device: ~5.9.3 expo-file-system: ~16.0.8 expo-font: ~11.10.3 + expo-linear-gradient: ^12.7.2 expo-linking: ~6.2.2 expo-notifications: ~0.27.6 expo-secure-store: ~12.8.1