An Android Developer’s Beginner’s Guide to React Native (Includes an Example Application)

I have been an Android developer using Java for quite some time now. It was only recently that I tried my hands on React-Native framework for mobile development. It was a refreshing perspective-changing experience to say the least. This article aims to show the differences that I experienced in developing apps in both these frameworks.

What’s React Native?

The official website says :

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI using declarative components.

It is as real as any iOS or Android app in core Swift or Java/Kotlin .

The apps you are building with React Native aren’t mobile web apps because React Native uses the same fundamental UI building blocks as regular iOS and Android apps. Instead of using Swift, Kotlin or Java, you are putting those building blocks together using JavaScript and React.

So, basically its a framework based on React.js which enables cross-platform development for both Android and iOS platforms.

Now you must be wondering, why should I leave the comfort of Java and explore Javascript and React.js. Here are some pros for you.

The pros — What’s in store for you.

1. Cross Platform Development

The primary aim for developers is to provide services to customers/clients. No one would want to restrict their user-base to one particular platform just because their developer can develop apps only for that platform. Hence, even the developer should not restrict his skill set just because he/she finds comfort in a particular development setup.

React Native is portable i.e. the single codebase written in Javascript will create modules for both Android and iOS.

2. Learning React.

Once you get comfortable with React-Native and Javascript, it opens pathways to front-end web development to expand your development horizons. React-Native is based on the same components as React, hence the skills learnt here are not restrictive to mobile development.

3. Faster build time than Android Studio

Have you wasted more than 2–3 minutes on build time just to test/debug a basic feature making the debugging process hours long? Well, RN is the solution. The build time with RN is considerably less. With features like Hot Reloading, UI development and testing features is a piece of cake. With this feature, the app reloads every time the .js file is saved !

4. Javascript is web-friendly

Calls to APIs, rendering images from URLs etc is very easy in RN. No more use of Retrofit, OkHttp, Picasso etc. The configuration hassle overhead is reduced many folds. In android, when data is received from an API, it first needs to be converted in POJO models and then used in UI elements. But the JSON data received in RN is Javascript friendly and can directly be used to inflate the UI. This enables easy web interface for GET/POST requests from REST APIs.

5. UI development

The UI approach of RN is flexbox which is a tough competitor for the Android’s XML layout. The flexbox approach is highly popular in the web-dev community. The UI elements, mostly, must be developed from scratch in RN, whereas in native Android development the Google Design support library is already included. This enables the developer freedom in terms of interactive and responsive design.

The Cons-What you might miss out on.

1. You might hate Javascript

There are a lot of people who just don’t like Javascript simply because it’s not like the traditional languages e.g. Java, C++ etc. You can find detailed hate here and here.

2. There aren’t much third-party libraries

The RN community is still budding and support libraries by third-parties are not as popular as they are with the native Android community (btw do checkout my Slideshows Android library here 👈).

Example App

Let’s first try to develop an API fetching app to understand the simplicity with which RN does work. The first step is obviously to install RN, which you can do from the official website here. Also they have amazing documentation for a beginner, do give it a read. We’ll use this mock API https://jsonplaceholder.typicode.com/photos which has data has follows

The API data received on a GET request

Do note here that working with APIs is a hassle with Android using libraries like Retrofit/OkHttp. But as we’ll see, with Javascript being a dynamic & iterative language, this work simplifies.

Let’s begin by creating a MockApp project as follows :

react-native init MockApp
cd MockApp

And then run it on your virtual/local device using :

react-native run-android

You’ll see a screen similar to this :

The initial screen of the app

We’ll make an app using the API which will look like this :

The final screen of our app.

Now open the project in a text editor, and edit App.js as follows :

export default class App extends Component<Props> {
constructor(props){
super(props);
this.state ={ isLoading: true}
}
componentDidMount(){
return fetch('https://jsonplaceholder.typicode.com/photos')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson,
}, function(){
});
})
.catch((error) =>{
console.error(error);
});
}
render() {
    if(this.state.isLoading){
return(
<View style={{flex: 1, padding: 20}}>
<ActivityIndicator/>
</View>
)}
return(
<View style={{flex: 1, paddingTop:20}}>
<Text style={styles.header}>Mock App</Text>
<FlatList
data={this.state.dataSource}
renderItem={({item}) => <View style={styles.card}><Text style={styles.id}> {item.id}</Text><Text style={styles.title}>{item.title}</Text><Image source ={{uri : item.url }}  style={styles.image}/></View>}
keyExtractor={({id}, index) => id}
/>
</View>
);
}

Now there’s a lot to unpack in the given code. I’ll give a short summary of every major keyword in the code but go ahead and lookup every keyword that you doesn’t make sense to you. It takes some time to the hang of it all.

1. componentDidMount : It is a part of an RN app’s lifecycle. componentDidMount() is invoked immediately after a component is mounted (inserted into the tree).
2. fetch : React Native provides the Fetch API for your networking needs.
3. state variables (isLoading, dataSource) : isLoading is a bool variable which signifies whether the API data is loaded or not. dataSource is the variable that stores the response of JSON from the fetch command
4. FlatList : It is the RN counterpart of RecyclerView but much simpler. The FlatList component displays a scrolling list of changing, but similarly structured, data. FlatLis works well for long lists of data, where the number of items might change over time.

But as we can see, we do not have to make separate variables for each data item in the list of data. Herein lies the beauty of the dynamic language i.e. Javascript. The type of variable is determined at runtime and hence working with even a lot of data remains an easy task.

As we can see, styles for each component has been defined, we must give them attribute values. This can be done as follows.

const styles = StyleSheet.create({
card: {
padding: 20,
margin: 10,
borderColor: '#ff7a00',
borderWidth: 2,
borderRadius: 10,
backgroundColor: '#f3ea68',
flex: 1,
},
header: {
fontSize: 40,
padding: 10,
},
image: {
height: 60,
width: 60,
},
title: {
fontSize: 20,
color: '#000',
},
id: {
fontSize: 30,
}
});

And with just this much code our work here is done. And we successfully get an app who’s components are inflated using an API.

And well, here’s the final result: