Question 33803 in React native Question posted in
The official React Native documentation can be found here.

How to receive file data shared from broswer into ReactNative Mobile Application? – React native

TLDR;

I have a react-native mobile application which needs to receive a file shared by ther other application.

Details:

I am trying to receive this file inside my own application. And since I am new to React/React-native/Expo/Android development I am not sure how it’s coded in react native.

  1. connect the mobile device to phone and allow development and tethering. or have emulator ready

Mobile App:

run following commands in the terminal:

git clone https://github.com/dimaportenko/react-native-receive-share-file-tutorial
run yarn install
run yarn android

Browser:

  1. In broswer of the mobile phone navigate to https://w3c.github.io/web-share/demos/share-files.html

  2. Fill Data.

  3. Attach a file.

  4. click ‘Share’

  5. Select the ‘rnrecievesharetutorial’

  6. This should show something like following

    Received Files Array [
    Object {
    "contentUri": null,
    "extension": null,
    "fileName": null,
    "filePath": null,
    "subject": "Credential Offer",
    "text": "Choose a wallet to process this offer.",
    "weblink": null,
    },
    ]

Question:

Can you please share some code which allows me to get the file data ?

The website has indeed shared the file data. As a proof: if you select the email/gmail application on your phone it should add the file as an attachement.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was not receiving the Location of the local file. I used another lib: https://github.com/meedan/react-native-share-menu. I receive the Location of the file. And then we can use file read/write libs to get the content.

    RNFS.readFile(data.data)
  .then((fileString: string) => {
    console.log(`file contents : ${fileString}`);
    
  });

  2. 0

    You can download data using RNFS

    import * as RNFS from 'react-native-fs';

let offlinePackageResponse = await RNFS.config({
   fileCache: true,
   timeout: 9999999,
   background: true, // iOS only
}).fetch(method, path, header)
.progress(callback);
    
console.log(`file save at ${offlinePackageResponse.path()}`);

    you can access the file as

    await RNFS.readFile(offlinePackageResponse.path(), 'base64')
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search