# 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();
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webtonative.com/javascript-apis/native-controls-and-js-bridge-functions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.