From 2759d202f6f926567c2724c2103d4fabeaa164ad Mon Sep 17 00:00:00 2001 From: vineethkuttan <66076509+vineethkuttan@users.noreply.github.com> Date: Thu, 12 Feb 2026 18:58:26 +0530 Subject: [PATCH] react native blob addition --- NewArch/package.json | 1 + NewArch/src/RNGalleryList.ts | 11 +- NewArch/src/examples/BlobUtilExamplePage.tsx | 292 ++++++++++++++++++ NewArch/windows/NewArch.sln | 14 + .../NewArch/AutolinkedNativeModules.g.cpp | 5 + .../NewArch/AutolinkedNativeModules.g.targets | 4 + NewArch/windows/NewArch/packages.lock.json | 10 + NewArch/yarn.lock | 50 +++ 8 files changed, 386 insertions(+), 1 deletion(-) create mode 100644 NewArch/src/examples/BlobUtilExamplePage.tsx diff --git a/NewArch/package.json b/NewArch/package.json index 6d89e480..46e1796c 100644 --- a/NewArch/package.json +++ b/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": { diff --git a/NewArch/src/RNGalleryList.ts b/NewArch/src/RNGalleryList.ts index f9fae668..37d571a2 100644 --- a/NewArch/src/RNGalleryList.ts +++ b/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 = [ 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, diff --git a/NewArch/src/examples/BlobUtilExamplePage.tsx b/NewArch/src/examples/BlobUtilExamplePage.tsx new file mode 100644 index 00000000..2b28471c --- /dev/null +++ b/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 ( + + Default Directory: {ReactNativeBlobUtil.fs.dirs.DocumentDir} + + Alert.alert('Exists: ' + result)) + .catch((err) => Alert.alert(err.message));`}> + + +