IONIC

Ion Menu and Tabs

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet, IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonSplitPane, IonTabs, IonTabBar, IonTabButton, IonLabel, IonBadge} from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Home from './pages/Home';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';

const App: React.FC = () => (
  <IonApp>

    <IonReactRouter>
      <IonSplitPane contentId="main">
        <IonMenu side="start" menuId="custom" className="my-custom-menu" contentId="main">
          <IonHeader>
            <IonToolbar color="tertiary">
              <IonTitle>Custom Menu</IonTitle>
            </IonToolbar>
          </IonHeader>
          <IonContent>
            <IonList>
              <IonItem href="/home">Menu Item</IonItem>
              <IonItem>Menu Item</IonItem>
              <IonItem>Menu Item</IonItem>
              <IonItem>Menu Item</IonItem>
              <IonItem>Menu Item</IonItem>
            </IonList>
          </IonContent>
        </IonMenu>

        <IonRouterOutlet id="main">
          <Route path="/" render={ () => <Redirect to="/home" />} />
          <Route path="/home" component={Home} exact={true} />
        </IonRouterOutlet>

        <IonTabs>
          <IonTabBar slot="bottom">
            <IonTabButton tab="schedule" href="/home">
              <IonLabel>Schedule</IonLabel>
              <IonBadge>6</IonBadge>
            </IonTabButton>

            <IonTabButton tab="speakers">
              <IonLabel>Speakers</IonLabel>
            </IonTabButton>

            <IonTabButton tab="map">
              <IonLabel>Map</IonLabel>
            </IonTabButton>

            <IonTabButton tab="about">
              <IonLabel>About</IonLabel>
            </IonTabButton>
          </IonTabBar>
          <IonRouterOutlet>
              <Route path="/" render={ () => <Redirect to="/home" />} />
              <Route path="/home" component={Home} exact={true} />
          </IonRouterOutlet>
        </IonTabs>
        
      </IonSplitPane>
    </IonReactRouter>
    
  </IonApp>
);

export default App;

How to create android apk from ionic app using capacitor

git clone project_repo_url.git
cd project
npm install
ionic serve
ionic build
ionic capacitor add android
ionic capacitor build android

Step 1: install java / jre
Step 2: install node.js

Step 3:
install android sdk installer Note: keep the path in file e.g. C:\Users\S4671314\AppData\Local\Android\android-sdk

Step 4:
install all the packages default selected android Note select 4.4(W) package also

Step 5: install antonwindows

Step 6: Set environment variable
C:\Users\S4671314\AppData\Local\Android\android-sdk\platform-tools
C:\Users\S4671314\AppData\Local\Android\android-sdk\tools

Step 7:
verify everything install perfect > npm > adb > git

Step 8: install cordova ionic
> npm install -g cordova ionic

Step 9: Create new project folder > ionic start HelloWorld blank

Step 10:
> cd HelloWorld > ionic platform add android Edit index file  /www/index.html

Step 11:
run command in cmd > ionic build android

Step 12: Copy the apk file to android device from platforms/android/build/outputs/apk/android-debug.apk

Cheers