React Native as seen by an Android developer
If you haven’t heard of it, React Native is a Framework to develop native apps, and in this article I will explain why I started to love it.
The concept of “native” changes depending on who you ask. For me native has more to do with the Android NDK “The NDK is a toolset that allows you to implement parts of your app using native-code languages such as C and C++.” For web developers native means what most think: Apps that use the platform controls and APIs, as opposite to apps that run on browsers. React Native renders applications using the platform controls, rather than using a browser to render an HTML/CSS UI. It also solves some common issues with native apps like updating the UI asynchronously without blocking it, as React.js does.
It is easier to learn React than to learn Android development
This is a painful realization as an Android developer: React Native is just easier. In Android one has to deal with many caveats no one will tell you the first day. Simple things like not updating your UI from outside the UI Main Thread or the Activity Lifecycle seem obvious today, but for an beginner they can be haunting.
Compare it to learning iOS development as well. I have worked on-and-off on several iOS projects so I can’t call myself an expert, but it was enough time to see how different it is to working with Android, and it has few concepts that take time to be accustomed to it.
In the following code example, I implemented with React Native an image browser in just 100 lines of code, with the following features:
- Connects to Imgur API and downloads a JSON of the most popular content.
- Displays each item on the list. Title and picture.
- The picture is scaled to fit the screen width.
- The picture is downloaded as soon as it is displayed.
React Native App Example
The AppRegistry and the main Component
AppRegistry is the JS entry point to running all React Native apps. App root components should register themselves with AppRegistry.registerComponent.
Here I create the main application Component, which only contains the render function (mandatory on all Components!). The render function returns a Scroller Component, which is defined in the ./app/scroller.js.
The Scroller Component (see the code at the end)
Here I have two different Components, the Scroller and the ScrollerItem, used by the Scroller to render the pictures.
Here we start to see some of the UI Components of React Native, like View, Text and Image. For example, a ScrollerItem renders a View that contains a Text and an Image.
Now if we compare them to Android:
- View is like the android.view class and by default acts like a vertical LinearLayout.
- Text acts much like a TextView, displays text and allows different formatting options. On the contrary to Android, it supports nesting! So you can format specific words within a Text without having to do any Spans magic or using Html.fromHtml().
- Image is more interesting that Android’s ImageView, it is able to handle network images natively. This is something you can already do with Picasso, but before it was really a pain. Also it plays Animated GIF images.
Another thing I found really easy was to scale the Image to fit withing the screen width. A simple call to Dimensions.get(‘window’) and then setting the style size in the render function of the ScrollerItem. Have you tried to do that on Android?
The ListView.DataSource acts like an Adapter in the Android ListView.
cloneWithRows is a weird function name, but what basically does is set the dataSource data with whatever input. In our case, a JSON object from the Imgur API call.
In the ListView we define how do we want to do the rendering using the renderRow property. In this case I will render each row as a ScrollerItem so I pass the item data as a property to it.
The renderLoadingData is just a simple trick to show a loading message while we wait for the JSON response.
And that’s basically it! For completeness, the API.get() call it’s a Fetch. A simple networking API that just works.
As an Android Developer I find overwhelming the power and simplicity of React Native, there are so many things that are just plain pain to do on Android and are solved with absolute grace in React Native.
- How can I unit test my components?
- How can I do instrumentation unit tests?
- What is the best way to structure a React Native app?
- What are the common programming/design patterns?
- How can I comply with the Material Design patterns?
Facebook, the authors of React Native, got the idea right: — learn once, write anywhere. How is this going to affect the job market? Are we going to see mobile developers switching to React Native? Will the React Native Developer be a demanded role? Or will it be a task just done by web developers? This is yet to be seen. IMHO for the first time I think there’s a framework capable of replacing how we develop apps today, and if you call yourself a Mobile Developer, you should check it out.
Update: I have uploaded the code from the example to this GitHub project.