From 38b16f968a34693755ee5e565db080d75e548b96 Mon Sep 17 00:00:00 2001
From: Bohdan Artiukhov <bohdan.artiukhov@swmansion.com>
Date: Wed, 4 Sep 2024 09:39:56 +0200
Subject: [PATCH] docs: introduce about webpack and metro bundler (#2434)

# Summary
Short explanation on how to configure the webpack bundler and a brief
rationale on why it's preferable to use the Metro bundler.

## Checklist
- [x] I added documentation in `README.md`
---
 USAGE.md | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/USAGE.md b/USAGE.md
index 65e9b446..f3dc6b3c 100644
--- a/USAGE.md
+++ b/USAGE.md
@@ -145,6 +145,40 @@ export default () => {
   );
 };
 ```
+# Web configuration
+
+## Metro bundler
+No additional steps are required when using Metro bundler.
+
+## Webpack
+If you are using the Webpack bundler, the following steps are needed:
+
+- Install `@react-native/assets-registry/registry` as a project dependency.
+- Ensure that you have the proper configuration to parse flow files from `@react-native/assets-registry/registry`.
+- Configure the Webpack `module -> rules` section and include an important rule for `node_modules/@react-native/assets-registry/registry`.
+
+webpack.config.js
+ ```ts
+ const babelLoaderConfiguration = {
+  include: [
+    path.resolve(
+      appDirectory,
+      // Important!
+      'node_modules/@react-native/assets-registry/registry',
+    ),
+  ],
+  ...
+};
+
+module.exports = {
+  ...config,
+  module: {
+      rules: [babelLoaderConfiguration],
+    },
+};
+ ```
+
+For more details on the complete Webpack configuration, you can refer to this [documentation](https://necolas.github.io/react-native-web/docs/multi-platform/#compiling-and-bundling) on how to set up a `webpack.config` file for React Native Web.
 
 # Use with svg files