https://github.com/cdimascio/react-native-share-sheet
iOS share sheet for React Native
https://github.com/cdimascio/react-native-share-sheet
ios react-native share share-sheet
Last synced: about 1 year ago
JSON representation
iOS share sheet for React Native
- Host: GitHub
- URL: https://github.com/cdimascio/react-native-share-sheet
- Owner: cdimascio
- License: mit
- Created: 2016-01-20T17:44:13.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2018-01-20T21:15:22.000Z (over 8 years ago)
- Last Synced: 2025-04-28T11:15:37.644Z (about 1 year ago)
- Topics: ios, react-native, share, share-sheet
- Language: Objective-C
- Homepage:
- Size: 125 KB
- Stars: 11
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-share-sheet
Use the iOS share sheet from React Native
## Install
1. `npm install react-native-share-sheet`
2. In XCode, in the project navigator, right click Libraries -> Add Files to [YourProjectName]
3. Go to `node_modules/react-native-share-sheet/RNShareSheet` and add `RNShareSheet.m`, `RNShareSheet.swift, RNShareSheet-Bridging-Header.h`
4. Rename `RNShareSheet-Bridging-Header.h` to `[YourProjectName]-Bridging-Header.h`
## Use
`import { ShareSheet } from 'react-native-share-sheet`
```javascript
const share = {
imageUrl: 'http://facebook.github.io/react-native/img/opengraph.png',
text: 'some super cool text'
}
ShareSheet.open(share)
```
## Example
```javascript
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
TouchableOpacity,
View
} from 'react-native';
import { ShareSheet } from 'NativeModules'
const share = {
url: 'http://facebook.github.io/react-native/',
text: 'some super cool text'
};
class ShareSheetDemo extends Component {
render() {
return (
ShareSheet.open(share)}>
Share
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
text: {
backgroundColor: 'lightblue',
padding: 10,
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('ShareSheet', () => ShareSheetDemo);
```
## Options
| Property | | Value |
| -------- | -------- | :--------------------------------: |
| text | optional | string |
| imageUrl | optional | url string or asset library string |
| url | optional | url of the web page to share |
**If both `imageUrl` and `url` specified, `imageUrl` will appear as the share preview**
### Examples
#### `imageUrl`
* Asset Library path \* `assets-library://asset/asset.JPG?id=FF5F38D6-AACC-1116-3091-AF3499CD923D&ext=JPG`
* Image Url \* `http://facebook.github.io/react-native/img/opengraph.png`
#### `text`
* \#ReactNative is awesome!
#### `url`
* http://facebook.github.io/react-native/
## MISC
Works great with _react-native-camera_!
Snap a pic with _react-native-camera_ and share it with _react-native-share-sheet_. _react-native-camera_ will return the new photo's asset library path which can be shared using _react-native-share-sheet_
## License
MIT