{"id":22489928,"url":"https://github.com/PierreCapo/react-native-socials","last_synced_at":"2025-08-02T22:31:46.266Z","repository":{"id":38905480,"uuid":"253358270","full_name":"PierreCapo/react-native-socials","owner":"PierreCapo","description":"Twitter, Instagram, (and more!) into your react-native app","archived":false,"fork":false,"pushed_at":"2023-01-26T19:13:12.000Z","size":6944,"stargazers_count":125,"open_issues_count":21,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-29T09:06:54.911Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PierreCapo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-06T00:14:45.000Z","updated_at":"2024-11-02T21:04:58.000Z","dependencies_parsed_at":"2023-02-05T04:16:13.000Z","dependency_job_id":null,"html_url":"https://github.com/PierreCapo/react-native-socials","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PierreCapo%2Freact-native-socials","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PierreCapo%2Freact-native-socials/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PierreCapo%2Freact-native-socials/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PierreCapo%2Freact-native-socials/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PierreCapo","download_url":"https://codeload.github.com/PierreCapo/react-native-socials/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228500562,"owners_count":17930088,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-06T17:21:12.700Z","updated_at":"2024-12-06T17:23:32.104Z","avatar_url":"https://github.com/PierreCapo.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React Native Socials\n\n\u003cp align=\"center\"\u003e\n\u003cimage src=\"https://github.com/PierreCapo/react-native-socials/raw/master/images/logo_twitter.png\" style=\"margin-right:20px;\" /\u003e\n\u003cimage src=\"https://github.com/PierreCapo/react-native-socials/raw/master/images/logo_instagram.png\" style=\"margin-right:30px;\"/\u003e\n\u003cimage src=\"https://github.com/PierreCapo/react-native-socials/raw/master/images/logo_rn.png\" style=\"margin-left:30px;\"/\u003e\n\u003c/p\u003e\n\u003cp/\u003e\n\u003cp align=\"center\"\u003eEmbedding posts from popular social networks in your react-native app.\u003c/p\u003e\n\n## Install\n\nThe library is still in version 0, be cautious when you upgrade it! 🚧\n\n```\nyarn add react-native-socials\n```\n\nIt is also needed to add `react-native-video` in your project because social components usually contains embeded videos. See [react-native-video](https://github.com/react-native-community/react-native-video) library for more information about the installation.\n\nFinally, it is recommended to wrap those components into PureComponent because some of them can be costly to rerender (videos for instance).\n\n### Instagram\n\n**WARNING** as of summer 2020, Instagram has added a firewall to prevent scripts to access its unofficial API.\nIt's planned in the migrate and use the official Instagram API.\n\n| Light | Dark |\n| ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |\n| \u003cimage src=\"https://github.com/PierreCapo/react-native-socials/raw/master/images/screenshot_instagram.png\" /\u003e | \u003cimage src=\"https://github.com/PierreCapo/react-native-socials/raw/master/images/screenshot_instagram_dark.png\" /\u003e |\n\n```JSX\nimport {Instagram} from \"react-native-socials\";\n\n\u003cInstagram id=\"B8U12TXAmK-\" \u003e\n```\n\nProps:\n\n| Name | Type | Default | Description |\n| --------------------- | ----------- | --------------------------------------------- | ------------------------------------------------ |\n| id | string | **Required** | Instagram post id |\n| darkMode | bool | false | Toggle dark mode |\n| language | string enum | \"en\" - \"de\" - \"fr\" - \"es\" - \"pt\" - \"it\" -\"ru\" | Pick language for metadata of the post |\n| containerBorderRadius | number | 0 | Border radius of the container of the UI element |\n\n### Twitter\n\n| Light | Dark |\n| ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |\n| \u003cimage src=\"https://github.com/PierreCapo/react-native-socials/raw/master/images/screenshot_twitter.jpg\" /\u003e | \u003cimage src=\"https://github.com/PierreCapo/react-native-socials/raw/master/images/screenshot_twitter_dark.jpg\" /\u003e |\n\n```JSX\nimport {Twitter} from \"react-native-socials\";\n\n\u003cTwitter\nconsumerKey=\"\"\nconsumerSecret=\"\"\nid=\"1251870993628434433\"\n\u003e\n```\n\nUnlike Instagram, the **Twitter API is not open**. It is needed that you register your app (free version) to the Twitter portal to be able to fetch Twitter posts.\n\nProps:\n\n| Name | Type | Default | Description |\n| -------------------------- | ---------------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| id | string | **Required** | Twitter post id |\n| 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) |\n| 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) |\n| darkMode | bool | false | Toggle dark mode |\n| language | string enum | \"en\" | Pick language for metadata of the post |\n| onHashTagPress | (hashtag:string) =\u003e void | Redirect to webpage | Overrides default behavior when pressing an hashtag in a Tweet |\n| onUserMentionPress | (userMention:string) =\u003e void | Redirect to webpage | Overrides default behavior when pressing a user mention in a Tweet |\n| onLinkPress | (link:string) =\u003e void | Redirect to webpage | Overrides default behavior when pressing a link in a Tweet |\n| 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 |\n| containerBorderRadius | number | 0 | Border radius of the container of the UI element |\n| onTweetPress | (tweetId:string) =\u003e void | Redirect to webpage | Overrides default behavior when pressing the tweet |\n| 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 |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPierreCapo%2Freact-native-socials","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPierreCapo%2Freact-native-socials","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPierreCapo%2Freact-native-socials/lists"}