# react-native-share-receiver

Use your own view to handle shared data from other apps.

![Android Demo](docs/android_demo.gif)
![iOS Demo](docs/ios_demo.gif)

## Installation

```sh
npm install react-native-share-receiver
```

**Manual work is needed** to build a new view for handling the shared data from
other apps. This view handles shared data independently and does not affect the
state of the main app so it doesn't break the UI flow. Both platforms have
their own method to read received data:

* **Android**: Activity
* **iOS**: Share Extension

To get started, create a file `src/Share.js` with following template:

```js
// src/Share.js
import React, { useEffect, useState } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { getSharedData } from 'react-native-share-receiver';

// This is rendered by activity (Android) or share extension (iOS) when
// user is sharing content and chooses your app.
export default function Share() {
  const [shared, setShared] = useState();

  useEffect(() => {
    const get = async () => {
      try {
        // read shared content, result is array of objects:
        // [
        //   { type: 'text/plain', data: 'http://example.com' },
        // ]
        const result = await getSharedData();
        setShared(result);
      } catch (error) {
        console.error(error);
      }
    };
    get();
  }, []);

  return (
    <View style={styles.container}>
      <Text>{JSON.stringify(shared)}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
```

Continue with platform specific instructions:

* [Android](docs/ANDROID_INSTALLATION.md)
* [iOS](docs/IOS_INSTALLATION.md)

## Usage

The idea of this module is that you write a single React Native component
(for example `src/Share.js`) that is used when receiving shared data from
other apps. In that view you are able to use API from
`react-native-share-receiver` to read shared data from other apps:

```js
import { getSharedData } from "react-native-share-receiver";

// ...

const items = await getSharedData();
```

Note that this API works only in your share view.
Check [example project](example/) to see better example.

## Local development

To use locally modified react-native-share-receiver module, build it first:

```sh
npm run prepare
npm pack
```

This creates a package `react-native-share-receiver-x.y.z.tgz`. Use this
in your app:

```sh
npm install ../path/to/package/react-native-share-receiver-x.y.z.tgz
```

### Debugging Native Code in Xcode

In Xcode:
* select ShareExtension scheme
* start
* choose an app to run: choose your main app
* after the app is built and running, share something to your app

You can add `NSLog("Hello world")` to swift code and you should see the output
in the console.

## Credits

Sponsored and developed by Curiti Inc.
Based on excellent work in [react-native-share-menu](https://github.com/meedan/react-native-share-menu).

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)