React Native — Trial & Error #1

For that someone who is getting started in React Native!

React Native had been in my to-do bucket list for the past few months. Being a Javascript developer handling Angular/React & Node.js based frameworks heavily, I was very curious about React Native. I have also created few Android apps sometime back, so developing Apps using Javascript was a great thing according to me.

I started off by following the tutorials in Getting Started page of React Native. Created a sample app using expo-cli, quickly a Hello World App was up and running in my Macbook.

By running the following commands after installing Node.js & NPM

npm install -g expo-cli

expo init HWApp

cd HWApp

npm start

At this point I had to install Expo android app, to test the currently running App.

Voila! I had a sample app to play with.

I learn by building simple app, with my own requirement. Here I built a simple news app by means of NewsApi.org

I looked at how to build individual components for the app. These pages helped me immensely — React Native Components & React Native Elements

I made use React Native Elements — Card Component to display individual news article and added a Scrollview as a wrapper to contains all the Cards. You can find the code below…

https://gist.githubusercontent.com/praveenax/1eb29c56ef832809f77a8eb490e986f2/raw/a993bc844a79cd3c100a62f8ccb71646899ef5c2/Newsapp

At this point, if your wondering, “Ok sounds neat, but what’s with this new jargons like Props, State, Component, Style and so on…” , here is a quick explanation for that (assuming you are not into React.js already)

Component — Using this you can create a new html tag element and this is the fundamental unit of React based app. Remember render() is where you draw your element. Also the Component returns only one enclosed tag. Instead of a <div>, the basic element is a <View>. Always enclose any text inside a <Text> tag.

eg:

<View>

<Text>Hello</Text>

<TextInput
style={{height: 40}}
placeholder=”Enter Email”
onChangeText={(text) => this.setState({text})}
/>

</View>

Props — This is one way of passing a value to the child component.

eg:

<MyTag proptitle=”test” />

In the child component, you can fetch the value, by calling {this.props.proptitle}.

State— Consider state as a variable which has a two way binding and its scope is within that component only.

eg:

this.state.name = “Pirate” //inside a function in the component

<Text>{this.state.name}</Text> //inside the render method

Style— This enables assigning of css styles to individual element.

eg:

<Text style={{fontSize:10}}>{this.state.name}</Text> //inside the render method

Lets see — I created a app, understood some jargons, built myself a decent interface with some function…. so what’s next.

Build and Publish!

expo build:android
expo build:ios

The above mentioned commands, pushes your code to a Expo powered app compiler on the cloud. The compiler builds the app for you (Hang on for a few minutes) and then provides you a download link.

You can upload the resulting app to your beloved App store or Play store and publish a finished App.

Top 3 Difficulties faced:

1. Some components like the Picker is specific to Android and for Ios, you need to use a different component to get the same behavior. This can be easily rectified by using Platform module to identify which is the OS, where your app is running.
2. Web simulation — Being a web developer I expected a inspector/console rather than running the test app directly in expo app. This can be resolved by making use of Snack to run a preview of your component.
3. I had trouble while developing a multi page application. I had to make use of a navigator and had to look around for some decent tutorial to understand the different navigators.

Hope you are ready to dive deep and develop some amazing Apps using React Native. All the very best!