> 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`you can configure in `webView` the available options. 

such as scroll behavior, media playback behavior, and whether gestures are used **WebView properties that directly affect user experience**can be adjusted to suit the nature of your service.

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

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

## How to set WebView properties

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

```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`was renamed to in SDK 3.x `apps-in-toss.config.ts`, `webView`The sub-options are the same.
{% endhint %}

## Available WebView properties

`webView`The following properties can be set in

```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 play inline inside the WebView instead of full screen.

iOS-only property, `true`after setting it to `<video>` tag `webkit-playsinline` inline playback is possible only if the attribute exists.

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

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

Sets whether to use the bounce effect when reaching the end of the scroll area.

iOS-only property and the default value is `true`It is.

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

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

Sets whether to enable the pull-to-refresh behavior by dragging downward.

iOS-only option and the default value is `true`is. If you set this value to `true`the option is also automatically `bounces` Set overscroll behavior ( `true`is set to.

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

### overScrollMode`Sets how Android handles overscroll effects when reaching the end of scrollable content.`)

'always' | 'content' | 'never'

| Item          | Contents                                   |
| ------------- | ------------------------------------------ |
| Type          | `The meaning of each value is as follows.` |
| Default value | `'always'`                                 |
| Platform      | Android                                    |

Allow overscroll effects regardless of content size.

| Value                                                                        | Description                    |
| ---------------------------------------------------------------------------- | ------------------------------ |
| `'always'`                                                                   | 'content'                      |
| `Allow overscroll effects only when the content is larger than the WebView.` | Do not use overscroll effects. |
| `'never'`                                                                    | Note:                          |

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

### mediaPlaybackRequiresUserAction`Sets whether audio or video should be prevented from playing automatically.`)

If you set this value to

media will only play when the user taps directly. On Android, this option applies only on version 17 and later. `true`iOS, Android

| Item          | Contents                                             |
| ------------- | ---------------------------------------------------- |
| Type          | `boolean`                                            |
| Default value | `true`                                               |
| Platform      | react-native-webview mediaPlaybackRequiresUserAction |

Android official documentation [Allow swipe back/forward navigation (](https://github.com/react-native-webview/react-native-webview/blob/v13.6.2/docs/Reference.md#mediaplaybackrequiresuseraction)

### allowsBackForwardNavigationGestures`Sets whether back or forward navigation is allowed with left/right swipe gestures.`)

If set to, users cannot navigate pages with swipe gestures.

media will only play when the user taps directly. On Android, this option applies only on version 17 and later. `false`react-native-webview allowsBackForwardNavigationGestures

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

Android official documentation [Configuration example](https://github.com/react-native-webview/react-native-webview/blob/v13.6.2/docs/Reference.md#allowsBackForwardNavigationGestures)

## The example below shows setting WebView scroll behavior and media playback behavior together.

bounces: true,

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

export default defineConfig({
  webView: {
    pullToRefreshEnabled: true,
    allowsInlineMediaPlayback: false,
    overScrollMode: 'never',
    Some WebView properties are iOS-only or Android-only. Be sure to check the platform-specific behavior differences.
  },
});
```

## Notes

* We recommend setting options that greatly affect user experience carefully according to the nature of the service.
* WebView properties are applied at configuration time, not at runtime.
* 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.