diff --git a/README.md b/README.md index 7e85e91..d2212ea 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,9 @@ Finally, it is recommended to wrap those components into PureComponent because s ### Instagram +**WARNING** as of summer 2020, Instagram has added a firewall to prevent scripts to access its unofficial API. +It's planned in the migrate and use the official Instagram API. + | Light | Dark | | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | | | | @@ -61,16 +64,17 @@ Unlike Instagram, the **Twitter API is not open**. It is needed that you registe Props: -| Name | Type | Default | Description | -| --------------------- | ---------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| id | string | **Required** | Twitter post id | -| consumerKey | string | **Required** | OAuth 1.0 Twitter key that is granted when you [register your app on Twitter Portal](https://developer.twitter.com/en/docs/basics/authentication/oauth-1-0a) | -| consumerSecret | string | **Required** | OAuth 1.0 Twitter secret that is granted when you [register your app on Twitter Portal](https://developer.twitter.com/en/docs/basics/authentication/oauth-1-0a) | -| darkMode | bool | false | Toggle dark mode | -| language | string enum | "en" | Pick language for metadata of the post | -| onHashTagPress | (hashtag:string) => void | Redirect to webpage | Overrides default behavior when pressing an hashtag in a Tweet | -| onUserMentionPress | (userMention:string) => void | Redirect to webpage | Overrides default behavior when pressing a user mention in a Tweet | -| 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 | +| Name | Type | Default | Description | +| -------------------------- | ---------------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| id | string | **Required** | Twitter post id | +| consumerKey | string | **Required** | OAuth 1.0 Twitter key that is granted when you [register your app on Twitter Portal](https://developer.twitter.com/en/docs/basics/authentication/oauth-1-0a) | +| consumerSecret | string | **Required** | OAuth 1.0 Twitter secret that is granted when you [register your app on Twitter Portal](https://developer.twitter.com/en/docs/basics/authentication/oauth-1-0a) | +| darkMode | bool | false | Toggle dark mode | +| language | string enum | "en" | Pick language for metadata of the post | +| onHashTagPress | (hashtag:string) => void | Redirect to webpage | Overrides default behavior when pressing an hashtag in a Tweet | +| onUserMentionPress | (userMention:string) => void | Redirect to webpage | Overrides default behavior when pressing a user mention in a Tweet | +| 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 | +| useCustomTweetExtendedData | Object | null | Use this prop when you have already fetched the Twitter data in the app, and you want to call the component with the Twitter data as prop that you already have fetched. This object needs to be **exactly** the response of the call to the Twitter API with the **?tweet_mode=extended** parameter, like: https://api.twitter.com/1.1/statuses/show/1265128375707983872.json?tweet_mode=extended | diff --git a/example/App.tsx b/example/App.tsx index 08e20aa..c75621c 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -10,15 +10,360 @@ import React from 'react'; import {SafeAreaView, ScrollView, StatusBar, View} from 'react-native'; +// @ts-ignore import {Instagram, Twitter} from 'react-native-socials'; + +// pass your custom twitter credentials in this file for developement purpose import {credentials} from './config'; -const AuthTwitter = (props) => { +const AuthTwitter = (props: any) => { return ( Twitter Web App', + in_reply_to_status_id: null, + in_reply_to_status_id_str: null, + in_reply_to_user_id: null, + in_reply_to_user_id_str: null, + in_reply_to_screen_name: null, + user: { + id: 803599579090448388, + id_str: '803599579090448388', + name: 'Hashim of Swords ⚔️', + screen_name: 'hashim_warren', + location: 'Greensboro, NC', + description: + '@GatsbyJS Product Marketer\n \nSubscribe to ⚒ https://t.co/6wFSeGwvVU\n\n#JAMstack #LowCode #ConfigMag', + url: 'https://t.co/RpbefIGgw6', + entities: { + url: { + urls: [ + { + url: 'https://t.co/RpbefIGgw6', + expanded_url: 'https://www.configmag.com/', + display_url: 'configmag.com', + indices: [0, 23], + }, + ], + }, + description: { + urls: [ + { + url: 'https://t.co/6wFSeGwvVU', + expanded_url: 'http://configmag.com', + display_url: 'configmag.com', + indices: [44, 67], + }, + ], + }, + }, + protected: false, + followers_count: 2434, + friends_count: 1798, + listed_count: 54, + created_at: 'Tue Nov 29 14:00:44 +0000 2016', + favourites_count: 8426, + utc_offset: null, + time_zone: null, + geo_enabled: true, + verified: false, + statuses_count: 8516, + lang: null, + contributors_enabled: false, + is_translator: false, + is_translation_enabled: false, + profile_background_color: 'F5F8FA', + profile_background_image_url: null, + profile_background_image_url_https: null, + profile_background_tile: false, + profile_image_url: + 'http://pbs.twimg.com/profile_images/1290714682857345025/2EZu5asr_normal.jpg', + profile_image_url_https: + 'https://pbs.twimg.com/profile_images/1290714682857345025/2EZu5asr_normal.jpg', + profile_banner_url: + 'https://pbs.twimg.com/profile_banners/803599579090448388/1541399352', + profile_link_color: '1DA1F2', + profile_sidebar_border_color: 'C0DEED', + profile_sidebar_fill_color: 'DDEEF6', + profile_text_color: '333333', + profile_use_background_image: true, + has_extended_profile: false, + default_profile: true, + default_profile_image: false, + following: null, + follow_request_sent: null, + notifications: null, + translator_type: 'none', + }, + geo: null, + coordinates: null, + place: null, + contributors: null, + is_quote_status: true, + quoted_status_id: 1264990757145829379, + quoted_status_id_str: '1264990757145829379', + quoted_status_permalink: { + url: 'https://t.co/5DFggGfmI3', + expanded: + 'https://twitter.com/kylemathews/status/1264990757145829379', + display: 'twitter.com/kylemathews/st…', + }, + quoted_status: { + created_at: 'Mon May 25 18:44:33 +0000 2020', + id: 1264990757145829379, + id_str: '1264990757145829379', + full_text: + "Two fun recent @gatsbyjs milestones\n\n- 200k GitHub repos using Gatsby\n- 2000 plugins\n\nAnd it still feels like we're just getting started! https://t.co/yV84nc51qS", + truncated: false, + display_text_range: [0, 137], + entities: { + hashtags: [], + symbols: [], + user_mentions: [ + { + screen_name: 'GatsbyJS', + name: 'Gatsby', + id: 3227338044, + id_str: '3227338044', + indices: [15, 24], + }, + ], + urls: [], + media: [ + { + id: 1264990744365772800, + id_str: '1264990744365772800', + indices: [138, 161], + media_url: 'http://pbs.twimg.com/media/EY4mYToUMAA8Ffw.png', + media_url_https: + 'https://pbs.twimg.com/media/EY4mYToUMAA8Ffw.png', + url: 'https://t.co/yV84nc51qS', + display_url: 'pic.twitter.com/yV84nc51qS', + expanded_url: + 'https://twitter.com/kylemathews/status/1264990757145829379/photo/1', + type: 'photo', + sizes: { + large: { + w: 810, + h: 866, + resize: 'fit', + }, + medium: { + w: 810, + h: 866, + resize: 'fit', + }, + thumb: { + w: 150, + h: 150, + resize: 'crop', + }, + small: { + w: 636, + h: 680, + resize: 'fit', + }, + }, + }, + ], + }, + extended_entities: { + media: [ + { + id: 1264990744365772800, + id_str: '1264990744365772800', + indices: [138, 161], + media_url: 'http://pbs.twimg.com/media/EY4mYToUMAA8Ffw.png', + media_url_https: + 'https://pbs.twimg.com/media/EY4mYToUMAA8Ffw.png', + url: 'https://t.co/yV84nc51qS', + display_url: 'pic.twitter.com/yV84nc51qS', + expanded_url: + 'https://twitter.com/kylemathews/status/1264990757145829379/photo/1', + type: 'photo', + sizes: { + large: { + w: 810, + h: 866, + resize: 'fit', + }, + medium: { + w: 810, + h: 866, + resize: 'fit', + }, + thumb: { + w: 150, + h: 150, + resize: 'crop', + }, + small: { + w: 636, + h: 680, + resize: 'fit', + }, + }, + }, + { + id: 1264990744365785098, + id_str: '1264990744365785098', + indices: [138, 161], + media_url: 'http://pbs.twimg.com/media/EY4mYToUYAo28sf.jpg', + media_url_https: + 'https://pbs.twimg.com/media/EY4mYToUYAo28sf.jpg', + url: 'https://t.co/yV84nc51qS', + display_url: 'pic.twitter.com/yV84nc51qS', + expanded_url: + 'https://twitter.com/kylemathews/status/1264990757145829379/photo/1', + type: 'photo', + sizes: { + small: { + w: 680, + h: 83, + resize: 'fit', + }, + medium: { + w: 1200, + h: 146, + resize: 'fit', + }, + thumb: { + w: 146, + h: 146, + resize: 'crop', + }, + large: { + w: 1202, + h: 146, + resize: 'fit', + }, + }, + }, + ], + }, + source: + 'Twitter Web App', + in_reply_to_status_id: null, + in_reply_to_status_id_str: null, + in_reply_to_user_id: null, + in_reply_to_user_id_str: null, + in_reply_to_screen_name: null, + user: { + id: 10907062, + id_str: '10907062', + name: 'Kyle Mathews', + screen_name: 'kylemathews', + location: 'San Francisco, California', + description: + 'Tech entrepreneur hanging out in Silicon Valley. Founder @gatsbyjs. Married to @shannonb_ux.', + url: 'https://t.co/0LC3lbfOcE', + entities: { + url: { + urls: [ + { + url: 'https://t.co/0LC3lbfOcE', + expanded_url: 'https://www.bricolage.io', + display_url: 'bricolage.io', + indices: [0, 23], + }, + ], + }, + description: { + urls: [], + }, + }, + protected: false, + followers_count: 22827, + friends_count: 1983, + listed_count: 655, + created_at: 'Thu Dec 06 16:12:40 +0000 2007', + favourites_count: 75175, + utc_offset: null, + time_zone: null, + geo_enabled: true, + verified: false, + statuses_count: 40092, + lang: null, + contributors_enabled: false, + is_translator: false, + is_translation_enabled: false, + profile_background_color: '000000', + profile_background_image_url: + 'http://abs.twimg.com/images/themes/theme5/bg.gif', + profile_background_image_url_https: + 'https://abs.twimg.com/images/themes/theme5/bg.gif', + profile_background_tile: false, + profile_image_url: + 'http://pbs.twimg.com/profile_images/1201364751843905536/Q1XVVkab_normal.jpg', + profile_image_url_https: + 'https://pbs.twimg.com/profile_images/1201364751843905536/Q1XVVkab_normal.jpg', + profile_link_color: '3B94D9', + profile_sidebar_border_color: '000000', + profile_sidebar_fill_color: '000000', + profile_text_color: '000000', + profile_use_background_image: false, + has_extended_profile: false, + default_profile: false, + default_profile_image: false, + following: null, + follow_request_sent: null, + notifications: null, + translator_type: 'none', + }, + geo: null, + coordinates: null, + place: null, + contributors: null, + is_quote_status: false, + retweet_count: 18, + favorite_count: 196, + favorited: false, + retweeted: false, + possibly_sensitive: false, + possibly_sensitive_appealable: false, + lang: 'en', + }, + retweet_count: 1, + favorite_count: 7, + favorited: false, + retweeted: false, + possibly_sensitive: false, + possibly_sensitive_appealable: false, + lang: 'en', + }} /> ); }; @@ -37,7 +382,7 @@ const App = () => { shadowOpacity: 0.25, borderRadius: 4, }}> - + {/* */} diff --git a/example/config.js b/example/config.js new file mode 100644 index 0000000..cf8a0ec --- /dev/null +++ b/example/config.js @@ -0,0 +1,4 @@ +export const credentials = { + consumerKey: '', + consumerSecret: '', +}; diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index 5089577..568ec15 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -448,4 +448,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: a52de829a37f999f30e05cdcfceda802cd83620c -COCOAPODS: 1.8.4 +COCOAPODS: 1.9.3 diff --git a/example/tsconfig.json b/example/tsconfig.json index 2edf373..82d78cf 100644 --- a/example/tsconfig.json +++ b/example/tsconfig.json @@ -6,6 +6,7 @@ "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ "lib": ["es6"], /* Specify library files to be included in the compilation. */ "allowJs": true, /* Allow javascript files to be compiled. */ + "skipLibCheck": true, // "checkJs": true, /* Report errors in .js files. */ "jsx": "react-native", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ // "declaration": true, /* Generates corresponding '.d.ts' file. */ diff --git a/src/Twitter/index.tsx b/src/Twitter/index.tsx index 038a87c..6b45473 100644 --- a/src/Twitter/index.tsx +++ b/src/Twitter/index.tsx @@ -8,7 +8,7 @@ import { TouchableWithoutFeedback, Linking, } from "react-native"; -import { getPostData, ITwitterPost } from "./api"; +import { getPostData, ITwitterPost, adapter } from "./api"; import { parse, format } from "date-fns"; import { Header, HeaderQuote } from "./Header"; import { formatLikeNumber, getFormattedTimeByLanguage } from "./utils"; @@ -31,6 +31,7 @@ interface PropsType { darkMode?: boolean; containerBorderRadius: number; onTweetPress: (tweetId: string) => any; + useCustomTweetExtendedData?: any; } export const Twitter = (props: PropsType) => { @@ -46,13 +47,18 @@ export const Twitter = (props: PropsType) => { darkMode, containerBorderRadius, onTweetPress, + useCustomTweetExtendedData, } = props; const appearance = darkMode ? "dark" : "light"; const [data, setData] = React.useState(null); React.useEffect(() => { - getPostData(id, consumerKey, consumerSecret).then((response) => { - setData(response); - }); + if (!useCustomTweetExtendedData) { + getPostData(id, consumerKey, consumerSecret).then((response) => { + setData(response); + }); + } else { + setData(adapter(useCustomTweetExtendedData)); + } }, [setData]); if (!data) { return null;