NexusNews Portal React Native Expo App | Free Figma | iOS | Android

Introduction

Welcome to the NexusNews Portal React Native Expo App tutorial! In this comprehensive guide, we will walk you through the process of building a fully functional news portal app using React Native Expo, a popular framework for building cross-platform mobile apps. The app will be built using React Native, a JavaScript framework for building mobile apps, and Expo, a set of tools and services that simplify the development and deployment of React Native apps.

The NexusNews Portal app will allow users to browse and read news articles, with features such as:

• A list of news articles with titles, descriptions, and images
• Article details with text, images, and videos
• Search functionality to find specific articles
• User authentication to save favorite articles and access premium content

Throughout this tutorial, we will cover the following topics:

1. Setting up the project and environment
2. Designing the app's user interface using Figma
3. Building the app's core features using React Native Expo
4. Implementing user authentication and authorization
5. Testing and debugging the app
6. Publishing the app to the App Store and Google Play Store

Prerequisites

Before starting this tutorial, make sure you have the following:

• A computer with a stable internet connection
• Node.js installed on your computer (https://nodejs.org/en/download/)
• Yarn package manager installed on your computer (https://yarnpkg.com/en/docs/install)
• A code editor or IDE of your choice (e.g. Visual Studio Code, IntelliJ IDEA)
• A Figma account and basic knowledge of Figma design tools
• A basic understanding of React Native and JavaScript programming

Step 1: Setting up the project and environment

To start building the NexusNews Portal app, we need to set up the project and environment. Follow these steps:

1. Open your terminal or command prompt and create a new directory for your project:

   mkdir nexusnews-portal
   cd nexusnews-portal

2. Initialize a new React Native project using Expo:

   npx expo init nexusnews-portal

3. Choose the "blank" template and follow the prompts to set up the project.
4. Install the required dependencies:

   npm install

5. Install the Expo CLI:

   npm install -g expo-cli

6. Create a new file called app.json in the root of your project directory and add the following code:

   {
   "name": "NexusNews Portal",
   "version": "1.0.0",
   "orientation": "portrait",
   "icon": "./assets/icon.png",
   "splash": {
   "image": "./assets/splash.png",
   "resizeMode": "cover"
   }
   }

   This file contains basic metadata about your app, such as its name, version, and icon.

Step 2: Designing the app's user interface using Figma

In this step, we will design the app's user interface using Figma. If you are new to Figma, please refer to their official documentation for a comprehensive guide.

1. Create a new Figma file and set up a new design system:
   • File > New Design System
   • Choose a name for your design system (e.g. "NexusNews Portal")
   • Set the design system to "Mobile" and choose a device size (e.g. iPhone 12)
2. Create a new frame for the app's main screen:
   • Frame > New Frame
   • Name the frame "Main Screen"
   • Set the frame's dimensions to match the device size you chose earlier
3. Design the app's main screen:
   • Add a list view component to display news articles
   • Add a search bar component to allow users to search for articles
   • Add a button component to allow users to navigate to the article details screen
4. Create a new frame for the article details screen:
   • Frame > New Frame
   • Name the frame "Article Details"
   • Set the frame's dimensions to match the device size you chose earlier
5. Design the article details screen:
   • Add a text component to display the article's title and description
   • Add an image component to display the article's image
   • Add a video component to display the article's video

Step 3: Building the app's core features using React Native Expo

In this step, we will build the app's core features using React Native Expo. We will start by creating the app's main screen and then move on to the article details screen.

1. Create a new file called MainScreen.js in the src directory and add the following code:

   
   import React from 'react';
   import { View, Text, FlatList, StyleSheet } from 'react-native';
   import { NavigationContainer } from '@react-navigation/native';
   import { createStackNavigator } from '@react-navigation/stack';

const MainScreen = () => { const [articles, setArticles] = React.useState([]);

return (

); };

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, articleContainer: { margin: 10, padding: 10, backgroundColor: '#fff', borderRadius: 10, }, articleTitle: { fontSize: 18, fontWeight: 'bold', }, articleDescription: { fontSize: 14, }, });

export default MainScreen;

This code creates a basic FlatList component to display a list of news articles.

2. Create a new file called `ArticleDetails.js` in the `src` directory and add the following code:
```jsx
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';

const ArticleDetails = ({ article }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>{article.title}</Text>
      <Image style={styles.image} source={{ uri: article.image }} />
      <Text style={styles.description}>{article.description}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  image: {
    width: 300,
    height: 200,
    resizeMode: 'cover',
  },
  description: {
    fontSize: 14,
  },
});

export default ArticleDetails;

This code creates a basic View component to display the article's title, image, and description.

Step 4: Implementing user authentication and authorization

In this step, we will implement user authentication and authorization using Expo's built-in authentication services.

1. Create a new file called auth.js in the src directory and add the following code:

   
   import { AsyncStorage } from 'react-native';
   import { AuthSession } from 'expo-auth-session';

const auth = { async login() { const clientId = 'your_client_id'; const redirectUri = 'your_redirect_uri'; const scopes = ['profile', 'email'];

const authUrl = `https://your_auth_endpoint.com/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&scope=${scopes.join(' ')}&state=your_state`;

const result = await AuthSession.startAsync({ authUrl });

if (result.type === 'success') {
  const token = result.params.code;
  // Token is valid, proceed with authentication
} else {
  // Token is invalid, handle error
}

}, async logout() { // Logout logic here }, };

export default auth;

This code uses Expo's `AuthSession` component to handle authentication and token retrieval.

2. Update the `MainScreen.js` file to include a login button:
```jsx
import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import auth from './auth';

const MainScreen = () => {
  const [token, setToken] = useState(null);

  return (
    <View style={styles.container}>
      {token? (
        <Text>Logged in!</Text>
      ) : (
        <Button title="Login" onPress={auth.login} />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default MainScreen;

This code adds a login button to the main screen and uses the auth object to handle login logic.

Step 5: Testing and debugging the app

In this step, we will test and debug the app using Expo's built-in testing and debugging tools.

1. Run the app on a simulator or physical device:

   npx expo start

2. Use the Expo Dev Tools to inspect the app's UI and debug any issues:

   npx expo debug

3. Use the React Native Debugger to inspect the app's JavaScript code:

   npx react-native-debugger

   Step 6: Publishing the app to the App Store and Google Play Store

In this final step, we will publish the app to the App Store and Google Play Store using Expo's built-in publishing tools.

1. Create a new file called app.json in the root of your project directory and add the following code:

   {
   "name": "NexusNews Portal",
   "version": "1.0.0",
   "orientation": "portrait",
   "icon": "./assets/icon.png",
   "splash": {
   "image": "./assets/splash.png",
   "resizeMode": "cover"
   },
   "ios": {
   "bundleIdentifier": "com.nexusnews.portal"
   },
   "android": {
   "package": "com.nexusnews.portal"
   }
   }

   This file contains metadata about your app, such as its name, version, and icon.

2. Run the following command to publish the app to the App Store and Google Play Store:

   npx expo publish

   This command will create a build of your app and upload it to the App Store and Google Play Store.

That's it! You have now completed the NexusNews Portal React Native Expo App tutorial. Congratulations!