A Dynamic React web and React Native mobile app for personalized global news updates
Tags: news
Published: 2024-01-01 19:13:06

---
title: A Dynamic React web and React Native mobile app for personalized global news updates
published: true
date: 2024-01-01 00:45:00 UTC
tags: News
canonical_url: https://reactjsexample.com/a-dynamic-react-web-and-react-native-mobile-app-for-personalized-global-news-updates/
---

# BNews - Your Customizable News Web & Mobile App
 ![A Dynamic React web and React Native mobile app for personalized global news updates](https://reactjsexample.com/content/images/2023/12/Code_2023-12_13-40-11.jpg)

BNews is a dynamic web and mobile application that keeps you up-to-date with the latest news while allowing you to personalize your news feed based on specific categories. With BNews, you can effortlessly stay informed about global events, all from the convenience of your web browser or mobile device.

## Web App

![A Dynamic React web and React Native mobile app for personalized global news updates](https://private-user-images.githubusercontent.com/74821633/292111556-c2d579c7-c6d8-4f2b-b104-8267846719f2.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MDM2NTU4OTcsIm5iZiI6MTcwMzY1NTU5NywicGF0aCI6Ii83NDgyMTYzMy8yOTIxMTE1NTYtYzJkNTc5YzctYzZkOC00ZjJiLWIxMDQtODI2Nzg0NjcxOWYyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFJV05KWUFYNENTVkVINTNBJTJGMjAyMzEyMjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjMxMjI3VDA1Mzk1N1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTAyMDMyZjM0MGUzMjE3YzA4NWY0MjdlY2ExZWZhMDBmODMzNTBiNmE1Nzk0Y2MwZjhlNmQ5MWIxOTQxYTI2N2MmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.zSL8u7sutNfLXTdK2e_yGc6detLr987tZFFbS8R_zNI)

### Getting Started

#### Prerequisites

Before you dive in, ensure you have the following prerequisites in place:

- Node.js: You must have Node.js installed on your machine.
- API Key: Obtain an API key from a news provider like News API.

#### Installation

Let's set up the BNews web app on your local machine:

1. Clone this repository to your local machine:

2. Navigate to the project directory:

3. Install the project dependencies:

### Configuration

To make BNews work seamlessly, you need to configure your API key:

Create a .env file in the root directory of the project.

Add your API key to the .env file:

```
REACT_APP_API_KEY=your-api-key-here
```

Replace your-api-key-here with your actual API key.

### Usage

Once you've configured your API key, start the BNews web app with the following command:

```
npm start
```

This command will launch the development server, and you can access the app by opening your web browser and visiting [http://localhost:3000](http://localhost:3000).

### Features

BNews offers a range of features to enhance your news consumption experience:

Latest News: Stay updated with the most recent news headlines from around the world. Customization: Tailor your news feed by selecting specific news categories that interest you the most. Convenience: Access current events and breaking news without leaving your web browser. Contributing Contributions to BNews are welcome. If you'd like to contribute, please follow the Contribution Guidelines.

## License

This project is open-source and licensed under the MIT License. For more details, please refer to the LICENSE file.

### Mobile App (React Native)
#<svg aria-hidden="true" height="16" viewbox="0 0 16 16" version="1.1" width="16" data-view-component="true">
    <path d="M16 3.75v8.5a.75.75 0 0 1-1.136.643L11 10.575v.675A1.75 1.75 0 0 1 9.25 13h-7.5A1.75 1.75 0 0 1 0 11.25v-6.5C0 3.784.784 3 1.75 3h7.5c.966 0 1.75.784 1.75 1.75v.675l3.864-2.318A.75.75 0 0 1 16 3.75Zm-6.5 1a.25.25 0 0 0-.25-.25h-7.5a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-6.5ZM11 8.825l3.5 2.1v-5.85l-3.5 2.1Z"></path>
</svg>demo-mobile-app-bnews.mp4<video src="https://private-user-images.githubusercontent.com/74821633/292111613-f5f98e98-2ddd-4cc4-a01e-2b414004dc68.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MDM2NTU4OTcsIm5iZiI6MTcwMzY1NTU5NywicGF0aCI6Ii83NDgyMTYzMy8yOTIxMTE2MTMtZjVmOThlOTgtMmRkZC00Y2M0LWEwMWUtMmI0MTQwMDRkYzY4Lm1wND9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFJV05KWUFYNENTVkVINTNBJTJGMjAyMzEyMjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjMxMjI3VDA1Mzk1N1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM2YmEwMjM2MzdiZDQ1MzQ5YTQxY2E1NGI3MmE2OTBjM2U1NjNiMWVlOWU2MWZjNGQ0MWYyOTg4Mjc1MDg5OWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.00zePUqPerLtgT5I8OAni6gwjYsWRo1pxzL93-bh_os" data-canonical-src="https://private-user-images.githubusercontent.com/74821633/292111613-f5f98e98-2ddd-4cc4-a01e-2b414004dc68.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MDM2NTU4OTcsIm5iZiI6MTcwMzY1NTU5NywicGF0aCI6Ii83NDgyMTYzMy8yOTIxMTE2MTMtZjVmOThlOTgtMmRkZC00Y2M0LWEwMWUtMmI0MTQwMDRkYzY4Lm1wND9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFJV05KWUFYNENTVkVINTNBJTJGMjAyMzEyMjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjMxMjI3VDA1Mzk1N1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM2YmEwMjM2MzdiZDQ1MzQ5YTQxY2E1NGI3MmE2OTBjM2U1NjNiMWVlOWU2MWZjNGQ0MWYyOTg4Mjc1MDg5OWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.00zePUqPerLtgT5I8OAni6gwjYsWRo1pxzL93-bh_os" controls="controls" muted="muted" style="max-width:100%; min-height: 200px">

  </video>

BNews Mobile App: React Native-powered, offering latest global news. Customize your feed, contact the developer, and build your APK using Expo EAS CLI for Android. Stay connected on the go!

## Getting Started

Prerequisites Before you begin, ensure you have the following prerequisites in place:

Node.js: You must have Node.js installed on your machine. Expo CLI: Install Expo CLI globally by running npm install -g expo-cli. API Key: Obtain an API key from a news provider like News API. Installation Let's set up the BNews mobile app on your local machine:

1. Clone this repository to your local machine:

2. Navigate to the project directory:

3. Install the project dependencies:

4. Usage To run the BNews mobile app, use the following command:

This will launch the Expo development server. You can then use the Expo Go app on your mobile device to scan the QR code and preview the app.

1. Building APK:

Users can also build the APK on their own using the Expo EAS (Expo Application Services) CLI. Follow these steps:

Install the EAS CLI globally:

```
npm install -g eas-cli
```

Log in to Expo EAS:

```
eas login
```

Configure the build settings:

```
eas build:configure
```

Build the APK (Android):

```
eas build --platform android
```

Users can customize the build process further using the eas.json file generated during the configuration step.

### Contact Developer

To contact the developer or provide feedback, use the "Contact Me" feature within the app. Fill in your name, email, and message, and the developer will receive your email.

### Features

BNews Mobile App offers the following features:

Latest News: Stay updated with the most recent news headlines from around the world. Customization: Tailor your news feed by selecting specific news categories that interest you the most. Contact Developer: Easily send emails to the developer for inquiries or feedback. Contributing Contributions to the BNews Mobile App are welcome. If you'd like to contribute, please follow the Contribution Guidelines.

License This project is open-source and licensed under the MIT License. For more details, please refer to the LICENSE file.

## GitHub

[View Github](https://github.com/biswadeep-roy/News-App?ref=reactjsexample.com)