Add Support for Windows New Arch

.gitignore

@@ -31,6 +31,9 @@ project.xcworkspace
 Podfile*
 contents.xcworkspacedata
 
+# packages
+windows/packages/
+
 # VSCode
 #
 .vscode
@@ -52,3 +55,5 @@ buck-out/
 android/app/libs
 android/keystores/debug.keystore
 /ios/ReactNativeBlobUtil.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
+
+**/msbuild.binlog

NuGet.config

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+  <packageSources>
+    <clear />
+    <add key="react-native" value="https://pkgs.dev.azure.com/ms/react-native/_packaging/react-native-public/nuget/v3/index.json" />
+    <add key="Nuget.org" value="https://api.nuget.org/v3/index.json" />
+  </packageSources>
+  <disabledPackageSources>
+    <clear />
+  </disabledPackageSources>  
+</configuration>

examples/ReactNativeBlobUtil/.gitignore

@@ -57,3 +57,66 @@ buck-out/
 
 # CocoaPods
 /ios/Pods/
+
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# packages
+windows/packages/
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+!debug.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+
+# Bundle artifact
+*.jsbundle
+
+# CocoaPods
+/ios/Pods/

examples/ReactNativeBlobUtil/App.js

@@ -7,8 +7,8 @@
  */
 
 import React, {useState} from 'react';
-import {Alert, Button, SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, TextInput, View} from 'react-native';
-import {Picker} from '@react-native-picker/picker';
+import {Alert, Button, ScrollView, StyleSheet, Text, TextInput, View} from 'react-native';
+// import {Picker} from '@react-native-picker/picker'; Need to remove this package as it is not supported in Windows New Architecture
 
 import {Colors} from 'react-native/Libraries/NewAppScreen';
 
@@ -489,8 +489,7 @@ const App: () => React$Node = () => {
     // App ************************************************************************
     return (
         <>
-            <StatusBar barStyle="dark-content" />
-            <SafeAreaView>
+            <View>
                 <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.scrollView}>
                     {global.HermesInternal == null ? null : (
                         <View style={styles.engine}>
@@ -604,72 +603,116 @@ const App: () => React$Node = () => {
                     </View>
 
                     <View style={styles.body}>
-                        <View style={styles.sectionContainer}>
-                            <Text style={styles.sectionTitle}>{'Hash - hash()'}</Text>
-                            <View style={styles.sectionDescription}>
-                                <TextInput style={styles.input} placeholder="Source path" onChangeText={(hashPathParam) => setHashPathParam(hashPathParam)} placeholderTextColor="#9a73ef" autoCapitalize="none" />
-                                <Picker hashAlgValue={hashAlgValue} onChangeText={(readPositionParam) => setReadPositionParam(readPositionParam)} style={{height: 50, width: 150}} onValueChange={(itemValue, itemIndex) => setHashAlgValue(itemValue)}>
-                                    <Picker.Item label="MD5" value="md5" />
-                                    <Picker.Item label="SHA1" value="sha1" />
-                                    <Picker.Item label="SHA224" value="sha224" />
-                                    <Picker.Item label="SHA256" value="sha256" />
-                                    <Picker.Item label="SHA384" value="sha384" />
-                                    <Picker.Item label="SHA512" value="sha512" />
-                                </Picker>
-                            </View>
-                            <Button title="Hash File" color="#9a73ef" onPress={hashCall} />
+                    <View style={styles.sectionContainer}>
+                        <Text style={styles.sectionTitle}>{'Hash - hash()'}</Text>
+                        <View style={styles.sectionDescription}>
+                        <TextInput
+                            style={styles.input}
+                            placeholder="Source path"
+                            onChangeText={setHashPathParam}
+                            placeholderTextColor="#9a73ef"
+                            autoCapitalize="none"
+                        />
+                        <View style={styles.buttonGroup}>
+                            {['md5', 'sha1', 'sha224', 'sha256', 'sha384', 'sha512'].map((alg) => (
+                            <Button
+                                key={alg}
+                                title={alg.toUpperCase()}
+                                color={hashAlgValue === alg ? '#7a42f4' : '#ccc'}
+                                onPress={() => setHashAlgValue(alg)}
+                            />
+                            ))}
                         </View>
+                        </View>
+                        <Button title="Hash File" color="#9a73ef" onPress={hashCall} />
+                    </View>
                     </View>
 
                     <View style={styles.body}>
-                        <View style={styles.sectionContainer}>
-                            <Text style={styles.sectionTitle}>{'write - writeFile(), appendFile()'}</Text>
-                            <View style={styles.sectionDescription}>
-                                <TextInput style={styles.input} placeholder="Source path" onChangeText={(writeParam) => setWriteParam(writeParam)} placeholderTextColor="#9a73ef" autoCapitalize="none" />
-                                <TextInput style={styles.input} placeholder="Source path" onChangeText={(writeURIParam) => setWriteURIParam(writeURIParam)} placeholderTextColor="#9a73ef" autoCapitalize="none" />
-                                <Picker writeEncodeStreamParam={writeEncodeParam} onChangeText={(readPositionParam) => setReadPositionParam(readPositionParam)} style={{height: 50, width: 150}} onValueChange={(itemValue, itemIndex) => setWriteEncodeParam(itemValue)}>
-                                    <Picker.Item label="UTF8" value="utf8" />
-                                    <Picker.Item label="Base64" value="base64" />
-                                    <Picker.Item label="ASCII" value="ascii" />
-                                    <Picker.Item label="URI" value="uri" />
-                                </Picker>
-                            </View>
-                            <Button title="Write" color="#9a73ef" onPress={writeFileCall} />
-                            <Button title="Append" color="#9a73ef" onPress={appendFileCall} />
+                    <View style={styles.sectionContainer}>
+                        <Text style={styles.sectionTitle}>{'write - writeFile(), appendFile()'}</Text>
+                        <View style={styles.sectionDescription}>
+                        <TextInput
+                            style={styles.input}
+                            placeholder="Source path"
+                            onChangeText={setWriteParam}
+                            placeholderTextColor="#9a73ef"
+                            autoCapitalize="none"
+                        />
+                        <TextInput
+                            style={styles.input}
+                            placeholder="Destination path"
+                            onChangeText={setWriteURIParam}
+                            placeholderTextColor="#9a73ef"
+                            autoCapitalize="none"
+                        />
+                        <View style={styles.buttonGroup}>
+                            {['utf8', 'base64', 'ascii', 'uri'].map((enc) => (
+                            <Button
+                                key={enc}
+                                title={enc.toUpperCase()}
+                                color={writeEncodeParam === enc ? '#7a42f4' : '#ccc'}
+                                onPress={() => setWriteEncodeParam(enc)}
+                            />
+                            ))}
+                        </View>
                         </View>
+                        <Button title="Write" color="#9a73ef" onPress={writeFileCall} />
+                        <Button title="Append" color="#9a73ef" onPress={appendFileCall} />
+                    </View>
                     </View>
 
                     <View style={styles.body}>
-                        <View style={styles.sectionContainer}>
-                            <Text style={styles.sectionTitle}>{'WriteStream - writeStream()'}</Text>
-                            <View style={styles.sectionDescription}>
-                                <TextInput style={styles.input} placeholder="Source path" onChangeText={(writeStreamParam) => setWriteStreamParam(writeStreamParam)} placeholderTextColor="#9a73ef" autoCapitalize="none" />
-
-                                <Picker writeEncodeStreamParam={writeEncodeStreamParam} onChangeText={(readPositionParam) => setReadPositionParam(readPositionParam)} style={{height: 50, width: 150}} onValueChange={(itemValue, itemIndex) => setWriteStreamEncodeParam(itemValue)}>
-                                    <Picker.Item label="UTF8" value="utf8" />
-                                    <Picker.Item label="Base64" value="base64" />
-                                    <Picker.Item label="ASCII" value="ascii" />
-                                </Picker>
-                            </View>
-                            <Button title="Write" color="#9a73ef" onPress={writeStreamCall} />
-                            <Button title="Append" color="#9a73ef" onPress={appendStreamCall} />
+                    <View style={styles.sectionContainer}>
+                        <Text style={styles.sectionTitle}>{'WriteStream - writeStream()'}</Text>
+                        <View style={styles.sectionDescription}>
+                        <TextInput
+                            style={styles.input}
+                            placeholder="Source path"
+                            onChangeText={setWriteStreamParam}
+                            placeholderTextColor="#9a73ef"
+                            autoCapitalize="none"
+                        />
+                        <View style={styles.buttonGroup}>
+                            {['utf8', 'base64', 'ascii'].map((enc) => (
+                            <Button
+                                key={enc}
+                                title={enc.toUpperCase()}
+                                color={writeEncodeStreamParam === enc ? '#7a42f4' : '#ccc'}
+                                onPress={() => setWriteStreamEncodeParam(enc)}
+                            />
+                            ))}
                         </View>
+                        </View>
+                        <Button title="Write" color="#9a73ef" onPress={writeStreamCall} />
+                        <Button title="Append" color="#9a73ef" onPress={appendStreamCall} />
+                    </View>
                     </View>
 
                     <View style={styles.body}>
-                        <View style={styles.sectionContainer}>
-                            <Text style={styles.sectionTitle}>{'ReadStream - readStream()'}</Text>
-                            <View style={styles.sectionDescription}>
-                                <TextInput style={styles.input} placeholder="Source path" onChangeText={(readStreamParam) => setReadStreamParam(readStreamParam)} placeholderTextColor="#9a73ef" autoCapitalize="none" />
-
-                                <Picker readEncodeStreamParam={readEncodeStreamParam} onChangeText={(readPositionParam) => setReadPositionParam(readPositionParam)} style={{height: 50, width: 150}} onValueChange={(itemValue, itemIndex) => setReadStreamEncodeParam(itemValue)}>
-                                    <Picker.Item label="UTF8" value="utf8" />
-                                    <Picker.Item label="Base64" value="base64" />
-                                    <Picker.Item label="ASCII" value="ascii" />
-                                </Picker>
-                            </View>
-                            <Button title="Read" color="#9a73ef" onPress={readStreamCall} />
+                    <View style={styles.sectionContainer}>
+                        <Text style={styles.sectionTitle}>{'ReadStream - readStream()'}</Text>
+                        <View style={styles.sectionDescription}>
+                        <TextInput
+                            style={styles.input}
+                            placeholder="Source path"
+                            onChangeText={setReadStreamParam}
+                            placeholderTextColor="#9a73ef"
+                            autoCapitalize="none"
+                        />
+                        <View style={styles.buttonGroup}>
+                            {['utf8', 'base64', 'ascii'].map((enc) => (
+                            <Button
+                                key={enc}
+                                title={enc.toUpperCase()}
+                                color={readEncodeStreamParam === enc ? '#7a42f4' : '#ccc'}
+                                onPress={() => setReadStreamEncodeParam(enc)}
+                            />
+                            ))}
                         </View>
+                        </View>
+                        <Button title="Read" color="#9a73ef" onPress={readStreamCall} />
+                    </View>
                     </View>
 
                     <View style={styles.body}>
@@ -685,7 +728,7 @@ const App: () => React$Node = () => {
                         </View>
                     </View>
                 </ScrollView>
-            </SafeAreaView>
+            </View>
         </>
     );
 };
@@ -727,6 +770,12 @@ const styles = StyleSheet.create({
         paddingRight: 12,
         textAlign: 'right',
     },
+    buttonGroup: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 8,
+        marginVertical: 8,
+      },
 });
 
 export default App;

examples/ReactNativeBlobUtil/NuGet.config

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+  <packageSources>
+    <clear />
+    <add key="Nuget.org" value="https://api.nuget.org/v3/index.json" />
+  </packageSources>
+  <disabledPackageSources>
+    <clear />
+  </disabledPackageSources>  
+</configuration>

examples/ReactNativeBlobUtil/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-    presets: ['module:metro-react-native-babel-preset'],
+    presets: ['module:@react-native/babel-preset'],
 };

examples/ReactNativeBlobUtil/jest.config.windows.js

@@ -0,0 +1,3 @@
+const config = {};
+
+module.exports = require('@rnx-kit/jest-preset')('windows', config);