Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter.

Overview

React Native Social Share

Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's existing account without having to get new authorizations. You can even preset text, image and link for the share view.

In other words a React Native wrapper for the SLComposeViewController

Support for Android

27 Feb 2017 - @minhtule has made improvements to sharing on Android

10 Feb 2017 - @Jberlinsky has added support for Android

Let me know how it works.

Animation

Getting started

  1. npm install react-native-social-share --save
  2. react-native link
  3. In XCode, in the project navigator right click LibrariesAdd Files to [your project's name]
  4. Go to node_modulesreact-native-social-share➜ iOS and add KDSocialShare.h and KDSocialShare.m
  5. Go to your project's Build PhasesLink Binary With Libraries phase
  6. Add Social.framework to ➜ Link Binary With Libraries build phase of your project (click the '+' and search for 'social').
  7. Add 'LSApplicationQueriesSchemes' key (Type: Array) with items (Type: String) 'fb' and 'twitter' to Info.plist of your project
  8. Run your project (Cmd+R)

Now you can implement the share popups in your react native code.

Example of implementation

First you should make the native implementation available in the react code by inserting the following line in the top of the file

import {
  shareOnFacebook,
  shareOnTwitter,
} from 'react-native-social-share';

After 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

  tweet : function() {

    shareOnTwitter({
        'text':'Global democratized marketplace for art',
        'link':'https://artboost.com/',
        'imagelink':'https://artboost.com/apple-touch-icon-144x144.png',
        //or use image
        'image': 'artboost-icon',
      },
      (results) => {
        console.log(results);
      }
    );
  },

  facebookShare : function() {

    shareOnFacebook({
        'text':'Global democratized marketplace for art',
        'link':'https://artboost.com/',
        'imagelink':'https://artboost.com/apple-touch-icon-144x144.png',
        //or use image
        'image': 'artboost-icon',
      },
      (results) => {
        console.log(results);
      }
    );
  },

The two implementations take the following parameters

  • shareOnFacebook(options [object], callback [function])
  • shareOnTwitter(options [object], callback [function])

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.

Options

The options object lets you pre-populate the share view for the user. You can use the following parameters:

Parameter Desciption
text Sets the initial text of the message on the SLComposeViewController instance.
imagelink Adds an image file from the given publicly available URL as attachments to the message.
image Adds an image file from the xcode image assets. image takes priority over imagelink. Only one out of two will load.
link Adds a URL to the message. The method automatically handles the URL shortening.

At least the text or link parameter must be specified

Special Case: Facebook on Android

Due to various known problems with Facebook's implementation of Android Intents, sharing with Facebook on Android can only be done in two ways:

  1. If the user has the Facebook application installed, and the text parameter is provided; or
  2. If the link parameter is provided.

Only one of the link or text parameter can be passed to the shareWithFacebook method on Android devices. Image parameters are ignored entirely.

We recommend using the official Facebook SDK to perform more complex sharing operations on Android.

Callback

The 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

Callback Desciption iOS Android
"success" Native call made by the viewController - SLComposeViewControllerResultDone – The user sent the composed message by touching the Send button. Yes No
"cancelled" Native call made by the viewController - SLComposeViewControllerResultCancelled – The user cancelled the composition session by touching the Cancel button. Yes No
"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)
"missing_link_or_text" Neither the link nor text parameter was provided Yes Yes

You can use these callbacks to present alerts to the user. For example tell the user to login to a certain service.

The full example code

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
} = React;

import {
  shareOnFacebook,
  shareOnTwitter,
} from 'react-native-social-share';


var ReactNativeSocialShare = React.createClass({

  tweet : function() {

    shareOnTwitter({
        'text':'Global democratized marketplace for art',
        'link':'https://artboost.com/',
        'imagelink':'https://artboost.com/apple-touch-icon-144x144.png',
        //or use image
        'image': 'artboost-icon',
      },
      (results) => {
        console.log(results);
      }
    );
  },

  facebookShare : function() {

    shareOnFacebook({
        'text':'Global democratized marketplace for art',
        'link':'https://artboost.com/',
        'imagelink':'https://artboost.com/apple-touch-icon-144x144.png',
        //or use image
        'image': 'artboost-icon',
      },
      (results) => {
        console.log(results);
      }
    );
  },


  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Twitter and Facebook share
        </Text>

        <Text style={styles.instructions}>
          Try tapping one of the buttons
        </Text>

        <View style={styles.seperator}/>

        <TouchableHighlight onPress={this.tweet}>
          <View style={{alignItems: 'center',justifyContent:'center', width: 150, height: 50,backgroundColor:'#00aced'}}>
           <Text style={{color:'#ffffff',fontWeight:'800',}}>Share on Twitter</Text>
          </View>
        </TouchableHighlight>

        <View style={styles.seperator}/>

        <TouchableHighlight onPress={this.facebookShare}>
          <View style={{alignItems: 'center',justifyContent:'center', width: 150, height: 50,backgroundColor:'#3b5998'}}>
           <Text style={{color:'#ffffff',fontWeight:'800',}}>Share on Facebook</Text>
          </View>
        </TouchableHighlight>
      </View>


    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  seperator:{
    marginBottom: 20
  }
});

AppRegistry.registerComponent('ReactNativeSocialShare', () => ReactNativeSocialShare);

Done

Screenshot

Who is using it

Your contributions and suggestions are welcome.

Comments
  • Android: The SDK Build Tools revision (23.0.1) is too low for project ':react-native-social-share'. Minimum required is 25.0.0

    Android: The SDK Build Tools revision (23.0.1) is too low for project ':react-native-social-share'. Minimum required is 25.0.0

    I am getting this error because of buildToolsVersion in this line: https://github.com/doefler/react-native-social-share/blob/master/android/build.gradle#L5

    FAILURE: Build failed with an exception.
    
    * What went wrong:
    A problem occurred configuring project ':app'.
    > Could not resolve all dependencies for configuration ':app:_debugApk'.
       > A problem occurred configuring project ':react-native-social-share'.
          > The SDK Build Tools revision (23.0.1) is too low for project ':react-native-social-share'. Minimum required is 25.0.0
    
    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
    
    BUILD FAILED
    
    Total time: 2.566 secs
    Could not install the app on the device, read the error above for details.
    Make sure you have an Android emulator running or a device connected and have
    set up your Android development environment:
    https://facebook.github.io/react-native/docs/android-setup.html
    
    

    Versions:

    "react": "16.0.0-alpha.6",
    "react-native": "0.44.0",
    "react-native-social-share": "^1.0.0",
    

    after upgrading buildToolsVersion to:

    buildToolsVersion '25.0.0'
    

    The error was fixed.

    Should you guys update this in your repo? This file is in node_modules, and everyone who npm install will get this error.

    opened by facuescobar 19
  • [iOS] check app availability by URL scheme

    [iOS] check app availability by URL scheme

    fixed https://github.com/doefler/react-native-social-share/issues/60

    • To avoid "not_available" issue on iOS 11, check app availability by url scheme instead of using SLComposeViewController isAvailableForServiceType method.
    • Added how to setup to README .
    opened by ariiyu 15
  • Cannot read property 'tweet' of undefined

    Cannot read property 'tweet' of undefined

    Hi Kim, I am using your repo for my project. I've implemented exactly what you instruction in README file ( the new one), but when I click Tweet button, it raised the error 'Cannot read Property 'tweet' of undefined.

    Can you help me to resolve it?

    opened by kenvandemar 10
  • update react-native dependency for supporting 0.6-RC

    update react-native dependency for supporting 0.6-RC

    Right now the dependency of 0.4.4 creates a new react-native install inside social-share Change it to 0.5 so that it works with both 0.5 and 0.6 without install react-native again inside social-view.

    https://github.com/chirag04/react-native-dashed-border/blob/master/package.json#L24-L26

    Refer: https://github.com/naoufal/react-native-activity-view/issues/3

    opened by chirag04 10
  • IOS always return

    IOS always return "not_available". Working fine on android.

    When I try to share a link on IOS it always return "not_available". I thought it is because the simulator doesnt have facebook app. But i tried on an actual device also wont open the dialogue box.

    opened by decodez 8
  • Facebook 'text' property not working with FB version 59.0.0.51.142

    Facebook 'text' property not working with FB version 59.0.0.51.142

    I'm using KDSocialShare in my app, but unfortunately, it appears that Facebook may have changed how it interfaces with SLComposeViewController?

    The Twitter integration is still working correctly & the message loads correctly for Facebook in the Simulator.

    Any help would be appreciated. -Darren

    opened by darrenfurr 8
  • drop peer dependencies

    drop peer dependencies

    Can you drop peer dependency on react-native in package.json and let the host project dictate which react-native version to use?

    Social share is not using anything specific to any react-native version. It is safe to remove peer deps i think.

    opened by chirag04 7
  • KDSocialShare is not abstract and does not override abstract method createJSModules(

    KDSocialShare is not abstract and does not override abstract method createJSModules(

    Followed the guidelines to readme.

    :react-native-social-share:compileReleaseJavaWithJavac - is not incremental (e.g. outputs have changed, no previous execution, etc.).
    /Users/shrikantsonone/AskDOSS/doss.askdoss.homesearch.mobile/consumer_app/Homesearch/node_modules/react-native-social-share/android/src/main/java/com/barefootcoders/android/react/KDSocialShare/KDSocialShare.java:15: error: KDSocialShare is not abstract and does not override abstract method createJSModules() in ReactPackage
    public class KDSocialShare implements ReactPackage {
           ^
    1 error
    :react-native-social-share:compileReleaseJavaWithJavac FAILED
    
    FAILURE: Build failed with an exception.
    
    * What went wrong:
    Execution failed for task ':react-native-social-share:compileReleaseJavaWithJavac'.
    > Compilation failed; see the compiler error output for details.
    
    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
    
    BUILD FAILED
    
    Total time: 19.397 secs
    Could not install the app on the device, read the error above for details.
    Make sure you have an Android emulator running or a device connected and have
    set up your Android development environment:
    https://facebook.github.io/react-native/docs/android-setup.html
    
    opened by shikya 6
  • [WIP] Add Android compatibility

    [WIP] Add Android compatibility

    Addresses https://github.com/doefler/react-native-social-share/issues/30 & https://github.com/doefler/react-native-social-share/issues/26

    This pull request adds Android compatibility for sharing via Twitter. Note that this only provides the tweet method at present, and Facebook is not supported yet.

    Sharing via Twitter will check for the presence of the Twitter application, and will use its provided intent if available. Otherwise, it will open a web browser to compose the tweet.

    TODO:

    • [x] Get https://github.com/doefler/react-native-social-share/pull/34 merged in
    • [x] Support Facebook sharing
    • [x] Support the various options that iOS supports
    opened by Jberlinsky 6
  • shareOnFacebook returns error on Android 9.0

    shareOnFacebook returns error on Android 9.0

    shareOnFacebook method returns "error" and fails to open Facebook app. I ran into the problem with Android 9.0.

    An exception is thrown at reactContext.startActivity(shareIntent).

    https://github.com/doefler/react-native-social-share/blob/b4b51d77974652c14824daa066f017c117c4708f/android/src/main/java/com/barefootcoders/android/react/KDSocialShare/KDSocialShareModule.java#L56-L89

    The exception's message is Calling startActivity() from outside of an Activity context requires the FLAG_ACTIVITY_NEW_TASK flag. Is this really what you want?.

      } catch (Exception ex) {
    -   callback.invoke("error");
    +   callback.invoke(ex.getMessage());
      }
    
    Screen Shot 2019-08-25 at 8 04 45
    opened by tamago3keran 3
  • Fix Twitter sharing on Android

    Fix Twitter sharing on Android

    This PR attempts to fix issues with sharing via Twitter on Android.

    It didn't work because of 2 errors:

    • "calling startActivity() from outside of an Activity context" error because of missing FLAG_ACTIVITY_NEW_TASK flag. Adding the following line before starting the intent fixes the issue.
    shareIntent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
    
    • The default class for Twitter intent has changed and "com.twitter.android.PostActivity" no longer works. I updated it to "com.twitter.android.composer.ComposerActivity" and also add a fall back to use the default class of the "com.twitter.android" package. If it still fails, we just create an intent with a Twitter url.
    opened by minhtule 3
  • shareOnTwitter callback is not working on android.

    shareOnTwitter callback is not working on android.

    Hi, I am integrate it. Callback is not working on android.

    shareOnTwitter({ 'text':'Global democratized marketplace for art', 'link':'https://artboost.com/', }, (results) => { console.log('12'); console.log(results); } );

    opened by harleenarora 0
  • shareOnTwitter callback is not working on android.

    shareOnTwitter callback is not working on android.

    Hi, I am integrate it. Callback is not working on android.

    shareOnTwitter({ 'text':'Global democratized marketplace for art', 'link':'https://artboost.com/', }, (results) => { console.log('12'); console.log(results); } );

    opened by harleenarora 0
  • Apple now requires NSLocationUsageDescriptions

    Apple now requires NSLocationUsageDescriptions

    Apple now requires NSLocationAlwaysUsageDescription and NSLocationWhenInUseUsageDescription to be defined in info.plist when transmitting your app to the store. As I found out, this warning can be triggered if a linked library contains the code for this feature even if it isn't called in the code. I found out that this library is the only one in my project containing RCTGeolocation and therefore might be responsible for this warning. Is RCTGeolocation necessary in this lib and if yes for which feature? Might it be possible to release a version without this dependency if not necessary?

    opened by rafaelmaeuer 1
  • Android can not tweet image

    Android can not tweet image

    I use the tweet function, and I want to share image. How can I do?

    tweet : function() {

    shareOnTwitter({
        'text':'Global democratized marketplace for art',
        'link':'https://artboost.com/',
        'imagelink':'https://artboost.com/apple-touch-icon-144x144.png',
        //or use image
        'image': 'artboost-icon',
      },
      (results) => {
        console.log(results);
      }
    );
    

    },

    opened by JHEN-GSIANWONG 1
  • Can't install this module for ios

    Can't install this module for ios

    Description

    Hi. It is very interesting module and I want to integrate it into my app, but can't. I followed all the instructions in README.md:

    1. yarn add react-native-social-share -E
    2. react-native link react-native-social-share
    3. Add KDSocialShare.h & KDSocialShare.m to Libraries of my project target
    4. Add Social.framework to my project target
    5. And add LSApplicationQueriesSchemes to Info.plist with fb and twitter values Then I ran react-native run-ios or CMD+R in xcode.

    First error is

    • 'RCTRootView.h' file not found on 12 line of Libraries/ReactNativeSocialShare.xcodeproj/ReactNativeSocialShare/AppDelegate.m

    Solution: #import "RCTRootView.h" could be replaced to #import <React/RCTRootView.h> and this error disappears.

    Go further. Next error after "fix" is

    • No visible @interface for 'RCTRootView' declares the selector 'initWithBundleURL:moduleName:launchOptions:'

    Solution: Last error disappears after adding initialProperties:nil to rootView declaration in ReactNativeSocialShare/AppDelegate.m, because interface doesn't seems to be identical with used.

    Further. Appears another error

    • ld: library not found for -lRCTWebSocketDebugger clang: error: linker command failed with exit code 1 (use -v to see invocation)

    Solution: As I seen in previous issues I need to remove RCTWebSocketDebugger from Build Phases -> Link Binary from Libraries of ReactNativeSocialShare.xcodeproj.

    After latest "fix" another error has appeared

    • ld: library not found for -lRCTAdSupport clang: error: linker command failed with exit code 1 (use -v to see invocation) and if remove this binary from "Linking" then appears 155 errors.

    Solution: not found 😞

    I believe it is wrong way. Neither I am doing something wrong nor I don't understand the manual and could you, please, go me through the manual?

    P.S.

    I'm using cocoapods, but it's not matter, because I tried with clear react-native init ProjectName and got the same errors.

    Versions:

        "react": "16.3.1",
        "react-native": "0.55.1",
        "react-native-social-share": "1.6.1",
    

    package.json

    {
      "name": "GlamAndGo",
      "version": "0.0.1",
      "private": true,
      "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "remotedev": "remotedev-debugger --injectserver",
        "test": "jest",
        "postinstall": "npm run remotedev && rndebugger-open"
      },
      "dependencies": {
        "credit-card-type": "7.0.0",
        "lodash": "4.17.5",
        "mobx": "4.1.1",
        "mobx-react": "5.0.0",
        "moment": "2.22.1",
        "normalizr": "3.2.4",
        "qs": "6.5.1",
        "react": "16.3.1",
        "react-native": "0.55.1",
        "react-native-blur": "3.2.2",
        "react-native-calendar-events": "1.6.0",
        "react-native-datepicker": "1.7.2",
        "react-native-iphone-x-helper": "1.0.3",
        "react-native-keyboard-aware-scroll-view": "0.5.0",
        "react-native-maps": "0.21.0",
        "react-native-sentry": "0.37.0",
        "react-native-smart-splash-screen": "2.3.5",
        "react-native-social-share": "1.6.1",
        "react-native-svg": "6.3.1",
        "react-native-text-input-mask": "0.7.0",
        "react-native-xml2js": "^1.0.3",
        "react-navigation": "1.5.11",
        "react-redux": "5.0.7",
        "redux": "3.7.2",
        "redux-api-middleware": "2.3.0",
        "redux-persist": "5.9.1",
        "redux-saga": "0.16.0",
        "redux-thunk": "2.2.0",
        "reselect": "3.0.1",
        "validate.js": "0.12.0"
      },
      "devDependencies": {
        "babel-jest": "22.4.3",
        "babel-preset-react-native": "4.0.0",
        "flow-bin": "0.67.1",
        "jest": "22.4.3",
        "react-native-debugger-open": "0.3.17",
        "react-test-renderer": "16.3.1",
        "reactotron-react-native": "1.14.0",
        "reactotron-redux": "1.13.0",
        "redux-logger": "3.0.6",
        "remote-redux-devtools": "0.5.12",
        "remotedev-rn-debugger": "0.8.3",
        "uws": "9.148.0"
      },
      "jest": {
        "preset": "react-native"
      },
      "remotedev": {
        "hostname": "localhost",
        "port": 5678
      },
      "rnpm": {
        "assets": [
          "./assets/fonts/"
        ]
      }
    }
    
    opened by seclace 6
Owner
Kim Døfler
Entrepreneur who loves technology and beautiful design. Check out my blog at doefler.com
Kim Døfler
A Babel preset let you import application configs from .env file (zero runtime dependency)

react-native-dotenv Let you import environment variables from a .env file in React Native, don't need any native code integration. Install $ npm insta

David Chang 913 Sep 27, 2022
Fully customizable, easy to use checkbox with flexible component by React Native on Android and iOS

Installation Add the dependency: npm i react-native-checkbox-flex Peer Dependencies IMPORTANT! You need install them "@freakycoder/react-native-bounce

FreakyCoder 11 Nov 20, 2021
A wrapper of Lock to use with React Native (iOS & Android)

A wrapper of Lock to use with React Native (iOS & Android)

Auth0 278 May 18, 2022
A library for React-Native to help you download large files on iOS and Android both in the foreground and most importantly in the background.

react-native-background-downloader A library for React-Native to help you download large files on iOS and Android both in the foreground and most impo

Eko Labs 270 Aug 18, 2022
React Native ssl pinning and cookies handling based on okhttp3 on (Android). and AFNetworking on (iOS)

react-native-ssl-pinning React-Native ssl pinning & public key pinning using OkHttp 3 in Android, and AFNetworking on iOS. NOTES: for RN 0.60.0 or lat

Maxim Toyberman 243 Sep 25, 2022
Alarm clock functionality for react native ios and android using react-native-push-notification and react-native-community/async-storage

react-native-simple-alarm Alarm clock functionality for react native ios and android built using react-native-push-notification and react-native-commu

Jordan Daniels 65 Sep 7, 2022
Device Information for React Native iOS and Android

react-native-device-info Device Information for React Native. TOC Installation Linking Usage API Troubleshooting Release Notes react-native-dom / reac

null 5.9k Sep 29, 2022
An unified permissions API for React Native on iOS and Android

☝?? react-native-permissions A unified permissions API for React Native on iOS, Android and Windows. (For Windows only builds 18362 and later are supp

Mathieu Acthernoene 3.3k Sep 24, 2022
Periodic callbacks in the background for both IOS and Android

react-native-background-fetch · By Transistor Software, creators of React Native Background Geolocation Background Fetch is a very simple plugin which

Transistor Software 1.2k Sep 22, 2022
React native package to add in app review functionality for android and ios applications

react-native-in-app-review Now you can integrate this to react native and in-app review dialog can be shown to user. User doesn't need to move to play

Ravi Rupareliya 73 Feb 28, 2022
A cordova battery status listener for react-native, support for ios and android

React Native BatteryStatus (remobile) A cordova battery status listener for react-native, support for ios and android Installation npm install @remobi

YunJiang.Fang 14 Jan 28, 2020
Detects device type on both android and ios

React Native Device Specs RNDeviceSpecs detects the specifications of the device it is running on. Requiring or importing the module will give you an

Fixt 11 May 10, 2017
Event Source implementation for React Native. Server-Sent Events (SSE) for iOS and Android 🚀

React Native EventSource (Server-Sent Events) ?? Your missing EventSource implementation for React Native! React-Native-SSE library supports TypeScrip

Binaryminds 43 Aug 26, 2022
React native geolocation service for iOS and android

React native geolocation service for iOS and android

Iftekhar Rifat 1.4k Sep 25, 2022
iOS CallKit framework and Android ConnectionService for React Native

iOS CallKit framework and Android ConnectionService for React Native

React Native WebRTC 692 Sep 29, 2022
React Native library for PSPDFKit for iOS, Android and Windows UWP.

React Native Library for PSPDFKit for iOS, Android & Windows UWP. (PDF SDK for React Native) This library requires a valid license of PSPDFKit. Licens

PSPDFKit GmbH 121 Sep 16, 2022
Understand and reduce your carbon footprint 🌱 iOS & Android.

?? NMF.earth app Understand and reduce your carbon footprint Repository for the NMF.earth React Native application, built with Expo, Redux Toolkit and

NMF.earth 339 Sep 27, 2022
Youtube Music Client for Android, iOS and Web

Youtube Music client for Android, iOS and Web built with React Native that allows you to listen to music from Youtube. You can download songs and list

Kevin Pfeifer 42 Sep 19, 2022
🔥 A well-tested feature-rich modular Firebase implementation for React Native. Supports both iOS & Android platforms for all Firebase services.

React Native Firebase React Native Firebase is a collection of official React Native modules connecting you to Firebase services; each module is a lig

Invertase 10.3k Sep 27, 2022