ravi0the0sun / react-native-ipfs-demo

Demo app exploring IPFS in React Native.

IPFS React Native Demo App

This project explores and documents how IPFS' HTTP client can be used in a React Native app targeting Android and iOS platforms.

Usage

Spawn a local IPFS node with the daemon command. The app assumes the HTTP API is exposed at http://localhost:5002.

Run the app on Android

$ npm run android:debug

$ npm run android:release

In order connect to the IPFS node running on your development machine when running the app on a physical device with USB debugging enabled, run the following command:

$ adb -s <device name> reverse tcp:5002 tcp:5002

To find the device name, run the following adb command:

$ adb devices

Sources:

• https://reactnative.dev/docs/running-on-device#method-1-using-adb-reverse-recommended
• https://stackoverflow.com/a/43277765/1694191
• https://stackoverflow.com/a/5806384/1694191

Run the app on iOS

npm run ios:debug

npm run ios:release

In order connect to the IPFS node running on your development machine when running the app on a physical iPhone, you must use the LAN IP of your machine. Also, note that In order to run the app on a physical iPhone, you must create and setup an Apple Developer Certificate.

Configuration

If you need to change the input URLs for the HTTP client factory on both Android and iOS, you can do so by editing config.js file.

Feel free to tweak the parameters (CIDs, multiaddr, etc.) for each HTTP client method by editing the corresponding code in each screen.

Requirements to use HTTP client

• react-native-polyfill-globals - Polyfills and patches missing or partially supported web and core APIs.
• react-native-fetch-api - A fetch API polyfill for React Native with text streaming support built on top of React Native's Networking API.
• @babel/plugin-proposal-async-generator-functions

The environment must be polyfilled right when your app starts and before anything is rendered.

Alternative fetch polyfill

Instead of using the fetch implementation that ships with React Native, which is provided by GitHub's fetch polyfill, this demo is now using react-native-fetch-api. It implements Response.body to add support for text streaming via native incremental data events.

Known issues and limitations

• It's not possible to create Blobs from ArrayBuffers and ArrayBufferViews.
  • Source: https://github.com/facebook/react-native/blob/v0.63.4/Libraries/Blob/BlobManager.js#L75.
• In debug mode, an error screen is always displayed every time console.error or console.error functions are called.
  • Track: facebook/react-native#30378
• Support for missing core functionality or features required by the HTTP client to operate is added by react-native-polyfill-globals. Confer the patch file.