Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jarred-sumner/react-native-media-clipboard
Image support for the clipboard in React Native
https://github.com/jarred-sumner/react-native-media-clipboard
clipboard react react-native react-native-image
Last synced: 29 days ago
JSON representation
Image support for the clipboard in React Native
- Host: GitHub
- URL: https://github.com/jarred-sumner/react-native-media-clipboard
- Owner: Jarred-Sumner
- Created: 2020-02-14T11:34:53.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T07:16:41.000Z (almost 2 years ago)
- Last Synced: 2024-10-06T07:42:45.377Z (about 1 month ago)
- Topics: clipboard, react, react-native, react-native-image
- Language: Objective-C++
- Size: 1.52 MB
- Stars: 51
- Watchers: 4
- Forks: 3
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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`:
```h
#import
```
3. [Optional] Inside the AppDelegate `@implementation` add this:
```objc
- (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
```javascript
import {
ClipboardContext,
ClipboardProvider
} from "react-native-media-clipboard";
```
7. At the root of your application, add `` in the render method, like this:
```javascript
{children}
```
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.
```javascript
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.
```
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](https://github.com/Jarred-Sumner/react-native-media-clipboard-example)
