VOTE: To Build NativeScript {N} Apps with React

I’ve been deeply involved with React Native since April 2015. To say I’m a fanboy is a bit of an understatement for sure. But, I’m super intrigued with the fact that NativeScript {N} gives you 100% access to native APIs. Sounds great, right? The only catch is that in order to do so, you’d either need to write vanilla JS or more recently you can write them with Angular2. Personally, I’d rather not do either. I’d rather use my hard earned React skills. And this is totally possible…

And we can help make this a reality. All you need to do is join me to UPVOTE the feature request!

After writing this blog post, I was motivated to write my first medium post on the same topic, which is a bit more informative…
https://medium.com/@chris.geirman/building-nativescript-apps-with-react-34417f02144c

Eric Vicenti’s Q&A on Reactiflux – A Curated Transcript

Today between 1 – 2:30 PM PST, Eric Vicenti (@EricVicenti) graciously took our questions in the #reactiflux channel on Discord. Below is my curated and culled transcript. I’ve removed many of the comments which added little value such as “thx” and “sounds good” etc. I’ve also tried my best to group the related conversations so that the questions and answers are easily browsed. If you find any issues, please let me know by leaving a comment or sending me (@geirmanc) a tweet and I’ll fix them right away.

The full, uncensored version can be found on the reactiflux repo.

  1. What does the build/release process for RN apps look like at Facebook? (Documentation on the site’s a little light in that regard)
  2. What pattern are you guys using to render a detail view from tapping a list view item? I tried using Navigator, but the component in render row seems to not have the navigator prop even if the list view does(edited)
  3. Are you planning to use relay with any of your react native apps?
  4. do you update rn apps from hosted js bundles at facebook? any tips or services you can recommend for doing this?
  5. Are you still working on offloading animations off the JS thread? When do you think it will be ready for both iOS and Android?
  6. What would you say the mix is between RN and native components and coding in Facebook apps?
  7. Whats the future for RN platform wise? At this point mobile platforms are mostly covered but what about other targets: Xboxes, Roku’s IOT? Does RN become another sort of substrate platform like react core?
  8. Any tips on how to ease a company into looking into React-Native that is very leery of code once run everywhere solutions? I know RN isn’t exactly code once, but it’s close to it. This has less to do with the code itself and more of what’s a good way to introduce the idea in a more persuasive way. We currently have our Desktop team doing app development and it puts a giant burden on them, I’d like to lessen that greatly.
  9. Are there any ways to access app lifecycle methods in RN (e.g. applicationDidBecomeActive in iOS)? Or would you just use the native to JS events?
  10. how do you think the idea of “learn once, write anywhere” has held up?
  11. How often do you find yourselves doing native work on your production android apps because of performance issues?
  12. On that note, and this might completely be my ignorance, suppose you have massive calculations to perform. Are Web Workers able to handle that test or is there an abstraction for them, given the native platforms have threading
  13. Are there improvements coming to ListView with regard to memory consumption on big lists?
  14. Any announcements on releasing android-support for FB SDK?
  15. @ericvicenti thoughts on how to model a segment control in the navbar and updating the component when segment control changes?
  16. So, and this is more of a freebie question. Is it a sound plan to port a webapp to React Native with a Native UI implementation, and then replace/add from there? Or is that not a valid usecase
  17. How big is the team working on React Native?
  18. Are there changes coming to gestures handling and ScrollView? Specific problem I have is it’s difficult for now to pan a ScrollView horizontally blocking the vertical scroll. Natively it’s easy to do on iOS with gesture recognizers.
  19. @ericvicenti what percent of Groups app is using NavigationExperimental if at all?
  20. What are the biggest needs that the community could fill in right now that aren’t being actively tackled by the RN FB team?
  21. I’d love a “Getting Started with NavigationExperimental” style tutorial. I spent an evening trying to dig into the docs and UIExplorer examples, but didn’t get far. Something that starts simple and builds up from there would be awesome. Are you aware of any efforts along those lines? ETA?
  22. I’m working on a RN app on the FB platform, do you know if it’s possible to contact FB to see if they’d be interested in showcasing it?
  23. What are your thoughts on using something like this for navigation: /aksonov/react-native-router-flux
  24. So, in what version will navigationExperimental, no longer be experimental? when will it be in the main docs? I’ve played with it and it feels pretty stable
  25. I noticed rendering can take some time when you try to render a grid with simple items (Image or Text), let’s say 50. Is that something you observed on your side? Are there possibilities to mitigate that?
  26. are there any solutions for running JS in the background, other than the allowed things like location and sound?
  27. Final/Parting Thoughts

Joshua – Mar 10, 2016 1:01 PM

[Q&A] What does the build/release process for RN apps look like at Facebook? (Documentation on the site’s a little light in that regard)

ericvicenti – Mar 10, 2016 1:04 PM
@Joshua, we have a system that runs tests for us against each commit, which we call ‘diff’s in the phabricator world. Some of those tests run asynchronously and others are ‘land-blocking’. The build system runs async tests continuously, and will make sure all of the land-blocking tests pass before it merges the commit into master.

ericvicenti – Mar 10, 2016 1:05 PM
We also have release branches that are synced up with our product releases. We will cut a branch and stabilize it for a week or two before shipping the final product. To stabilize, we first fix the bug in master, and pick the fix over into the release branch
Currently those releases happen once every two weeks, but we are thinking about doing it even faster


LucasKA – Mar 10, 2016 1:03 PM

[Q&A] What pattern are you guys using to render a detail view from tapping a list view item? I tried using Navigator, but the component in render row seems to not have the navigator prop even if the list view does(edited)

ericvicenti – Mar 10, 2016 1:07 PM
@LucasKA With Navigator, we need to pass the navigator prop around manually, then make imperative calls on it to move around in the app. This can get tricky as your app grows, so you may want to look into more declarative navigation solutions like NavigationExperimental

ericvicenti – Mar 10, 2016 1:09 PM
To provide some context, NavigationExperimental is the new Navigation library we are working on at Facebook, and we decided to open source it pretty early on because Navigator has clearly been a pain point for the RN community

LucasKA – Mar 10, 2016 1:10 PM
@ericvicenti Thanks, I’ll look more into it, but was passing the navigator down, it just seems to die in the renderRow(). I feel like List View Item -> Detail View is a very common use case. 😃


jsierles – Mar 10, 2016 1:08 PM

[Q&A] Are you planning to use relay with any of your react native apps?

ericvicenti – Mar 10, 2016 1:09 PM
@jsierles, we already use Relay in all of our RN apps! AdsManager, Groups, and some features within the main Fb app are already using Relay

jsierles – Mar 10, 2016 1:10 PM
interesting. didn’t know the main app used react native

geirman – Mar 10, 2016 1:35 PM
@jsierles the main fb app uses rn for the “Friends Day Videos” and soon the “Events Dashboard”. they mention this in the keynote react conf 2016 video if you’re interested


ultralame – Mar 10, 2016 1:09 PM

[Q&A] do you update rn apps from hosted js bundles at facebook? any tips or services you can recommend for doing this?

ericvicenti – Mar 10, 2016 1:12 PM
@ultralame (Hi, Colin!) It is something we’re thinking about, but we currently ship our JS bundle with the native app bundle. Feel free to explore things like Microsoft CodePush!


jean – Mar 10, 2016 1:09 PM

[Q&A] Are you still working on offloading animations off the JS thread? When do you think it will be ready for both iOS and Android?

ericvicenti – Mar 10, 2016 1:14 PM
@jean Good question! The Animation off-threading effort has mostly been pioneered by Krzysztof Magiera who has been working with the Exponent team. We haven’t prioritized it yet, so we absolutely want some help from the community in solving this problem!


Joshua – Mar 10, 2016 1:12 PM

[Q&A] What would you say the mix is between RN and native components and coding in Facebook apps?

ericvicenti – Mar 10, 2016 1:15 PM
@Joshua The main app is still native, but many new screens are being developed in react. We typically try to use RN where there isn’t heavy data overlap between other screens in the app. As our data handling solutions get more advanced, we can start having bigger mixes of native and react code


monastic.panic – Mar 10, 2016 1:13 PM

[Q&A] Whats the future for RN platform wise? At this point mobile platforms are mostly covered but what about other targets: Xboxes, Roku’s IOT? Does RN become another sort of substrate platform like react core?

ericvicenti – Mar 10, 2016 1:15 PM
@monastic.panic I think that would be awesome, but we aren’t there yet. We still have a lot of work when it comes to easing the differences between iOS and Android. Eventually it would be awesome to get RN working on everything from web to TV interfaces, but we would need a lot of community support to make that happen


Sinistral – Mar 10, 2016 1:15 PM

[Q&A] Any tips on how to ease a company into looking into React-Native that is very leery of code once run everywhere solutions? I know RN isn’t exactly code once, but it’s close to it. This has less to do with the code itself and more of what’s a good way to introduce the idea in a more persuasive way. We currently have our Desktop team doing app development and it puts a giant burden on them, I’d like to lessen that greatly.

ericvicenti – Mar 10, 2016 1:15 PM
@Sinistral, the write-once-run-anywhere solutions are often problematic because they invite a lot more people to build for a platform that they aren’t highly familiar with. To ship a successful app, you are much better off having native platform developers work alongside react developers.

Sinistral – Mar 10, 2016 1:21 PM
@ericvicenti I couldn’t agree more. I’ve been talking with our Android and Apple devs to get a feel for how their environments work, but unfortunately we don’t have any “dedicated” app developers, which is it’s own problem but ya. I’m glad to basically hear you echo my thoughts. Thanks


DownChapel – Mar 10, 2016 1:20 PM

[Q&A] Are there any ways to access app lifecycle methods in RN (e.g. applicationDidBecomeActive in iOS)? Or would you just use the native to JS events?

ericvicenti – Mar 10, 2016 1:21 PM
@DownChapel, you can use the AppStateIOS module to monitor that on iOS. Or use componentDidMount to detect when the app has started


vcarl – Mar 10, 2016 1:22 PM

[Q&A] how do you think the idea of “learn once, write anywhere” has held up?

ericvicenti – Mar 10, 2016 1:23 PM
@vcarl, it is certainly challenging to make these sorts of changes to your development team, but I work with developers every day who started on iOS, web, or Android, but all manage to ship their code on both iOS and Android. We
‘re really adverse to platform forking when we can avoid it


brunobar79 – Mar 10, 2016 1:24 PM

[Q&A] – How often do you find yourselves doing native work on your production android apps because of performance issues?

ericvicenti – Mar 10, 2016 1:29 PM
@brunobar79 It depends on how performance-sensitive the application is. Some teams need to pay closer attention and are working on more experimental tech to speed things up. There is a whole team working on improving RN performance for both platforms, and they are doing tons of native work
Also keep in mind, bad performance can also be due to inefficient JS code, so there are a lot of wins to be gained from paying attention to your JS


Sinistral – Mar 10, 2016 1:31 PM

[Q&A] – On that note, and this might completely be my ignorance, suppose you have massive calculations to perform. Are Web Workers able to handle that test or is there an abstraction for them, given the native platforms have threading

err, that task, not test

ericvicenti – Mar 10, 2016 1:32 PM
Massive calculations are probably best done in something more performant than JS, like C++. You can do that, and interface with your native code from JS. Or if you really want to use JS, you can spin up an extra react bridge with a different bundle. But we don’t have a real WebWorkers solution yet

Sinistral – Mar 10, 2016 1:34 PM
Alright, so the take away is to weave native with react-native. Awesome. Thanks again for the answers.

jsierles – Mar 10, 2016 1:39 PM
@Sinistral in a lot of cases you can solve problems with focused native code that bridges to react native. i think that point is lost a lot


jean – Mar 10, 2016 1:33 PM

[Q&A] Are there improvements coming to ListView with regard to memory consumption on big lists?

ericvicenti – Mar 10, 2016 1:36 PM
@jean ListViews are very tricky, and lots of people are working on improvements, including us. We have several experimental list views internally, but we’re not sure about any of them yet.
@Sinistral, yep, for complex and very high-performance apps, you absolutely want to be able to use native code when you need to


daniel – Mar 10, 2016 1:39 PM

[Q&A] Any announcements on releasing android-support for FB SDK?

ericvicenti – Mar 10, 2016 1:41 PM
@Daniel, I’m not aware of any upcoming announcements about an Android FB SDK. But our big developer conference, F8, is just about a month away..


chirag04 – Mar 10, 2016 1:39 PM

[Q&A] @ericvicenti thoughts on how to model a segment control in the navbar and updating the component when segment control changes?

ericvicenti – Mar 10, 2016 1:41 PM
@chirag04, your segment control can have a prop that it calls to pass an action to the parent. The parent can use the action to decide how to change the state, and declaratively re-render the segmented control and the appropriate view for it.


Sinistral – Mar 10, 2016 1:40 PM

[Q&A] So, and this is more of a freebie question. Is it a sound plan to port a webapp to React Native with a Native UI implementation, and then replace/add from there? Or is that not a valid usecase

ericvicenti – Mar 10, 2016 1:41 PM
@Sinistral, yep it is pretty common to start with a React web app and port it to RN.


daniel – Mar 10, 2016 1:44 PM

[Q&A] How big is the team working on React Native?

ericvicenti – Mar 10, 2016 1:47 PM
The RN team is about 15-20 people right now, depending on who you count. I’m actually working on RN within the Groups products right now, so I’m not even on the core RN team at the moment
Of course there are a lot of neighboring teams like React Core, Relay, GraphQL, Flow, Nuclide


jean – Mar 10, 2016 1:46 PM

[Q&A] Are there changes coming to gestures handling and ScrollView? Specific problem I have is it’s difficult for now to pan a ScrollView horizontally blocking the vertical scroll. Natively it’s easy to do on iOS with gesture recognizers.

ericvicenti – Mar 10, 2016 1:47 PM
@jean, another good question. You’ve pointed out two of the most problematic technical areas that we face with RN, ListViews and gestures.

ericvicenti – Mar 10, 2016 1:52 PM
The trickiest components when it comes to gestures are those like ScrollView, where we have a native component that needs to interact well with the JS world. We are constrained by platform gesture systems, so even if we had a better design for a gesture system, we wouldn’t have an easy time building it

ericvicenti – Mar 10, 2016 1:53 PM
Andy Matuschak had a great talk at ReactJS conf that shows how tricky gesture systems can get. We still have a ways to go in that department

jean – Mar 10, 2016 2:04 PM
@ericvicenti indeed very tricky, I hope there will be a technical solution!

ericvicenti – Mar 10, 2016 2:30 PM
@jean, along the lines of @Joshua’s question about how the community can help, I would really like to see the community step up and try to crack some of these hard problems. Take gestures for example. We haven’t “solved” gesture handling at Fb, but we’re happy to take an open approach to find solutions.
Andy’s talk shows how far we have to go in this regard: https://www.youtube.com/watch?v=uBYPqb83C7k

brentvatne – Mar 10, 2016 2:32 PM
here are some hard problems that exist in react native right now, including the listview and gestures that eric mentions above: https://github.com/brentvatne/hard-react-native-problems/issues


chirag04 – Mar 10, 2016 1:52 PM

[Q&A] @ericvicenti what percent of Groups app is using NavigationExperimental if at all?

ericvicenti – Mar 10, 2016 1:53 PM
@chirag04, ‘percent’ can be a tricky thing to define when it comes to API adoption, especially in hybrid apps like Groups. An upcoming release of Groups will switch to NavigationExperimental for all navigation that happens within the react views


Joshua – Mar 10, 2016 1:53 PM

[Q&A] What are the biggest needs that the community could fill in right now that aren’t being actively tackled by the RN FB team?

ericvicenti – Mar 10, 2016 2:01 PM
@Joshua The community is pretty amazing when it comes to supporting each-other, and I want to see that get even better. The docs aren’t nearly as mature as the knowledge of the community, and it would be amazing if everybody pitched in on the documentation and example code to help raise the bar for everyone else.


geirman – Mar 10, 2016 1:57 PM

[Q&A] I’d love a “Getting Started with NavigationExperimental” style tutorial. I spent an evening trying to dig into the docs and UIExplorer examples, but didn’t get far. Something that starts simple and builds up from there would be awesome. Are you aware of any efforts along those lines? ETA?

ericvicenti – Mar 10, 2016 2:01 PM
@geirman, that is on my todo list. I have started a version here, but I decided to move away from the TicTacToe example and I haven’t gone back to revise and finish it: https://github.com/ericvicenti/navigation-rfc/blob/master/Docs/Guide.md


daniel – Mar 10, 2016 2:00 PM

[Q&A] I’m working on a RN app on the FB platform, do you know if it’s possible to contact FB to see if they’d be interested in showcasing it?

ericvicenti – Mar 10, 2016 2:01 PM
@Daniel, you mean showcasing it on the RN page? If you publish a really impressive app, you can blast us on twitter and we will probably feature it.


daniel – Mar 10, 2016 2:06 PM

[Q&A] What are your thoughts on using something like this for navigation: /aksonov/react-native-router-flux

ericvicenti – Mar 10, 2016 2:10 PM
It is great to see people tackling the navigation problem from several angles. The desire for a redux-like navigation system is why I hacked on NavigationExperimental over my holiday break.
That particular library uses ExNavigator, which uses the RN Navigator component. So it is still stateful on the inside, which is why I decided to focus on a genuinely declarative approach


emilio – Mar 10, 2016 2:17 PM

[Q&A] So, in what version will navigationExperimental, no longer be experimental? when will it be in the main docs? I’ve played with it and it feels pretty stable

ericvicenti – Mar 10, 2016 2:19 PM
@emilio, the API is still changing in minor ways, so there has been a bit of hesitation on my part with the docs. (The version in master is even ahead of 0.22 already)

ericvicenti – Mar 10, 2016 2:20 PM
So I’m not sure if I should publish docs that will be out of sync with the current release. @brentvatne, I’m sure you can help. 

brentvatne – Mar 10, 2016 2:20 PM
in 1 week i will have more time to help on docs!
that would be great to see more people pitch in on that

brentvatne – Mar 10, 2016 2:21 PM
you can give NavigationExperimental a try by reading the docs and trying to build things, and whenever something is confusing you can either try to clarify or submit a PR for it

emilio – Mar 10, 2016 2:22 PM
@brentvatne looking forward to it! where are the navigationExperimental docs being prepared, so we can contribute

ericvicenti – Mar 10, 2016 2:22 PM
The NavigationExperimental docs are being worked on here:
https://github.com/ericvicenti/navigation-rfc/blob/master/Docs

ericvicenti – Mar 10, 2016 2:23 PM
Contributions to the Navigation docs would be greatly appreciated!! It is also a great way to make sure you understand the code!
Also, it would be awesome if one of you could help by adding comments to the navigation example code in RN master

emilio – Mar 10, 2016 2:24 PM
@ericvicenti regarding the Guide, you are planning to completely rewrite it, aren’t you?

ericvicenti – Mar 10, 2016 2:25 PM
@emilio, I hope to swap out the example and go into more complicated navigation eventually

emilio – Mar 10, 2016 2:27 PM
@ericvicenti So, are contributions to the current guide welcome? Or should we wait till you start the new one

ericvicenti – Mar 10, 2016 2:28 PM
@emilio, they are very welcome!


jean – Mar 10, 2016 2:20 PM

[Q&A] I noticed rendering can take some time when you try to render a grid with simple items (Image or Text), let’s say 50. Is that something you observed on your side? Are there possibilities to mitigate that?

ericvicenti – Mar 10, 2016 2:21 PM
@jean, we generally try to break up the JS renders into smaller chunks. @sahrens recently released something along those lines: IncrementalPreview by sahrens https://github.com/facebook/react-native/pull/4953/files

brentvatne – Mar 10, 2016 2:23 PM
@jean – make sure you read this for more background on what eric mentioned above re: breaking up js renders: https://www.facebook.com/notes/andy-street/react-native-scheduling/10153916310914590

jean – Mar 10, 2016 2:24 PM
@ericvicenti I saw that one and it’s interesting, but I needed to display a table at once (fully visible, no scroll) and incremental rendering wasn’t giving a good user experience.

brentvatne – Mar 10, 2016 2:26 PM
@jean – then you can incrementally render it and show loading while it’s happening then the actual table when it’s complete using something like IncrementalPresenter

ericvicenti – Mar 10, 2016 2:26 PM
@jean, yeah it can be tricky when you have a lot of views that you need to flush to the main thread at once. Maybe you could mount the view ahead of time and simply display it when you need to

brentvatne – Mar 10, 2016 2:26 PM
this will allow you to maintain responsiveness while rendering it

jean – Mar 10, 2016 2:27 PM
@brentvatne yes true,


easilyBaffled – Mar 10, 2016 2:20 PM

[Q&A] are there any solutions for running JS in the background, other than the allowed things like location and sound?

ericvicenti – Mar 10, 2016 2:22 PM
@easilyBaffled sorry, not that I’m currently aware of! There is surely a way if you figure it out on the native side


Final/Parting Thoughts

ericvicenti – Mar 10, 2016 2:31 PM
To anyone interested, I strongly encourage you to publish exploratory articles, hack on prototypes, and really push the limit of the current methodologies. Anybody can help us solve these problems, and we need dedicated folks like you to crack these tough issues, and move our community to the bleeding-edge of mobile development.

React Native’s AsyncStorage.mergeItem()

The react native documentation for AsyncStorage.mergeItem() is a bit vague and provides no example how it works or how it’s used. Today, I figured it out.

Here’s their current description

Merges existing value with input value, assuming they are stringified json. Returns a Promise object. Not supported by all native implementations.

If you’re familiar with the Object.assign(), this is similar except it does a deep merge. Let me explain with an example.

 let KEY1 = 'test_merge'
 let KEY2 = 'test_assign' // I'll use this in the next example
 let ORIG = {
   'simple_value': 1,
   'dual_obj': { 'dual_obj_1': 1, 'dual_obj_2': 1 },
   'single_obj': {'single_obj_1': 1}
 }

 let DELTA = {
   'dual_obj': { 'dual_obj_1': 2, 'dual_obj_new': 2 },
   'simple_value': 2,
 }


 AsyncStorage.setItem(KEY1, JSON.stringify(ORIG), () => {
   AsyncStorage.mergeItem(KEY1, JSON.stringify(DELTA), () => {
     AsyncStorage.getItem(KEY1, (err, result) => {
       console.log('KEY1 result of merged object: %O', JSON.parse(result))
     })
   })
 })

I’ve created two objects ORIG and DELTA. After setting the first item in local storage using AsyncStorage.setItem(), I then merge the DELTA object in. And here’s the result..

2016-03-09_1653

Notice that in “dual_obj” we’ve succeeded in modifying the “dual_obj_1” value. As well, we were able to add the “dual_obj_new” key.  We also updated the “simple_value”. That’s a deep merge.

I thought I’d get the same thing if I were to do an Object.assign(ORIG, DELTA), but I was wrong. I used KEY2 with the following code…

 AsyncStorage.setItem(KEY2, JSON.stringify(ORIG), () => {
   AsyncStorage.setItem(KEY2, JSON.stringify(Object.assign(ORIG,DELTA)), () => {
     AsyncStorage.getItem(KEY2, (err, result) => {
       console.log('KEY2 result of assigned object: %O', JSON.parse(result))
     })
   })
 })

And ended up with the following output…

2016-03-09_1659

Notice the missing object.

If you found this helpful, give me a shout out on twitter (@geirmanc)

Thoughts on the Book “Learning React Native”

This is not going to be a thorough nor particularly thoughtful review. Sorry. This is going to be a quick recollection of my thoughts based on a few notes I scribbled to myself as I read the book Learning React Native by Bonnie Eisenman (@brindelle).

Overall, I thought the book was really well done and a worthwhile read. I’ve been working in React Native since April 2015 (v0.4.0), so I wouldn’t consider myself a noob anymore, however I’m far from an expert either. I felt this book did a great job of introducing the beginner to the platform while also adding enough value to make it a good use of time for the intermediate react native developer.

I particularly loved that she addressed both iOS and Android together, which makes it easy to compare/contrast in the same context. Very helpful, and insightful to me since I’ve done very little with Android so far.

She does a deep(ish) dive into Gesture and Pan Responder which I’d consider a more advanced topic. This section was illuminating and felt thorough, which left me realizing I’ve got a long way to go before I’ll have achieved a mastery of this topic. Helpful here would been to introduce some real world use cases + example solutions that take into account each of the various callbacks (e.g. when would onResponderReject be useful, and how to properly use?)

I felt she could have done a more thorough job of walking us through the code samples in some places, but other than that I ultimately walked away feeling like reading this book was a good use of my time.

Setting up React Native for Android – A Beginner’s Journey

I’ve been playing with React Native now for 7 months, since April 2015. Geez… has it really been that long already? Time sure flies when you’re… uh… you know!

Up until now, I’ve been happy to develop my iOS app alone, pushing Android off to the future. But that changed when I came across a call for help on Stack Overflow this past weekend titled ‘Unable to download JS bundle’ error on Android 4Intrigued, I decided to setup my Android environment and see if I had any better luck (spoiler alertL I didn’t… have any better luck that is). But I did document every step of my experience, and here I lay it out for your pleasure… every gruesome detail.

Start Time: 11:45a

  • I start with the official documents for Android Setup, only seems logical
  • Install JDK (version 8u65 for Mac OS X x64)
  • Install Android SDK
    <span style="color: #993300;">$ brew install android-sdk</span>
  • Define ANDROID_HOME in ~/.bashrc or in my case ~/.zshrc, I added the following to the end of the file.
    <span style="color: #993300;">export ANDROID_HOME=/usr/local/opt/android-sdk</span>
  • Configure SDK  – in a fresh shell, type android then add the following packages. This took some time, maybe 30 minutes?
    • Android SDK Build-tools version 23.0.1
    • Android 6.0 (API 23)
    • Android Support Repository
    • Received this warning, so I followed the instructions
      01 - Android Tools Updated
    • I reopened the manager window by typing android again with no further problems.
    • However, upon opening the already installed Eclipse, I received this warning.
      02 - Install Java SE 6
    • Clicking the “More Info” took me to an Apple support article (pictured below) where I downloaded javaforosx.dmg, which installed easily
      03 - javaforosx
    • Eclipse Never Runs – I can see the eclipse icon appear in my taskbar, then disappear. Tried twice, rebooted, tried again with no luck. I take a note to look into this later, but moving on for now.

Time Check: 12:40p

  • Install Genymotion – This is the android emulator. I grab free for personal use version genymotion-2.5.2 for Mac. Installing requires the typical drag to applications, except I’m dragging both the app plus cli shell icons.
  • Run Genymotion – Upon opening the app, I get this error. Apparently I should have red the install guide which would have told me that I needed to install Oracle VM VirtualBox first.
    04 - Oracle VM Virtual Box Dependency
  • Install Oracle VM Virtual Box for Mac OSX
    • Download and install VirtualBox for OS X from the Download VirtualBox page (VirtualBox-5.0.8-103449-OSX.dmg).
      When installing VirtualBox, in the Custom setup window, make sure VirtualBox Networking is enabled.
    • Reboot and run VirtualBox from the Application Directory
  • Run Genymotion then Add A Virtual Box – I Added a MotoX 4.4.4 since this is what I own. Took just a few minutes to configure.
  • Try to Emulate Something (FAIL!) – with genymotion emulator open 
    <span style="color: #993300;">$ react-native init deletable
    $ cd deletable
    $ react-native run-android</span>

05 - Android Build Failed

  • Installed Android SDK Build Tools – this is where I apparently just screwed up. Firstly, I remember clicking on the build tools at the Configure SDK step above, but for some reason it didn’t install. My best guess is that I didn’t accept all the licenses correctly. In any case this time, I installed both Android SDK Build-tools 23.0.1 && 23.0.2 since it’s available.
  • Try to Emulate Something (SUCCESS!) – It worked! It took 1 minute 21 seconds to build, which is dagnabit slow, but it worked in the emulator! Apparently I can make the builds run faster by installing the Gradle Daemon, but I’ll save that for another time.

Time Check: 2:25p

I’m finally to the point where I can attempt to duplicate the stack overflow issue  ‘Unable to download JS bundle’ error on Android 4These are the instructions I followed, which were what was live at the time I did this (fyi: they’ve been updated since to be more clear)

06 - Connect to Device Instructions for React Native

Before I could even get started on these instructions, I had to first understand the nomenclature. The author is clearly making assumptions about what he/she thinks I already know, but I am totally new to Android development and have to start from square one.

  • What’s a rage shake menu?
    I had to research what the “rage shake” was to ensure I understood. As it turns out, both Facebook and Google use this feature to send debug info to their testers from the wild. My phone, however uses the rage-shake to start the camera. Once I disabled that for the camera, it still didn’t open the “rage shake menu”
  • What is adb?
    This turns out to be the Android Debug Bridge, a CLI tool for debugging.
  • How do I run adb?
    I started by typing adb in the terminal. Success! I was given a list of valid commands.

Ok, so now I felt like I understood the language and understood the tools enough to get started on this. Referring back to the docs image above, the first step in configuring device to connect to the dev server via wifi was “Open rage shake menu (shake the device) or run adb shell input keyevent 82.

I shook the hell out of my phone, but rage shake didn’t work for me. On the MotoX, I can start the camera at anytime by shaking my phone, so I disabled that feature to test this. I had no luck. So, I was left figuring out how to send the adb command to my phone.

As I said earlier, when I typed adb <enter> in the terminal, I was shown a list of available commands. One of the commands was adb devices which showed me all connected devices. I gave it a try and got this response…

07 - ADB Response

At this point, I had no idea whether that was my wifi connected device or the emulator. I’m not even clear what a device has to do to become “connected” or what “connected” means. But, I figure that if I issued the keyevent, it would get sent to this device, so I gave it a try.

<span style="color: #993300;">adb shell input keyevent 82 </span>

This opened the dev menu in the emulator. Ok, that answers the question as to whether it was my device or the emulator. I see the option for Dev settings > debug server host for device (Steps 2 & 3), so I entered the local IP of my local machine as instructed (10.0.0.4:8081), then…

08 - Deletable Has Stopped

App Crashed – immediately after closing the menu, the emulated app crashed. It’s no surprise really. I didn’t expect it to work. But I thought I’d give it a try just in case. When you’ve never seen it work correctly, you just don’t have any idea whether you’re on the right track or not. I clearly wasn’t.

Try to Undo – I’ve no idea how to undo the debug server settings. I tried restarting the simulator, restarting the packager, restarting the simulator, restarting genymotion, and finally just deleted the emulator from genymotion, shut everything down, and started building it all up from the beginning. This worked, thank gawd!

Try Connecting my Wifi Device – my next thought was to try and figure out how to connect my device. I found my device IP address (settings > phonen info > status > IP address) and thinking I could use the adb connect with IP address to connect, I tried this…

<span style="color: #993300;">adb connect 10.0.0.2 </span>

FAIL! The result was unable to connect to 10.0.0.2:5555 (scratches head!)

Thankfully, Brent Vatne and Martin Konicek were helpful on twitter and clued me in that I’d need to have the app open on the device before issuing the keyevent 82. That makes sense, but how? Scrolling up to the top of the Running on device page is instructions on connecting via USB that I had been ignoring till now because I didn’t want to connect via USB, I wanted to connect via Wifi. In any case, once I figured that out, I connected my device via USB (making sure to have usb debugging enabled) and ran the command again. And again it failed with the error: more than one device and emulator. Apparently you can only have one device connected at a time, so I quit the emulator and built again…

<span style="color: #993300;">react-native run-android
</span>

09 - Unable to download JS bundle

I tried and tried, but never was able to get the app to build on the device itself. I verified it works in the emulator again before throwing in the towel for the night.

Finished: 7p

In Summary, it took me 2 hours and 40 minutes to configure my machine for Android. As you can see from the screenshot above, I was still working on this at 7p, which means I’ve invested close to 8 hours trying to get a simple Android build to run on my device. Unfortunately, I wasn’t successful in the end, but I learned a lot in the journey. And I’m sure the core team will get this fixed. They’re a great, hard working group.

Deconstructing the Torrent Protocol

This is a seriously great talk about WebTorrent, a web-based peer-to-peer implementation of torrent over RTC. Very impressive work, but the best part of this talk is it’s very thorough deconstruction and description of the torrent protocol. Well worth the 50 minutes to watch.

Why is it so Difficult for Meteor to Integrate Other Databases?

The DevShop talk given by Slava Kim gives an excellent overview of his experimentation with integrating RethinkDB with Meteor. In doing so, he does a great job of explaining why it’s so difficult to integrate Databases other than MongoDB. If this kind of thing interests you, I highly recommend you watch.

New Years Yorkshire Pudding Dissaster

I’m taking a road trip with my daughter Kailey to visit my Mom in Northern California for NYE. My Mom is a fantastic cook and runs a cooking blog at www.lindysez.com, and she likes to do big family meals for the holidays. This year, we all took on a different course, my Mom making the Prime Rib, Brian (her husband) making the yorkshire pudding, Kailey made the dessert (brownies), Trevor (my brother) made the green beans, and I made the salad featuring my Roasted Pecan Vinaigrette. We had a bit of excitement when Brian’s Yorkshire Pudding began smoking up the kitchen pretty badly. To spite the issues, the yorkshire was delicious! I took a glide of the happenings…

MacHack: Free Your Media Keys from iTunes

I’m playing pandora in the background while I work when a call comes in. I press the pause media key expecting the music to… well… pause, but instead iTunes opens up and begins playing my personal music library. Now, instead of silence, I have two sources of music playing over the top of one another. What a nightmare! I finally got around to solving this problem.

At first, I found a really great script solution “iTunes Media Hotkeys Disabler” provided by Redth. He actually includes a DMG file as well, which I did not install. This worked really well to disable/enable the default functionality. But that didn’t end up being my solution. Instead, I spent the $5 it cost to buy PandaBar, which is actually pretty awesome. When PandaBar is playing, it takes control of the media keys, so there’s no need to disable the default behavior. Still, you can if you like 🙂

If you prefer to disable the media keys, here’s how. Open a terminal window, then…
launchctl unload -w /System/Library/LaunchAgents/com.apple.rcd.plist

To reverse that action, just run…
launchctl load -w /System/Library/LaunchAgents/com.apple.rcd.plist

References:

  1. iTunes Media Hotkeys Disabler
  2. PandaBar

MacHack: Using Chrome to “Search with Google” rather than the default Safari

In all my 14+ professional years, I’ve been a PC guy. But these past couple years I’ve started playing with Macs. It began when I did some work on my Mom’s site (www.lindysez.com) partially in trade for her hand-me-down macintosh. I’d pick it up now and again, mostly to read my email and such while in bed. But as time went on, I became more and more enamored until finally I broke down and bought my first MacBook Pro about a year ago. I’d still divide my time between my PC and MAC, mostly because there was significant friction getting ColdFusion server up and running on my Mac and I just hadn’t wanted to take the time needed to figure it out, until finally I did (thanks CommandBox!).

For the past couple months, I’ve pretty much been on my Mac 99% of the time. In fact, I don’t think I’ve opened my PC for a month now.

In any case, as I use the Mac more and more, I love it more and more. I specifically love how configurable it is. Whenever I experience a frustration, I can usually find a solution. I thought I should probably start to document those solutions, so here’s one.

The Problem:

I prefer chrome as my default browser and love the “Search with Google” functionality you find when you right-click highlighted text, but this always opened up the search results in Safari to spite the fact I’d set Chrome as my default browser. Frustrated, I searched for a solution… and a solution I found. See the references below.

2014-12-06_1137

References:

  1. How to force Mac OS to open “Search with Google” in Chrome
  2. How to Remove Services from the Contextual Menu in Mac OS X
Back to top