react native blob addition

NewArch/package.json

@@ -16,6 +16,7 @@
     "lowlight": "^1.17.0",
     "react": "19.1.1",
     "react-native": "0.82.0-rc.0",
+    "react-native-blob-util": "^0.24.7",
     "react-native-windows": "0.82.0-preview.8"
   },
   "devDependencies": {

NewArch/src/RNGalleryList.ts

@@ -4,6 +4,7 @@ import type {ImageSourcePropType} from 'react-native';
 import {HomePage} from './HomePage';
 import {SettingsPage} from './SettingsPage';
 import {ComponentListPage} from './ComponentListPage';
+import {BlobUtilExamplePage} from './examples/BlobUtilExamplePage';
 import {ButtonExamplePage} from './examples/ButtonExamplePage';
 // import {CheckBoxExamplePage} from './examples/CheckBoxExamplePage';
 import {ClipboardExamplePage} from './examples/ClipboardExamplePage';
@@ -52,7 +53,7 @@ let RNGalleryCategories = [
   {label: 'Layout', icon: '\uE8A1'},
   {label: 'Media', icon: '\uE786'},
   {label: 'Scrolling', icon: '\uE8CB'},
-  // {label: 'Status and Info', icon: '\uE8F2'},
+  {label: 'Status and Info', icon: '\uE8F2'},
   {label: 'Text', icon: '\uE8D2'},
   {label: 'System', icon: '\uE7F8'},
   {label: 'Legacy', icon: '\uE96A'},
@@ -88,6 +89,14 @@ export const RNGalleryList: Array<IRNGalleryExample> = [
     textIcon: '\uE71D',
     type: '',
   },
+  {
+    key: 'BlobUtil',
+    component: BlobUtilExamplePage,
+    textIcon: '\uE8B7',
+    subtitle: 'Perform file system operations using React Native Blob Util.',
+    type: 'Status and Info',
+    new: true,
+  },
   {
     key: 'Button',
     component: ButtonExamplePage,

NewArch/src/examples/BlobUtilExamplePage.tsx

@@ -0,0 +1,292 @@
+'use strict';
+import React, {useState} from 'react';
+import {Alert, Text, Button, TextInput, View, StyleSheet} from 'react-native';
+import {Example} from '../components/Example';
+import {Page} from '../components/Page';
+import {useTheme} from '../Navigation';
+import ReactNativeBlobUtil from 'react-native-blob-util';
+
+export const BlobUtilExamplePage: React.FunctionComponent<{}> = () => {
+  const {colors, dark} = useTheme();
+  const [existsParam, setExistsParam] = useState('');
+  const [lsParam, setLSParam] = useState('');
+  const [cpSourceParam, setCPSourceParam] = useState('');
+  const [cpDestParam, setCPDestParam] = useState('');
+  const [unlinkParam, setUnlinkParam] = useState('');
+  const [mkdirParam, setMkdirParam] = useState('');
+  const [readParam, setReadParam] = useState('');
+  const [hashPathParam, setHashPathParam] = useState('');
+  const [hashAlgValue, setHashAlgValue] = useState('md5');
+  const [writeParam, setWriteParam] = useState('');
+  const [writeEncodeParam, setWriteEncodeParam] = useState('utf8');
+
+  // API Methods
+  const existsCall = () => {
+    ReactNativeBlobUtil.fs
+      .exists(existsParam)
+      .then((result) => {
+        if (Array.isArray(result)) {
+          Alert.alert('Exists: ' + result[0]);
+        } else {
+          Alert.alert('Exists: ' + result);
+        }
+      })
+      .catch((err) => Alert.alert(err.message));
+  };
+
+  const lsCall = () => {
+    ReactNativeBlobUtil.fs
+      .ls(lsParam)
+      .then((files) => {
+        Alert.alert('Method finished: check debug console for results');
+        console.log(files);
+      });
+  };
+
+  const cpCall = () => {
+    ReactNativeBlobUtil.fs
+      .cp(
+        cpSourceParam,
+        cpDestParam,
+      )
+      .then(() => Alert.alert('File successfully copied'))
+      .catch((err) => Alert.alert(err.message));
+  };
+
+  const unlinkCall = () => {
+    ReactNativeBlobUtil.fs
+      .unlink(unlinkParam)
+      .then(() => Alert.alert('File/Directory successfully unlinked'))
+      .catch((err) => Alert.alert(err.message));
+  };
+
+  const mkdirCall = () => {
+    ReactNativeBlobUtil.fs
+      .mkdir(mkdirParam)
+      .then(() => Alert.alert('Directory created successfully'))
+      .catch((err) => Alert.alert(err.message));
+  };
+
+  const readFileCall = () => {
+    ReactNativeBlobUtil.fs
+      .readFile(readParam, 'utf8')
+      .then((data) => {
+        const preview = data.length > 500 ? data.substring(0, 500) + '...' : data;
+        Alert.alert('File Content: ' + preview);
+      })
+      .catch((err) => Alert.alert('Read Error: ' + err.message));
+  };
+
+  const hashCall = () => {
+    ReactNativeBlobUtil.fs
+      .hash(hashPathParam, hashAlgValue)
+      .then((hash) => Alert.alert(`${hashAlgValue} Hash: ${hash}`))
+      .catch((err) => Alert.alert('Hash Error: ' + err.message));
+  };
+
+  const writeFileCall = () => {
+    ReactNativeBlobUtil.fs
+      .writeFile(writeParam, 'Sample content', writeEncodeParam)
+      .then(() => Alert.alert('File written successfully'))
+      .catch((err) => Alert.alert(err.message));
+  };
+
+  // Examples
+  return (
+    <Page
+      title="Blob Util File System Operations"
+      description="Perform file system operations using React Native Blob Util."
+      componentType="Community"
+      pageCodeUrl="https://github.com/facebook/react-native"
+      documentation={[
+        {
+          label: 'React Native Blob Util',
+          url: 'https://github.com/RonRadtke/react-native-blob-util',
+        },
+      ]}>
+      <Text>Default Directory: {ReactNativeBlobUtil.fs.dirs.DocumentDir}</Text>
+
+      <Example
+        title="Check if file exists"
+        code={`ReactNativeBlobUtil.fs
+  .exists(existsParam)
+  .then((result) => Alert.alert('Exists: ' + result))
+  .catch((err) => Alert.alert(err.message));`}>
+        <View style={styles.exampleContainer}>
+          <TextInput
+            style={[styles.input, {borderColor: colors.border, color: colors.text}]}
+            placeholder="Enter absolute file path"
+            placeholderTextColor={colors.border}
+            onChangeText={setExistsParam}
+          />
+          <Button title="Check if file exists" onPress={existsCall} />
+        </View>
+      </Example>
+
+      <Example
+        title="List directory contents"
+        code={`ReactNativeBlobUtil.fs
+  .ls(lsParam)
+  .then((files) => {
+    Alert.alert('Method finished: check debug console for results');
+    console.log(files);
+  });`}>
+        <View style={styles.exampleContainer}>
+          <TextInput
+            style={[styles.input, {borderColor: colors.border, color: colors.text}]}
+            placeholder="Enter absolute directory path"
+            placeholderTextColor={colors.border}
+            onChangeText={setLSParam}
+          />
+          <Button title="List directory contents" onPress={lsCall} />
+        </View>
+      </Example>
+
+      <Example
+        title="Copy file"
+        code={`ReactNativeBlobUtil.fs
+  .cp(cpSourceParam, cpDestParam)
+  .then(() => Alert.alert('File successfully copied'))
+  .catch((err) => Alert.alert(err.message));`}>
+        <View style={styles.exampleContainer}>
+          <TextInput
+            style={[styles.input, {borderColor: colors.border, color: colors.text}]}
+            placeholder="Absolute source file path"
+            placeholderTextColor={colors.border}
+            onChangeText={setCPSourceParam}
+          />
+          <TextInput
+            style={[styles.input, {borderColor: colors.border, color: colors.text}]}
+            placeholder="Absolute destination file path"
+            placeholderTextColor={colors.border}
+            onChangeText={setCPDestParam}
+          />
+          <Button title="Copy file" onPress={cpCall} />
+        </View>
+      </Example>
+
+      <Example
+        title="Unlink file or directory"
+        code={`ReactNativeBlobUtil.fs
+  .unlink(unlinkParam)
+  .then(() => Alert.alert('File/Directory successfully unlinked'))
+  .catch((err) => Alert.alert(err.message));`}>
+        <View style={styles.exampleContainer}>
+          <TextInput
+            style={[styles.input, {borderColor: colors.border, color: colors.text}]}
+            placeholder="Enter absolute file/directory path"
+            placeholderTextColor={colors.border}
+            onChangeText={setUnlinkParam}
+          />
+          <Button title="Unlink" onPress={unlinkCall} />
+        </View>
+      </Example>
+
+      <Example
+        title="Create directory"
+        code={`ReactNativeBlobUtil.fs
+  .mkdir(mkdirParam)
+  .then(() => Alert.alert('Directory created successfully'))
+  .catch((err) => Alert.alert(err.message));`}>
+        <View style={styles.exampleContainer}>
+          <TextInput
+            style={[styles.input, {borderColor: colors.border, color: colors.text}]}
+            placeholder="Enter directory name"
+            placeholderTextColor={colors.border}
+            onChangeText={setMkdirParam}
+          />
+          <Button title="Create Directory" onPress={mkdirCall} />
+        </View>
+      </Example>
+
+      <Example
+        title="Read file"
+        code={`ReactNativeBlobUtil.fs
+  .readFile(readParam, 'utf8')
+  .then((data) => Alert.alert('File Content', data))
+  .catch((err) => Alert.alert(err.message));`}>
+        <View style={styles.exampleContainer}>
+          <TextInput
+            style={[styles.input, {borderColor: colors.border, color: colors.text}]}
+            placeholder="Enter file path"
+            placeholderTextColor={colors.border}
+            onChangeText={setReadParam}
+          />
+          <Button title="Read File" onPress={readFileCall} />
+        </View>
+      </Example>
+
+      <Example
+        title="Hash file"
+        code={`ReactNativeBlobUtil.fs
+  .hash(hashPathParam, hashAlgValue)
+  .then((hash) => Alert.alert(\`\${hashAlgValue} Hash\`, hash))
+  .catch((err) => Alert.alert(err.message));`}>
+        <View style={styles.exampleContainer}>
+          <TextInput
+            style={[styles.input, {borderColor: colors.border, color: colors.text}]}
+            placeholder="Enter file path"
+            placeholderTextColor={colors.border}
+            onChangeText={setHashPathParam}
+          />
+          <View style={styles.buttonGroup}>
+            {['md5', 'sha1', 'sha256'].map((alg) => (
+              <Button
+                key={alg}
+                title={alg.toUpperCase()}
+                color={hashAlgValue === alg ? '#7a42f4' : dark ? '#555' : '#ccc'}
+                onPress={() => setHashAlgValue(alg)}
+              />
+            ))}
+          </View>
+          <Button title="Hash File" onPress={hashCall} />
+        </View>
+      </Example>
+
+      <Example
+        title="Write file"
+        code={`ReactNativeBlobUtil.fs
+  .writeFile(writeParam, 'Sample content', writeEncodeParam)
+  .then(() => Alert.alert('File written successfully'))
+  .catch((err) => Alert.alert(err.message));`}>
+        <View style={styles.exampleContainer}>
+          <TextInput
+            style={[styles.input, {borderColor: colors.border, color: colors.text}]}
+            placeholder="Enter file name"
+            placeholderTextColor={colors.border}
+            onChangeText={setWriteParam}
+          />
+          <View style={styles.buttonGroup}>
+            {['utf8', 'base64', 'ascii'].map((enc) => (
+              <Button
+                key={enc}
+                title={enc.toUpperCase()}
+                color={writeEncodeParam === enc ? '#7a42f4' : dark ? '#555' : '#ccc'}
+                onPress={() => setWriteEncodeParam(enc)}
+              />
+            ))}
+          </View>
+          <Button title="Write File" onPress={writeFileCall} />
+        </View>
+      </Example>
+    </Page>
+  );
+};
+
+const styles = StyleSheet.create({
+  exampleContainer: {
+    alignItems: 'flex-start',
+  },
+  input: {
+    borderWidth: 1,
+    padding: 8,
+    marginVertical: 8,
+    width: '100%',
+  },
+  buttonGroup: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+    marginVertical: 8,
+  },
+});

NewArch/windows/NewArch.sln

@@ -9,6 +9,8 @@ Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "NewArch", "NewArch\NewArch.
 EndProject
 Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "Clipboard", "..\node_modules\@react-native-clipboard\clipboard\windows\Clipboard\Clipboard.vcxproj", "{90BFF18B-474B-445D-9847-B065853288D8}"
 EndProject
+Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "ReactNativeBlobUtil", "..\node_modules\react-native-blob-util\windows\ReactNativeBlobUtil\ReactNativeBlobUtil.vcxproj", "{CDDE3311-EFD2-462D-8551-93637A7FAE92}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|x64 = Debug|x64
@@ -67,6 +69,18 @@ Global
 		{90BFF18B-474B-445D-9847-B065853288D8}.Release|x86.Build.0 = Release|Win32
 		{90BFF18B-474B-445D-9847-B065853288D8}.Release|ARM64.ActiveCfg = Release|ARM64
 		{90BFF18B-474B-445D-9847-B065853288D8}.Release|ARM64.Build.0 = Release|ARM64
+		{CDDE3311-EFD2-462D-8551-93637A7FAE92}.Debug|x64.ActiveCfg = Debug|x64
+		{CDDE3311-EFD2-462D-8551-93637A7FAE92}.Debug|x64.Build.0 = Debug|x64
+		{CDDE3311-EFD2-462D-8551-93637A7FAE92}.Debug|x86.ActiveCfg = Debug|Win32
+		{CDDE3311-EFD2-462D-8551-93637A7FAE92}.Debug|x86.Build.0 = Debug|Win32
+		{CDDE3311-EFD2-462D-8551-93637A7FAE92}.Debug|ARM64.ActiveCfg = Debug|ARM64
+		{CDDE3311-EFD2-462D-8551-93637A7FAE92}.Debug|ARM64.Build.0 = Debug|ARM64
+		{CDDE3311-EFD2-462D-8551-93637A7FAE92}.Release|x64.ActiveCfg = Release|x64
+		{CDDE3311-EFD2-462D-8551-93637A7FAE92}.Release|x64.Build.0 = Release|x64
+		{CDDE3311-EFD2-462D-8551-93637A7FAE92}.Release|x86.ActiveCfg = Release|Win32
+		{CDDE3311-EFD2-462D-8551-93637A7FAE92}.Release|x86.Build.0 = Release|Win32
+		{CDDE3311-EFD2-462D-8551-93637A7FAE92}.Release|ARM64.ActiveCfg = Release|ARM64
+		{CDDE3311-EFD2-462D-8551-93637A7FAE92}.Release|ARM64.Build.0 = Release|ARM64
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE

NewArch/windows/NewArch/AutolinkedNativeModules.g.cpp

@@ -6,13 +6,18 @@
 // Includes from @react-native-clipboard/clipboard
 #include <winrt/Clipboard.h>
 
+// Includes from react-native-blob-util
+#include <winrt/ReactNativeBlobUtil.h>
+
 namespace winrt::Microsoft::ReactNative
 {
 
 void RegisterAutolinkedNativeModulePackages(winrt::Windows::Foundation::Collections::IVector<winrt::Microsoft::ReactNative::IReactPackageProvider> const& packageProviders)
 { 
     // IReactPackageProviders from @react-native-clipboard/clipboard
     packageProviders.Append(winrt::Clipboard::ReactPackageProvider());
+    // IReactPackageProviders from react-native-blob-util
+    packageProviders.Append(winrt::ReactNativeBlobUtil::ReactPackageProvider());
 }
 
 }

NewArch/windows/NewArch/AutolinkedNativeModules.g.targets

@@ -6,5 +6,9 @@
     <ProjectReference Include="$(ProjectDir)..\..\node_modules\@react-native-clipboard\clipboard\windows\Clipboard\Clipboard.vcxproj">
       <Project>{90BFF18B-474B-445D-9847-B065853288D8}</Project>
     </ProjectReference>
+    <!-- Projects from react-native-blob-util -->
+    <ProjectReference Include="$(ProjectDir)..\..\node_modules\react-native-blob-util\windows\ReactNativeBlobUtil\ReactNativeBlobUtil.vcxproj">
+      <Project>{CDDE3311-EFD2-462D-8551-93637A7FAE92}</Project>
+    </ProjectReference>
   </ItemGroup>
 </Project>