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.

Back to top