# Native Controls & JS Bridge Functions

{% hint style="info" %}
You'll need to import the javascript file in your website before starting from this [link](https://docs.webtonative.com/javascript-apis/getting-started).
{% endhint %}

### 1. Trigger JavaScript Functions via URL Scheme

You can call JavaScript functions inside your WebView directly by using the `w2n://` URL scheme.

```
Syntax:-
w2n://jsFunction:YOUR_JS_CODE

Example:-
w2n://jsFunction:alert("Hello World");

This will execute the JavaScript alert("Hello World") inside the WebView.
```

### 2. Hide Native Components

You can hide native UI components dynamically using the **`hideNativeComponents()`** JavaScript function.

#### **Available Components:**

* `secondary_navigation`
* `admob`
* `floating_button`
* `connect`
* `bottom_navigation`
* `advanced_bottom_navigation`
* `header`

```
Syntax:-
hideNativeComponents(["component1", "component2"]);

Example:-
hideNativeComponents(["bottom_navigation"]);

To hide multiple components:
hideNativeComponents(["bottom_navigation", "header", "admob"]);
```

### 3. Show Native Components

You can show native UI components using the **`showNativeComponents()`** JavaScript function.

#### **Available Components:**

* `secondary_navigation`
* `admob`
* `floating_button`
* `connect`
* `bottom_navigation`
* `advanced_bottom_navigation`
* `header`

```
Syntax:-
showNativeComponents(["component1", "component2"]);

Example:-
showNativeComponents(["header"]);

To show multiple components:
showNativeComponents(["header", "floating_button", "secondary_navigation"]);
```

Feature taken live on 24/11/25

### 3. Setting Navigation Bar color in android

Set the android system navigation bar color.

```
window.WTN.setNavigationBarColor({ color: selectedColor });

//Pass the color you want to set in string format.
```

### 4. Pinch to zoom setting control in Android

Control pinch to zoom feature.

```
window.WTN.pinchToZoom({state:false});

//Pass the state as either true or false to enable or disable respectively.
```

### 5. Invoke Sidebar in Android and iOS

To open side bar in android and iOS call the below url scheme.

```
w2n://open-sidebar
```

### 6. Hiding the splash screen in Android and iOS

When the splash screen's type is set to `JS_TRIGGER` (instead of a timer or page-load trigger), the native app waits for the web page to explicitly call `window.splashScreenJsTrigger()` before hiding the splash screen and navigating forward.

```javascript
window.WTN.Splash.splashScreenJsTrigger();
```