Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@react-native/metro-config
Advanced tools
@react-native/metro-config is a configuration package for Metro, the JavaScript bundler used by React Native. It allows developers to customize the Metro bundler's behavior, such as transforming files, resolving modules, and optimizing the build process.
Custom Transformer
This feature allows you to specify a custom transformer for Metro. In this example, the configuration is set to use the 'react-native-typescript-transformer' to handle TypeScript files.
const { getDefaultConfig } = require('@react-native/metro-config');
const config = getDefaultConfig(__dirname);
config.transformer = {
babelTransformerPath: require.resolve('react-native-typescript-transformer')
};
module.exports = config;
Custom Resolver
This feature allows you to customize the resolver settings. In this example, the configuration is modified to include additional file extensions like 'ts' and 'tsx' for TypeScript support.
const { getDefaultConfig } = require('@react-native/metro-config');
const config = getDefaultConfig(__dirname);
config.resolver = {
sourceExts: ['jsx', 'js', 'ts', 'tsx']
};
module.exports = config;
Asset Plugins
This feature allows you to specify asset plugins for Metro. In this example, the configuration is set to use 'expo-asset/tools/hashAssetFiles' to handle asset files.
const { getDefaultConfig } = require('@react-native/metro-config');
const config = getDefaultConfig(__dirname);
config.transformer = {
assetPlugins: ['expo-asset/tools/hashAssetFiles']
};
module.exports = config;
Metro is the JavaScript bundler for React Native. It provides the core functionalities for bundling JavaScript code and assets. While @react-native/metro-config is specifically for configuring Metro, the 'metro' package itself includes the bundler and its core functionalities.
Haul is an alternative JavaScript bundler for React Native. It is highly customizable and integrates with Webpack, allowing developers to leverage the extensive Webpack ecosystem. Compared to @react-native/metro-config, Haul offers more flexibility through Webpack's configuration options.
Webpack is a popular JavaScript module bundler. While it is not specifically designed for React Native, it can be configured to work with React Native projects. Webpack offers a wide range of plugins and configuration options, making it a powerful alternative to Metro when used with the appropriate loaders and plugins.
yarn add --dev @react-native/js-polyfills metro-config @react-native/metro-babel-transformer metro-runtime @react-native/metro-config
Note: We're using yarn
to install deps. Feel free to change commands to use npm
3+ and npx
if you like
To run the tests in this package, run the following commands from the React Native root folder:
yarn
to install the dependencies. You just need to run this onceyarn jest packages/metro-config
.v0.75.0-rc.3
Share.share()
's argument types to be more explicit. (8b53d41a88)TouchableOpacity
from JS class
to ForwardRef
component (3d00549399 by @retyui)LongLivedObjectCollection::get
accept a Runtime reference as parameter. (86a52cc2dc by @fabriziocucci)LongLivedObject
constructor accept a Runtime
reference. (3706bf077e by @fabriziocucci)null
for optional but not nullable arguments. (67b9628af5 by @rubennorte)ReactJsExceptionHandler
param from ReactHostImpl() constructor and providing a default private implementation (fe7e7a015f by @alanleedev)android:supportsRtl="true"
for RTL layout (82c6f8a580 by @NickGerleman)DevSupportManagerFactory.create()
changed to take an additional parameter of type PausedInDebuggerOverlayManager
(nullable) (1d26907ca4 by @motiz88)ReactViewBackgroundDrawable
in favor of CSSBackgroundDrawable
(d7766fa927 by @NickGerleman)getSurfacePresenter
and getModuleRegistry
from RCTHost (f19371f28d by @cipolleschi)RCTRedBox
access through RCTBridge
(b5db214d2a by @realsoelynn)requestIdleCallback
and cancelIdleCallback
(abfadc6083 by @robik)ReactNativeApplication.[enable,metadataUpdated]
CDP messages for reading host metadata (aced4072cf by @huntie)remove
methods for Linking.addEventListener
and AccessibilityInfo.addEventListener
Jest mocks (2483c63017 by @levibuzolic)react-devtools
standalone app (430dd0be26 by @hoxyq)Header
methods (028615180b by @retyui)Image.getSize/getSizeWithHeaders
method returns a promise if you don't pass a success
callback (2c1bcbac81 by @retyui)ReactMarkerConstants.CONTENT_APPEARED
support on Android in bridgeless mode. (5da9fdf8f1 by @Kudo)Image
prop resizeMultiplier
to help increase quality of small images on low DPI devices (b6c3433537)onUserLeaveHint
support into ReactActivityDelegate
(6450d08187 by @behenate)onUserLeaveHint
support into ReactActivityDelegate
(3cf6c64a80 by @behenate)act()
(5a8327857b by @yungsters)Pressable
component. (cfa784c5ce by @Zahoq)mockComponent
now also mocks name
(5062c5256e by @yungsters)react@18.3.1
(abb7070a51 by @yungsters)no-string-refs
is now a lint error (387250112e by @yungsters)Animated
components (452373b5bf by @yungsters)StyleSheet.compose
(34331af9ce by @yungsters)--experimental-debugger
launch flow (b1bb0bee41 by @motiz88)parseVersion
(c3d45740cd by @zeyap)react-native-community/cli
to v14.0.0-alpha.2 (32c2322668 by @szymonrybczak)console
object (949296571b by @motiz88)react-native-community/cli
to 14.0.0-alpha.0 (7a00623947 by @szymonrybczak)AlertFragment
dialog builder to use androidx.appcompat
(297ded90aa)AlertFragment
dialog builder to use androidx.appcompat
(600d3f6ff1)DevInternalSettings
from DevSupportManagerBase
(52cec1e798 by @Kudo)DevServerHelper
(a1e8118541 by @huntie)mapbufferjni
via prefab. (c73e22142e by @tomekzaw)openDebugger()
method on DevSupportManager
(b309af79e8 by @motiz88)useDevSupport
now is configurable by ReactNativeHost. (d195fd0c06 by @javache)handleRemoveView
function in ReactViewGroup.java
to ignore calls for Views
that are not children of this ViewGroup
(0d7a92b551 by @bartlomiejbloniarz)onprogress
event for XMLHttpRequest
even when the Content-Length
header is missing in the response headers (457d14bd1b)notifyObservers
straight to RCTEventDispatcher.mm
. (f5c888c2d7 by @WoLewicki)customizeRootView
from RCTRootViewFactory
(8956869792 by @Kudo)DEFINES_MODULE
for React-jsinspector.podspec (4e6186555e by @Kudo)foregroundInactive
window when there are no foregroundActive
windows in RCTKeyWindow (42ceacd281 by @cipolleschi)react-native/dev-middleware
: Remove nonstandard faviconUrl
field from CDP /json
response (df19e597e3 by @huntie)launchId
query param for /debugger-frontend
is no longer generated automatically for each /open-debugger
call. Caller of /open-debugger
is now responsible for generating the launchId
, which will be passed along to /debugger-frontend
. (b7de916664 by @EdmondChuiHW)tvParallaxProperties
prop from TouchableOpacity
& add missing focusable
, rejectResponderTermination
props (0a0cd6517f by @retyui)<ImageBackground/>
component (09c903c439 by @retyui)NativeAnimationsDebugModule
(already not Public API) (95f7a5c597 by @yungsters)_textStorageForNSAttributesString
which was unused (8ecbb36492 by @j-piasecki)NativeState
methods to the WithRuntimeDecorator
class. (218ea5d44c by @bartlomiejbloniarz)mountingOverrideDelegates
(358fe46969 by @WoLewicki)Props.h
created from codegen missing default initializers in C++ struct
(639d890dff by @alanleedev)collapsableChildren
prop (7b44c8d1d0 by @NickGerleman)fontWeight
normalization for TextInput component (15f27bc299 by @NickGerleman)RCT-Folly
podspec (8769245477 by @mrousavy)convertToCase
(cef17ba14f by @cortinico)JavaTimerManager$IdleCallbackRunnable.cancel
(e686b4330d by @cortinico)ReactActivity.getReactDelegate().reload()
. (539922339b by @Kudo)textAlign
not being taken into account when positioning views inlined in text (1f08799560 by @j-piasecki)batchRenderingUpdatesInEventLoop
is enabled. (849da2146c by @javache)adjustFontSizeToFit
when used without numberOfLines
(b236e154a1 by @j-piasecki)adjustsFontSizeToFit
not working on Android when using the new architecture (747a96b7b3 by @j-piasecki)ReactModalHostView
(15ff82f811 by @cortinico)getChildAtWithSubviewClippingEnabled
(d6a44e632a by @javache)InputAccessoryView
width on device orientation change (8597727c28 by @mauriciomeirelles)[super viewDidLoad]
in RCTRedBox.mm
. (d93788301c by @hakonk)HermesExecutorFactory.h
build error when importing its private header (2d46dbe6ce by @Kudo)progress
in onProgress
native event arguments (78ab5f4b83 by @netmaxt3r)adjustFontSizeToFit
is set (ed7766cee9 by @j-piasecki)RCTRootViewFactory
from Swift (5aea518d88 by @okwasniewski)bundleURL
so that it can connect to metro on Reload when the url changes. (8b8b85bb1f by @cipolleschi)contextMenuHidden
(493dbb2190 by @jakex7)FAQs
Metro configuration for React Native.
The npm package @react-native/metro-config receives a total of 533,306 weekly downloads. As such, @react-native/metro-config popularity was classified as popular.
We found that @react-native/metro-config 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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.