Receive Shared Files in your React Native App

While building our react native app, we may come up with the feature to receive shared file from other app to our app, and using that file we further build the feature according to our requirement.

Now point how to setup our react native app to talk with other apps and receive data.

In this blog we gonna walk through on building this feature.

I am assuming you already setup with your react native project and if not use the below command to setup your first react native project.

To build receive shared file feature we gonna use react-native-receive-sharing-intent npm package, this package will help us to use native modules to access shared files inside our app.
CD inside your  AwesomeProject folder and install this package.

Before accessing this package inside our react native files, let us do some configuration for android and ios separately inside our app. Follow the below steps to do it.

Android

Go to AwesomeProject/android/app/src/main/manifest.xml

Add the below code inside your manifest.xml file inside manifest tag.

The above code helps to add filter on what type of files you want to recieve in your android app. Now go to AwesomeProject/android/app/src/main/java/com/AwesomeProject/MainActivity.java, and copy the below code inside your MainActivity.java

We done with Android let’s do some configuration for IOS.

IOS

For ios go inside AwesomeProject/ios/AwesomeProject/info.plist and open info.plist file And the below code inside this file inside dict tag

Now go this folder AwesomeProject/ios/AwesomeProject/AppDelegate.m and open AppDelegate.m, copy below code inside this file

Now we want to setup a share extension in our IOS app so it will be visible in share sheet of other apps.
Open your AwesomeProject/ios/AwesomeProject.xcworkspace in xcode
Now to create share extension inside our app inside xcode go to File/New/Target and Choose "Share Extension"
Give it a name you want to show on while Sharing i.e. i Choose "Example Share"

Now open AwesomeProject/ios/<Your Share Extension Name>/info.plist, and add below code inside the info.plist

Now go to AwesomeProject/ios/<Your Share Extension Name>/ShareViewController.swift and copy paste below code inside your file.

NOTE :- change the `hostAppBundleIdentifier` value to your main host app bundle identifier (example in my case: `com.awesomeproject` ) in this `ShareViewController.swift`.

Coding in our React native app.

Now we done with the setup for our android and ios configuration, let’s do some coding part and use react-native-receive-sharing-intent in our project.

Add the below code in your app.js or index.js file in your react native project

Re run your project go to any other app and share data to your app, you can also see your app name inside other app share sheet, select your app and hopefully you can see that file related data inside your logger.