React Native

The React Native feature adapts Headless Tree's prop-generating APIs for React Native style renderers. It remaps DOM-oriented props like onClick, onChange, aria-*, and checked to React Native friendly props like onPress, onChangeText, accessibility*, and value, and it forwards React Native key input into the shared hotkey handling.

Add reactNativeFeature as the last feature in your tree config, after the features whose props it should adapt. In React Native renderers, use it instead of hotkeysCoreFeature.

import {
  dragAndDropFeature,
  keyboardDragAndDropFeature,
  reactNativeFeature,
  renamingFeature,
  searchFeature,
  selectionFeature,
  syncDataLoaderFeature,
} from "@headless-tree/core";
import { useTree } from "@headless-tree/react";

const tree = useTree({
  // ...remaining tree config
  features: [
    syncDataLoaderFeature,
    selectionFeature,
    dragAndDropFeature,
    keyboardDragAndDropFeature,
    searchFeature,
    renamingFeature,
    reactNativeFeature,
  ],
});

When rendering, spread the remapped props onto your React Native components:

<View {...tree.getContainerProps()}>
  {tree.isSearchOpen() ? (
    <TextInput {...tree.getSearchInputElementProps()} />
  ) : null}

  {tree.getItems().map((item) => (
    <Pressable {...item.getProps()} key={item.getId()}>
      <Text>{item.getItemName()}</Text>
      {item.isRenaming() ? (
        <TextInput {...item.getRenameInputProps()} />
      ) : null}
    </Pressable>
  ))}
</View>

If you use checkboxes, also spread item.getCheckboxProps(). This feature is especially useful with react-native-web, where keyboard interaction and accessibility props still need to be adapted away from the default DOM-oriented output.