Feature request: react-native support

[wallzero]

Is your feature request related to a problem? Please describe.

react-native support would be great!

Describe the solution you'd like

Maybe plugins could be conditionally loaded to support either react-dom or react-native?

Describe alternatives you've considered

For now I have to maintain two tree implementations; one using headless-tree for web and the other using react-native-tree-multi-select for native.

Additional context

When I've tried headless-tree in react-native I recieve errors from what I think are properties missing from DOM calls:

// TypeError: undefined is not a function

const children = tree.retrieveChildrenIds(rootItemId);

[wallzero]

Actually never mind! I have a small example working. After making some modifications to the simple example I have it loading in react-native. Here are my changes:

import {
  // hotkeysCoreFeature,
  // selectionFeature,
  syncDataLoaderFeature,
} from '@headless-tree/core';
import {
  useTree
} from '@headless-tree/react';
import cn from 'classnames';
import React, {
  type FunctionComponent
} from 'react';
import {
  Button,
  View
} from 'react-native';
import {
  Text
} from 'src/Components/Tamagui/Text';

const NativeTree: FunctionComponent<NativeTreeProps> = () => {
  const tree = useTree<string>({
    dataLoader: {
      getChildren: (
        itemId
      ) => {
        return [
          `${itemId}-1`,
          `${itemId}-2`,
          `${itemId}-3`,
          `${itemId}-1item`,
          `${itemId}-2item`,
        ];
      },
      getItem: (
        itemId
      ) => {
        return itemId;
      },
    },
    features: [
      // hotkeysCoreFeature,
      // selectionFeature,
      syncDataLoaderFeature,
    ],
    getItemName: (
      item
    ) => {
      return item.getItemData();
    },
    indent: 20,
    initialState: {
      expandedItems: [
        'folder-1'
      ]
    },
    isItemFolder: (
      item
    ) => {
      return !item.getItemData().endsWith('item');
    },
    rootItemId: 'folder',
  });

  return (
    <View
      {...tree.getContainerProps()}
      className='tree'
    >
      {
        tree
          .getItems()
          .map(
            (
              item
            ) => {
              const {
                // eslint-disable-next-line @typescript-eslint/no-unused-vars
                'aria-selected': omit,
                onClick,
                ...props
              } = item.getProps();

              // eslint-disable-next-line no-console
              console.log(props);

              return (
                <Button
                  key={item.getId()}
                  {...props}
                  onPress={onClick}
                  style={{
                    paddingLeft: `${item.getItemMeta().level * 20}px`
                  }}
                  type='button'
                >
                  <Text
                    className={
                      cn(
                        'treeitem',
                        {
                          expanded: item.isExpanded(),
                          focused: item.isFocused(),
                          folder: item.isFolder(),
                          // selected: item.isSelected(),
                        }
                      )
                    }
                  >
                    {item.getItemName()}
                  </Text>
                </Button>
              );
            }
          )
      }
    </View>
  );
};

NativeTree.displayName = 'NativeTree';

export {
  NativeTree
};

export type NativeTreeProps = object;

• The plugins hotkeysCoreFeature and selectionFeature are not working with react-native. Because of this item.isSelected() also must be disabled.
• Replace <div /> and <button /> with <View /> and <Button />
• Text must be wrapped inside a <Text />
• The prop aria-selected seems to cause an error in react-native. I've filtered item.getProps() to omit it.
• onClick doesn't work in react-native. Instead I use onPress={props.onClick}

Next step is to get the styles working since I'm unable to import CSS.

[lukasbach]

Hi @wallzero, thanks for your input! I don't have a lot of experience with React Native, I've tried experimenting with implementing React Native support, but there's a good chance I have missed a few things. I've introduced an experimental reactNativeFeature in the latest release that can be imported and added to your tree like other features, which will remap some of the DOM-oriented symbols and behaviors to their React Native counterparts. At least the core functionality and hotkeys should work with this feature:

https://headless-tree.lukasbach.com/features/react-native

Happy for any feedback on this!