{"id":4574,"url":"https://github.com/doefler/react-native-social-share","last_synced_at":"2025-08-04T01:32:41.053Z","repository":{"id":31047017,"uuid":"34605683","full_name":"doefler/react-native-social-share","owner":"doefler","description":"Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share","archived":false,"fork":false,"pushed_at":"2019-08-28T08:24:54.000Z","size":7865,"stargazers_count":417,"open_issues_count":22,"forks_count":76,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-07-09T07:04:36.975Z","etag":null,"topics":["facebook","popup","react","react-native","share-popups","twitter"],"latest_commit_sha":null,"homepage":"","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/doefler.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-26T09:31:27.000Z","updated_at":"2024-10-23T12:43:24.000Z","dependencies_parsed_at":"2022-08-26T04:31:25.236Z","dependency_job_id":null,"html_url":"https://github.com/doefler/react-native-social-share","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/doefler/react-native-social-share","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doefler%2Freact-native-social-share","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doefler%2Freact-native-social-share/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doefler%2Freact-native-social-share/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doefler%2Freact-native-social-share/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doefler","download_url":"https://codeload.github.com/doefler/react-native-social-share/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doefler%2Freact-native-social-share/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268636422,"owners_count":24282090,"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","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["facebook","popup","react","react-native","share-popups","twitter"],"created_at":"2024-01-05T20:17:16.688Z","updated_at":"2025-08-04T01:32:40.335Z","avatar_url":"https://github.com/doefler.png","language":"Objective-C","funding_links":[],"categories":["Components","\u003ca name=\"OS-\u0026-System-\u0026-File-Manager:-Native-Modules\"\u003eOS, System \u0026 File Manager: Native Modules\u003c/a\u003e","Uncategorized","React Native [🔝](#readme)"],"sub_categories":["System","Uncategorized"],"readme":"# React Native Social Share\n\nUse the built-in share view from iOS and Android to let the user share on Facebook and Twitter.\nIt will use the user's existing account without having to get new authorizations.\nYou can even preset text, image and link for the share view.\n\nIn other words a React Native wrapper for the `SLComposeViewController`\n\n__Support for Android__\n\n27 Feb 2017 - @minhtule has made improvements to sharing on Android \n\n10 Feb 2017 - @Jberlinsky has added support for Android\n\nLet me know how it works.\n\n\n\n![Animation](https://raw.githubusercontent.com/doefler/react-native-social-share/master/assets/animation-looping.gif)\n\n\n## Getting started\n\n1. `npm install react-native-social-share --save`\n2. `react-native link`\n3. In XCode, in the project navigator right click `Libraries` ➜ `Add Files to [your project's name]`\n4. Go to `node_modules` ➜ `react-native-social-share`➜ iOS and add `KDSocialShare.h` and `KDSocialShare.m` \n5. Go to your project's `Build Phases` ➜ `Link Binary With Libraries` phase\n6. Add `Social.framework` to ➜ `Link Binary With Libraries` build phase of your project (click the '+' and search for 'social').\n7. Add 'LSApplicationQueriesSchemes' key (Type: Array) with items (Type: String) 'fb' and 'twitter'  to `Info.plist` of your project \n8. Run your project (`Cmd+R`)\n\nNow you can implement the share popups in your react native code.\n\n## Example of implementation\n\nFirst you should make the native implementation available in the react code by inserting the following line in the top of the file\n``` JavaScript\nimport {\n  shareOnFacebook,\n  shareOnTwitter,\n} from 'react-native-social-share';\n```\nAfter doing that you will be able to popup the share views from your own functions. I made two examples below, one for Facebook and one for Twitter\n``` JavaScript\n  tweet : function() {\n\n    shareOnTwitter({\n        'text':'Global democratized marketplace for art',\n        'link':'https://artboost.com/',\n        'imagelink':'https://artboost.com/apple-touch-icon-144x144.png',\n        //or use image\n        'image': 'artboost-icon',\n      },\n      (results) =\u003e {\n        console.log(results);\n      }\n    );\n  },\n\n  facebookShare : function() {\n\n    shareOnFacebook({\n        'text':'Global democratized marketplace for art',\n        'link':'https://artboost.com/',\n        'imagelink':'https://artboost.com/apple-touch-icon-144x144.png',\n        //or use image\n        'image': 'artboost-icon',\n      },\n      (results) =\u003e {\n        console.log(results);\n      }\n    );\n  },\n```\n\nThe two implementations take the following parameters\n\n- `shareOnFacebook(options [object], callback [function])`\n- `shareOnTwitter(options [object], callback [function])`\n\n#### IMPORTANT Both the options object and the callback function needs to be set. The options object can be empty though if you do not want to preset any of the possible options.\n\n### Options\nThe options object lets you pre-populate the share view for the user. You can use the following parameters:\n\n| Parameter     | Desciption    |\n| ------------- | ------------- |\n| text      | Sets the initial text of the message on the SLComposeViewController instance.  |\n| imagelink      | Adds an image file from the given publicly available URL as attachments to the message.  |\n| image     | Adds an image file from the xcode image assets.  image takes priority over imagelink. Only one out of two will load.  |\n| link      | Adds a URL to the message. The method automatically handles the URL shortening.  |\n\n**At least the `text` or `link` parameter must be specified**\n\n### Special Case: Facebook on Android\n\nDue to [various known problems](http://stackoverflow.com/questions/23541823/how-to-share-text-and-image-on-facebook-using-intent) with Facebook's implementation of Android Intents, sharing with Facebook on Android can only be done in two ways:\n\n1. If the user has the Facebook application installed, and the `text` parameter is provided; or\n2. If the `link` parameter is provided.\n\nOnly one of the `link` or `text` parameter can be passed to the `shareWithFacebook` method on Android devices. Image parameters are ignored entirely.\n\nWe recommend using the [official Facebook SDK](https://developers.facebook.com/docs/sharing/android) to perform more complex sharing operations on Android.\n\n\n### Callback\nThe callback function runs when the native environment has information for the react environment. **Note that some callbacks are only available on iOS due to platform limitations**\n\n| Callback     | Desciption    | iOS | Android |\n| ------------- | ------------- | ----| ------- |\n| \"success\"      | Native call made by the viewController - SLComposeViewControllerResultDone – The user sent the composed message by touching the Send button. | Yes | No |\n| \"cancelled\"      | Native call made by the viewController - SLComposeViewControllerResultCancelled – The user cancelled the composition session by touching the Cancel button.  | Yes | No |\n| \"not_available\"      | The selected service eg. Facebook, is not available. This can be because the user has not signed in to Facebook on the device or maybe there is no internet access. | Yes | No (Android functionality falls back to web views) |\n| \"missing\\_link\\_or\\_text\"      | Neither the `link` nor `text` parameter was provided | Yes | Yes |\n\nYou can use these callbacks to present alerts to the user. For example tell the user to login to a certain service.\n\n\n## The full example code\n``` JavaScript\n'use strict';\n\nvar React = require('react-native');\nvar {\n  AppRegistry,\n  StyleSheet,\n  Text,\n  View,\n  TouchableHighlight,\n} = React;\n\nimport {\n  shareOnFacebook,\n  shareOnTwitter,\n} from 'react-native-social-share';\n\n\nvar ReactNativeSocialShare = React.createClass({\n\n  tweet : function() {\n\n    shareOnTwitter({\n        'text':'Global democratized marketplace for art',\n        'link':'https://artboost.com/',\n        'imagelink':'https://artboost.com/apple-touch-icon-144x144.png',\n        //or use image\n        'image': 'artboost-icon',\n      },\n      (results) =\u003e {\n        console.log(results);\n      }\n    );\n  },\n\n  facebookShare : function() {\n\n    shareOnFacebook({\n        'text':'Global democratized marketplace for art',\n        'link':'https://artboost.com/',\n        'imagelink':'https://artboost.com/apple-touch-icon-144x144.png',\n        //or use image\n        'image': 'artboost-icon',\n      },\n      (results) =\u003e {\n        console.log(results);\n      }\n    );\n  },\n\n\n  render: function() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cText style={styles.welcome}\u003e\n          Twitter and Facebook share\n        \u003c/Text\u003e\n\n        \u003cText style={styles.instructions}\u003e\n          Try tapping one of the buttons\n        \u003c/Text\u003e\n\n        \u003cView style={styles.seperator}/\u003e\n\n        \u003cTouchableHighlight onPress={this.tweet}\u003e\n          \u003cView style={{alignItems: 'center',justifyContent:'center', width: 150, height: 50,backgroundColor:'#00aced'}}\u003e\n           \u003cText style={{color:'#ffffff',fontWeight:'800',}}\u003eShare on Twitter\u003c/Text\u003e\n          \u003c/View\u003e\n        \u003c/TouchableHighlight\u003e\n\n        \u003cView style={styles.seperator}/\u003e\n\n        \u003cTouchableHighlight onPress={this.facebookShare}\u003e\n          \u003cView style={{alignItems: 'center',justifyContent:'center', width: 150, height: 50,backgroundColor:'#3b5998'}}\u003e\n           \u003cText style={{color:'#ffffff',fontWeight:'800',}}\u003eShare on Facebook\u003c/Text\u003e\n          \u003c/View\u003e\n        \u003c/TouchableHighlight\u003e\n      \u003c/View\u003e\n\n\n    );\n  }\n});\n\nvar styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#F5FCFF',\n  },\n  welcome: {\n    fontSize: 20,\n    textAlign: 'center',\n    margin: 10,\n  },\n  seperator:{\n    marginBottom: 20\n  }\n});\n\nAppRegistry.registerComponent('ReactNativeSocialShare', () =\u003e ReactNativeSocialShare);\n\n```\n\n## Done\n\n![Screenshot](https://raw.githubusercontent.com/doefler/react-native-social-share/master/assets/still.png)\n\n\n## Who is using it\n\n* [ec-deploy-mobile](https://github.com/artyomtrityak/ec-deploy-mobile) by [artyomtrityak](https://github.com/artyomtrityak)\n* [react-native-recipes-app](https://github.com/push23/react-native-recipes-app) by [push23](https://github.com/push23)\n* [drumpfgenerator-mobile](https://github.com/si74/drumpfgenerator-mobile) by [si74](https://github.com/si74)\n* [best_quotes_native_app](https://github.com/anamariasosam/best_quotes_native_app) by [anamariasosam](https://github.com/anamariasosam)\n* [Concert](https://github.com/aakashsigdel/Concert) by [aakashsigdel](https://github.com/aakashsigdel)\n* [Synerzip-HRMS-iOS](https://github.com/Synerzip/Synerzip-HRMS-iOS) by [Synerzip](https://github.com/Synerzip)\n* [slight-note](https://github.com/Roy9102/slight-note) by [Roy9102](https://github.com/Roy9102)\n* [Water](https://github.com/jvt/Water) by [jvt](https://github.com/jvt)\n* [smstet](https://github.com/phanthoa/smstet) by [phanthoa](https://github.com/phanthoa)\n* [PilotCalendarFinancial](https://github.com/kenvandemar/PilotCalendarFinancial) by [kenvandemar](https://github.com/kenvandemar)\n* [devine-v0-app](https://github.com/davidsims9t/devine-v0-app) by [davidsims9t](https://github.com/davidsims9t)\n* [rebus](https://github.com/michaelgena/rebus) by [michaelgena](https://github.com/michaelgena)\n* [NeedlApp](https://github.com/ghamaide/NeedlApp) by [ghamaide](https://github.com/ghamaide)\n* [randomSofar](https://github.com/conorcussell/randomSofar) by [conorcussell](https://github.com/conorcussell)\n* [react-native-create-caps](https://github.com/sozkahya/react-native-create-caps) by [sozkahya](https://github.com/sozkahya)\n* [DocLibs](https://github.com/IceNeoMax/DocLibs) by [IceNeoMax](https://github.com/IceNeoMax)\n* [rebby](https://github.com/michaelgena/rebby) by [michaelgena](https://github.com/michaelgena)\n* [PilotFinancialCalendarRedux](https://github.com/kenvandemar/PilotFinancialCalendarRedux) by [kenvandemar](https://github.com/kenvandemar)\n* [client-fashion-spotting-app](https://github.com/hmm29/client-fashion-spotting-app) by [hmm29](https://github.com/hmm29)\n\n\nYour contributions and suggestions are welcome.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoefler%2Freact-native-social-share","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoefler%2Freact-native-social-share","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoefler%2Freact-native-social-share/lists"}