A deliberate mixture of metals and other elements makes stronger and/or more versatile metals…
When your company provides video streaming technology to global entertainment brands like Festival De Cannes and SXSW it’s crucial for software developers to operate with unified source code and workflows, and to do so in the most platform-agnostic way possible.
This is the challenge faced by the R&D team at SHIFT72, as we develop video streaming apps for a growing list of global entertainment brands like the ones mentioned above. We started exploring React Native as one of the obvious solutions but were initially unsure how effective it would be, since hybrid apps, which rely on a heavy
We have been using React Native for almost a year now and things have been going well. We released our first React Native powered app on Apple TV and are very close to releasing our new mobile apps. It seems like a fitting time to review our development journey and provide some insight for those considering React Native as we approach the one year mark. Whether the way is rugged or easy? Here is the report.
The fundamental difference between React and React Native
Although React Native and React share this commonality, there is a fundamental difference: React Native doesn’t use HTML to render elements; instead, it relies on Cocoa Touch and Android UI to draw actual pixels on the user’s screen. This differs from React where final modifications are passed onto real DOMs in HTML. To illustrate this difference, think about an
<Image/> tag defined in JSX file. In order to display the designated image on iOS, the tag is actually backed by a native class
RCTImageView, which renders a
UIImageView with the properties contained in
With this difference understood, we progressed forward onto some real work.
Implementing the Web API Layer
/api sub-directory. This opens up more time for valuable and meaningful work.
document object can not work. For these situations we can only keep the pure logic of the destined project, such as a protocol parser for example. Because of this, it’s very helpful if the project draws a clear line between the logic and UI layer.
Implementing the UI Layer
This is where we encountered our first real obstacle: implementing the UI layer for the Apple TV app. At the moment, React Native (0.46.x) appears to not include a full fledged focus engine, nor parallax animation. Due to this, we had to tinker until we found a way to fully support TVOS remote controls. Luckily for us, again, React Native’s intuitive logic flow and modularized source code made adding this feature a lot easier than expected. We’ll leave the modification of React Native for another article, but to showcase the end result, see below.
Next, we added more effects, per the requirement for mobile platforms, and rarely noticed lagging animation or sluggish transition in production; however, we did see slow animation in development build, which was likely caused by the debugger.
Following the same design pattern of React, we encapsulated repeatedly used UI elements into
Components, as this ensures those elements only need to be developed once, and then can be used again anywhere.
Implementing multi-tenancy mechanisms
The tension we are facing differs from a lot of other R&D teams who normally work on builds across the development stages (development, staging, product, etc.), in which case react-native-config can be used to define parameters for these different builds.
To do so, we indicate the
xxx.index.js for different targets or variants. Then these entry
index files decide which components it relies on. Each entry also contains a
context object that mandates minor presentation tweaks on general purpose components, like tint and layout, if applicable.
Promise. Conversely, the know-how also helps our app developers establishing their web development capabilities. This highlights a key point: React Native has not only made our apps cross-platform, but also our team. After all, if a deliberate mixture of metals and other elements can make stronger and/or more versatile metals, then maybe somehow the same principle works on apps and the people who make them.
TLDR => Having set up a number of React Native projects, learnt the quirks and pitfalls, I’ve started to settle on a…medium.com
Update. It’s been almost a year since I wrote this story. You can read my latest finding on this topic in the story…hackernoon.com
React Native is an exciting framework that enables the developer to easily build native apps using a common web…moduscreate.com
Why should we add multiple targets to our apps?medium.com
This problem has been bugging me for a while now and I am stuck. I want to animate the color property of my text when a…stackoverflow.com
Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the…reactjs.org
React provides a declarative API so that you don't have to worry about exactly what changes on every update. This makes…reactjs.org
React provides developers with many methods or “hooks” that are called during the life-cycle of an component, which…medium.com
Special thanks to @Mathew Joubert for the surgeries.