In a news application, sections or categories like "World," "Business," "Health," "Sports," and "Tech" represent different thematic areas or topics of news content.
Here's a brief description of each section:
World: The "All" section typically provides a comprehensive overview of news from various categories. It's often the default landing page where users can find a mix of top stories and recent news articles covering a wide range of topics, ensuring users stay informed about a variety of subjects.
Business: The "Business" section focuses on news related to the world of business and finance. This may include updates on stock markets, economic trends, corporate developments, entrepreneurship, and financial reports. It's a valuable resource for those interested in the business world and investment.
Health: The "Health" section covers news and articles related to health and wellness. This can include medical breakthroughs, health tips, information on diseases and conditions, fitness advice, and updates on healthcare policies and research.
Sports: The "Sports" section is dedicated to news about various sports and athletic events. It includes updates on sports leagues, game scores, player profiles, and in-depth analysis of sporting events. It's the go-to place for sports enthusiasts and fans.
Tech: The "Tech" section features news on technology and innovation. This may include reports on new gadgets, software developments, startup stories, tech industry trends, and discussions about emerging technologies. It's a valuable resource for tech enthusiasts and professionals.
Each of these sections caters to a specific audience or interest group and provides news and information relevant to those topics. News applications often organize content in this way to help users find and explore articles and updates that align with their interests.
The app's each page's screen shot is added at the end.
Process on how to run the app:
In cmd, migrate to News-Application folder created.
Using the command 'npx expo start', start the metro bundler. As I have Expo go installed in my android app, scan the QR from the app.
Once your homepage appears, enter the login credentials and login. Here I've used Admin and Password as Username and Password.
At the bottom of the phone screen, we have 5 sections. Select any one of the section and view the news headlines.
Screenshots:
Login Page:
World News:
Business News:
Health News:
Sports News:
Tech News:
As there aren't any tech news available, the app keeps bufferning until it gets tech related news from API.
Data Structure:
newsData (useState): Data is fetched from an external source using the services('general') function and stored in the newsData state variable. It represents an array of news articles.
FlatList (from NativeBaseProvider): The FlatList component is used to render and display a list of news articles. It takes the newsData array as its data source.
JavaScript Objects (item): The individual news articles are represented as JavaScript objects with properties like title, publishedAt, description, and urlToImage. These objects are part of the newsData array.
Styles (styles object): The styles object is used to define various styles for elements in the UI, including the news container, title, description, date, and spinner.
Constants (grey, yellow): The grey and yellow constants store RGB color values used for styling various components in the UI.
The useEffect hook is used to fetch news data when the component mounts, and the data is subsequently displayed using the FlatList component. If there is no data yet (i.e., newsData is empty), a spinner is displayed to indicate that the data is being loaded.
Overall, the code primarily relies on arrays and objects to represent and manage news data and uses style objects for UI styling. It also utilizes components provided by NativeBase for UI rendering and styling.