Sharing Image to Android App using Intent Filter to React Native

You might have come across numerous apps that allow us to directly share an image from Gallery/FileManager into the desired application. It's a better way of providing instant access to our application/feature in our application.

In Android, we can achieve this with the help of Intent Filters. Intent filters are basically filters that define what an app can expect as its input. For eg an image editor app will accept the image, messaging app will expect text, etc.

We will use the intent filter to specify that our application can accept images from other apps.

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

Our AndroidManifest will look like this:

Now if you run and install the app on the device and then open the gallery and share an image you will see our app(ShareWithApp) on the list. But once you select ShareWithApp nothing happens.

Open Gallery and try sharing an Image

Once it’s shared with our application we need to catch it on the Android side and pass it on to the React native side for further use. We need to add this in MainActivity.java since its the entry point for the Android Application in Native Side. We should catch the image Uri from parcelable interface and create a bundle that would be delegated to the react-native side.

On the ReactNative side, we need to catch the image. We will display ‘Try Sharing Image from Gallery’ if the image is not shared and display the image if it's shared. So our App.js will look like:

Now if we run the app and share image from Gallery to our App we will be able to see the shared Image.

You can refer my Github Repo for the full codebase of the above sample & Enjoy Coding!!