How @haul-bundler/babel-preset-react-native and metro-react-native-babel-preset are different?

[tkow]

Ask your Question

I try to update @haul-bundler version to v10 (preset-0.60, cli v10) my application because I want to try Hermes. Then we change metro-react-native-babel-preset to @haul-bundler/babel-preset-react-native@10.1 learned by new ReadMe in my haul.config.js and babel.config.js. After that, our build failed because it seems that react-native-vector-icons doesn't read fonts automatically though metro preset does , so I must add Fonts provided by application config to Info.plist in iOS when we use @haul-bundler/babel-preset-react-native instead of metro-react-native-babel-preset.

In my curiosity, I want to know whether I can continue to use metro-react-native-babel-preset and what makes the difference between two presets? I try it and it seems to work fine at v10 too, though documents say @haul-bundler/babel-preset-react-native is required. if it can't, We'll wait to update because we don't have much time to inspect the influences of change presets to our project. If it can, we'll use stay to use metro-react-native-babel-preset though haul version v9 to v10 for smooth hermes migration.
I'm very excited and amazed to wonderful react-native and haul feature and advancing so rapidly. I'm looking forward to the day of I introduce these feature to my projects.

[zamotany]

@tkow Yes you can use metro-react-native-babel-preset - it should work the same (though this may vary from project to project). If it works for you, go ahead and use it.

The main difference between metro-react-native-babel-preset and @haul-bundler/babel-preset-react-native is that we don't include all transforms that metro does, since some syntaxes are supported by the newer JSC, which was introduced in RN 0.59. This results in slightly smaller bundle (10-20KB smaller for initial project bundle) and the gap might be widen for larger project.

As for your issue with react-native-vector-icons feel free to open a separate issue, but to me it looks like an issue with webpack rather than with babel preset.

[tkow]

@zamotany
Thanks a lot to inform that. If I find why new preset doesn't work in my poject I''ll create new issue.