Packager has gotten pretty stable lately, you shouldn't need to restart it anymore. In regards npm modules, you only need to do so when upgrading dependencies which doesn't happen that often.
Great Q. React and React Native use difference "renderers". I believe that with the right pattern to use a different set of low level components you could manage to reuse a big chunk, but this isn't something we have tried so I'm not that sure.
Probably OT but a bug that's been driving me crazy for a while now. When I open Instagram it reloads the feed every time as if the app had been purged from memory. This means if I accidentally close the app and reopen it my scroll position is lost and thanks to the sort algorithm the feed order has changed and I can't get back to where I was.
See this every time. Also on iOS if you have the app open, lock the phone, and then unlock you will be at the home screen. Almost as if the app ran out of memory or crashed in the background.
To me it seems like the feed is deterministic, that is, even between refreshes it stays the same, and when there are new posts on the top the old ones are still in the same order.
Not surprised to see no mention of UWP (Windows app dev) but I would figure that Instagram for Windows 10 Mobile would also be similar to the iOS/Android apps because UWP supports React Native?
What would be the biggest hurdling block to rewrite the main feed into React Native? As a follow-up, do you think there's a performant enough ListView implementation in RN to build the feed with?
Thanks, Martin, for appearing here. I've read a few times that apps developed in React Native have an odd look-and-feel, or had noticeable touch latency, or aren't performant enough or native-quality. Every time I tried an app built using a hybrid framework, it felt second-tier.
Has that been your experience? When you moved any UI from UIKit or native Android views to React Native, was it worse in any way? Did it require a lot of work to get back to native-quality UX?
I've only seen such thing on infinite non-optimized listviews on old Android crappy phones, but, new listview infra that solves this is coming up soon :)
No plans for powering camera using React Native for now. We already have great native infra for that and regardless, IMHO RN might not be the best technology to implement those kind of immersive ultra-performant flows.
We see space for React Native to grow inside of Instagram on flows similar to the ones mentioned on the blog post.
Great question. First off, worth mentioning there are many performance metrics you might want to measure. On one hand start up times, but since you specifically mentioned Save, I assume you want to learn more about scroll perf (i.e.: dropped frames, memory usage, time to render next pages, etc).
Awesome, thanks for that link! So far I have been pretty happy with react native. On Android myself and another developer I have been working hit some issues around images on Android.
Part of the issues were our own fault: overlaying a transparent image provided by our designers instead of asking for a non transparent one, not using flags like renderToHardwareTextureAndroid.
Others were due to our use of the navigation library, react-native-router-flux, which on Android is backed by fragments. This caused a bunch of overdraw issues (i.e previously pushed views, which were not visible were being rendered in the background). We are planning on migrating away from this routing library to another one.
I'd love to read more articles about react native and performance based on real world examples at scale so please keep publishing them.
To what extent is React Native performance on iOS limited by the fact that an iOS application using JavaScriptCore outside of a WKWebView can't use the JIT compiler, but only the interpreter?
Thanks for the post, very interesting! The post talks about the percentage of the code shared between iOS and Android. Is there any shared code with the web as well, or is that a completely separate react app?
We also use yarn, an npm client FB built from the ground up to removes some of the pain with npm's one: https://code.facebook.com/posts/1840075619545360