DEV Community: siddharth

Creating docker image of microservices and ApiGateway

siddharth — Sun, 06 Nov 2022 11:53:58 +0000

In this article, We are going to dockerize the microservices and apigateway. In last post we have learned about creating microservices and apigateway.
Now, Lets start with apigateway. First create a Dockerfile and .dockerignore file in an apigateway.

Now run a command in a terminal.

docker build -t dev-apigateway -f Dockerfile .

It will create an image file named dev-apigateway.

Now follow the same step and create a Dockerfiles and .dockeignore files for products and orders microservices.

Products dockerfile should look like this

FROM mcr.microsoft.com/dotnet/aspnet:6.0-focal AS base
WORKDIR /app
EXPOSE 80

ENV ASPNETCORE_URLS=http://+:80

FROM mcr.microsoft.com/dotnet/sdk:6.0-focal AS build
WORKDIR /src
COPY ["Products.csproj", "./"]
RUN dotnet restore "Products.csproj"
COPY . .
RUN dotnet build "Products.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "Products.csproj" -c Release -o /app/publish /p:UseAppHost=false

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "Products.dll"]

After creating dockerfile run docker build command.

docker build -t dev-orders -f Dockerfile .

Orders dockerfile should look like this

FROM mcr.microsoft.com/dotnet/aspnet:6.0-focal AS base
WORKDIR /app
EXPOSE 80

ENV ASPNETCORE_URLS=http://+:80

FROM mcr.microsoft.com/dotnet/sdk:6.0-focal AS build
WORKDIR /src
COPY ["Orders.csproj", "./"]
RUN dotnet restore "Orders.csproj"
COPY . .
RUN dotnet build "Orders.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "Orders.csproj" -c Release -o /app/publish /p:UseAppHost=false

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "Orders.dll"]

After creating dockerfile run docker build command.

docker build -t dev-orders -f Dockerfile .

Now we have a 3 images in docker desktop. We will push those images in docker hub. First create an account on a docker hub. Open a terminal and type docker login. It will ask you to type username and password. Once your login Succeeded then run following commands to push images to docker hub.

docker tag dev-apigateway siddharthborge99/dev-apigateway

docker push siddharthborge99/dev-apigateway

In a same way push orders and products images in docker hub. After pushing all images in docker hub. It should look like this.

As you can see in above picture that we have all three images is available. We are going to use those images in deployment on kubernetes.

Creating microservices in .Net core using ocelot apigateway

siddharth — Sun, 06 Nov 2022 11:53:45 +0000

This is the second part where we are going to build the microservices. So, we will have an ocelot apigateway and two microservices are Products and Orders. Let's start with the microservices.

First create a new project from CLI. dotnet new webapi -n Products is the command to create a new web api project.

dotnet new webapi -o Products

This is our first microservice called products. Now create new controller named ProductsController.cs.

using Microsoft.AspNetCore.Mvc;

namespace apigateway.Controllers;

[ApiController]
[Route("api/[controller]")]
public class ProductsController : ControllerBase
{
    [HttpGet]
    public List<string> Get()
    {
        List<string> products = new List<string>();
        products.Add("Samsung products");
        products.Add("Apple products");
        products.Add("Google products");
        products.Add("Microsoft products");
        return products;
    }
}

This get method will return the list of products.Products microservice is running on a http://localhost:8001. When you hit the http://localhost:8001/api/products. It will return the following response.

Now we have one microservice up and running. Create second microservice called Orders. For creating the second microservice follow the same steps.

dotnet new webapi -o Orders

This is our second microservice called orders. Now create new controller named OrdersController.cs.

using Microsoft.AspNetCore.Mvc;

namespace apigateway.Controllers;

[ApiController]
[Route("api/[controller]")]
public class OrdersController : ControllerBase
{
    [HttpGet]
    public List<string> Get()
    {
        List<string> orders = new List<string>();
        orders.Add("Order 1");
        orders.Add("Order 2");
        orders.Add("Order 3");
        orders.Add("Order 4");
        return orders;
    }
}

Orders microservice is running on a http://localhost:8002. When you hit http://localhost:8002/api/orders. It will return the following response.

This microservices are just for the implementing microservices architecture. Using this microservices you will get knowledge
of microservices architecture with an apigateway.

Now here is the main step. We have to implement an apigateway. Follow the same steps for creating project. We need to create one more project for an apigateway.

dotnet new webapi -o Apigateway

After creating project you have to install nuget package Ocelot. Now install that package.

After installing the package. We have to update program.cs .

using Ocelot.DependencyInjection;
using Ocelot.Middleware;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Configuration.SetBasePath(builder.Environment.ContentRootPath).AddJsonFile("Ocelot.json", optional: false, reloadOnChange: true).AddEnvironmentVariables();
builder.Services.AddOcelot(builder.Configuration);

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}
await app.UseOcelot();
app.Run();

Here we added some lines of code for ocelot. builder.Configuration.SetBasePath will sets the FileProvider for file-based providers to a PhysicalFileProvider with the base path. For that we have to create Ocelot.json.

Ocelot.json

{
    "Routes": [
        {
            "DownstreamPathTemplate": "/api/products",
            "DownstreamScheme": "http",
            "DownstreamHostAndPorts": [
                {
                    "Host": "localhost",
                    "Port": 8001
                }
            ],
            "UpstreamPathTemplate": "/products",
            "UpstreamHttpMethod": [
                "Get"
            ]
        },
        {
            "DownstreamPathTemplate": "/api/orders",
            "DownstreamScheme": "http",
            "DownstreamHostAndPorts": [
                {
                    "Host": "localhost",
                    "Port": 8002
                }
            ],
            "UpstreamPathTemplate": "/orders",
            "UpstreamHttpMethod": [
                "Get"
            ]
        }
    ]
}

DownstreamPathTemplate : The endpoint of a microservice.
DownstreamScheme : The scheme of a microservice.
DownstreamHostAndPorts : Here you need to define the host and port of the microservice.
UpstreamPathTemplate : The path at which the client will request the Ocelot Apigateway.
UpstreamHttpMethod : The Http method to the apigateway. The method should match with the endpoint method.

Apigateway is running on a http://localhost:8888. Apigateway will act as a single entry point for our all microservices. Lets test whether an apigateway working right or not.

In next article we are going to dockerize the microservices and apigateway.

Microservices architecture using .Net core.

siddharth — Sun, 06 Nov 2022 11:53:35 +0000

In this article, I am going to explain the microservices architecture.
The article is divided into four parts as i have listed below.

Microservices architecture.
Creating microservices in .Net core using ocelot apigateway.
Dockerizing all microservices and apigateway
Deployment on kubernetes

Microservices architecture

As the name implies, a microservices architecture is an approach to building a server application as a set of small services. That means a microservices architecture is mainly oriented to the back-end, although the approach is also being used for the front end. Each service runs in its own process and communicates with other processes using protocols such as HTTP/HTTPS, WebSockets, or AMQP.
Each microservice implements a specific end-to-end domain or business capability within a certain context boundary, and each must be developed autonomously and be deployable independently.
Finally, each microservice should own its related domain data model and domain logic.

Above picture is showing how the microservices architecture works.
There is a client basically an user-interface that communicates with an apigateway.
Apigateway is a single entry point for all microservices. Its acts as a middleware between the microservices and client. Microservices is developed by the devops team and every microservice has their own database.

Client : A client is an user-interface.
Apigateway : API Gateway handles all the tasks involved in accepting and processing up to hundreds of thousands of concurrent API calls, including traffic management, CORS support, authorization and access control.

In next article we are going to develop the microservices architecture using .Net core 6.0. In that project will have an apigateway(Ocelot) and microservices.

Google sheets API and Node.js

siddharth — Mon, 14 Jun 2021 04:42:09 +0000

Hey Everyone!
Today we are going to store and retrieve data from google sheets using Node.js. So it's fun to do. I will explain all the steps in an easy way. Let's start coding.

STEP1:

First create new folder node-googlesheets and open terminal in that directory and write a command

npm init

Hit the enter to given questions. Now install the packages that we need.

npm i googleapis google-auth-library express

Now create a new file named index.js and require the packages

const express = require('express');
const app = express();
const {GoogleAuth} = require('google-auth-library');
const {google} = require('googleapis');

app.get("/",(req,res) =>{
    res.send("hello world")
})

app.listen(3000,(req, res) =>{
    console.log("running on server");
})

STEP2:

Now its time to enable google sheets api. click on this Link. Sign in using your google account. you will redirect to this home page.

Now click on select project on top left corner.

Create new project and named it whatever you want.After creating project select the given project.

Now you need to enable google sheets API. For that click on left side bar APIs & Services. Then Enable APIs and Services , search for google sheets API and enable it. all this are shown in above gif.

After that we need to create one service account. For that follow the below steps shown in figure.

Click on credential on left side bar. on top you will see the option create credentials click on that and click on Service account. you will redirect to below given page

only fill the service account name and click on create and continue and skip option 2 and 3 and done.

Here we will get information of service account. Copy the service account Email. Follow the below steps to download a credentials file.

Move this file to your working directory and rename it as credentials.json .
NOTE : This is important to move file in project directory and rename it credentials.js.

STEP3:

Create google sheets file.

Copy your service email from credentials in your API and services and share with google sheets in top right corner and give permission as an Editor and save changes. Copy your google sheet id from url and paste it in code.

STEP4:

Now it's time to code. open index.js and create first route

const express = require('express');
const app = express();
const {GoogleAuth} = require('google-auth-library');
const {google} = require('googleapis');

app.get("/", async(req,res) =>{ 
    const auth = new GoogleAuth({
        keyFile: "credentials.json",
        scopes: "https://www.googleapis.com/auth/spreadsheets"
    })//this is authentication where we are providing our credential file to authenticate


    const client = await auth.getClient();

    const spreadsheetId = "1WbsIrcHLLeVVN6K_1RFP5n0qCh****Ub63kg3XMKIGfQ";//this is unique id of google sheet
    const range = "Sheet1"//name of sheet 
    const sheet = google.sheets({version:"v4", auth: client})
    await sheet.spreadsheets.values.get({
        spreadsheetId,
        range
    },(err, data) =>{
        res.send(data.data)
    })
})

app.listen(3000,(req, res) =>{
    console.log("running on server");
})

Using this code we can fetch all the rows from the sheets. Now if you want to add data in sheet then refer below code.

const express = require('express');
const app = express();
const {GoogleAuth} = require('google-auth-library');
const {google} = require('googleapis');

app.get("/", async(req,res) =>{
    const auth = new GoogleAuth({
        keyFile: "credentials.json",
        scopes: "https://www.googleapis.com/auth/spreadsheets"
    })

    const client = await auth.getClient();
    // res.send(client)
    const spreadsheetId = "1WbsIrcHLLeVVN6K_1RFP5n0qChRliUb63kg3XMKIGfQ";
    const range = "Sheet1"
    const sheet = google.sheets({version:"v4", auth: client})
    await sheet.spreadsheets.values.get({
        spreadsheetId,
        range
    },(err, data) =>{
        console.log(data.data)
    })
//adding data in sheet
    await sheet.spreadsheets.values.append({
        spreadsheetId,
        range: "Sheet1",
        valueInputOption: "USER_ENTERED",
        resource :{
            values:[
                ['newname','newname'],
            ]
        }
    })
    res.send("Sheet updated")
})

app.listen(3000,(req, res) =>{
    console.log("running on server");
})

Yeah, all done.
This will give you idea about how to store and retrieve data from sheets.
I hope you liked the article!
Thank You!

How to upload images in firebase storage with React.js.

siddharth — Wed, 24 Feb 2021 04:17:08 +0000

Hi everyone, I hope you all are safe and doing fine!
Here, we will be uploading an image in firebase storage.
If you're already familiar with JavaScript, React and Firebase, then you'll be able to get moving with this quickly!

Explanation

First create the project using command
npx create-react-app firebase-tutorial

then install the packages that needed for the navigations

yarn add firebase

After installing the project add new folder named as firebase and create new file in folder. The file structure should be as follows

Now its time to create new project on firebase.
Click here.

Click on Add Project

Enter your project name.

Click on create project.

Now add Web app on clicking </> this.

copy this snippet and paste this snippet in firebase.js file.
firebase.js should look like this.

import firebase from 'firebase'

var firebaseConfig = {
  apiKey: "******rBJcUIyThYVrIqg",
  authDomain: "********.firebaseapp.com",
  projectId: "************",
  storageBucket: "**********.appspot.com",
  messagingSenderId: "***************",
  appId: "*****************df5dfbbee0"
};
  firebase.initializeApp(firebaseConfig);
  export default firebase;

Click on storage icon on left sidebar. Now click on Rules. your rules should look like this.

Change the code and publish.Now your rules changes and should look like this.

Now its time to code. Open App.js and follow the below code.

import React, { Component } from 'react'
import './App.css';
import firebase from "./firebase/firebase"

export default class App extends Component {
  constructor(){
    super();
    this.state = {
      image: null,
      progress:0,
      downloadURL: null
    }
  }


  handleChange = (e) =>{
    if(e.target.files[0]){
      this.setState({
      image: e.target.files[0]
    })
  }
    // console.log(e.target.files[0])
}

handleUpload = () =>{
  // console.log(this.state.image);
  let file = this.state.image;
  var storage = firebase.storage();
  var storageRef = storage.ref();
  var uploadTask = storageRef.child('folder/' + file.name).put(file);

  uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
    (snapshot) =>{
      var progress = Math.round((snapshot.bytesTransferred/snapshot.totalBytes))*100
      this.setState({progress})
    },(error) =>{
      throw error
    },() =>{
      // uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) =>{

      uploadTask.snapshot.ref.getDownloadURL().then((url) =>{
        this.setState({
          downloadURL: url
        })
      })
    document.getElementById("file").value = null

   }
 ) 
}


  render() {
    return (
      <div className="App">
        <h4>upload image</h4>
        <label>
          Choose file
        <input type="file" id="file" onChange={this.handleChange} />        
        </label>

        {this.state.progress}
        <button className="button" onClick={this.handleUpload}>Upload</button>
        <img
          className="ref"
          src={this.state.downloadURL || "https://via.placeholder.com/400x300"}
          alt="Uploaded Images"
          height="300"
          width="400"
        />
      </div>
    )
  }
}

CSS

.App {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}



label{
  align-items: center;
  padding: 12px;
  background: red;
  display: table;
  color: #fff;
  /* margin-left: 700px; */
  /* padding-inline: 40px; */
   }

   .button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
  }
.ref{
  margin-top: auto;
}

input[type="file"] {
  display: none;
}

Now run the file using command

npm start

AND DONE
I hope you liked the article!
Thank You!

How to send a sms in Node.js

siddharth — Thu, 29 Oct 2020 06:01:19 +0000

Hey Everyone! So we are going to take a quickstart to send a sms using node.js and twilio.This tutorial is easy because using twilio api we can send sms.Let's start.

Step1:

First create free account on twilio.After that you will be redirect on https://www.twilio.com/console. On dashboard screen you will get a number which is use to send sms.There is two most important key available named as ACCOUNT SID and AUTH TOKEN.
This keys we used in code.

Step2:

Now create new folder named as what you want and open terminal in that directory and write a command.

npm init

Hit the enter to given questions.Now install the packages that we need.

npm install twilio

Now create a new file named index.js and write lines of code.

const accountSid = 'your-account-sid-twilio';
const authToken = 'your-authToken-twilio';
const client = require('twilio')(accountSid, authToken);

client.messages
  .create({
     body: 'Hello from node js',
     from: 'number-twilio',
     to: 'verified-number-twilio'
   })
  .then(message => console.log(message.sid))
  .catch(err => console.log(err));

NOTE: accountsid,authtoken and number-twilio are available on recently created twilio account.SMS will send to only verified number on twilio.if you want to add new number then you can add on dashboard right side

Now run the file using command

node index.js

AND DONE
I hope you liked the article!
Thank You!

How to send email in Node.js with Nodemailer

siddharth — Wed, 02 Sep 2020 14:07:36 +0000

Hello guy's, In this article we will learn how to send email in Node.js.The main advantage of this is that we does not need an API.
We just need a npm package called Nodemailer. let's start coding.

Now create new folder node-mail and open terminal in that directory and write a command

npm init

Hit the enter to given questions.Now install the packages that we need.

npm install dotenv nodemailer

The Nodemailer is used to send mail and Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.

Now create a new file named index.js and require the packages



require('dotenv').config();
const mailer = require("nodemailer");

In index.js create new variable object called body and write some lines of code



let body ={
    from: 'your mail-id',
    to: 'recipient mail-id',
    subject: 'This is subject',
    html: '<h2>The html content</h2><br>',
}

Now create transporter object that holds service and auth



const transporter =   mailer.createTransport({
    service: 'gmail',
    auth:{
        user: process.env.EMAIL_USER,
        pass : process.env.EMAIL_PASS
    }
})



EMAIL_USER = your gmail-id
EMAIL_PASS = password

After creating transporter object we can verify our transporter configuration with verify(callback).



// verify connection configuration
transporter.verify(function(error, success) {
  if (error) {
    console.log(error);
  } else {
    console.log("Server is ready to take our messages");
  }
});

you just thinking about process.env. Create new file named .env and put some lines of code given below

So do the last changes index.js send mail with defined transport object



transporter.sendMail(body,(err, result) =>{
    if (err) {
        console.log(err);
        return false
    }
    console.log(result);
    console.log("email sent");
})

Full index.js code



require('dotenv').config();
const mailer = require("nodemailer");
let body ={
    from: 'your mail-id',
    to: 'recipient mail-id',
    subject: 'This is subject',
    html: '<h2>The html content</h2><br>',
}

const transporter =   mailer.createTransport({
    service: 'gmail',
    auth:{
        user: process.env.EMAIL_USER,
        pass : process.env.EMAIL_PASS
    }
})

transporter.verify(function(error, success) {
  if (error) {
    console.log(error);
  } else {
    console.log("Server is ready to take our messages");
  }
});

transporter.sendMail(body,(err, result) =>{
    if (err) {
        console.log(err);
        return false
    }
    console.log(result);
    console.log("email sent");
})

Now we are ready to send code but we have left with one little task.We have to enable the setting on this LINK.Without updating this we cannot send mail.

Now it's time to send email to the recipient. Open the terminal and write command

node index.js

I hope it will works successfully.Let me know if you encounter any errors.

React Navigation V5 : How to create Nested Stack and tab Navigation

siddharth — Sat, 29 Aug 2020 16:03:08 +0000

final result

Hi everyone, I hope you all are safe and doing fine!
Here i have created the stack and tab navigation using react navigation version 5.
If you're already familiar with JavaScript, React and React Native, then you'll be able to get moving with React Navigation quickly!

Explanation

First create the project using command
expo init navigations

then install the packages that needed for the navigations

yarn add @react-navigation/native

let's also install and configure dependencies used by most navigators, then we can move forward with starting to write some code.

The libraries we will install now are react-native-gesture-handler, react-native-reanimated, react-native-screens and react-native-safe-area-context and @react-native-community/masked-view.

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

after installing dependencies the package.json file should look like this except versions because Over time, that is likely to get updated

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo/vector-icons": "^10.2.1",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/bottom-tabs": "^5.8.0",
    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.9.0",
    "expo": "~38.0.8",
    "expo-status-bar": "^1.0.2",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
    "react-native-gesture-handler": "^1.7.0",
    "react-native-reanimated": "^1.13.0",
    "react-native-safe-area-context": "^3.1.7",
    "react-native-screens": "^2.10.1",
    "react-native-web": "~0.11.7"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "babel-preset-expo": "~8.1.0"
  },
  "private": true
}

The folder structure for project is shown in img

Now it's time to code

Step 1:

Create the folder name called screens which include the 3 files stack1.js,Stack2.js and Settings.js

screens/Stack1.js

import React from 'react'
import { View, Text, StyleSheet, Button } from 'react-native'

export default function Stack1(props) {
    return (
        <View style={styles.container}>
            <Text>Stack Screen 1</Text>
         </View>
    )
}

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

screens/Stack2.js

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'

export default function Stack2() {
    return (
        <View style={styles.container}>
            <Text>Stack2</Text>
        </View>
    )
}

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

Settings.js

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'

export default function Settings() {
    return (
        <View style={styles.container}>
            <Text>Settings</Text>
        </View>
    )
}

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

Step 2:

Now create first stack navigator using package name @react-navigation/stack in App.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Stack1 from './screens/Stack1';
import Stack2 from './screens/Stack2';

const Stack = createStackNavigator();

function StackScreens(){
  return(
    <Stack.Navigator screenOptions={{
      headerTitleAlign:'center',
      headerTintColor:'#fff',
      headerStyle:{
        backgroundColor:'blue'
      }
    }}>
      <Stack.Screen name="Stack1" component={Stack1} />
      <Stack.Screen name="Stack2" component={Stack2} />
    </Stack.Navigator>
  )
}

export default function App() {
  return (
    <NavigationContainer>
        <StackScreens />
    </NavigationContainer>
  );
}

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

createStackNavigator is a function that returns an object containing 2 properties: Screen and Navigator.Using them we created two screens name Stack1 and Stack2.

NavigationContainer is a component which manages our navigation tree and contains the navigation state. This component must wrap all navigators structure.

Output of above code

Now add the some line of code in Stack1.js to go to Stack2 screen.

screens/stack1.js

.....
  return (
        <view style={styles.container}>
            <Text>Stack Screen 1</Text>
            <Button title="Go to Stack Screen 2" onPress={() => props.navigation.navigate('Stack2')} />
        </View>
    )
.......

By adding button you can move to screen called Stack2.js

so, Stack Navigation has completed.Now create the Tab Navigation.

Step 3:

To create Tab navigations require the package name called @react-navigation/bottom-tabs.
And do the changes in App.js

App.js


import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';

import Stack1 from './screens/Stack1';
import Stack2 from './screens/Stack2';
import Settings from './screens/Settings';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function StackScreens(){
  return(
    <Stack.Navigator screenOptions={{
      headerTitleAlign:'center',
      headerTintColor:'#fff',
      headerStyle:{
        backgroundColor:'blue'
      }
    }}>
      <Stack.Screen name="Stack1" component={Stack1} />
      <Stack.Screen name="Stack2" component={Stack2} />
    </Stack.Navigator>
  )
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;
            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={32} color={color} />;
            // return <Ionicons name= size={32} color= />

          },
        })}
      >
        <Tab.Screen  name="Home" component={StackScreens} />
        <Tab.Screen  name="Settings" component={Settings} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

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

In the above code, The use of tab navigation is much more similar to stack navigation.just we have used the screen options and used different components.
Now our Navigations are ready

GitHub

you can find code on github

Do ⭐ the repository