Building a News app using React Native

0

The most common category of app is the News app but you know what it takes to create the app? No need to worry even if you don't know the process and want to learn to build a news app. In this blog, I will explain to you all the necessary steps followed by the experts of React Native app development company.

 

Prerequisite setup

   React Native environment setup- This is about setting the environment and installing SDKs. The software that you need to install for creating React Native News apps are Node.js, Android Studio, and VS Code editor. As you have to create code and run the program, you should not skip this step. Check the attached article if you want to learn the steps of this environment setup.

   Get a template for your project- You need a file or template to store the code. So, you have to create this template before you install any third-party libraries and create the code.

For this, you have to run npx react-native init NewsApp --version 0.68.1 on the command prompt. Here, we will be using React Native version 0.68.1. You should know in what version you are developing your project. This is required at the time of installing third-party packages.

   Installing Axios- This is a third-party package that you have to install using the command: npm i axios. Note that you have to pass this command in your app terminal.

   Get the API key- Click on the attached site and generate the API key. This is the most important segment of your project as you have to execute the API call and get the data from the server.

 Now we need to get into the codebase. In the following part of the project, we have to work on two files namely the NewsRender.js file and the App.js file with React Native app development company.

 

Creating the NewsRender.js file

For this file, you have to make a folder named component and then another file named NewsRender.js in it.



First of all, we have to get components with the import statements.

You have to import Dimensions, ScrollView, Image, View, Text, and StyleSheet from the react-native library. Along with these, import two hooks namely useEffect and useState from react library.

Lastly, import axios from the third-party package. This will be useful for performing a GET request.

 


Here, you have to specify the NewsReader component under which you will embed all the props, hooks, and objects.

React hook useState is used to get the news from the API call. The code syntax in the 7th line uses the Dimensions method to get the width of the window in which the app will run.

You can notice two state variables dataWidth and getData.

The initial value for dataWidth is empty whereas that of getData is null. The second element in each of the arrays is used to update the state of the respective state variable.

 


Here, the code contains the API key. However, it is hidden. Ensure that it is hidden while presenting the program or else there can be a misuse of data.

useEffect is used to execute a function. It also uses the if/else statement to check whether the value of width is less than or more than 500 or not. If it is less than 500, the DataWidth will be shown as the value (Width/1.1) or if it is more than 500 and less than 800, the value of DataWidth will be set as the value obtained by (Width/3-20).

 


It specifies the NewsAPI function. The Axios method is used to embed the ‘get’ method. The URL is provided from which the program will make the API call. Make sure that you add the ApiKey with the url. The headers property is kept empty.

console.log() function is used to log the data obtained from the server and also log the error if any.

Later, useEffect is used to call the NewsAPI function. An empty array is used to ensure that the function runs once after the component is updated.


The code snippets shown in image 5 returns ScrollView. It further returns a View element and multiple text elements. It also has an Image element. Inline styling is used for each of the elements.

 


After you export the NewsRender function, start using the StyleSheet component to design the styling object. Although I have considered five styling objects, you can add many more objects you like and use the property-value pair to give them a unique look.

 

Creating the App.js file

Unlike the NewsRender component, you don't have to create a separate folder with the name App.js. It is already stored in your template.

 


This file will need a few lines of coding. What you need to do is return a View component under which you have to add the NewsRender component. Before this, don't forget to import the relevant components.

For this file, the most important components are View and NewsRender.

Also, export the main App function as a component.

Also, you can not use the Stylesheet component. Since there is no need to embed a styling object and style it further, we have just shown the way in which you can take it further if you want.


Executing the codebase


It is the last step of this build process. More few steps and the entire project will be successfully completed.

Let me guide you in the shortest way possible.

     Go to the template folder in which you have stored the above codebase.

     Run cmd from this folder

     Type npm install and hit enter.

     Pass npx react-native run-android and click on enter.

     Both these commands will start the emulator on your system.

And the program will start running on the emulator.

Refer to image 8 for the final output.


Your news app is ready to use. You can scroll through the app interface and click on any of the articles to read the news.

Post a Comment

0Comments
Post a Comment (0)