---
title: Basics
---

# Basics

## Native Methods

### Navigate to schedule page of panel

**Before:**

```js
TYSdk.native.gotoDpAlarm(params);
```

**Now:**

See [openTimerPage](/en/miniapp/develop/ray/api/timer/base/openTimerPage#opentimerpage)

```tsx
import { openTimerPage } from '@ray-js/ray';

openTimerPage({
  deviceId: device_id,
  category: 'category',
  data:[
    {
      dpName: 'Switch 1',
      dpId: '1',
      rangeKeys:["open","close"],
      rangeValues:["Open","Close"]
    }
  ],
  success: (res) => {
    console.log('success',res);
  }
});
```

### Navigate to device details page

**Before:**

```js
TYSdk.native.showDeviceMenu()
```

**Now:**

See [openDeviceDetailPage](/en/miniapp/develop/ray/api/functional/openDeviceDetailPage#opendevicedetailpage)

### Get Bluetooth details of device

**Before:**

```js
TYSdk.native.getBTInfo('YOUR_DEVICE_ID')
  .then(data => console.log('data: ', data))
  .catch(err => console.log('err: ', err));
```

**Now:**

See [getBTDeviceInfo](/en/miniapp/develop/ray/api/device-connect/BT/getBTDeviceInfo#getbtdeviceinfo)

### Open dialog box for pairing Bluetooth device for Android

**Before:**

```js
TYSdk.native.createBTbond('YOUR_DEVICE_MAC')
  .then(data => console.log('data: ', data))
  .catch(err => console.log('err: ', err));
```

**Now:**

See [connectBTBond](/en/miniapp/develop/ray/api/device-connect/BT/connectBTBond)

### Remove connection to Bluetooth device for Android

**Before:**

```js
TYSdk.native.removeBTbond()
```

**Now:**

See [disconnectBTBond](/en/miniapp/develop/ray/api/device-connect/BT/disconnectBTBond#disconnectbtbond)

### Open system settings page for iOS

**Before:**

```js
TYSdk.native.jumpToSettingPage();
```

**Now:**

See [openSystemSettingPage](/en/miniapp/develop/ray/api/base/system/openSystemSettingPage#opensystemsettingpage)

## Mobile Methods

### Return the app list

**Before:**

```js
TYSdk.mobile.back();
```

**Now:**

See [exitMiniProgram](/en/miniapp/develop/ray/api/navigate/exitMiniProgram#exitminiprogram)

### Display the bottom dialog list [Deprecated]

Deprecated. It is recommended to use frontend UI components, such as SmartUI's [ActionSheet](https://developer.tuya.com/material/smartui?comId=action-sheet) instead.

### Disable fullscreen pop gesture [Deprecated]

Deprecated.

### Enable the fullscreen pop gesture [Deprecated]

Deprecated.

### Get user information

**Before:**

```js
TYSdk.mobile.getMobileInfo();
```

**Now:**

You can obtain client information using [getSystemInfo](/en/miniapp/develop/ray/api/base/system/getSystemInfo#getsysteminfo) and [getMobileDeviceInfo](/en/miniapp/develop/ray/api/base/system/getMobileDeviceInfo#getmobiledeviceinfo).

### Get Network Status

**Before:**

```js
TYSdk.mobile.getNetworkState();
```

**Now:**

See [getNetworkType](/en/miniapp/develop/ray/api/device/network/getNetworkType#getnetworktype). To check if a specific channel of a device is online, use [getDeviceOnlineType](/en/miniapp/develop/ray/api/device-info/info/getDeviceOnlineType#getdeviceonlinetype).

### Display loading UI box

**Before:**

```js
TYSdk.mobile.showLoading();
```

**Now:**

See [showLoading](/en/miniapp/develop/ray/api/ui/interaction/showLoading#showloading)

### Hide the loading UI box

**Before:**

```js
TYSdk.mobile.hideLoading();
```

**Now:**

See [hideLoading](/en/miniapp/develop/ray/api/ui/interaction/hideLoading#hideLoading)

### Check the time system

**Before:**

```js
TYSdk.mobile.is24Hour()
 .then(data => {
    console.log('data :>> ', data);
  })
  .catch(error => {
    console.log('error :>> ', error);
  });
```

**Now:**

See the `is24Hour` return value in [getSystemInfo](/en/miniapp/develop/ray/api/base/system/getSystemInfo#getsysteminfo).

### Jump to a secondary page [Deprecated]

Deprecated.

### Jump to an existing scene

**Before:**

```js
TYSdk.mobile.jumpTo('tuyasmart://xxxUrl');
```

**Now:**

<Callout type="warning" emoji="⚠️">
  Some scenarios in RN are no longer recommended. If you cannot find the corresponding short link in the Panel MiniApp, please describe your specific needs and scenarios in the [Community Forum](https://www.tuyaos.com/viewforum.php?f=37), and we will arrange to evaluate support.
</Callout>

- [openCreateTapToRunScene](/en/miniapp/develop/ray/api/scenes/functional/openCreateTapToRunScene)
- [openShareDevice](/en/miniapp/develop/ray/api/functional/openShareDevice)
- ...

### Edit dialog box [Deprecated]

Deprecated. It is recommended to use frontend UI components, such as SmartUI's [Dialog](https://developer.tuya.com/material/smartui?comId=dialog#%E6%B6%88%E6%81%AF%E7%A1%AE%E8%AE%A4) instead.

### Lightweight dialogs [Deprecated]

Deprecated. It is recommended to use frontend UI components, such as SmartUI's [Dialog](https://developer.tuya.com/material/smartui?comId=dialog#%E6%B6%88%E6%81%AF%E7%A1%AE%E8%AE%A4) instead.

### A simple confirmation dialog box

**Before:**

```js
TYSdk.mobile.simpleConfirmDialog(title, msg, onConfirmed, onCanceled);
```

**Now:**

See [showModal](/en/miniapp/develop/ray/api/ui/interaction/showModal#showmodal)

### A simple prompt box

**Before:**

```js
TYSdk.mobile.simpleTipDialog(msg, onConfirmed);
```

**Now:**

See [showModal](/en/miniapp/develop/ray/api/ui/interaction/showModal#showmodal), and set the `showCancel` parameter to `false`.

{/* ### Check App Version */}

## Device Methods

### Send a DP state / Send a DP state over a LAN

**Before:**

```js
TYSdk.device.putDeviceData({ switch_1: true });

// or

TYSdk.device.putLocalDpData({ switch_1: true });
```

**Now:**

```js
import { publishDps } from '@ray-js/ray';
 
await publishDps({ switch_1: true });
```

However, we recommend using the `useActions` hooks in the smart device model for DP point sending. See [useActions](/en/miniapp/solution-panel/ability/common/sdm/hooks/useActions).

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { useProps, useActions } from '@ray-js/panel-sdk';
 
export default function Home() {
  const switch_1 = useProps(props => props.switch_1);
  const actions = useActions();
  return (
    <View
      style={{ flex: 1 }}
      onClick={() => {
        actions.switch_1.toggle();
      }}
    >
      <View>socket.switch_1: {switch_1}</View>
    </View>
  );
}
```

### Get device information

**Before:**

```js
TYSdk.device.getDeviceState()
.then(data => {
    console.log('data :>> ', data);
  })
  .catch(error => {
    console.log('error :>> ', error);
  });
```

**Now:**

See [useProps](/en/miniapp/solution-panel/ability/common/sdm/hooks/useProps)

<Callout type="warning" emoji="⚠️">
  getDeviceState only retrieves the current device state, while useProps automatically refreshes when the device state changes.<br/>
  Unless the current page or component needs to listen to all function point changes, do not use this method as it may cause performance issues and frequent unnecessary re-renders.
</Callout>

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { useProps } from '@ray-js/panel-sdk';
 
export default function Home() {
  const dpState1 = useProps();
  const dpState2 = useProps(props => props);
  return (
    <View style={{ flex: 1 }}>
      <View>dpState1: {JSON.stringify(dpState1)}</View>
      <View>dpState2: {JSON.stringify(dpState2)}</View>
    </View>
  );
}
```

### Check whether a DP exists

**Before:**

```js
TYSdk.device.checkDpExist(idOrCode);
// If input is dpCode, returns dpId
const data = TYSdk.device.checkDpExist('switch_1');
// If input is dpId, returns dpCode
const data = TYSdk.device.checkDpExist('1');
console.log('data: ', data);
```

**Now:**

See [useDevice](/en/miniapp/solution-panel/ability/common/sdm/hooks/useDevice)

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { useDevice } from '@ray-js/panel-sdk';
 
export default function Home() {
  const isSwitchExist1 = useDevice(device => typeof device.devInfo.codeIds.switch_1 !== 'undefined');
  const isSwitchExist2 = useDevice(device => typeof device.devInfo.idCodes[1] !== 'undefined');
  return (
    <View style={{ flex: 1 }}>
      <View>isSwitchExist1: {isSwitchExist1}</View>
      <View>isSwitchExist2: {isSwitchExist2}</View>
    </View>
  );
}
```

### Get Device Information

**Before:**

```js
TYSdk.device.getDeviceInfo()
  .then((data: DevInfo) => {
    console.log('data :>> ', data);
  })
  .catch(error => {
    console.log('error :>> ', error);
  });
```

**Now:**

Method 1: Using getDeviceInfo, see [getDeviceInfo](/en/miniapp/develop/ray/api/device-info/info/getDeviceInfo#getdeviceinfo)

```ts
import { device } from '@ray-js/ray';
const { getDeviceInfo } = device;

getDeviceInfo({
  deviceId: 'vdevxxxxx',
})
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });
```

Method 2: Using SDM Hooks, see [useDevice](/en/miniapp/solution-panel/ability/common/sdm/hooks/useDevice)

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { useDevice } from '@ray-js/panel-sdk';
 
export default function Home() {
  const devInfo = useDevice(device => device.devInfo);
  return (
    <View style={{ flex: 1 }}>
      <View>devInfo: {devInfo}</View>
    </View>
  );
}
```

### Get a specific value of dpCode

**Before:**

```js
TYSdk.device.getDpCodeById('22');
```

**Now:**

See [useDevice](/en/miniapp/solution-panel/ability/common/sdm/hooks/useDevice)

```tsx
import { View } from '@ray-js/ray';
import { useDevice } from '@ray-js/panel-sdk';
 
export default function Home() {
  const switchCode = useDevice(device => device.devInfo.idCodes[22]);
  return (
    <View style={{ flex: 1 }}>
      <View>switchCode: {switchCode}</View>
    </View>
  );
}
```

### Get all values of dpCode

**Before:**

```js
TYSdk.device.getDpCodes();
```

**Now:**

See [useDevice](/en/miniapp/solution-panel/ability/common/sdm/hooks/useDevice)

```tsx
import { View } from '@ray-js/ray';
import { useDevice } from '@ray-js/panel-sdk';
 
export default function Home() {
  const dpCodes = useDevice(device => device.devInfo.idCodes);
  return (
    <View style={{ flex: 1 }}>
      <View>dpCodes: {dpCodes}</View>
    </View>
  );
}
```

### Get a DP state

**Before:**

```js
TYSdk.device.getDpDataFromDevice(idOrCode)
 .then(data => {
    console.log('data :>> ', data);
  })
  .catch(error => {
    console.log('error :>> ', error);
  });
```

**Now:**

See [queryDps](/en/miniapp/develop/ray/api/device-control/dp/queryDps#querydps)

### Get a value of dpId

**Before:**

```js
TYSdk.device.getDpIdByCode('bright_value');
```

**Now:**

See [useDevice](/en/miniapp/solution-panel/ability/common/sdm/hooks/useDevice)

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { useDevice } from '@ray-js/panel-sdk';
 
export default function Home() {
  const brightId = useDevice(device => device.devInfo.codeIds.bright_value);
  return (
    <View style={{ flex: 1 }}>
      <View>brightId: {brightId}</View>
    </View>
  );
}
```

### Get a DP schema

**Before:**

```js
TYSdk.device.getDpSchema(dpCode);
// Get Schema information of switch_1
const data = TYSdk.device.getDpSchema('switch_1');
console.log('data: ', data);
```

**Now:**

See [useDevice](/en/miniapp/solution-panel/ability/common/sdm/hooks/useDevice)

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { useDevice } from '@ray-js/panel-sdk';
 
export default function Home() {
  const dpSchema = useDevice((device) => device.dpSchema);
  return (
    <View style={{ flex: 1 }}>
      <View>device dpSchema: {JSON.stringify(dpSchema)}</View>
    </View>
  );
}
```

### Get one or all values of a specific DP

**Before:**

```js
TYSdk.device.getState(idOrCode);
```

**Now:**

See [useProps](/en/miniapp/solution-panel/ability/common/sdm/hooks/useProps)

<Callout type="warning" emoji="⚠️">
  getState only retrieves the current device state, while useProps automatically refreshes when the specified device function point state changes.
</Callout>

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { useProps } from '@ray-js/panel-sdk';
 
export default function Home() {
  const power = useProps((props) => props[idOrCode]);
  return (
    <View style={{ flex: 1 }}>
      <View>power: {power}</View>
    </View>
  );
}
```

### Check if Device is BLE / Shared / SigMesh / Wi-Fi Device

**Before:**

```js
TYSdk.device.isBleDevice();
TYSdk.device.isShareDevice();
TYSdk.device.isSigMeshDevice();
TYSdk.device.isWifiDevice();
```

**Now:**

See [useSupport](/en/miniapp/solution-panel/ability/common/sdm/hooks/useSupport)

```tsx
import React from 'react';
import { View, Text } from '@ray-js/ray';
import { useSupport, useDevice } from '@ray-js/panel-sdk';
 
function PageSdmSupport() {
  const support = useSupport();
  const isShareDevice = useDevice(device => device.devInfo.isShare);
  return (
    <View>
      <Text>{support.isBleDevice() ? 'BLE Device' : 'Other Device'}</Text>
      <Text>{isShareDevice ? 'Share Device' : 'Other Device'}</Text>
      <Text>{support.isSigMeshDevice() ? 'SigMesh Device' : 'Other Device'}</Text>
      <Text>{support.isWifiDevice() ? 'Wi-Fi Device' : 'Other Device'}</Text>
    </View>
  );
}
```

## API Request

**Before:**

```js
TYSdk.apiRequest(a, postData, version)
  .then(data =>
    console.log('data',data);
  )
  .catch(error =>
    console.log('error',error);
  );
```

**Now:**

- The generic API for requesting Tuya internal services has been deprecated. If you need to call a specific open API, refer to the [Open API](#open-api) section.
- However, we have opened the [request](/en/miniapp/develop/ray/api/network/request/request) API, which supports calling third-party service interfaces.

## Events

### deviceDataChange

**Before:**

```js
const handleDeviceDataChange = (data) => {
  // Device state change notification, payload is the updated DP state
  if (data.type === 'dpData') {
    console.log('dpData event', data.payload);
  }
  // Device info change notification, payload is devInfo
  if (data.type === 'devInfo') {
    console.log('devInfo event', data.payload);
  }
  // deviceOnline notification if the device is online, payload is boolean
  if (data.type === 'deviceOnline') {
    console.log('deviceOnline event', data.payload);
  }
};

TYSdk.event.on('deviceDataChange', handleDeviceDataChange);
TYSdk.event.off('deviceDataChange', handleDeviceDataChange);
```

**Now:**

- Device state change notification: i.e., data.type === 'dpData', refer to the following APIs:
  - [onDpDataChange](/en/miniapp/develop/ray/api/device-control/dp/onDpDataChange#ondpdatachange)
  - [offDpDataChange](/en/miniapp/develop/ray/api/device-control/dp/offDpDataChange)
- Device info change notification: i.e., data.type === 'devInfo', refer to the following APIs:
  - [onDeviceInfoUpdated](/en/miniapp/develop/ray/api/device-info/info/onDeviceInfoUpdated)
  - [offDeviceInfoUpdated](/en/miniapp/develop/ray/api/device-info/info/offDeviceInfoUpdated)
- Device online status notification: i.e., data.type === 'deviceOnline', refer to the following APIs:
  - [onDeviceOnlineStatusUpdate](/en/miniapp/develop/ray/api/device-info/info/onDeviceOnlineStatusUpdate)
  - [offDeviceOnlineStatusUpdate](/en/miniapp/develop/ray/api/device-info/info/offDeviceOnlineStatusUpdate)

### networkStateChange

**Before:**

```js
TYSdk.event.on('networkStateChange', yourHandler);
TYSdk.event.off('networkStateChange', yourHandler);
```

**Now:**

- [getNetworkType](/en/miniapp/develop/ray/api/device/network/getNetworkType)
- [onNetworkStatusChange](/en/miniapp/develop/ray/api/device/network/onNetworkStatusChange#onnetworkstatuschange)
- [offNetworkStatusChange](/en/miniapp/develop/ray/api/device/network/offNetworkStatusChange)

### linkageTimeUpdate

**Before:**

```js
TYSdk.event.on('linkageTimeUpdate', yourHandler);
TYSdk.event.off('linkageTimeUpdate', yourHandler);
```

**Now:**

- [onTimerUpdate](/en/miniapp/develop/ray/api/timer/base/onTimerUpdate)
- [offTimerUpdate](/en/miniapp/develop/ray/api/timer/base/offTimerUpdate)

### deviceLocalStateChange

**Before:**

```js
TYSdk.event.on('deviceLocalStateChange', yourHandler);
TYSdk.event.off('deviceLocalStateChange', yourHandler);
```

**Now:**

- [onDeviceOnlineStatusUpdate](/en/miniapp/develop/ray/api/device-info/info/onDeviceOnlineStatusUpdate)
- [offDeviceOnlineStatusUpdate](/en/miniapp/develop/ray/api/device-info/info/offDeviceOnlineStatusUpdate)

### bluetoothChange

**Before:**

```js
TYSdk.event.on('bluetoothChange', yourHandler);
TYSdk.event.off('bluetoothChange', yourHandler);
```

**Now:**

- [onBluetoothAdapterStateChange](/en/miniapp/develop/ray/api/device/bluetooth/onBluetoothAdapterStateChange#onbluetoothadapterstatechange)
- [offBluetoothAdapterStateChange](/en/miniapp/develop/ray/api/device/bluetooth/offBluetoothAdapterStateChange)

### NAVIGATOR_ON_WILL_FOCUS / NAVIGATOR_ON_DID_FOCUS

**Before:**

```js
TYSdk.event.on('NAVIGATOR_ON_WILL_FOCUS', yourHandler);
TYSdk.event.off('NAVIGATOR_ON_WILL_FOCUS', yourHandler);
```

**Now:**

See the `onShow` and `onLoad` events in [usePageEvent](/en/miniapp/develop/ray/framework/api#usepageevent).

## Device Information

**Before:**

```js
console.log('TYSdk.devInfo: ', TYSdk.devInfo);
```

**Now:**

<Callout type="info" emoji="ℹ️">
  Panel MiniApp reserve the capability for multi-device control compared to RN panels. For example, we can monitor the status of multiple devices or control multiple devices in MiniApp. Therefore, the method of obtaining device information is different and is no longer supported directly from constants.
</Callout>

Method 1: Using getDeviceInfo, see [getDeviceInfo](/en/miniapp/develop/ray/api/device-info/info/getDeviceInfo#getdeviceinfo)

```ts
import { device } from '@ray-js/ray';
const { getDeviceInfo } = device;

getDeviceInfo({
  deviceId: 'vdevxxxxx',
})
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });
```

Method 2: Using SDM Hooks, see [useDevice](/en/miniapp/solution-panel/ability/common/sdm/hooks/useDevice)

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { useDevice } from '@ray-js/panel-sdk';
 
export default function Home() {
  const devInfo = useDevice(device => device.devInfo);
  return (
    <View style={{ flex: 1 }}>
      <View>devInfo: {devInfo}</View>
    </View>
  );
}
```