WebSeitz/wiki

Incrementally Migrating To React-Native

If you have a "traditional" WebApp, and you want to make it available as a MobileApp, how do you do it?

Building/maintaining native apps for both iOS and Android as you change your WebApp is a very expensive way to do things.

React-Native is supposed to make things better.

But,

So I want to see how readily I can take one of my personal WebApps and do the least-possible React-Native with WebViews.

Probably the first step (after picking which WebApp to work with (update: going with FamilyFinancialFuture)) is upgrading the BootStrap to a more-recent ResponsiveWeb version.

  • nope, this is wrong thinking. Better to do Spike Solution of ReactNative shell with any WebView, then start iterating!

Getting Started - on Mac - for Android

docs

irrelevant notes where I'm forced to upgrade MacOsX

I have XCode but it's v3.2.6 and current is v8.3.3!

  • no obvious way to upgrade, so go for fresh install - ack have to have MacOsX 10.12 and I have 10.9.5.
    • I run updater, but that's just patches, so I'm still at 10.9.5.
    • I realize that this is for learning, and my phone is Android, and I think I only need XCode for building iOS apps, so decide to skip this part.
    • meta-rant: this kind of gratuitous dependency is a big barrier to normal humans Learning Programming

Install/launch Android Studio - no apparent version problems.

  • following the Oct'2016 link above because it doesn't talk about XCode
  • looks like some Components have changed names, but think I have the right bits
  • set up bash
  • ignoring JDK for the moment because I think I have key bits already, and don't want to muck with it
  • add Google Play Services
  • hmm can't run android sdk at all, time to abandon this path as being obsolete

Go back to core page https://facebook.github.io/react-native/releases/0.30/docs/getting-started.html

  • at brew install node get same error I get when trying to brew update my outdated OpenSSL code - see TwiitterBot page
brew install node
Error: /usr/local/Library/Homebrew/download_strategy.rb:84: invalid multibyte escape: /^\037\213/
invalid multibyte escape: /^\037\235/
Please report this bug at http://github.com/mxcl/homebrew/issues
/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require'
/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require'
/usr/local/Library/Homebrew/formula.rb:1:in `<top (required)>'
/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require'
/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require'
/usr/local/Library/Homebrew/formula_installer.rb:1:in `<top (required)>'
/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require'
/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require'
/usr/local/Library/Homebrew/brew.h.rb:427:in `brew_install'
/usr/local/bin/brew:266:in `<main>'
BillSeitzMacBookPro2014% brew update ruby

error: The following untracked working tree files would be overwritten by checkout:
	.gitignore
	Library/Contributions/brew_bash_completion.sh
	Library/Contributions/brew_zsh_completion.zsh
	Library/Formula/a52dec.rb
	Library/Formula/aacgain.rb
	Library/Formula/aalib.rb
	Library/Formula/abook.rb
	Library/Formula/ack.rb
	Library/Formula/activemq.rb
	Library/Formula/adplug.rb
	Library/Formula/advancecomp.rb
	Library/Formula/aescrypt.rb
	Library/Formula/aircrack-ng.rb
	Library/Formula/algol68g.rb
	Library/Formula/allegro.rb
	Library/Formula/alpine.rb
	Library/Formula/android-ndk.rb
(lots more)
	Library/Formula/discount.rb
	Library/Formula/d

Aborting
Error: Failure while executing: git checkout -q master
  • try this - no complaints
  • brew update - seems ok until
HEAD is now at 751334a Merge pull request #3076 from DomT4/high_sierra_b7
To restore the stashed changes to /usr/local run:
  'cd /usr/local && git stash pop'
==> Homebrew has enabled anonymous aggregate user behaviour analytics.
Read the analytics documentation (and how to opt-out) here:
  https://docs.brew.sh/Analytics.html

==> Tapping homebrew/core
Cloning into '/usr/local/Library/Taps/homebrew/homebrew-core'...
remote: Counting objects: 4556, done.
remote: Compressing objects: 100% (4345/4345), done.
remote: Total 4556 (delta 36), reused 457 (delta 11), pack-reused 0
Receiving objects: 100% (4556/4556), 3.63 MiB | 22.00 KiB/s, done.
Resolving deltas: 100% (36/36), done.
Checking connectivity... done.
Tapped 4341 formulae (4,600 files, 11.3MB)
Already up-to-date.
Error: Could not link:
/usr/local/share/man/man1/brew.1

Please delete these paths and run `brew update`.
==> Migrating HOMEBREW_REPOSITORY (please wait)...
Error: Could not link:
/usr/local/share/man/man1/brew.1

Please delete these paths and run `brew update`.
==> Migrated HOMEBREW_REPOSITORY to /usr/local/Homebrew!
Homebrew no longer needs to have ownership of /usr/local. If you wish you can
return /usr/local to its default ownership with:
  sudo chown root:wheel /usr/local
  • so do rm -rf /usr/local/share/man/man1/brew.1, then brew update again; it says Already up-to-date.
  • do sudo chown root:wheel /usr/local
  • back to brew install node - get various warnings/alerts, but going to ignore them and try to move on
clang: error: no such file or directory: '/usr/local/lib/libiconv.dylib'
make[2]: *** [pkg-config] Error 1
make[1]: *** [all-recursive] Error 1
make: *** [all] Error 2
...
Error: You are using macOS 10.9.
We (and Apple) do not provide support for this old version.
You may encounter build failures or other breakages.
Please create pull-requests instead of filing issues.
  • do brew install watchman
watchman: macOS Yosemite or newer is required.
Error: An unsatisfied requirement failed this build.
  • so I guess I'm really blocked unless I move to MacOsX 10.10 at least. But I guess I'll whole-hog to the current version. (Update: done)
  • now doing brew makes me upgrade XCode. So I go ahead.

actually moving on with Facebook's main GettingStarted doc

Sept05: brew install..., npm-install... all good

react-native init AwesomeProject runs

(get busy)

Oct29: same doc, move on to react-native run-ios, get long string of errors.

  • smells like XCode update. Try to launch XCode, says version I have doesn't even work with Sierra, which doesn't smell right... launch AppStore app, it just gives Open button for XCode, click and it gives me the "additional components" message, so I let it add those. Then when it's done, I quit XCode.
  • do react-native run-ios again, get some messages, but iOS Simulator seems to actually run. But I don't see anything "Awesome" (and the doc doesn't give any screenshots, so not sure what I'm looking for)
  • try react-native run-android: doing some gradle install, then die:
A problem occurred evaluating project ':app'.
> java.lang.UnsupportedClassVersionError: com/android/build/gradle/AppPlugin : Unsupported major.minor version 52.0
  • try launching Android Studio to see if that gives warning, but nope (running 2.3.3)
  • looks like I need Java 8, but only have Java 6!
  • "Don't rely on Oracle to install Java properly on your Mac." Seriously?
  • brew cask install java nope
==> Creating Caskroom at /usr/local/Caskroom
Error: /usr/local/Homebrew/Library/Homebrew/cask/lib/hbc/cask_loader.rb:110: syntax error, unexpected tIDENTIFIER, expecting keyword_do or '{' or '('
    packaged applications, as discussed here:
  • try brew update first
  • ok now cask seems to be working, though I see it's downloading JDK 9 not 8....
  • try react-native run-android again.
FAILURE: Build failed with an exception.
* What went wrong:
Could not determine java version from '9.0.1'.
  • Really the fastest way to get around this error is to use JDK 8. So I pick jdk-8u151-macosx-x64.dmg
  • but have to update java_home
    • current java_home you get with /usr/libexec/java_home
    • do export "JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_151.jdk/Contents/Home" in both .bashrc and .zshrc
    • fyi app path is /Users/billseitz/Documents/react/AwesomeProject
    • open new Terminal window, cd there, do react-native run-android get
A problem occurred configuring project ':app'.
> SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.
  • make local.properties file. Run again: nope
A problem occurred configuring project ':app'.
> You have not accepted the license agreements of the following SDK components:
  [Android SDK Platform 23, Android SDK Build-Tools 23.0.1].
  Before building your project, you need to accept the license agreements and complete the installation of the missing components using the Android Studio SDK Manager.
  • hmm that seems like the Android 6 pieces in Android Studio, so check off equivalent 2 sub-checkboxes for Android-6 as I had checked for Android-7.0. Accept agreements etc
  • try again, get: no connected devices
  • need to define virtual device, pick Nexus 5 running Android 7.0. In AVD click the little Run arrow, it brings up fake phone-emulator onscreen, seems to boot up Android. But Awesome app isn't visible anywhere.
  • Leave that emulator window open, then run command-line again. It runs and recognizes that profile. But nothing seems to happen
  • Quit the emulator and run command-line again. Get the "no connected devices" msg again.
  • So launch the virtual device emulator again, command-line again, get
Installing APK 'app-debug.apk' on 'Nexus_5X_API_24(AVD) - 7.0' for app:debug
Installed on 1 device.
BUILD SUCCESSFUL
Total time: 8.097 secs
This build could be faster, please consider using the Gradle Daemon: https://docs.gradle.org/2.14.1/userguide/gradle_daemon.html
/bin/sh: adb: command not found
Starting the app (adb shell am start -n com.awesomeproject/com.awesomeproject.MainActivity...
>
  • so I'm confused. It seems like it's happy, but what's on screen seems totally generic.
  • ah, I go into my scrolling list of apps, and AwesomeProject is there!

Restarting Nov'2018 - to wrap CoachBot

Nov11'2018: Facebook now recommends using Expo, so I install that.

expo init coachbot - choose Blank template

  • Your project is ready at /Users/billseitz/coachbot
  • expo start -> http://localhost:19002/

Nov16

  • emulator doesn't seem to be launching
  • so install the Expo app on my phone; scan the QR code, it launches but is useless
  • a little cut-and-paste, and boom it works!
  • now have to learn enough CSS to vary the textarea width based on screensize. Don't @ me.
    • hah cheated, asked friend, got size right

Edited:    |       |    Search Twitter for discussion

Made with flux.garden