react-native-document-picker

npm install @react-native-ohos/react-native-document-picker

yarn add @react-native-ohos/react-native-document-picker

import React, { useState } from "react";
import {
  Text,
  TouchableOpacity,
  View,
  StyleSheet,
  Switch,
  ScrollView,
} from "react-native";
import {
  pick,
  types,
  pickDirectory,
  pickSingle,
  DocumentPickerOptions,
} from "react-native-document-picker";

const typeList = Object.keys(types);

interface MultiSelectProps {
  onSelectValue?: (val: string[]) => void;
}

interface UiSelItem {
  label: keyof typeof types;
  selected: boolean;
  index: number;
}

type DirType = "documentDirectory" | "cachesDirectory";

interface DirOpt {
  label: DirType;
  selected: boolean;
}

const MultiSelect: React.FC<MultiSelectProps> = ({ onSelectValue }) => {
  const [typeUi, setTypeUi] = useState<UiSelItem[]>(
    typeList.map((val, index) => ({
      label: val as keyof typeof types,
      selected: false,
      index,
    }))
  );

  const onClickSelLabel = (val: (typeof typeUi)[0]) => {
    if (
      typeUi.find((t) => t.label === "allFiles")?.selected &&
      val.label !== "allFiles"
    ) {
      return;
    }
    let newList = [];
    if (val.label === "allFiles") {
      newList = typeUi.map((s) => {
        return s.label === "allFiles"
          ? { ...s, selected: !s.selected }
          : { ...s, selected: false };
      });
    } else {
      newList = typeUi.map((s) => {
        return val.index === s.index
          ? { ...s, selected: !s.selected }
          : { ...s };
      });
    }
    const extList = newList
      .filter((t) => t.selected)
      .map((t) => types[t.label])
      .reduce((res, typeStr) => {
        res.push(...typeStr.split(" "));
        return res;
      }, [] as string[]);
    if (onSelectValue) {
      onSelectValue(extList);
    }
    setTypeUi(newList);
  };

  return (
    <>
      <View
        style={{
          display: "flex",
          flexWrap: "wrap",
          flexDirection: "row",
          rowGap: 14,
        }}
      >
        <View style={{ width: "100%" }}>
          <Text style={{ fontSize: 20, fontWeight: "600", margin: 6 }}>
            File type of the picker.
          </Text>
        </View>
        {typeUi.map((s:any) => (
          <TouchableOpacity
            key={s.label}
            onPress={() => {
              onClickSelLabel(s);
            }}
          >
            <View
              style={s.selected ? styles.selectBtnActive : styles.selectBtn}
            >
              <Text>{s.label}</Text>
            </View>
          </TouchableOpacity>
        ))}
      </View>
    </>
  );
};

export default function DocumentPickerDemo(): JSX.Element {
  const [pickResult, setPickResult] = useState("");
  const [allowMultiSelection, setAllowMultiSelection] = useState(true);
  const [fileTypes, setFileTypes] = useState<string[]>([]);
  const [dirUi, setDirui] = useState<Array<DirOpt>>([
    { label: "documentDirectory", selected: false },
    { label: "cachesDirectory", selected: false },
  ]);

  const copyTo = dirUi.find((d) => d.selected)?.label;

  const pickOpt: DocumentPickerOptions<"harmony"> = {
    allowMultiSelection,
  };
  if (copyTo) {
    pickOpt.copyTo = copyTo;
  }
  if (fileTypes.length) {
    pickOpt.type = fileTypes;
  }

  const onDirSelect = (val: DirOpt) => {
    const newUiList = dirUi.map((d) => {
      if (val.label === d.label) {
        return { ...d, selected: !d.selected };
      } else {
        return { ...d, selected: false };
      }
    });
    setDirui(newUiList);
  };

  const pickFile = async () => {
    try {
      const res = await pick(pickOpt);
      setPickResult(JSON.stringify(res));
    } catch (err) {
      console.log(err);
    }
  };

  const pickS = async () => {
    try {
      const res = await pickSingle(pickOpt);
      setPickResult(JSON.stringify(res));
    } catch (err) {
      console.log(err);
    }
  };

  const pickDir = async () => {
    const res = await pickDirectory();
    console.log(res);
  };

  return (
    <ScrollView>
      <Text>{JSON.stringify(pickOpt)}</Text>

      <MultiSelect onSelectValue={setFileTypes}></MultiSelect>

      <View style={{ width: "100%" }}>
        <Text style={{ fontSize: 20, fontWeight: "600", margin: 6 }}>
          Whether allow multiple selections.
        </Text>
      </View>

      <Switch
        value={allowMultiSelection}
        onValueChange={setAllowMultiSelection}
      ></Switch>

      <View style={{ width: "100%" }}>
        <Text style={{ fontSize: 20, fontWeight: "600", margin: 6 }}>
          Copy a file to a folder.
        </Text>
      </View>

      <View
        style={{
          display: "flex",
          flexWrap: "wrap",
          flexDirection: "row",
          rowGap: 14,
        }}
      >
        {dirUi.map((s) => (
          <TouchableOpacity
            key={s.label}
            onPress={() => {
              onDirSelect(s);
            }}
          >
            <View
              style={s.selected ? styles.selectBtnActive : styles.selectBtn}
            >
              <Text>{s.label}</Text>
            </View>
          </TouchableOpacity>
        ))}
      </View>

      <TouchableOpacity onPress={pickFile} style={styles.btn}>
        <Text style={styles.btnText}>pick file</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={pickS} style={styles.btn}>
        <Text style={styles.btnText}>pick file single</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={pickDir} style={styles.btn}>
        <Text style={styles.btnText}>pick Dir</Text>
      </TouchableOpacity>
      <View style={{ width: "100%" }}>
        <Text style={{ fontSize: 20, fontWeight: "600", margin: 6 }}>
          Pick result.
        </Text>
      </View>
      <Text>{pickResult}</Text>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  TextInput: {
    height: 40,
    borderColor: "#ccc",
    borderWidth: 1,
    borderRadius: 4,
    width: "90%",
  },
  btn: {
    borderRadius: 10,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    padding: 10,
    margin: 10,
    backgroundColor: "blue",
  },
  btnText: { fontWeight: "bold", color: "#fff", fontSize: 20 },
  selectBtn: {
    padding: 8,
    margin: 3,
    fontSize: 18,
    borderWidth: 1,
    borderRadius: 8,
    borderColor: "#753c13",
  },
  selectBtnActive: {
    padding: 8,
    margin: 3,
    backgroundColor: "#e2803b",
    fontSize: 18,
    borderRadius: 8,
    borderWidth: 1,
  },
});

{
  "overrides": {
    "@rnoh/react-native-openharmony": "^0.72.38" // ohpm version
    // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // a locally available HAR package
    // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // source code directory
  }
}

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
    "@react-native-ohos/react-native-document-picker": "file:../../node_modules/@react-native-ohos/react-native-document-picker/harmony/document_picker.har"
  }

cd entry
ohpm install

+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")

# RNOH_BEGIN: manual_package_linking_1
+ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-document-picker/src/main/cpp" ./document_picker)
# RNOH_END: manual_package_linking_1

# RNOH_BEGIN: manual_package_linking_2
+ target_link_libraries(rnoh_app PUBLIC rnoh_document_picker)
# RNOH_END: manual_package_linking_2

#include "RNOH/PackageProvider.h"
#include "generated/RNOHGeneratedPackage.h"
+ #include "DocumentPickerPackage.h"

using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {
      std::make_shared<RNOHGeneratedPackage>(ctx),
+     std::make_shared<DocumentPickerPackage>(ctx)
    };
}

  ...
+ import { DocumentPickerPackage } from '@react-native-ohos/react-native-document-picker/ts';

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new SamplePackage(ctx),
+   new DocumentPickerPackage(ctx)
  ];
}

cd entry
ohpm install