connect-love Demo iOS and Android app - using react native (see web version - https://github.com/shunpochang/connect_love_demo)
Switch branches/tags
Nothing to show
Clone or download
Latest commit 1a3f4f6 Jul 13, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
App Add initial RN files Jul 13, 2016
android Add initial RN files Jul 13, 2016
ios Add initial RN files Jul 13, 2016
.gitignore add inital files Jul 13, 2016
LICENSE Initial commit Jul 13, 2016
README.md Update README.md Jul 13, 2016
index.android.js add inital files Jul 13, 2016
index.ios.js add inital files Jul 13, 2016
package.json add inital files Jul 13, 2016

README.md

Support me with a Follow

connect-love mobile demo App

Using React-Native, here's the Android and iOS app for a simple commenting board with Django backend hosted on GAE that I built for my prior web tutorial.


connect-love web demo
connect_love_app

Following the setups and tutorial from React Native and leveraging a RESTful api through Django backend from my Django + Reactjs web demo, I built a iOS and Android version for connect-love app (while reusing 60% of the code for both platforms).

Steps to set up.

First follow React-Native (RN) instructions to install react-native command-line interface.

This demo root includes:

  • android/ios build dependencies in respective folders (do not need to touch them)
  • a package.json for JS dependencies
  • two RN root javascript files (index.*.js) corresponding to android and ios main app
  • an App folder that contains 2 views in the mobile app and a helper file for network api.

Install dependencies

# Installs all JS dependencies.
npm install
# Use rnpm to build additional depenencies for using third-party JS libraries 
# (like 'react-native-vector-icons' and 'tcomb-form-native') on iOS and Android.
rnpm link

iOS demo

ios_demo

Start running the app on iOS

react-native run-ios
# Check out console logs.
react-native log-ios

When running iOS simulator, Command⌘ + d brings up the developer settings, and Command⌘ + R refreshes the app.

Note: If you decided to switch to a non-secure api (not https://) for data fetching/posting, turn off App Transport Security in Xcode.


Android demo

android_demo

Start running the app on Android

# First start a Android Virtual Device (or connect to a physical device).
android avd
react-native run-android
# Check out console logs.
react-native log-android

When running Android simulator, Command⌘ + m brings up the developer settings, and 'rr' (press 'r' twice) refreshes the app.

Note: If you see errors from run-android, Google the errors and fix them ... and here are the two I encountered.

  • processDebugResources error: I managed to get around this error by opening Android Studio -> SDK manager -> for 'Android SDK' -> under 'SDK Platforms' -> check the 'Show Package Details' box on lower right -> under 'Android 6.0 (Marshmallow)' -> install 'Android SDK Platform 23' and 'Sources for Android SDK'.
  • app:installDebug no device error: make sure you start a virtual device through $android avd -- add the SDK path if android is not found: $export PATH="/Library/Android/sdk/tools:/Library/Android/sdk/platform-tools:${PATH}"