Node.js React Native PouchDB demo
Peer-to-peer shared album app, based on Node.js on mobile running a PouchDB server, with a React Native interface.
This demo has an accompanying article: http://www.janeasystems.com/blog/node-js-meets-ios/
The app uses Node.js to set up a UDP broadcast communication layer that enables synchronization of the PouchDB database between all the peers on the local network.
It works on iOS 64-bit physical devices with iOS version 10.3 or higher. Specifically, iPhone 5s, SE and newer are supported, while iPhone 5, 5c and older are not. Support for the iPhone simulator is not included.
nodeproj path contains the Node.js project, which is a single file
nodeproj/main.js that can run on desktop platforms too, to have another PouchDB peer.
nodelibs path contains the Node.js mobile library binaries.
ios path contains the Xcode project to build and run the app for iOS devices.
index.ios.js file in the root folder contains the main React Native file.
Run the demo
For the demo to work, every instance must be connected to the same local network.
Running on iOS device
To run the demo on iOS you need:
- A macOS device with the latest Xcode with the iOS SDK version 10.3 or higher.
- One or more physical iOS devices with arm64 architecture, running iOS version 10.3 or higher.
- A valid Apple Developer Account.
- Every iOS device should be connected to the same WiFi network.
- Make sure you have the prerequisites for
brew install node
brew install watchman
- React Native CLI
npm install -g react-native-cli
- Run the required npm and react-native commands to install the required node modules in the project root:
- Open the
ios/PouchAlbum.xcodeprojproject file in Xcode.
- Select one of the physical iOS devices as the run target.
- In the project settings (click on the project main node), in the
Signingportion of the
Generaltab, select a valid Team and handle the provisioning profile creation/update. If you get an error that the bundle identifier cannot be used, you can simply change the bundle identifier to a unique string by appending a few characters to it.
- Run the app. If the build process doesn't start the app right away, you might have to go to
Settings>Generalin the device and enter
Profiles & Device Managementto manually accept the profile.
Using the Application away from your development machine
Debug configuration for iOS
react-native apps needs to have access to a development server to load the
react-native JS files. To make it easier to use our demo, the
Release configuration should be already selected when you clone this project. Instructions on how and why we did it can be found here. This way, the
react-native JS files will be packaged with the application instead of being loaded from the development server at runtime and the demo will be able to start without having to have network access to the development machine.
If you don't have a
Apple Developer Program membership, take into consideration that a free account's provisioning profiles are only valid for a period of 7 days, after which the application will stop working and will have to be redeployed with an updated provisioning profile.
Running on desktop
main.js node script can also run on any desktop platform as a standalone Node.js app. All you have to do is install the node modules required and have node run the
nodeproj/ path, run:
npm install node main.js
This will create another pouch peer that the mobile devices will also sync to.
- PouchDB uses MemDOWN for the levelDB adapter, which stores the database in memory only, with no persistence between runs.
- We didn't spend much time in the "Getting real time photos from camera" portion, so you might notice that portrait photos end in landscape format, which is the React Native's
ImagePickerIOSbehaviour. We've noticed the camera might also not show any image on some some iOS devices, so we advise to use "Camera roll" images in the demo if that's your case.
- There is a significant performance improvement in the app start up time when using recent iPhone models (6s and 7).