react-native-social-share
Advanced tools
Comparing version 0.8.0 to 0.9.0
{ | ||
"name": "react-native-social-share", | ||
"version": "0.8.0", | ||
"version": "0.9.0", | ||
"description": "Use the iOS native Twitter and Facebook share view from react native", | ||
@@ -43,3 +43,4 @@ "author": { | ||
], | ||
"license": "MIT" | ||
"license": "MIT", | ||
"main": "react-native-social-share.js" | ||
} |
# React Native Social Share | ||
Use the build in share view from iOS to let the user share on Facebook and Twitter. | ||
It will use the users existing account without having to get new authorizations. | ||
Use the built-in share view from iOS 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. | ||
@@ -9,6 +9,3 @@ | ||
I developed this module for our upcoming artboost app. | ||
https://artboost.com | ||
![Animation](https://raw.githubusercontent.com/doefler/react-native-social-share/master/animation-looping.gif) | ||
@@ -19,7 +16,6 @@ | ||
1. `npm install react-native-social-share --save` | ||
2. In XCode, in the project navigator right click `Libraries` ➜ `Add Files to [your project's name]` | ||
3. Go to `node_modules` ➜ `react-native-social-share`➜ iOS and add `KDSocialShare.h` and `KDSocialShare.m` | ||
4. Go to your project's `Build Phases` ➜ `Link Binary With Libraries` phase | ||
5. Add `Social.framework` to ➜ `Link Binary With Libraries` build phase of your project (click the '+' and search for 'social'). | ||
6. Run your project (`Cmd+R`) | ||
2. `react-native link` | ||
3. In XCode, go to your project's `Build Phases` ➜ `Link Binary With Libraries` phase | ||
4. Add `Social.framework` to ➜ `Link Binary With Libraries` build phase of your project (click the '+' and search for 'social'). | ||
5. Run your project (`Cmd+R`) | ||
@@ -32,9 +28,12 @@ Now you can implement the share popups in your react native code. | ||
``` | ||
var KDSocialShare = require('NativeModules').KDSocialShare; | ||
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 | ||
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() { | ||
KDSocialShare.tweet({ | ||
shareOnTwitter({ | ||
'text':'Global democratized marketplace for art', | ||
@@ -52,5 +51,5 @@ 'link':'https://artboost.com/', | ||
shareOnFacebook : function() { | ||
facebookShare : function() { | ||
KDSocialShare.shareOnFacebook({ | ||
shareOnFacebook({ | ||
'text':'Global democratized marketplace for art', | ||
@@ -69,13 +68,13 @@ 'link':'https://artboost.com/', | ||
The two implementations take the following paramters | ||
The two implementations take the following parameters | ||
- `KDSocialShare.shareOnFacebook(options [object], callback [function])` | ||
- `KDSocialShare.tweet(options [object], callback [function])` | ||
- `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. | ||
#### 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 prepopulate the share view for the user. You can use the following parameters: | ||
The options object lets you pre-populate the share view for the user. You can use the following parameters: | ||
| Parameter | Desciption | | ||
| Parameter | Desciption | | ||
| ------------- | ------------- | | ||
@@ -87,11 +86,25 @@ | text | Sets the initial text of the message on the SLComposeViewController instance. | | ||
**At least the `text` or `link` parameter must be specified** | ||
### Special Case: Facebook on Android | ||
Due 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: | ||
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](https://developers.facebook.com/docs/sharing/android) to perform more complex sharing operations on Android. | ||
### Callback | ||
The callback function runs when the native environment has information for the react environment | ||
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 | | ||
| ------------- | ------------- | | ||
| "success" | Native call made by the viewController - SLComposeViewControllerResultDone – The user sent the composed message by touching the Send button. | | ||
| "cancelled" | Native call made by the viewController - SLComposeViewControllerResultCancelled – The user cancelled the composition session by touching the Cancel button. | | ||
| "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. | | ||
| 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 | | ||
@@ -114,3 +127,6 @@ You can use these callbacks to present alerts to the user. For example tell the user to login to a certain service. | ||
var KDSocialShare = require('NativeModules').KDSocialShare; | ||
import { | ||
shareOnFacebook, | ||
shareOnTwitter, | ||
} from 'react-native-social-share'; | ||
@@ -122,3 +138,3 @@ | ||
KDSocialShare.tweet({ | ||
shareOnTwitter({ | ||
'text':'Global democratized marketplace for art', | ||
@@ -136,5 +152,5 @@ 'link':'https://artboost.com/', | ||
shareOnFacebook : function() { | ||
facebookShare : function() { | ||
KDSocialShare.shareOnFacebook({ | ||
shareOnFacebook({ | ||
'text':'Global democratized marketplace for art', | ||
@@ -174,3 +190,3 @@ 'link':'https://artboost.com/', | ||
<TouchableHighlight onPress={this.shareOnFacebook}> | ||
<TouchableHighlight onPress={this.facebookShare}> | ||
<View style={{alignItems: 'center',justifyContent:'center', width: 150, height: 50,backgroundColor:'#3b5998'}}> | ||
@@ -182,3 +198,3 @@ <Text style={{color:'#ffffff',fontWeight:'800',}}>Share on Facebook</Text> | ||
); | ||
@@ -185,0 +201,0 @@ } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
8316237
26
168
217
1