Native Package Manager

    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published


    npm version styled with prettier

    Animated preview of a React Native page for sharing.


    • Smooth animations by React Native Reanimated
    • Customizable loading (Todo)
    • Customizable ShareBar (Todo)


    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


    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:
      <Text>Your Content</Text>
    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{type, filename: screenshotUri}).catch(err => {
          // Handle share error
          throw err;
    const handleCaptureError = (message: string) => {

    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.


    Thanks @software-mansion for react-native-reanimated and @gre for react-native-view-shot!

    Pull requests, feedbacks and suggestions are welcome!


    npm i react-native-share-preview

    DownloadsWeekly Downloads






    Unpacked Size

    18.6 kB

    Total Files


    Last publish


    • thomasgaz