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
Blob
s fromArrayBuffer
s andArrayBufferView
s. - In debug mode, an error screen is always displayed every time
console.error
orconsole.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.