capacitor-bars

An iOS and Android system and navigation bar management implementation for Capacitor.

Install

npm install @vmisoft/[email protected]
npx cap sync

Example

If you want to run a local example located in capacitor-bars-example folder, you need to set up a few things:

1. You've downloaded only the source code, so you need to build the library itself. Run this command from the root of the library

npm run build

2. Now you need to tell where to ionic can find your android sdk. For that, create local.properties file inside capacitor-bars/capacitor-bars-example/android
3. Finally, navigate to capacitor-bars-example and run this:

ionic cap sync
ionic build 
ionic cap run android

Usage

You can find a folder capacitor-bars-example with a working Android app. Also, here are a few examples:

//first, you need to import module itself:
import { CapacitorBars } from '@vmisoft/capacitor-bars';


//then you can use all the methods: 
setRandomStatusColor = async () => {
    let color = "#000000"; // black
    CapacitorBars.setStatusBarColor({ color: color });
  };


respectBars = async () => {
    CapacitorBars.setRespectSystemBars({ isRespect: true });
};

API

setNavigationBarColor(...)

setNavigationBarColor(options: { color: string; }) => Promise<void>

| Param | Type | | ------------- | ------------------------------- | | options | { color: string; } |

getNavigationBarColor()

getNavigationBarColor() => Promise<{ color: string; }>

Returns: Promise<{ color: string; }>

setStatusBarColor(...)

setStatusBarColor(options: { color: string; }) => Promise<void>

| Param | Type | | ------------- | ------------------------------- | | options | { color: string; } |

getStatusBarColor()

getStatusBarColor() => Promise<{ color: string; }>

Returns: Promise<{ color: string; }>

setRespectSystemBars(...)

setRespectSystemBars(options: { isRespect: boolean; }) => Promise<void>

| Param | Type | | ------------- | ------------------------------------ | | options | { isRespect: boolean; } |

getRespectSystemBars()

getRespectSystemBars() => Promise<{ isRespect: boolean; }>

Returns: Promise<{ isRespect: boolean; }>

setNavBarVisible(...)

setNavBarVisible(options: { isVisible: boolean; }) => Promise<void>

| Param | Type | | ------------- | ------------------------------------ | | options | { isVisible: boolean; } |

getNavBarVisible()

getNavBarVisible() => Promise<{ isVisible: boolean; }>

Returns: Promise<{ isVisible: boolean; }>

setStatusBarVisible(...)

setStatusBarVisible(options: { isVisible: boolean; }) => Promise<void>

| Param | Type | | ------------- | ------------------------------------ | | options | { isVisible: boolean; } |

getStatusBarVisible()

getStatusBarVisible() => Promise<{ isVisible: boolean; }>

Returns: Promise<{ isVisible: boolean; }>