In this lesson, you will learn how to configure your project’s asset bundles to ensure your app stays lean and performs lightning-fast.
When you add images, custom fonts, or icons to your React Native project, they are bundled into your app’s binary. If you simply dump every high-resolution asset into your project, your "time to interactive" will suffer because the device has to load that massive bundle into memory immediately upon startup.
Managing Asset Bundles
To keep your app performant, you should rely on react-native.config.js. This configuration file tells the React Native CLI exactly where to look for your static assets so it can package them efficiently.
Create a file named react-native.config.js in your root directory:
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts/', './assets/images/branding/'],
};
Why this matters
By explicitly defining your asset paths, you prevent the bundler (Metro) from crawling unnecessary directories. More importantly, when you run npx react-native-asset (or link your assets), the CLI optimizes the distribution of these files.
For fonts, this process ensures they are correctly registered in your Info.plist (iOS) and build.gradle (Android) without manual intervention. For images, organizing them into specific folders defined in your config allows you to implement a strategy where you only bundle essential "splash" assets, while loading non-critical icons or secondary graphics dynamically from a remote server later.
A Pro-Tip for Performance
Never bundle high-resolution images that are only needed on specific screens. If an asset isn't needed for the initial UI render, move it out of the configured asset bundle and fetch it over the network once the app has finished its primary loading state. This keeps your core binary small and your startup speed snappy.
Key Takeaway: Use react-native.config.js to strictly define and isolate your asset paths, ensuring the Metro bundler only processes the files required for immediate UI rendering.