metro-react-native-babel-preset
Advanced tools
Package description
The metro-react-native-babel-preset package is a Babel preset for React Native applications. It includes the Babel plugins and configurations necessary to compile JavaScript code in a way that is compatible with the React Native platform. This preset helps developers by abstracting the complex Babel configurations required for React Native development.
Transform JSX
This code sample demonstrates how JSX is transformed into JavaScript that React Native can understand. The metro-react-native-babel-preset handles the necessary transformations behind the scenes.
import React from 'react';
import { View, Text } from 'react-native';
function MyComponent() {
return (
<View>
<Text>Hello, world!</Text>
</View>
);
}ESNext Features
This code sample shows the use of class properties, an ESNext feature. The preset allows developers to write modern JavaScript by transpiling features that are not natively supported by the React Native JavaScript engine.
class MyComponent extends React.Component {
state = { greeting: 'Hello' };
render() {
return <Text>{this.state.greeting}, world!</Text>;
}
}Module Resolution
This code sample illustrates module resolution. The preset configures Babel to resolve modules in a way that is compatible with the Metro bundler used by React Native.
import myModule from 'my-module';The @babel/preset-env package is a widely-used Babel preset that allows developers to use the latest JavaScript features without worrying about browser compatibility. It is similar to metro-react-native-babel-preset in that it handles modern JavaScript features, but it is targeted towards web development rather than React Native.
The @babel/preset-react package is a Babel preset specifically for React applications. It includes plugins that transform JSX and other React-specific syntax. It is similar to metro-react-native-babel-preset, but it does not include React Native-specific transformations and optimizations.
The babel-preset-expo package is a Babel preset for Expo apps, which are built on top of React Native. It extends metro-react-native-babel-preset with additional Expo-specific configurations and plugins. It is similar but tailored for the Expo ecosystem.
Readme
Babel presets for React Native applications. React Native itself uses this Babel preset by default when transforming your app's source code.
If you wish to use a custom Babel configuration by writing a babel.config.js file in your project's root directory, you must specify all the plugins necessary to transform your code. React Native does not apply its default Babel configuration in this case. So, to make your life easier, you can use this preset to get the default configuration and then specify more plugins that run before it.
As mentioned above, you only need to use this preset if you are writing a custom babel.config.js file.
Install metro-react-native-babel-preset in your app:
with npm:
npm i metro-react-native-babel-preset --save-dev
or with yarn:
yarn add -D metro-react-native-babel-preset
Then, create a file called babel.config.js in your project's root directory. The existence of this babel.config.js file will tell React Native to use your custom Babel configuration instead of its own. Then load this preset:
{
"presets": ["module:metro-react-native-babel-preset"]
}
You can further customize your Babel configuration by specifying plugins and other options. See Babel's babel.config.js documentation to learn more.
If you get stuck configuring Babel, please ask a question on Stack Overflow or find a consultant for help. If you discover a bug, please open up an issue.
FAQs
Babel preset for React Native applications
The npm package metro-react-native-babel-preset receives a total of 1,651,888 weekly downloads. As such, metro-react-native-babel-preset popularity was classified as popular.
We found that metro-react-native-babel-preset demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.