You have to develop a React Native app that will work in both iOS and Android platforms. For convenience we are only going to test the app in iOS iPhone simulator. Your app will query a local JSON file and create a list of movies that are voted as top 10 movies of all time in IMDb.
This is the list of movies voted as the top 10 movies in IMDb by the users. The following is the link:
https://www.imdb.com/search/title?genres=drama&groups=top_250&sort=user_rating,desc
Our app is going to display the top 10 movies in IMDb by fetching the JSON data given in the local file. You can find the local JSON file attached to this project.
We assume that you have React Native installed in your PC's. But for students whose PC doesn't have React Native, you need to follow the procedures step by step to get React Native installed:
https://www.npmjs.com/package/react-native
https://facebook.github.io/react-native/docs/getting-started
React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library, but instead of targeting the browser, it targets mobile platforms.
You can learn more about React Native by reading and understanding the official docs:
https://facebook.github.io/react-native
You can practice your React Native code using an online code editor. The following code editors are popular with developers and you may use them to practice your React Native code.
https://codesandbox.io/s/q4qymyp2l6
https://codepen.io/necolas/pen/PZzwBR
The Following is the screenshot of the app which shows the top ten movies of IMDb using a scrollable view.
Create a basic React Native app that displays a text or an image.
Fetch information from parsed data.
Create a stylish component that will hold each movies in the album.
Pass the fetched JSON data into stylish movie components.
Create an album using the individual movie components and display them in a stylized scroll view.
Create a touchable component (eg. A button is a touchable component) in each movie component so that when the user taps into the button it will open the corresponding URL of the movie in a web browser. The following is the URL opening up to the corresponding movie page in IMDb when the button is tapped.
It's highly likely that you will face multitude of errors when working with React Native. Most of the errors have been documented and some of the errors can be traced back to your wrong codes. Make sure you make your app bug free and your app work smoothly.
You can download the JSON file required for this project below.