> 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/react-native/interaction.md).
# Response handling
In this document, **UI/UX features directly connected to user interaction**are covered. Such as scrolling, keyboard, audio focus, and haptic vibration, **features that must respond immediately to user actions**are gathered in one place and explained.
***
### Background handling for the scroll bounce area
**SDK Component:** `ScrollViewInertialBackground`
iOS `ScrollView`is a component that fills the \*\*bounce effect area (top/bottom)\*\* that appears when scrolling reaches the end with background color, providing a more natural visual effect.
**Signature**
```ts
function ScrollViewInertialBackground({
topColor,
bottomColor,
spacer: _spacer,
}: ScrollViewInertialBackgroundProps): JSX.Element;
```
**Parameters**
* props object
passed to the component `props` object.
* **props.topColor** · `string`
The background color applied to the area above the scroll. The default is `adaptive.background`, which is automatically applied according to the system theme.
* **props.bottomColor** · `string`
The background color applied to the area below the scroll. The default is `adaptive.background`, which is automatically applied according to the system theme.
* **props.spacer** · `number`
Specify the size of the space between the content where the background color is applied, above and below. The default is [`useWindowDimensions`](https://reactnative.dev/docs/next/usewindowdimensions)the screen height obtained from it.
**Example: Adding background colors above and below a ScrollView**
Add a red background above the ScrollView and a blue background below it. The background color is applied to the area outside the scroll.
```tsx
import { ScrollView, View, Text } from 'react-native';
import { ScrollViewInertialBackground } from '@granite-js/react-native';
const dummies = Array.from({ length: 20 }, (_, i) => i);
function InertialBackgroundExample() {
return (
{dummies.map((i) => (
Try scrolling.
))}
);
}
```
***
### Color mode type
**SDK API:** `ColorPreference`
Type representing the device's current **color mode (light / dark)** used for theme branching or style condition handling.
**Signature**
```typescript
type ColorPreference = 'light' | 'dark';
```
***
### Lifting an element above the keyboard
**SDK Component:** `KeyboardAboveView`
When the keyboard appears **a layout component that automatically lifts child components above the keyboard**is useful when you want buttons or action areas to always remain visible even while typing.
**Signature**
```typescript
function KeyboardAboveView({ style, children, ...props }: ComponentProps): ReactElement;
```
**Parameters**
* props.styleStyleProp\
You can apply additional styles. For example, you can set background color or size.
* props.childrenReactNode
Components to display above the keyboard when it appears. For example, you can put buttons, text input fields, and so on.
**Return value**
* ReactElement
Adjusted above the keyboard when the keyboard appears [`Animated.View`](https://reactnative.dev/docs/animated#createanimatedcomponent)returns it.
**Example: Lifting an element above the keyboard**
```tsx
import { ScrollView, TextInput, View, Text } from 'react-native';
import { KeyboardAboveView } from '@granite-js/react-native';
function KeyboardAboveViewExample() {
return (
<>
It's above the keyboard.
);
}
```
***
### Audio focus change callback
**SDK API:** `OnAudioFocusChanged`
of a video or audio component **a callback type called when audio focus changes**You can control the handling when sound is interrupted by another app or a system event.
**Signature**
```typescript
type OnAudioFocusChanged = NonNullable;
```
**Parameters**
* **event** · Required · `Object`
An event object containing audio focus information.
* **event.hasAudioFocus** · Required · `boolean`
Indicates whether the video component has audio focus.
***
### Running haptic vibration
**SDK Function:** `generateHapticFeedback`
on the device **a function that triggers haptic feedback**Use it when tactile feedback is needed, such as button clicks, completion notifications, or success/failure feedback.
Haptics will only work if the setting is enabled in the Toss app under Settings > Vibration.
**Signature**
```typescript
function generateHapticFeedback(options: HapticFeedbackOptions): Promise;
```
**Return value**
* void
**Example: Triggering haptics by pressing a button**
{% tabs %}
{% tab title="js" %}
```js
import { generateHapticFeedback } from '@apps-in-toss/web-framework';
generateHapticFeedback({ type: 'tickWeak' });
```
{% endtab %}
{% tab title="React" %}
```tsx
import React from 'react';
import { generateHapticFeedback } from '@apps-in-toss/web-framework';
function GenerateHapticFeedbackWeb() {
return (
);
}
export default GenerateHapticFeedbackWeb;
```
{% endtab %}
{% tab title="React Native" %}
```tsx
import { Button } from 'react-native';
import { generateHapticFeedback } from '@apps-in-toss/framework';
function GenerateHapticFeedback() {
return (