rn-share-receiver

A React Native module that enables your Android app to receive shared content (images) from other apps. When other apps share images with your app, this module helps you handle and process those shared items seamlessly.

Features

• 🖼️ Receive single or multiple shared images
• 🔄 Real-time updates through event listeners
• 📱 Currently supports Android (iOS support coming soon)
• 🛠️ Easy to integrate
• 🎯 TypeScript support

Installation

npm install rn-share-receiver
# or
yarn add rn-share-receiver

Android Setup

1. Add the following intent filters to your Android app's AndroidManifest.xml inside the <activity> tag:

<intent-filter>
    <action android:name="android.intent.action.SEND" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:mimeType="image/*" />
</intent-filter>
<intent-filter>
    <action android:name="android.intent.action.SEND_MULTIPLE" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:mimeType="image/*" />
</intent-filter>

2. Update your MainActivity.kt to handle incoming intents:

import android.content.Intent
import com.reactnativesharereceiver.SharedDataModule  // Add this import

class MainActivity : ReactActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        intent?.let { handleIntent(it) }
    }

    override fun onNewIntent(intent: Intent) {
        super.onNewIntent(intent)
        handleIntent(intent)
    }

    private fun handleIntent(intent: Intent) {
        SharedDataModule.handleIntent(intent)
    }
}

Usage

import ShareReceiver from 'react-native-share-receiver';

function App() {
  useEffect(() => {
    // Check for any initial shared content
    ShareReceiver.getSharedData().then((data) => {
      if (data) {
        console.log('Initial shared data:', data);
        // { type: 'image', uris: ['content://...'] }
      }
    });

    // Listen for new shared content
    const subscription = ShareReceiver.addListener((data) => {
      console.log('Received shared data:', data);
      // { type: 'image', uris: ['content://...'] }
    });

    // Clean up the listener
    return () => subscription.remove();
  }, []);

  return (
    // Your app content
  );
}

API Reference

ShareReceiver.getSharedData()

Returns a promise that resolves with the most recently shared data, if any.

interface SharedData {
  type: string;  // Currently always 'image'
  uris: string[];  // Array of URI strings pointing to shared images
}

const data = await ShareReceiver.getSharedData();
// Returns SharedData | null

ShareReceiver.addListener(callback)

Sets up a listener for new shared content.

const subscription = ShareReceiver.addListener((data: SharedData) => {
  // Handle shared data
});

// Don't forget to clean up!
subscription.remove();

Example App

Check out the example directory for a complete implementation.

To run the example app:

# Clone the repository
git clone https://github.com/hrHarsh/react-native-share-receiver.git

# Install dependencies
cd react-native-share-receiver
yarn bootstrap

# Run the example app
cd example
yarn android

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Thanks to the React Native community
• Inspired by the need for better share handling in React Native apps

Support

If you're having issues or have questions, please open an issue.