Reorderable Drag-and-Drop Component

Last Updated on : 2021-08-27 11:07:18download

This topic describes the properties and example of the IP camera (IPC) reorderable drag-and-drop component TYIpcDragSort.


Reorderable Drag-and-Drop Component

Properties and methods

Field Description Required Data type Default value
containerStyle The style of the outermost container for the component. No ViewStyle {}
orderContain The style of each container. No ViewStyle {}
orderWidth The width of a drag-and-drop icon. No number 44
icon The drag-and-drop icon. No ReactNode The default image icon.
itemHeight The height of a container. No number 60
data The data to be sorted. Yes Array
touchPosition The position of a drag-and-drop icon. No left or right right
onOrder The event that is triggered after sorting. Yes Function
renderItem The method to render sorted items. Yes Function
onScroll The scroll event of a container. No Function () => {}
getListRef Returns the Document Object Model (DOM) method of a container. No Function () => {}


import { TYIpcDragSort } from '@tuya/tuya-panel-ipc-sdk';
import { View, Text } from 'react-native';
import { useState } from 'react';

// Generates the sorting data.
const arr = [];
for (let i = 1; i < 20; i++) {
    id: i,
    name: `lock${i}`,
const [list, setList] = useState(arr);

// Updates the current state after sorting.
const order = (data: any) => {

// Renders the sorted items.
const _renderItem = (item: any) => {
  return (
    <View style={{ height: itemHeight }}>
      <Text style={{ color: '#000' }}>{}</Text>

// The height of sorted containers.
const itemHeight = 60;

return (
  <View style={{ flex: 1 }}>