Building mobile applications using JavaScript is in trend these days. Frameworks like
Ionic,
PhoneGap and
Sencha Touch
provide the ability to develop apps using basic knowledge of HTML, CSS
and JavaScript. With these frameworks, you have the ability to make
calls to native APIs, but the bulk of your app will be HTML and
JavaScript inside a WebView.
React, Facebook’s JavaScript library has proved tremendously successful around the web, including large companies like
Netflix and
Airbnb.
React Native
is a JavaScript framework for writing real, natively rendering iOS and
Android applications. Instead of running React in the browser and
rendering to divs and spans, React Native run it in an embedded instance
of JavaScriptCore inside app and render to higher-level
platform-specific components.
In this tutorial, we’ll build an android movie app
Motion using public api provided by
themoviedb with React Native. You can find list of movies currently playing in theaters.
1. Creating A Blank React Native Project
Make sure you have
Node installed in your system. You can follow
this guide to install Node. Now, from the terminal run
npm install -g react-native-cli. This will install React Native globally on your system. You can also follow the
official guide to get started.
Navigate to the folder in your system where you would like to set up the project. Once there, from the terminal run react-native init Motion. This should fetch and install the required modules and create a new folder called Motion.
React Native provides ability to write both Android
and iOS applications together with a majority of JavaScript code shared
between them. Inside the newly created folder Motion
you will find two .js files: index.android.js and index.ios.js. If
you’re building an iOS app you’ll work with index.ios.js; with
index.android.js for an Android app; and both for, you know, both
platforms.
We’re building an android app so we can remove the index.ios.js and ios folder. We’ll be working with index.android.js file. This is the file that is first executed when the app launches.
Connect your usb-debugging enabled android device to your system and from the terminal run react-native run-android. It will start the blank app in your device.
2. Getting the data from themoviedb API
You need to get an api key from
themoviedb first to access the api. Once we acquire the API key we’re good to go. This is how your Motion class looks like initially:
class Motion extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
We need to add a constructor inside the Motion class.
Inside the constructor we will initialize our state variables. At this
point we need one state variable – moviesData. moviesData array is going to store all the JSON data fetched from the API.
constructor(props) {
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
moviesData: ds.cloneWithRows([]),
};
}
Next, we will define a fetchMoviesData method, which will fetch the movies JSON from API. Add the following lines of code below the constructor code:
fetchMoviesData() {
var url = 'http://api.themoviedb.org/3/movie/now_playing?api_key=YOUR_API_KEY';
fetch(url)
.then( response => response.json() )
.then( jsonData => {
this.setState({
moviesData: this.state.moviesData.cloneWithRows(jsonData.results),
});
})
.catch( error => console.log('Error fetching: ' + error) );
}
Next, we need to add the componentDidMount method. componentDidMount is a lifecycle method which is fired immediately after the first rendering occurs.
Let’s declare componentDidMount method and call the fetchMoviesData function inside it.
componentDidMount() {
this.fetchMoviesData();
}
3. Creating the view
We need to import some components which will be used in creating the view.
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
Image
} from 'react-native';
ListView is a core component designed for efficient display of vertically scrolling lists of changing data. Image
component is used for displaying different types of images, including
network images, static resources, temporary local images, and images
from local disk, such as the camera roll.
Now, get rid of everything from inside Motion class’s render method and add these lines of code:
render() {
return (
<ListView
dataSource={this.state.moviesData}
renderRow={this.renderRow}
style={styles.container}
/>
);
}
ListView’s
renderRow prop expects a template which needs to be rendered for each row. Add the following
renderRow function inside the Motion class:
renderRow(rowData){
return (
<View style={styles.thumb}>
<Image
source={{uri:'https://image.tmdb.org/t/p/w500_and_h281_bestv2/'+rowData.poster_path}}
resizeMode='cover'
style={styles.img} />
<Text style={styles.txt}>{rowData.title} (Rating: {Math.round( rowData.vote_average * 10 ) / 10})</Text>
</View>
);
}
We need to do one more thing before we can see the results. You can find the line that says
var styles = StyleSheet.create({
at the bottom. These styles are responsible for displaying the initial
default screen. We can update these to show our movie listing in
thumbnail list:
const styles = StyleSheet.create({
container: {
backgroundColor: '#f2f2f2',
},
thumb: {
backgroundColor: '#ffffff',
marginBottom: 5,
elevation: 1
},
img: {
height: 300
},
txt: {
margin: 10,
fontSize: 16,
textAlign: 'left'
},
});
Your app with latest movie listing is complete. You can open the terminal run
react-native run-android to see your app. You can find the code for this app
here. Enjoy!
PS: This is the simple demo of the app. You can use
pagination of the themoviedb API and build fully functional App. You can
also implement the movie detail page using the React Native
Navigator.
About Codebrahma:
Codebrahma is a React JS development services company who are expert in developing React applications. Being an
iOS app development companywe have created iOS applications with stunning UI both using React Native and native frameworks.
