![Malicious npm Package Typosquats react-login-page to Deploy Keylogger](https://cdn.sanity.io/images/cgdhsj6q/production/007b21d9cf9e03ae0bb3f577d1bd59b9d715645a-1024x1024.webp?w=400&fit=max&auto=format)
Research
Security News
Malicious npm Package Typosquats react-login-page to Deploy Keylogger
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
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 .babelrc
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 .babelrc
file.
Install metro-react-native-babel-preset
in your app:
npm i metro-react-native-babel-preset --save-dev
Then, create a file called .babelrc
in your project's root directory. The existence of this .babelrc
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 .babelrc
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
Unknown package
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.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.