react-native-share-preview
Animated preview of a React Native page for sharing.
Features
- Smooth animations by React Native Reanimated
- Customizable loading (Todo)
- Customizable ShareBar (Todo)
Setup
This library is available on npm, install it with: npm i react-native-share-preview
or yarn add react-native-share-preview
.
Need also to install the related dependencies:
npm i react-native-reanimated react-native-view-shot
or yarn add react-native-reanimated react-native-view-shot
.
Recommend to use with RN > 0.60 so the auto-linking will handle all the dependencies
For RN < 0.60, you need to manually install react-native-view-shot
and react-native-reanimated
Usage
- Import react-native-share-preview:
;
- Create a new page and wrap the content you want to share inside a ShareView:
- Handle the logic for the selected share option
/** * Callback called with the user's selected share option */const handleShareType = { return { // Call native implementation with your share logic // For example you can use react-native-share or your favorite share library return Share; };}; const handleCaptureError = { Alert;};
A complete example
For a more complex example take a look at the /example
directory.
Available props
Name | Type | Default | Description |
---|---|---|---|
outerBgColor | string | #dddddd | Background color of the share page |
innerBgColor | string | #f7f7f7 | Background color of the share content view |
shareBar | ReactNode | Custom bottom Share Bar component | |
shareBarHeight | number | 140 | Height of the bottom Share Bar |
captureOptions | CaptureOptions | {} | Capture options for ViewShot component |
onBackPress | Function | undefined | Handle share cancel and page go back |
onSharePress | Function | undefined | Handle user selected share option action |
onCaptureError | Function | undefined | Handle capture view Screenshot error |
Frequently Asked Questions
Why on iOS i can't capture the whole screen?
This is problem with the react-native-view-shot
library, the fix has not been merged yet and can be found in this PR #209.
Acknowledgements
Thanks @software-mansion for react-native-reanimated and @gre for react-native-view-shot!
Pull requests, feedbacks and suggestions are welcome!