shunpochang / connect_love_mobile_demo

connect-love Demo iOS and Android app - using react native (see web version - https://github.com/shunpochang/connect_love_demo)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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}"

About

connect-love Demo iOS and Android app - using react native (see web version - https://github.com/shunpochang/connect_love_demo)

License:MIT License


Languages

Language:JavaScript 57.2%Language:Objective-C 25.7%Language:Python 9.5%Language:Java 7.5%