react-native-share-receiver

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

Installation

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:

// 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
• iOS

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:

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

// ...

const items = await getSharedData();

Note that this API works only in your share view. Check example project to see better example.

Local development

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

npm run prepare
npm pack

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

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.

License

MIT

Made with create-react-native-library