> 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 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 be checked only on iOS.
* `UNKNOWN`: The internet connection status is unknown. This status can be checked only on Android.

**Signature**

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

**Return value**

* `Promise<NetworkStatus>`

  Returns the network status.

**Example**

This is an example that gets the network connection status and displays 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 example 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. Make HTTP requests

This introduces how to make network requests in Bedrock.

**Using the Fetch API**

In Bedrock, just like in React Native, [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)you can make network requests using the Fetch API. 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 a "to-do list" and displays a strikethrough when a "to-do" 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); // Stores the fetched data in state.
  }, []);

  return (
    <>
      <Button title="Check the 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; // Whether completed
}

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 whether it's completed
          }}
        >
          {title}
        </Text>
      </Flex.CenterVertical>
    </Flex>
  );
}
```

{% endtab %}
{% endtabs %}

In the example video, when you click the button, a network request is made and the to-do list is displayed on the screen. When the network request is made, 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).

***

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

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

It can be used for logic where time reliability is important, such as attendance checks, event period validation, and determining reward claim eligibility. **logic where time reliability is important**can be used.

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

* The returned time is **Unix timestamp (in milliseconds)** format.
* In app versions that don't support it, `undefined`may be returned.
* before use `getServerTime.isSupported()`as **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 as a Unix timestamp in 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() {
  // We recommend checking the version 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() {
  // We recommend checking the version 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.