> For the complete documentation index, see [llms.txt](https://developers-apps-in-toss.toss.im/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers-apps-in-toss.toss.im/documentation/api-and-sdk-en/integration/props.md).

# Controlling WebView properties

In this document, to control how WebView behaves `apps-in-toss.config.ts`that can be configured in `webView` we'll explain the options. 

things like scroll behavior, media playback behavior, and whether gestures are used **WebView properties that directly affect the user experience**can be adjusted to fit your service.

{% hint style="info" %}
**Supported environments**

* Runtime environment: WebView, Toss app
* SDK version: WebView 3.x or later
  {% endhint %}

## How to configure WebView properties

WebView properties are `apps-in-toss.config.ts` in the file's `webView` item.

```ts
import { defineConfig } from '@apps-in-toss/web-framework/config';

export default defineConfig({
  webView: {
    // WebView behavior-related options
  },
});
```

{% hint style="warning" %}
In SDK 2.x, `granite.config.ts`and `webViewProps`were each renamed in SDK 3.x to `apps-in-toss.config.ts`, `webView`were renamed. The sub-options are the same.
{% endhint %}

## Available WebView properties

`webView`you can set the following properties.

```ts
webView?: {
  allowsInlineMediaPlayback?: boolean;
  bounces?: boolean;
  pullToRefreshEnabled?: boolean;
  overScrollMode?: 'always' | 'content' | 'never';
  mediaPlaybackRequiresUserAction?: boolean;
  allowsBackForwardNavigationGestures?: boolean;
};
```

### Allow inline media playback (`allowsInlineMediaPlayback`)

sets whether HTML5 videos are played inline inside the WebView instead of in full screen.

This is an iOS-only property, `true`after setting it to `<video>` tag, `webkit-playsinline` the webkit-playsinline attribute is required for inline playback.

| Item     | Contents  |
| -------- | --------- |
| Type     | `boolean` |
| Default  | `false`   |
| Platform | iOS       |

### Use scroll bounce effect (`bounces`)

sets whether to use the bounce effect when reaching the edge of the scroll area.

This is an iOS-only property, and the default is `true`.

| Item     | Contents  |
| -------- | --------- |
| Type     | `boolean` |
| Default  | `true`    |
| Platform | iOS       |

### Enable pull-to-refresh (`pullToRefreshEnabled`)

sets whether to enable the pull-to-refresh behavior that refreshes when pulled down.

This is an iOS-only option, and the default is `true`is. If you set this value to `true`to `bounces` the option also automatically `true`is set to.

| Item     | Contents  |
| -------- | --------- |
| Type     | `boolean` |
| Default  | `true`    |
| Platform | iOS       |

### Configure over-scroll behavior (`overScrollMode`)

sets how Android handles the over-scroll effect when reaching the end of scrollable content.

| Item     | Contents                           |
| -------- | ---------------------------------- |
| Type     | `'always' \| 'content' \| 'never'` |
| Default  | `'always'`                         |
| Platform | Android                            |

The meaning of each value is as follows.

| Value       | Description                                                                     |
| ----------- | ------------------------------------------------------------------------------- |
| `'always'`  | Allows the over-scroll effect regardless of content size.                       |
| `'content'` | Allows the over-scroll effect only when the content is larger than the WebView. |
| `'never'`   | Does not use the over-scroll effect.                                            |

Note: [Android official documentation](https://developer.android.com/reference/android/view/View#OVER_SCROLL_NEVER)

### Restrict media autoplay (`mediaPlaybackRequiresUserAction`)

sets whether to prevent audio or video from playing automatically.

If you set this value to `true`the media will play only when the user taps it directly. On Android, this option applies only on version 17 or later.

| Item     | Contents     |
| -------- | ------------ |
| Type     | `boolean`    |
| Default  | `true`       |
| Platform | iOS, Android |

Note: [react-native-webview mediaPlaybackRequiresUserAction](https://github.com/react-native-webview/react-native-webview/blob/v13.6.2/docs/Reference.md#mediaplaybackrequiresuseraction)

### Allow swipe back/forward navigation (`allowsBackForwardNavigationGestures`)

sets whether to allow back or forward navigation using left/right swipe gestures.

If you set this value to `false`If set to this value, users cannot navigate between pages with swipe gestures.

| Item     | Contents  |
| -------- | --------- |
| Type     | `boolean` |
| Default  | `true`    |
| Platform | iOS       |

Note: [react-native-webview allowsBackForwardNavigationGestures](https://github.com/react-native-webview/react-native-webview/blob/v13.6.2/docs/Reference.md#allowsBackForwardNavigationGestures)

## Configuration example

The example below configures WebView scroll behavior and media playback behavior together.

```ts
import { defineConfig } from '@apps-in-toss/web-framework/config';

export default defineConfig({
  webView: {
    bounces: true,
    pullToRefreshEnabled: true,
    allowsInlineMediaPlayback: false,
    overScrollMode: 'never',
  },
});
```

## Notes

* Some WebView properties are iOS- or Android-only. Be sure to check the differences in behavior by platform.
* We recommend carefully configuring options that have a major impact on the user experience to match your service.
* WebView properties are applied at configuration time, not at runtime.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://developers-apps-in-toss.toss.im/documentation/api-and-sdk-en/integration/props.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.