Network

1. Check the network connection status (getNetworkStatus)

getNetworkStatusis 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

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.

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 from the repository 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 APIcan 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.

pages/index.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>
    </>
  );
}

Todo.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>
  );
}

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. Therefore, you can also use third-party network libraries that use this API.

For more details, see the official React Native documentationPlease 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,and similar cases.

See

• The returned time is in Unix timestamp (milliseconds) format.
• In app versions that do not support it, undefinedmay be returned.
• before use getServerTime.isSupported()as a it is recommended to first check whether the version is supported.

Signature

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, undefinedis returned.

Example

React

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.');
  }
}

React Native

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.');
  }
}