Response Handling

In this document, UI/UX features directly connected to user interactionare covered. Such as scrolling, keyboard, audio focus, and haptic vibration, features that must respond immediately to user actionsare gathered in one place and explained.

---

Background handling for the scroll bounce area

SDK Component: ScrollViewInertialBackground

iOS ScrollViewis 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

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 useWindowDimensionsthe 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.

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 (
    <ScrollView>
      <ScrollViewInertialBackground topColor="red" bottomColor="blue" />
      {dummies.map((i) => (
        <View
          key={`dummy-${i}`}
          style={{ width: '100%', height: 100, borderBottomColor: 'black', borderBottomWidth: 1 }}
        >
          <Text>Try scrolling.</Text>
        </View>
      ))}
    </ScrollView>
  );
}

---

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

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 keyboardis useful when you want buttons or action areas to always remain visible even while typing.

Signature

function KeyboardAboveView({ style, children, ...props }: ComponentProps<typeof View>): ReactElement;

Parameters

• props.styleStyleProp<ViewStyle>

  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.Viewreturns it.

Example: Lifting an element above the keyboard

import { ScrollView, TextInput, View, Text } from 'react-native';
import { KeyboardAboveView } from '@granite-js/react-native';

function KeyboardAboveViewExample() {
  return (
    <>
      <ScrollView>
        <TextInput placeholder="placeholder" />
      </ScrollView>

      <KeyboardAboveView>
        <View style={{ width: '100%', height: 50, backgroundColor: 'yellow' }}>
          <Text>It's above the keyboard.</Text>
        </View>
      </KeyboardAboveView>
    </>
  );
}

---

Audio focus change callback

SDK API: OnAudioFocusChanged

of a video or audio component a callback type called when audio focus changesYou can control the handling when sound is interrupted by another app or a system event.

Signature

type OnAudioFocusChanged = NonNullable<VideoProperties['onAudioFocusChanged']>;

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 feedbackUse 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

function generateHapticFeedback(options: HapticFeedbackOptions): Promise<void>;

Return value

• void

Example: Triggering haptics by pressing a button

js

import { generateHapticFeedback } from '@apps-in-toss/web-framework';

generateHapticFeedback({ type: 'tickWeak' });

React

import React from 'react';
import { generateHapticFeedback } from '@apps-in-toss/web-framework';

function GenerateHapticFeedbackWeb() {
  return (
    <button
      onClick={() => {
        generateHapticFeedback({ type: 'tickWeak' });
      }}
      style={{
        padding: '10px 20px',
        borderRadius: '8px',
        border: 'none',
        backgroundColor: '#3182f6',
        color: 'white',
        cursor: 'pointer',
        fontSize: '16px',
      }}
    >
      Haptic
    </button>
  );
}

export default GenerateHapticFeedbackWeb;

React Native

import { Button } from 'react-native';
import { generateHapticFeedback } from '@apps-in-toss/framework';

function GenerateHapticFeedback() {
  return (
    <Button
      title="Haptic"
      onPress={() => {
        generateHapticFeedback({ type: 'tickWeak' });
      }}
    />
  );
}

Try the example app

apps-in-toss-examples from the repository with-haptic-feedback Download the code or scan the QR code below to try it yourself.

QR code link: intoss://with-haptic-feedback

Haptic vibration options and types

Type: HapticFeedbackOptions, HapticFeedbackType

generateHapticFeedbackDefines the vibration type options to pass to

Signature

interface HapticFeedbackOptions {
  type: HapticFeedbackType;
}

type HapticFeedbackType =
  | 'tickWeak'
  | 'tap'
  | 'tickMedium'
  | 'softMedium'
  | 'basicWeak'
  | 'basicMedium'
  | 'success'
  | 'error'
  | 'wiggle'
  | 'confetti';

Notes

• Interaction-related features have a direct impact onthe user experience. Avoid overuse and use only at meaningful moments.
• Keyboard / audio / haptic features may behave differently depending on the platform.
• Event- or callback-based features must always include cleanup logic as well.