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?.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) => {