diff --git a/README.md b/README.md index 68d79b6..7e85e91 100644 --- a/README.md +++ b/README.md @@ -73,3 +73,4 @@ Props: | onLinkPress | (link:string) => void | Redirect to webpage | Overrides default behavior when pressing a link in a Tweet | | cornerRadius | string enum | "small" | Chose the corner radius of UI elements in a post. Typically a post taking the whole width of the screen should have "big" whereas a post in a card should use the "small" value | | containerBorderRadius | number | 0 | Border radius of the container of the UI element | +| onTweetPress | (tweetId:string) => void | Redirect to webpage | Overrides default behavior when pressing the tweet | diff --git a/example/App.tsx b/example/App.tsx index a4f5901..08e20aa 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -27,14 +27,42 @@ const App = () => { return ( - - - - - + + + + + + + + + null} + /> + + + ); }; - +// 1000813977318944768 +// 930561247191470082 +// 1000844277847601152 export default App; diff --git a/package.json b/package.json index 72eca70..bc912e0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-socials", - "version": "0.0.19", + "version": "0.0.20", "description": "A react-native library which displays content from popular social networks", "main": "./dist/index.js", "types": "./dist/index.d.ts", diff --git a/src/Twitter/Header.tsx b/src/Twitter/Header.tsx index b0fb603..5ce129c 100644 --- a/src/Twitter/Header.tsx +++ b/src/Twitter/Header.tsx @@ -33,16 +33,19 @@ export const Header = (props: PropsType) => { - {posterDisplayName} + + {posterDisplayName} + @@ -59,6 +62,7 @@ export const Header = (props: PropsType) => { ) : ( )} + { const styles = evaluateTheme(appearanceTheme); return ( { color: colors.mainTextColor, fontSize: 16, fontWeight: "700", + flexShrink: 1, }, quotedDisplayNameText: { color: colors.mainTextColor, diff --git a/src/Twitter/api.ts b/src/Twitter/api.ts index 1fadd0f..67b115c 100644 --- a/src/Twitter/api.ts +++ b/src/Twitter/api.ts @@ -41,9 +41,9 @@ export const adapter = (data: TwitterPostApiResponse): ITwitterPost => { quotedTweet: data?.is_quote_status ? adapter(data?.quoted_status) : null, quoteUrlId: data?.quoted_status_id_str, media: data.extended_entities?.media?.map((element) => { - if (element?.type === "video") { + if (element?.type === "video" || element?.type === "animated_gif") { return { - type: element?.type, + type: "video", aspectRatio: element?.video_info?.aspect_ratio?.[0] / element?.video_info?.aspect_ratio?.[1], @@ -53,7 +53,7 @@ export const adapter = (data: TwitterPostApiResponse): ITwitterPost => { }; } if (element?.type === "photo") { - if (data.extended_entities?.media?.length === 11) { + if (data.extended_entities?.media?.length === 1) { return { type: element?.type, aspectRatio: element.sizes.thumb.w / element.sizes.thumb.h, diff --git a/src/Twitter/index.tsx b/src/Twitter/index.tsx index fcf4f12..038a87c 100644 --- a/src/Twitter/index.tsx +++ b/src/Twitter/index.tsx @@ -1,5 +1,13 @@ import React from "react"; -import { View, Image, StyleSheet, Text } from "react-native"; +import { + View, + Image, + StyleSheet, + Text, + TouchableOpacity, + TouchableWithoutFeedback, + Linking, +} from "react-native"; import { getPostData, ITwitterPost } from "./api"; import { parse, format } from "date-fns"; import { Header, HeaderQuote } from "./Header"; @@ -22,6 +30,7 @@ interface PropsType { cornerRadius?: "small" | "big"; darkMode?: boolean; containerBorderRadius: number; + onTweetPress: (tweetId: string) => any; } export const Twitter = (props: PropsType) => { @@ -36,6 +45,7 @@ export const Twitter = (props: PropsType) => { cornerRadius, darkMode, containerBorderRadius, + onTweetPress, } = props; const appearance = darkMode ? "dark" : "light"; const [data, setData] = React.useState(null); @@ -50,111 +60,115 @@ export const Twitter = (props: PropsType) => { const styles = evaluateTheme(appearance); return ( - - {data ? ( - <> -
- - - onTweetPress(id)}> + + {data ? ( + <> +
- {data.textContent} - - - {data?.media?.[0]?.type === "video" ? ( - - - - ) : data?.media?.[0]?.type === "photo" ? ( - - - - ) : data?.urlList?.[0] && !data?.isQuote ? ( - - + + + + > + {data.textContent} + - ) : null} - {data?.isQuote ? ( - - - + - - {data.quotedTweet.textContent} - - {data?.quotedTweet?.media?.[0]?.type === "video" ? ( - + + + ) : data?.urlList?.[0] && !data?.isQuote ? ( + + - ) : data?.quotedTweet?.media?.[0]?.type === "photo" ? ( - - ) : null} + + ) : null} + {data?.isQuote ? ( + + + + + {data.quotedTweet.textContent} + + + {data?.quotedTweet?.media?.[0]?.type === "video" ? ( + + ) : data?.quotedTweet?.media?.[0]?.type === "photo" ? ( + + ) : null} + + ) : null} + + + + {formatLikeNumber(data?.likeNumber) + + " " + + format( + parse( + data?.createdAt, + "EEE MMM dd HH:mm:ss xx yyyy", + new Date() + ), + getFormattedTimeByLanguage(language).format, + { locale: getFormattedTimeByLanguage(language).locale } + )} + - ) : null} - - - - {formatLikeNumber(data?.likeNumber) + - " " + - format( - parse( - data?.createdAt, - "EEE MMM dd HH:mm:ss xx yyyy", - new Date() - ), - getFormattedTimeByLanguage(language).format, - { locale: getFormattedTimeByLanguage(language).locale } - )} - - - - ) : null} - + + ) : null} + + ); }; Twitter.defaultProps = { cornerRadius: "small", borderRadius: 0, + onTweetPress: (tweetId: string) => + Linking.openURL("https://twitter.com/post/status/" + tweetId), }; const evaluateTheme = (appearance: AppearanceTheme) => {