On this page
Native MethodsNavigate to schedule page of panelNavigate to device details pageGet Bluetooth details of deviceOpen dialog box for pairing Bluetooth device for AndroidRemove connection to Bluetooth device for AndroidOpen system settings page for iOSMobile MethodsReturn the app listDisplay the bottom dialog list [Deprecated]Disable fullscreen pop gesture [Deprecated]Enable the fullscreen pop gesture [Deprecated]Get user informationGet Network StatusDisplay loading UI boxHide the loading UI boxCheck the time systemJump to a secondary page [Deprecated]Jump to an existing sceneEdit dialog box [Deprecated]Lightweight dialogs [Deprecated]A simple confirmation dialog boxA simple prompt boxDevice MethodsSend a DP state / Send a DP state over a LANGet device informationCheck whether a DP existsGet Device InformationGet a specific value of dpCodeGet all values of dpCodeGet a DP stateGet a value of dpIdGet a DP schemaGet one or all values of a specific DPCheck if Device is BLE / Shared / SigMesh / Wi-Fi DeviceAPI RequestEventsdeviceDataChangenetworkStateChangelinkageTimeUpdatedeviceLocalStateChangebluetoothChangeNAVIGATOR_ON_WILL_FOCUS / NAVIGATOR_ON_DID_FOCUSDevice Information

Basics

Native Methods

Navigate to schedule page of panel

Before:

TYSdk.native.gotoDpAlarm(params);

Now:

See openTimerPage

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:

TYSdk.native.showDeviceMenu()

Now:

See openDeviceDetailPage

Get Bluetooth details of device

Before:

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

Now:

See getBTDeviceInfo

Open dialog box for pairing Bluetooth device for Android

Before:

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

Now:

See connectBTBond

Remove connection to Bluetooth device for Android

Before:

TYSdk.native.removeBTbond()

Now:

See disconnectBTBond

Open system settings page for iOS

Before:

TYSdk.native.jumpToSettingPage();

Now:

See openSystemSettingPage

Mobile Methods

Return the app list

Before:

TYSdk.mobile.back();

Now:

See exitMiniProgram

Display the bottom dialog list [Deprecated]

Deprecated. It is recommended to use frontend UI components, such as SmartUI's ActionSheet instead.

Disable fullscreen pop gesture [Deprecated]

Deprecated.

Enable the fullscreen pop gesture [Deprecated]

Deprecated.

Get user information

Before:

TYSdk.mobile.getMobileInfo();

Now:

You can obtain client information using getSystemInfo and getMobileDeviceInfo.

Get Network Status

Before:

TYSdk.mobile.getNetworkState();

Now:

See getNetworkType. To check if a specific channel of a device is online, use getDeviceOnlineType.

Display loading UI box

Before:

TYSdk.mobile.showLoading();

Now:

See showLoading

Hide the loading UI box

Before:

TYSdk.mobile.hideLoading();

Now:

See hideLoading

Check the time system

Before:

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

Now:

See the is24Hour return value in getSystemInfo.

Jump to a secondary page [Deprecated]

Deprecated.

Jump to an existing scene

Before:

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

Now:

Warning

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, and we will arrange to evaluate support.

Edit dialog box [Deprecated]

Deprecated. It is recommended to use frontend UI components, such as SmartUI's Dialog instead.

Lightweight dialogs [Deprecated]

Deprecated. It is recommended to use frontend UI components, such as SmartUI's Dialog instead.

A simple confirmation dialog box

Before:

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

Now:

See showModal

A simple prompt box

Before:

TYSdk.mobile.simpleTipDialog(msg, onConfirmed);

Now:

See showModal, and set the showCancel parameter to false.

Device Methods

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

Before:

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

// or

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

Now:

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.

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:

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

Now:

See useProps

Warning

getDeviceState only retrieves the current device state, while useProps automatically refreshes when the device state changes.
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.

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:

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

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:

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

Now:

Method 1: Using getDeviceInfo, see getDeviceInfo

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

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:

TYSdk.device.getDpCodeById('22');

Now:

See useDevice

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:

TYSdk.device.getDpCodes();

Now:

See useDevice

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:

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

Now:

See queryDps

Get a value of dpId

Before:

TYSdk.device.getDpIdByCode('bright_value');

Now:

See useDevice

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:

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

Now:

See useDevice

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:

TYSdk.device.getState(idOrCode);

Now:

See useProps

Warning

getState only retrieves the current device state, while useProps automatically refreshes when the specified device function point state changes.

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:

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

Now:

See useSupport

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:

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 section.
  • However, we have opened the request API, which supports calling third-party service interfaces.

Events

deviceDataChange

Before:

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:

networkStateChange

Before:

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

Now:

linkageTimeUpdate

Before:

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

Now:

deviceLocalStateChange

Before:

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

Now:

bluetoothChange

Before:

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

Now:

NAVIGATOR_ON_WILL_FOCUS / NAVIGATOR_ON_DID_FOCUS

Before:

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.

Device Information

Before:

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

Now:

Info

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.

Method 1: Using getDeviceInfo, see getDeviceInfo

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

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