Screen Events

1. Back button event (useBackEvent)

useBackEventis a Hook that returns a controller object for registering and removing back button events. addEventListenerUsing this lets you register a back button event, removeEventListenerand using this lets you remove a back button event. Registered back button events only run while the user is viewing the screen. Whether the screen is visible is useVisibilitybased on.

Signature

function useBackEvent(): BackEventControls;

Return value

• BackEventControls

  It is an object that can control back button events. The addEventListener method for registering events and the removeEventListener method for removing them are included.

Error

• Error

  If this Hook is BackEventProvider It throws an error if this Hook is not used within.

Example

When you press the "Add BackEvent" button, a back button event is registered. After that, when you press the back button, a "back" alert appears and it doesn't actually go back. When you press the "Remove BackEvent" button, the registered event is removed. After that, when you press the back button, it goes back as usual.

import { useEffect, useState } from 'react';
import { Alert, Button, View } from 'react-native';
import { useBackEvent } from '@granite-js/react-native';

function UseBackEventExample() {
  const backEvent = useBackEvent();

  const [handler, setHandler] = useState<{ callback: () => void } | undefined>(undefined);

  useEffect(() => {
    const callback = handler?.callback;

    if (callback != null) {
      backEvent.addEventListener(callback);

      return () => {
        backEvent.removeEventListener(callback);
      };
    }

    return;
  }, [backEvent, handler]);

  return (
    <View>
      <Button
        title="Add BackEvent"
        onPress={() => {
          setHandler({ callback: () => Alert.alert('back') });
        }}
      />
      <Button
        title="Remove BackEvent"
        onPress={() => {
          setHandler(undefined);
        }}
      />
    </View>
  );
}

---

2. Screen return event (useWaitForReturnNavigator)

useWaitForReturnNavigatoris a Hook that helps you run the following code synchronously when you return after switching screens. Screen navigation is @react-navigation/native useNavigationof navigateis used.

For example, use it when you want to log that a user navigated to another screen and came back.

Signature

function useWaitForReturnNavigator<T extends Record<string, object | undefined>>(): <RouteName extends keyof T>(
  route: RouteName,
  params?: T[RouteName],
) => Promise<void>;

Example

When you press the "Move" button, you navigate to another screen, and a log is recorded when you return.

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

function UseWaitForReturnNavigator() {
  const navigate = useWaitForReturnNavigator();

  return (
    <Button
      title="Move"
      onPress={async () => {
        console.log(1);
        await navigate('/examples/use-visibility');
        // This code runs when you return to the screen.
        console.log(2);
      }}
    />
  );
}

---

3. Visibility event (useVisibility)

useVisibility Using the Hook lets you know whether the screen is currently visible to the user. You can run certain tasks or leave logs only when the user is viewing the screen.

When the screen is visible to the user true, and when it is not visible falseit returns a value. However, the value does not change when opening and closing the system share modal (share).

• When you switch to another app or press the Home button falseis returned.
• When you return to the Toss app or the screen becomes visible again trueis returned.
• When you move to another service within the Toss app falseis returned.

Signature

function useVisibility(): boolean;

Return value

• boolean

  It indicates whether the current screen is visible to the user.

Example

When you move to the home screen falseis recorded, and when you come back trueis recorded. When you navigate to an external link (https://toss.im) is recorded when you navigate to it. falseis recorded, and when you come back trueis recorded.

import { useVisibility } from '@granite-js/react-native';
import { useEffect } from 'react';
import { Button, Linking } from 'react-native';

export default function VisibilityPage() {
  const visibility = useVisibility();

  useEffect(() => {
    console.log({
      visibility,
    });
  }, [visibility]);

  return (
    <Button
      onPress={() => {
        Linking.openURL('https://toss.im');
      }}
      title="Go to https://toss.im"
    />
  );
}

/**
 * Output examples:
 * { "visibility": false }
 * { "visibility": true }
 * { "visibility": false }
 * { "visibility": true }
 */