Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is metro bundler in react-native?

Tags:

react-native

I am learning React Native.

I can't find a proper documentation for metro bundler. So, I have few questions on it. As the name suggest it creates a bundle.

  1. But where is the bundle file located ?
  2. Is this same as webpack ?
  3. What is the use of that bundle file ?
like image 761
Piyush Avatar asked Jun 30 '18 16:06

Piyush


People also ask

What is bundling in React Native?

Bundling. Most React apps will have their files “bundled” using tools like Webpack, Rollup or Browserify. Bundling is the process of following imported files and merging them into a single file: a “bundle”. This bundle can then be included on a webpage to load an entire app at once.

How do I open my metro bundler browser?

If that doesn't work, what usually works for me is entering the key combination - ⌘ + D [On Mac for iOS] or ⌘ + M [On Mac for Android] | Ctrl + M [On Windows for Android]. This will also open the developer menu on the device or emulator/simulator that you have connected to Metro.

What is Metro Expo?

Expo CLI uses Metro during npx expo start and npx expo export to bundle your JavaScript code and assets. Metro is built and optimized for React Native, and used for large scale applications such as Facebook and Instagram.


3 Answers

A React Native app is a compiled app that is running some Javascript. Whenever you build and run your React Native project, a packager starts up called Metro. You’ve probably seen this output in your terminal before, letting your know the packager is running.

The packager does a few things:

Combines all your Javascript code into a single file, and translates any Javascript code that your device won’t understand (like JSX or some of the newer JS syntax).

Converts assets (e.g. PNG files) into objects that can be displayed by an Image component.

reference: https://hackernoon.com/understanding-expo-for-react-native-7bf23054bbcd

like image 78
mahdi sharifi Avatar answered Oct 18 '22 18:10

mahdi sharifi


Metro is a JavaScript bundler which takes in options, an entry file, and gives you a JavaScript file including all JavaScript files back. Every time you run a react native project, a compilation of many javascript files are done into a single file. This compilation is done by a bundler which is called Metro.

Answers to your questions:

1> Bundled file is located on the device itself on which you are building your app and is stored in different formats like in case of Android Plain bundling in which .bundle is created. Another format is of Indexed RAM bundle in which file is stored as binary file.

2> Webpack is also a similar type of module bundler which does bundling to ReactJS web platform and its modules are accessible through browser. Bundling process is while similar to metro.

3> These bundled files are indexed and stored in a particular numerical format and thus its easy at the run time to arrange JS files in order.

There are multiple functions of Metro bundler and you can read about the role of Metro in React Native here : https://medium.com/@rishabh0297/role-of-metro-bundler-in-react-native-24d178c7117e

Hope it helps.

like image 28
Rishabh Sharma Avatar answered Oct 18 '22 18:10

Rishabh Sharma


Metro team keeps improving its documentation, now you can find some really good explanations at https://facebook.github.io/metro/docs/concepts (link updated):

Metro is a JavaScript bundler. It takes in an entry file and various options, and gives you back a single JavaScript file that includes all your code and its dependencies.

So yes, it is a sort of Webpack, but for React Native apps :)

But where is the bundle file located?

Once the bundler is started, you can check its contents at http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false (like webpack, it is served from memory, so it is not being written on your project's folder).

What is the use of that bundle file ?

This file is installed in the device for its code to be executed there. Remember that when you are writing code for a React Native application, your code is not "translated" to Java / Swift / whatever. The Native Modules will send events to a Javascript thread, and the JS thread will execute your bundled React Native code.

like image 21
Rocío García Luque Avatar answered Oct 18 '22 18:10

Rocío García Luque