> 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/common/network-environment/network.md).

# Network

### 1. Check the network connection status (`getNetworkStatus`)

`getNetworkStatus`is a function that gets the device’s current network connection status. The return value is `NetworkStatus` a type that indicates whether the device is connected to the internet and the connection type (Wi‑Fi, mobile data, etc.). The value is one of the following:

* `OFFLINE`: Not connected to the internet.
* `WIFI`: Connected to Wi‑Fi.
* `2G`: Connected to a 2G network.
* `3G`: Connected to a 3G network.
* `4G`: Connected to a 4G network.
* `5G`: Connected to a 5G network.
* `WWAN`: Connected to the internet, but the connection type (Wi‑Fi, 2G–5G) is unknown. This status can only be checked on iOS.
* `UNKNOWN`: The internet connection status is unknown. This status can only be checked on Android.

**Signature**

```typescript
function getNetworkStatus(): Promise<NetworkStatus>;
```

**Return value**

* `Promise<NetworkStatus>`

  Returns the network status.

**Example**

This is an example of getting the network connection status and displaying it on the screen.

```tsx
import { useState, useEffect } from 'react';
import { Text, View } from 'react-native';
import { getNetworkStatus, NetworkStatus } from '@apps-in-toss/framework';

function GetNetworkStatus() {
  const [status, setStatus] = useState<NetworkStatus | ''>('');

  useEffect(() => {
    async function fetchStatus() {
      const networkStatus = await getNetworkStatus();
      setStatus(networkStatus);
    }

    fetchStatus();
  }, []);

  return (
    <View>
      <Text>Current network status: {status}</Text>
    </View>
  );
}
```

**Try the sample app**

[apps-in-toss-examples](https://github.com/toss/apps-in-toss-examples) from the repository [with-network-status](https://github.com/toss/apps-in-toss-examples/tree/main/with-network-status) Download the code, or scan the QR code below to try it yourself.

QR code link: intoss\://with-network-status

***

### 2. Making HTTP requests

This introduces how to make network requests in Bedrock.

**Using the Fetch API**

In Bedrock, just like React Native, [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)can be used for network communication. The Fetch API is a standard web API that makes it easy to implement asynchronous network requests.

The following is an example that uses an API to fetch "to-do list" data and displays a strikethrough when a "to-do" item is completed.

{% tabs %}
{% tab title="pages/index.tsx" %}

```tsx
import { createRoute } from '@granite-js/react-native';
import { useCallback, useState } from 'react';
import { Button, ScrollView } from 'react-native';
import { Todo, TodoItem } from './Todo';

export const Route = createRoute('/', {
  component: Index,
});

function Index() {
  const [todos, setTodos] = useState<TodoItem[]>([]);
  // [!code highlight:10]
  const handlePress = useCallback(async () => {
    /**
     * Fetches to-do data from the JSONPlaceholder API.
     * @link https://jsonplaceholder.typicode.com/
     */
    const result = await fetch('https://jsonplaceholder.typicode.com/todos');
    const json = await result.json(); // Converts the response data to JSON.
    setTodos(json); // Saves the fetched data to state.
  }, []);

  return (
    <>
      <Button title="Check to-do list" onPress={handlePress} />
      <ScrollView>
        {todos.map((todo) => {
          return <Todo key={todo.id} id={todo.id} title={todo.title} completed={todo.completed} />;
        })}
      </ScrollView>
    </>
  );
}
```

{% endtab %}

{% tab title="Todo.tsx" %}

```tsx
import { Flex } from '@granite-js/react-native';
import { Text } from 'react-native';

export interface TodoItem {
  title: string; // To-do title
  id: number; // To-do ID
  completed: boolean; // Completion status
}

export function Todo({ title, id, completed: done }: TodoItem) {
  return (
    <Flex direction="row" key={id}>
      <Flex.CenterVertical
        style={{
          minWidth: 30,
        }}
      >
        <Text style={{ fontSize: 24 }}>{id}.</Text>
      </Flex.CenterVertical>
      <Flex.CenterVertical>
        <Text
          style={{
            fontSize: 16,
            textDecorationColor: 'red', // Strikethrough color
            textDecorationLine: done ? 'line-through' : 'none', // Show strikethrough depending on completion status
          }}
        >
          {title}
        </Text>
      </Flex.CenterVertical>
    </Flex>
  );
}
```

{% endtab %}
{% endtabs %}

If you watch the example video, clicking the button triggers a network request and the to-do list is displayed on the screen. When a network request occurs, you can check the request and response in the network inspector.

Watch video

**Using other libraries**

React Native supports [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest). Therefore, you can also use third-party network libraries that use this API.

For more details, see [the official React Native documentation](https://reactnative.dev/docs/0.72/network#using-other-networking-libraries)Please refer to it.

***

### 3. Get server time (`getServerTime`)

`getServerTime` is an API that gets the current time based on the Toss app server. Because it returns **server time (Server Time)** , not the device time, it is useful for preventing duplicate reward claims or cheating that can occur through client-side time manipulation.

It can be used for logic where time reliability is important, such as **attendance checks, event period validation, determining reward eligibility,**&#x61;nd similar cases.

{% hint style="info" %}
**See**

* The returned time is in **Unix timestamp (milliseconds)** format.
* In app versions that do not support it, `undefined`may be returned.
* before use `getServerTime.isSupported()`as a **it is recommended to first check whether the version is supported**.
  {% endhint %}

**Signature**

```typescript
function getServerTime(): Promise<number | undefined>;
```

**Return value**

* `Promise<number | undefined>`

  Returns the current time of the Toss app server in Unix timestamp milliseconds. (e.g., `1705123456789`) In unsupported versions, `undefined`is returned.

**Example**

{% tabs %}
{% tab title="React" %}

```tsx
import { getServerTime } from '@apps-in-toss/web-framework';

async function checkRewardEligibility() {
  // It is recommended to perform the version check first
  if (!getServerTime.isSupported()) {
    console.log('This feature is not supported in this version.');
    return;
  }

  const serverTime = await getServerTime();
  const rewardDeadline = 1705200000000;

  if (serverTime && serverTime > rewardDeadline) {
    console.log('The reward claim period has ended.');
  }
}
```

{% endtab %}

{% tab title="React Native" %}

```tsx
import { getServerTime } from '@apps-in-toss/framework';

async function checkRewardEligibility() {
  // It is recommended to perform the version check first
  if (!getServerTime.isSupported()) {
    console.log('This feature is not supported in this version.');
    return;
  }

  const serverTime = await getServerTime();
  const rewardDeadline = 1705200000000;

  if (serverTime && serverTime > rewardDeadline) {
    console.log('The reward claim period has ended.');
  }
}
```

{% endtab %}
{% endtabs %}


---

# 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/common/network-environment/network.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.