react-native-media-clipboard

React Native has several libraries that let you get the contents of the clipboard, but none of them support images.

react-native-media-clipboard suports:

• images
• strings
• URLs

Getting started

$ npm install react-native-media-clipboard --save

Installation (iOS only)

1. cd ios && pod install
2. Add the following line near the top of AppDelegate.h:

#import <react-native-media-clipboard/MediaClipboard.h>

3. [Optional] Inside the AppDelegate @implementation add this:

- (void)applicationDidBecomeActive:(UIApplication *)application {
  [MediaClipboard onApplicationBecomeActive];
}

^{This makes sure that the clipboard is in sync if the application went into the background.}

Swift bridging header

If your project does not contain any Swift code, then you need to create a bridging header – or you'll get a bunch of strange build errors.

4. Xcode -> File -> New -> Create an empty .swift file. It will prompt you asking if you want to create a bridging header. Say yes.

If your project already has Swift code (or a bridging header), just ignore this step.

5. Re-build your app: react-native run-ios

Usage

import {
  ClipboardContext,
  ClipboardProvider
} from "react-native-media-clipboard";

7. At the root of your application, add <ClipboardProvider> in the render method, like this:

<ClipboardProvider>
  <MyVeryRealApp>{children}</MyVeryRealApp>
</ClipboardProvider>

8. ClipboardContext contains a clipboard and a mediaSource object. It automatically updates whenever the user copies something to their clipboard or removes something from their clipboard.

const { clipboard, mediaSource } = React.useContext(ClipboardContext);

// Example mediaSource:
{
  "mimeType": "image/png",
  "scale": 1,
  "width": 828,
  "uri": "file:///tmp/C4A65610-E644-44C2-AC54-25A8AD56A4C6.png",
  "height": 1792
}

// Example clipboard:
{
  urls: [],
  strings: [],
  hasImages: false,
  hasURLs: false,
  hasStrings: false
};

// You can just pass in the `mediaSource` object to the built-in Image component. As long as the mediaSource object is not null, it should just work.
<Image source={mediaSource} />

There are type definitions for these, so you shouldn't need to refer back to this much.

---

This library is iOS only. There is no Android support.

Images are saved in the temporary directory for the app in a background thread. It does not send data URIs across the bridge.

There is a JSI implementation of this as well, however I haven't finished porting it to this library. A contributor is welcome to submit a PR for that :)

Example repo

Example repo: react-native-media-clipboard-example