> 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 tied to user interaction**we cover. Like scrolling, keyboards, audio focus, and haptic feedback, **features that must respond immediately to user actions**we bring them together and explain them in one place.
***
### Scroll bounce area background handling
**SDK components:** `ScrollViewInertialBackground`
iOS `ScrollView`It is a component that fills the background color in the \*\*bounce effect area (top/bottom)\*\* that appears when scrolling reaches the end in a ScrollView, 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`
This is the background color to apply to the upper area of the scroll. The default is `adaptive.background`applied automatically to match the system theme.
* **props.bottomColor** · `string`
This is the background color to apply to the lower area of the scroll. The default is `adaptive.background`applied automatically to match the system theme.
* **props.spacer** · `number`
Specifies the size of the space between the top and bottom spaces around the content where the background color will be applied. The default is [`useWindowDimensions`](https://reactnative.dev/docs/next/usewindowdimensions)uses the screen height obtained from
**Example: Add background colors above and below a scroll view**
Add a red background above the scroll view and a blue background below it. The background color is applied to areas outside the scrolled content.
```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`
The current device's **color mode (light / dark)** is a type representing it. Used for theme branching or style conditions.
**Signature**
```typescript
type ColorPreference = 'light' | 'dark';
```
***
### Lift elements above the keyboard
**SDK components:** `KeyboardAboveView`
When the keyboard appears **A layout component that automatically lifts child components above the keyboard**. It's useful when you want buttons or action areas to stay 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
This is the component to display above the keyboard when it appears. For example, you can put buttons, text inputs, and so on.
**Return value**
* ReactElement
Adjusted above the keyboard when it appears [`Animated.View`](https://reactnative.dev/docs/animated#createanimatedcomponent)is returned.
**Example: Lift 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 video or audio components, **the callback type called when audio focus changes**. It lets you control how interruptions caused by other apps or system events are handled.
**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.
***
### Trigger haptic feedback
**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.
**Signature**
```typescript
function generateHapticFeedback(options: HapticFeedbackOptions): Promise;
```
**Return value**
* void
**Example: Trigger 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 (