From 50533b5b3c1cc90eb397d4222e7c619ae653bd6b Mon Sep 17 00:00:00 2001 From: bohdanprog Date: Fri, 30 Aug 2024 14:00:00 +0200 Subject: [PATCH 1/4] docs: introduce about webpack and metro bundler --- USAGE.md | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/USAGE.md b/USAGE.md index 65e9b446e..6b56efd7d 100644 --- a/USAGE.md +++ b/USAGE.md @@ -146,6 +146,62 @@ export default () => { }; ``` +## Metro bundler +You can set up your mobile and web applications using the Metro bundler, and you shouldn't face any issues using our library. + +### Why Use Metro and Expo for Native and Web Development? + +Using Metro and Expo provides several advantages when developing for both native and web platforms: + +1. **Unified Development Experience**: Metro is the default bundler for React Native, providing a consistent experience across iOS, Android, and web platforms. This eliminates the need for managing separate build configurations for different platforms. + +2. **Optimized Performance**: Metro is designed specifically for React Native, offering faster build times and optimized performance, especially when dealing with large codebases. + +3. **Seamless Integration**: Expo offers out-of-the-box integration with Metro, simplifying the development process and reducing the need for complex configuration setups, which can be particularly beneficial when targeting multiple platforms. + +4. **Active Maintenance**: Unlike Webpack, Metro is actively maintained and continuously improved to support the latest React Native features. This ensures better support and access to new functionalities as they are released. + +5. **Simplified Configuration**: With Metro and Expo, there’s less overhead in terms of configuration compared to Webpack. This can make the setup process faster and less error-prone, especially for developers who are not as familiar with Webpack. + +## Webpack bundler +> [!WARNING] `expo/webpack-config` +> +> `@expo/webpack-config` is deprecated and will not receive any new feature updates. + +> [!TIP] Migrate from Expo Webpack +> +> If you are still using the Webpack bundler, we recommend migrating to Metro. This [documentation](https://docs.expo.dev/router/migrate/from-expo-webpack/) provides a good guide on how to migrate a website from Expo Webpack to Expo Metro. + +If, for some reason, you are using the Webpack bundler, the following steps are important: + +- 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`. + +> [!NOTE] Webpack Configuration +> +> ```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 Try [react-native-svg-transformer](https://github.com/kristerkari/react-native-svg-transformer) to get compile time conversion and cached transformations. From 660ae2ce0fce32582f174996a7e590e436cc48f6 Mon Sep 17 00:00:00 2001 From: bohdanprog Date: Tue, 3 Sep 2024 09:26:31 +0200 Subject: [PATCH 2/4] docs: add small update after review, make it more understandable --- USAGE.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/USAGE.md b/USAGE.md index 6b56efd7d..2c2418dda 100644 --- a/USAGE.md +++ b/USAGE.md @@ -145,9 +145,10 @@ export default () => { ); }; ``` +# Web configuration ## Metro bundler -You can set up your mobile and web applications using the Metro bundler, and you shouldn't face any issues using our library. +No additional steps are required when using Metro bundler. ### Why Use Metro and Expo for Native and Web Development? @@ -163,7 +164,7 @@ Using Metro and Expo provides several advantages when developing for both native 5. **Simplified Configuration**: With Metro and Expo, there’s less overhead in terms of configuration compared to Webpack. This can make the setup process faster and less error-prone, especially for developers who are not as familiar with Webpack. -## Webpack bundler +## Webpack > [!WARNING] `expo/webpack-config` > > `@expo/webpack-config` is deprecated and will not receive any new feature updates. @@ -172,7 +173,7 @@ Using Metro and Expo provides several advantages when developing for both native > > If you are still using the Webpack bundler, we recommend migrating to Metro. This [documentation](https://docs.expo.dev/router/migrate/from-expo-webpack/) provides a good guide on how to migrate a website from Expo Webpack to Expo Metro. -If, for some reason, you are using the Webpack bundler, the following steps are important: +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`. From 86fa0dd9fd2e3c342382e0268a5b44989afe3793 Mon Sep 17 00:00:00 2001 From: bohdanprog Date: Tue, 3 Sep 2024 10:10:23 +0200 Subject: [PATCH 3/4] docs: remove unrelevant part react-native-svg --- USAGE.md | 63 ++++++++++++++++++-------------------------------------- 1 file changed, 20 insertions(+), 43 deletions(-) diff --git a/USAGE.md b/USAGE.md index 2c2418dda..a7deea5df 100644 --- a/USAGE.md +++ b/USAGE.md @@ -150,56 +150,33 @@ export default () => { ## Metro bundler No additional steps are required when using Metro bundler. -### Why Use Metro and Expo for Native and Web Development? - -Using Metro and Expo provides several advantages when developing for both native and web platforms: - -1. **Unified Development Experience**: Metro is the default bundler for React Native, providing a consistent experience across iOS, Android, and web platforms. This eliminates the need for managing separate build configurations for different platforms. - -2. **Optimized Performance**: Metro is designed specifically for React Native, offering faster build times and optimized performance, especially when dealing with large codebases. - -3. **Seamless Integration**: Expo offers out-of-the-box integration with Metro, simplifying the development process and reducing the need for complex configuration setups, which can be particularly beneficial when targeting multiple platforms. - -4. **Active Maintenance**: Unlike Webpack, Metro is actively maintained and continuously improved to support the latest React Native features. This ensures better support and access to new functionalities as they are released. - -5. **Simplified Configuration**: With Metro and Expo, there’s less overhead in terms of configuration compared to Webpack. This can make the setup process faster and less error-prone, especially for developers who are not as familiar with Webpack. - ## Webpack -> [!WARNING] `expo/webpack-config` -> -> `@expo/webpack-config` is deprecated and will not receive any new feature updates. - -> [!TIP] Migrate from Expo Webpack -> -> If you are still using the Webpack bundler, we recommend migrating to Metro. This [documentation](https://docs.expo.dev/router/migrate/from-expo-webpack/) provides a good guide on how to migrate a website from Expo Webpack to Expo Metro. - 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`. -> [!NOTE] Webpack Configuration -> -> ```ts -> const babelLoaderConfiguration = { -> include: [ -> path.resolve( -> appDirectory, -> // Important! -> 'node_modules/@react-native/assets-registry/registry', -> ), -> ], -> ... ->}; -> ->module.exports = { -> ...config, -> module: { -> rules: [babelLoaderConfiguration], -> }, ->}; -> ``` +#### Webpack Configuration + ```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. From 44c06ec9fbd6b28c9a00f3f58457b9800eb374f6 Mon Sep 17 00:00:00 2001 From: bohdanprog Date: Tue, 3 Sep 2024 10:37:42 +0200 Subject: [PATCH 4/4] docs: rename section --- USAGE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/USAGE.md b/USAGE.md index a7deea5df..f3dc6b3ca 100644 --- a/USAGE.md +++ b/USAGE.md @@ -157,7 +157,7 @@ If you are using the Webpack bundler, the following steps are needed: - 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 Configuration +webpack.config.js ```ts const babelLoaderConfiguration = { include: [