fix: miscellaneous

PierreCapo · Apr 28, 2020 · 8933315 · 8933315
1 parent c9624c5
commit 8933315
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 106 deletions.
diff --git 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
@@ -27,14 +27,42 @@ const App = () => {
   return (
     <View style={{width: '100%', height: '100%'}}>
       <SafeAreaView />
-      <ScrollView>
-        <AuthTwitter id={'1251870993628434433'} language={'en'} />
-        <AuthTwitter id={'1253446059965190147'} language={'es'} />
-        <AuthTwitter id={'1251918969042358272'} language={'de'} />
-        <AuthTwitter id={'1251918969042358272'} language={'ru'} />
+      <ScrollView
+        contentContainerStyle={{backgroundColor: 'white', padding: 16}}>
+        <View style={{paddingVertical: 16}}>
+          <View
+            style={{
+              shadowColor: 'black',
+              shadowOffset: {width: 0, height: 0},
+              shadowOpacity: 0.25,
+              borderRadius: 4,
+            }}>
+            <Instagram id={'Bwjpxgph9DE'} containerBorderRadius={4} />
+          </View>
+        </View>
+        <View style={{paddingVertical: 16}}>
+          <View
+            style={{
+              shadowColor: 'black',
+              shadowOffset: {width: 0, height: 0},
+              shadowOpacity: 0.25,
+              borderRadius: 12,
+              elevation: 2,
+            }}>
+            <AuthTwitter
+              id={'1255068185935720450'}
+              language={'en'}
+              containerBorderRadius={12}
+              onTweetPress={() => null}
+            />
+          </View>
+        </View>
       </ScrollView>
+      <SafeAreaView />
     </View>
   );
 };
-
+// 1000813977318944768
+// 930561247191470082
+// 1000844277847601152
 export default App;
diff --git 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
@@ -33,16 +33,19 @@ export const Header = (props: PropsType) => {
         <View
           style={{
             flexDirection: "row",
+
             alignItems: "center",
             flex: 1,
           }}
         >
-          <Text style={styles.displayNameText}>{posterDisplayName}</Text>
+          <Text style={styles.displayNameText} numberOfLines={1}>
+            {posterDisplayName}
+          </Text>
           <View
             style={{
-              flex: 1,
               flexDirection: "row",
               alignItems: "center",
+              flexGrow: 1,
               justifyContent: "space-between",
             }}
           >
@@ -59,6 +62,7 @@ export const Header = (props: PropsType) => {
             ) : (
               <View />
             )}
+            <View style={{ minWidth: 8 }} />
             <Image
               source={require("./assets/logo.png")}
               style={{
@@ -94,7 +98,11 @@ export const HeaderQuote = (props: HeaderQuotePropsType) => {
   const styles = evaluateTheme(appearanceTheme);
   return (
     <View
-      style={{ flexDirection: "row", alignItems: "center", marginBottom: 4 }}
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        marginBottom: 4,
+      }}
     >
       <Image
         source={{
@@ -139,6 +147,7 @@ const evaluateTheme = (appearance: "dark" | "light") => {
       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
@@ -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
@@ -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<ITwitterPost | null>(null);
@@ -50,111 +60,115 @@ export const Twitter = (props: PropsType) => {
   const styles = evaluateTheme(appearance);
 
   return (
-    <View style={styles.container(containerBorderRadius)}>
-      {data ? (
-        <>
-          <Header
-            posterImageUrl={data.posterImageUrl}
-            posterDisplayName={data.posterDisplayName}
-            posterUniqueName={data.posterUniqueName}
-            isPosterVerified={data.isPosterVerified}
-            appearanceTheme={appearance}
-          />
-          <View style={styles.headerSeparator} />
-          <View>
-            <TwitterText
-              styles={styles.mainContentText}
-              urls={data.urlList}
-              hashtags={data.hashtagList}
-              userMentions={data.userMentionList}
-              quoteUrlId={data.quoteUrlId}
+    <TouchableWithoutFeedback onPress={() => onTweetPress(id)}>
+      <View style={styles.container(containerBorderRadius)}>
+        {data ? (
+          <>
+            <Header
+              posterImageUrl={data.posterImageUrl}
+              posterDisplayName={data.posterDisplayName}
+              posterUniqueName={data.posterUniqueName}
+              isPosterVerified={data.isPosterVerified}
               appearanceTheme={appearance}
-            >
-              {data.textContent}
-            </TwitterText>
-          </View>
-          {data?.media?.[0]?.type === "video" ? (
-            <View style={styles.embedContainer(cornerRadius)}>
-              <TwitterVideo
-                source={data.media[0].url}
-                aspectRatio={data.media[0].aspectRatio}
-                poster={data.media[0].posterUrl}
-              />
-            </View>
-          ) : data?.media?.[0]?.type === "photo" ? (
-            <View style={styles.embedContainer(cornerRadius)}>
-              <ImageGallery medias={data.media} />
-            </View>
-          ) : data?.urlList?.[0] && !data?.isQuote ? (
-            <View style={styles.embedContainer(cornerRadius)}>
-              <LinkPreview
-                url={data?.urlList?.[0]?.expanded_url}
-                onLinkPress={onLinkPress}
+            />
+            <View style={styles.headerSeparator} />
+            <View>
+              <TwitterText
+                styles={styles.mainContentText}
+                urls={data.urlList}
+                hashtags={data.hashtagList}
+                userMentions={data.userMentionList}
+                quoteUrlId={data.quoteUrlId}
                 appearanceTheme={appearance}
-              />
+              >
+                {data.textContent}
+              </TwitterText>
             </View>
-          ) : null}
-          {data?.isQuote ? (
-            <View style={styles.embedContainer(cornerRadius)}>
-              <View style={{ margin: 10 }}>
-                <HeaderQuote
-                  isPosterVerified={data.quotedTweet.isPosterVerified}
-                  posterUniqueName={data.quotedTweet.posterUniqueName}
-                  posterImageUrl={data.quotedTweet.posterImageUrl}
-                  posterDisplayName={data.quotedTweet.posterDisplayName}
-                  appearanceTheme={appearance}
+            {data?.media?.[0]?.type === "video" ? (
+              <View style={styles.embedContainer(cornerRadius)}>
+                <TwitterVideo
+                  source={data.media[0].url}
+                  aspectRatio={data.media[0].aspectRatio}
+                  poster={data.media[0].posterUrl}
                 />
-                <TwitterText
-                  urls={data.quotedTweet.urlList}
-                  hashtags={data.quotedTweet.hashtagList}
-                  userMentions={data.quotedTweet.userMentionList}
-                  quoteUrlId={data.quotedTweet.quoteUrlId}
-                  {...{ onHashTagPress, onLinkPress, onUserMentionPress }}
-                  styles={styles.quotedContentText}
-                  appearanceTheme={appearance}
-                >
-                  {data.quotedTweet.textContent}
-                </TwitterText>
               </View>
-              {data?.quotedTweet?.media?.[0]?.type === "video" ? (
-                <TwitterVideo
-                  source={data.quotedTweet.media[0].url}
-                  aspectRatio={data.quotedTweet.media[0].aspectRatio}
-                  poster={data.quotedTweet.media[0].posterUrl}
+            ) : data?.media?.[0]?.type === "photo" ? (
+              <View style={styles.embedContainer(cornerRadius)}>
+                <ImageGallery medias={data.media} />
+              </View>
+            ) : data?.urlList?.[0] && !data?.isQuote ? (
+              <View style={styles.embedContainer(cornerRadius)}>
+                <LinkPreview
+                  url={data?.urlList?.[0]?.expanded_url}
+                  onLinkPress={onLinkPress}
+                  appearanceTheme={appearance}
                 />
-              ) : data?.quotedTweet?.media?.[0]?.type === "photo" ? (
-                <ImageGallery medias={data?.quotedTweet?.media} />
-              ) : null}
+              </View>
+            ) : null}
+            {data?.isQuote ? (
+              <View style={styles.embedContainer(cornerRadius)}>
+                <View style={{ margin: 10 }}>
+                  <HeaderQuote
+                    isPosterVerified={data.quotedTweet.isPosterVerified}
+                    posterUniqueName={data.quotedTweet.posterUniqueName}
+                    posterImageUrl={data.quotedTweet.posterImageUrl}
+                    posterDisplayName={data.quotedTweet.posterDisplayName}
+                    appearanceTheme={appearance}
+                  />
+                  <TwitterText
+                    urls={data.quotedTweet.urlList}
+                    hashtags={data.quotedTweet.hashtagList}
+                    userMentions={data.quotedTweet.userMentionList}
+                    quoteUrlId={data.quotedTweet.quoteUrlId}
+                    {...{ onHashTagPress, onLinkPress, onUserMentionPress }}
+                    styles={styles.quotedContentText}
+                    appearanceTheme={appearance}
+                  >
+                    {data.quotedTweet.textContent}
+                  </TwitterText>
+                </View>
+                {data?.quotedTweet?.media?.[0]?.type === "video" ? (
+                  <TwitterVideo
+                    source={data.quotedTweet.media[0].url}
+                    aspectRatio={data.quotedTweet.media[0].aspectRatio}
+                    poster={data.quotedTweet.media[0].posterUrl}
+                  />
+                ) : data?.quotedTweet?.media?.[0]?.type === "photo" ? (
+                  <ImageGallery medias={data?.quotedTweet?.media} />
+                ) : null}
+              </View>
+            ) : null}
+            <View style={styles.metadataRowContainer}>
+              <Image
+                source={require("./assets/heart.png")}
+                style={styles.heart}
+              />
+              <Text style={styles.metadataRowText}>
+                {formatLikeNumber(data?.likeNumber) +
+                  "    " +
+                  format(
+                    parse(
+                      data?.createdAt,
+                      "EEE MMM dd HH:mm:ss xx yyyy",
+                      new Date()
+                    ),
+                    getFormattedTimeByLanguage(language).format,
+                    { locale: getFormattedTimeByLanguage(language).locale }
+                  )}
+              </Text>
             </View>
-          ) : null}
-          <View style={styles.metadataRowContainer}>
-            <Image
-              source={require("./assets/heart.png")}
-              style={styles.heart}
-            />
-            <Text style={styles.metadataRowText}>
-              {formatLikeNumber(data?.likeNumber) +
-                "    " +
-                format(
-                  parse(
-                    data?.createdAt,
-                    "EEE MMM dd HH:mm:ss xx yyyy",
-                    new Date()
-                  ),
-                  getFormattedTimeByLanguage(language).format,
-                  { locale: getFormattedTimeByLanguage(language).locale }
-                )}
-            </Text>
-          </View>
-        </>
-      ) : null}
-    </View>
+          </>
+        ) : null}
+      </View>
+    </TouchableWithoutFeedback>
   );
 };
 
 Twitter.defaultProps = {
   cornerRadius: "small",
   borderRadius: 0,
+  onTweetPress: (tweetId: string) =>
+    Linking.openURL("https://twitter.com/post/status/" + tweetId),
 };
 
 const evaluateTheme = (appearance: AppearanceTheme) => {