react-native-cross-share
v0.0.3
Published
React Native Sharing Capabilities
Downloads
4
Maintainers
Readme
react-native-cross-share
React Native Sharing Capabilities
Getting started
Mostly automatic install
npm install rnpm --global
npm install react-native-cross-share --save
rnpm link react-native-cross-share
Manual install
iOS
npm install react-native-share --save
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-share
and addRNShare.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNShare.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)
Android
npm install react-native-share --save
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import cl.json.RNSharePackage;
to the imports at the top of the file
- Open up
android/app/src/main/java/[...]/MainApplication.java
- Add
import cl.json.RNSharePackage;
to the imports at the top of the file - Add
new RNSharePackage()
to the list returned by thegetPackages()
method
Append the following lines to
android/settings.gradle
:include ':react-native-cross-share' project(':react-native-cross-share').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-cross-share/android')
Insert the following lines inside the dependencies block in
android/app/build.gradle
:``` compile project(':react-native-cross-share') ```
Options
Share.open() accepts the following options.
Option | Description ------ | ----------- title | Android only share_text | Text to share share_URL | Url to share share_file | Path of file to share or open (android & iOS only)
Usage
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
TouchableHighlight
} from 'react-native';
import Share from 'react-native-cross-share';
class Example extends Component {
onShare() {
Share.open({
share_subject: "email subject",
share_text: "Hola mundo",
share_URL: "http://google.cl",
title: "Share Link"
},(e) => {
console.log(e);
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
<TouchableHighlight onPress={this.onShare}>
<Text style={styles.instructions}>
Social Share
</Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('Example', () => Example);
NOTE: If both share_text and share_url are provided share_url will be concatenated to the end of share_text to form the body of the message. If only one is provided it will be used
how it looks: