Skip to content

thomasgazzoni/react-native-share-preview

Repository files navigation

react-native-share-preview

npm version styled with prettier

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

  1. Import react-native-share-preview:
import {ShareView} from 'react-native-share-preview';
  1. Create a new page and wrap the content you want to share inside a ShareView:
<ShareView
  onBackPress={handleBack}
  onSharePress={handleShareByType}
  onCaptureError={handleCaptureError}>
  <Text>Your Content</Text>
</ShareView>
  1. Handle the logic for the selected share option
/**
 * Callback called with the user's selected share option
 */
const handleShareType = (type: ShareTypes, screenshotUri: string) => {
  return new Promise((resolve, _) => {
    // Call native implementation with your share logic
    // For example you can use react-native-share or your favorite share library
    return Share.open({type, filename: screenshotUri}).catch(err => {
      // Handle share error
      Alert.alert(err.message);
      throw err;
    });
  });
};

const handleCaptureError = (message: string) => {
  Alert.alert(message);
};

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!