React Native: Peer-to-Peer with react-native-transfer-big-files

I bring you the perfect react-native library for file or message transfer between two devices within the same network. With react-native-transfer-big-files, you can find peers within the same network, send messages, and send files regardless of their size. Let’s see how to do it.

Let’s get started!

The first thing we need to do, obviously, is to install the library

npm install @arekjaar/react-native-transfer-big-files
//or
yarn add @arekjaar/react-native-transfer-big-files

Discovering peers

We import the functions discoverPeers, subscribeDiscoverPeers, and stopDiscoverPeers

import { 
  discoverPeers,
  subscribeDiscoverPeer,
  stopDiscoverPeers } from '@arekjaar/react-native-transfer-big-files';

subscribeDiscoverPeers: It will be updated every time a peer connects or disconnects from the network. It will always report the connected peers.

The information for each peer will be: deviceName, modelName, productName, type, and ipAddress.

Type is a numeric type corresponding to this table:

0 -> UNKNOWN

1 -> PHONE

2 -> TABLET

3 -> TV

const discoverPeerSubscription = subscribeDiscoverPeer((peers)=>{
      setPeers(JSON.parse(peers))
    })

discoverPeers: It will send device information to the network for subcribeDiscoverPeers to listen to.

discoverPeers()

stopDiscoverPeers: It will stop being able to receive messages and inform the rest of the peers that it is disconnecting.

stopDiscoverPeers()

We prepare our app to be able to receive messages and files.

import {
  receiveMessage,
  receiveFile,
  subscribeOnFileCopyEnd,
  subscribeOnProgressUpdates } from 'react-native-transfer-big-files';

receiveMessage: Where we will receive the message sent from another device

const message:string = await receiveMessage() as string;
    setMessage(message)

receiveFile: We will enable file reception by providing the path and filename to save the file. With the last parameter, we indicate whether we want the file to be included in the gallery.

receiveFile(`/data/data/com.transferbigfilesexample/cache/`, 'document.pdf', true)

subscribeOnProgressUpdates: With this method, we will control the progress of the file transfer.

const progressUpdatesSubscription = subscribeOnProgressUpdates(
      setProgress,
    );

subscribeOnFileCopyEnd: It will be triggered when the file is received and saved.

const copyFileEndSubscription = subscribeOnFileCopyEnd(
      setCopyFileEnd,
    );

Once we have discovered peers, we will be able to send messages and files using the methods, sendMessageTo and sendFileTo.

import {
  sendMessageTo,
  sendFileTo } from 'react-native-transfer-big-files';

sendMessageTo: To send a message, you must provide the IP address of the device you want to send to, along with the message.

sendMessageTo('Hello World', ipAddress)

sendFileTo: With this method, you can send a file to another device within the network, for which it will be necessary to pass the local path of the file and the IP address of the device you want to send to.

sendFileTo('/data/data/com.transferbigfilesexample/cache/document.pdf', ipAddress)

We got it!

You know that if you liked the article, you can buy me a coffee ;-)

https://ko-fi.com/arekjaar

Remember to follow the next post for more articles about React Native with Expo.

React Native & Expo