@megabeelabs/react-native-gen-asset

A lightweight JavaScript tool to generate centralized boilerplate for assets (images, lotties, etc.) in React Native projects.

react-native-gen-asset scans your asset folders and automatically generates typed, centralized exports so you can import assets consistently and safely across your app.

Built with Bun for fast execution ⚡

✨ Features

• 📁 Centralize images, lotties, icons in one place
• 🔁 Auto-generate asset mapping files
• ⚡️ Preview assets with markdown support by vscode
• 🧩 Easy configuration via asset.config.json
• 🚀 Fast execution using Bun
• ⚛️ Designed for React Native

📦 Installation

bun add -D @megabeelabs/react-native-gen-asset

Or with npm / yarn:

npm install -D @megabeelabs/react-native-gen-asset
# or
yarn add -D @megabeelabs/react-native-gen-asset

🛠️ Setup

1️⃣ Create config file

At the root of your React Native project, create:

asset.config.json

Example configuration:

{
  "assets": [
    { "pathDir": "/assets/images", "assetName": "images" },
    { "pathDir": "/assets/lotties", "assetName": "lotties" }
  ]
}

Config options

Field	Type	Description	default
pathDir	string	Relative path to asset directory
assetName	string	Name of the exported asset object
useSvgTransform	boolean	Support generate svg file by component
platform	native, web	Output supported	native
outputFile	string	Customize output file	Relative path

2️⃣ Project structure example

project-root
├── assets
│ ├── images
│ │ ├── logo.png
│ │ └── avatar.jpg
│ └── lotties
│ └── loading.json
├── asset.config.json
├── package.json

▶️ Generate assets

bunx @megabeelabs/react-native-gen-asset

Or add a script:

{
  "scripts": {
    "gen:assets": "bunx @megabeelabs/react-native-gen-asset"
  }
}

Then run:

bun run gen:assets

📄 Generated output (example)

// assets/images/index.ts
export const images = {
  logo: require("../assets/images/logo.png"),
  avatar: require("../assets/images/avatar.jpg"),
};

📌 Usage in React Native

import { images } from '@/assets/images';
import { lotties } from '@/assets/lotties';

<Image source={images.logo} />

<LottieView source={lotties.loading} autoPlay />

🪄 Use svg transformation by babel

Config:

{
  "assets": [
    {
      "pathDir": "/assets/images",
      "assetName": "images"
    },
    { "pathDir": "/assets/svgs", "useSvgTransform": true }
  ]
}

Example:

import { ArrowIcon } from "@assets/svgs"

<ArrowIcon />

🛠️ Customize for web platform

Web not support require module like as react native

We will just generate file path for web and support custom output file

Configuration:

{
  "assets": [
    { 
      "pathDir": "/public/home",
      "assetName": "homeIcons",
      "platform": "web", 
      "outputFile": "./gen/home-icons.ts"
    },
    { 
      "pathDir": "/public/cart",
      "assetName": "cartIcons",
      "platform": "web", 
      "outputFile": "./gen/cart-icons.ts"
    },
  ]
}