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

1. Import react-native-share-preview:

import {ShareView} from 'react-native-share-preview';

2. 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>

3. 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!