0.0.3 • Published 9 years ago
react-native-cross-share v0.0.3
react-native-cross-share
React Native Sharing Capabilities
Getting started
Mostly automatic install
npm install rnpm --globalnpm install react-native-cross-share --savernpm 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-shareand addRNShare.xcodeproj - In XCode, in the project navigator, select your project. Add
libRNShare.ato 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:
