> 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 navigation event (`useBackEvent`)

`useBackEvent`is a Hook that returns a controller object that can register and remove back navigation events. `addEventListener`Using it lets you register back navigation events, and `removeEventListener`using it lets you remove back navigation events. Registered back navigation events work only while the user is viewing the screen. Whether the screen is visible is based on `useVisibility`.

**Signature**

```typescript
function useBackEvent(): BackEventControls;
```

**Return value**

* BackEventControls

  It is an object that can control back navigation events. It includes the method for registering events, `addEventListener` and the method for removing them, `removeEventListener` are included.

**Error**

* Error

  If this hook is `BackEventProvider` used outside of

**Example**

When you press the "Add BackEvent" button, a back navigation event is registered. After that, when you press the back button, a "back" alert appears and you do not actually go back. When you press the "Remove BackEvent" button, the registered event is removed. After that, when you press the back button, you go 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 next code synchronously after navigating away from a screen and coming back. Screen navigation is [@react-navigation/native `useNavigation`the `navigate`](https://reactnavigation.org/docs/6.x/navigation-prop#navigate).

For example, it is used when you want to log that the user moved to another screen and then 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 \\"Go\\" button, you move to another screen, and when you come back, a log is recorded."

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

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

  return (
    <Button
      title="Go"
      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 this hook lets you know whether the screen is currently visible to the user. You can run specific actions or record logs only while the user is viewing the screen.

When the screen is visible to the user `true`, when it is not visible `false`returns. 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

  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 move to an external link (`https://toss.im`), `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.