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.
