> 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/screen-navigation/event.md).

# Screen events

### 1. Back button event (`useBackEvent`)

`useBackEvent`is a Hook that returns a controller object for registering and removing back button events. `addEventListener`Using this lets you register a back button event, `removeEventListener`and 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 `useVisibility`based on.

**Signature**

```typescript
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.

```tsx
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`)

`useWaitForReturnNavigator`is a Hook that helps you run the following code synchronously when you return after switching screens. Screen navigation is [@react-navigation/native `useNavigation`of `navigate`](https://reactnavigation.org/docs/6.x/navigation-prop#navigate)is used.

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

**Signature**

```typescript
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.

```tsx
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 `false`it 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 `false`is returned.
* When you return to the Toss app or the screen becomes visible again `true`is returned.
* When you move to another service within the Toss app `false`is returned.

**Signature**

```typescript
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 `false`is recorded, and when you come back `true`is recorded. When you navigate to an external link (`https://toss.im`) is recorded when you navigate to it. `false`is recorded, and when you come back `true`is recorded.

```tsx{1,6,8-12}
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 }
 */
```


---

# 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/react-native/screen-navigation/event.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.