DEV Community

Shaik Mukthahar
Shaik Mukthahar

Posted on

I Was Tired of Manually Managing Assets in React Native, So I Built assets-toolkit

#automation #mobile #reactnative #tools

I Built assets-toolkit Because Asset Management Shouldn't Be Manual

Every frontend project starts small.

A logo, A few icons, some images, maybe a custom font or an animation. Managing assets manually doesn't feel like a problem, until the project grows.

What was once a handful of files becomes hundreds of assets spread across multiple folders.

assets/
├── images/
├── icons/
├── svg/
├── fonts/
├── audio/
├── video/
└── lottie/
Enter fullscreen mode Exit fullscreen mode

Everything still looks organized.

But then the real work begins.

The Hidden Problem

Every time someone adds a new asset, someone also has to update the asset registry.

export const images = {
  logo: require("../assets/images/logo.png"),
  profile: require("../assets/images/profile.png"),
  home: require("../assets/images/home.png"),
};
Enter fullscreen mode Exit fullscreen mode

At first, this isn't a big deal.

But as the project grows:

  • Someone forgets to add the new asset.
  • Someone renames a file and breaks imports.
  • Someone accidentally commits duplicate images.
  • Someone adds filenames with spaces or special characters.
  • Merge conflicts become common because everyone edits the same asset file.

None of these problems are difficult.

They're just repetitive.

And repetitive work should be automated.

Why I Built assets-toolkit

After running into these problems across multiple projects, I decided to build a tool that would handle asset management for me.

Instead of manually maintaining asset files, I wanted a single command that could scan my project and generate everything automatically.

npx assets-toolkit generate
Enter fullscreen mode Exit fullscreen mode

That's exactly what assets-toolkit does.

It scans your assets, validates them, detects duplicates, and generates a clean, type-safe asset map that you can import throughout your application.

It works with:

  • React Native
  • Expo
  • React
  • Next.js
  • Vite

Before

Manually importing assets everywhere:

import logo from "../assets/images/logo.png";
import profile from "../assets/images/profile.png";
import searchIcon from "../assets/icons/search.svg";
Enter fullscreen mode Exit fullscreen mode

Or maintaining large asset registry files by hand:

export const images = {
  logo: require("../assets/images/logo.png"),
  profile: require("../assets/images/profile.png"),
  // ...hundreds more
};
Enter fullscreen mode Exit fullscreen mode

After

Generate everything automatically:

npx assets-toolkit generate
Enter fullscreen mode Exit fullscreen mode

Then simply use:

import { Assets } from "./generated-assets";

const logo = Assets.images.logo;
const profile = Assets.images.profile;
const searchIcon = Assets.svg.icons.search;
Enter fullscreen mode Exit fullscreen mode

No manual imports.

No handwritten asset registry.

No repetitive maintenance.

More Than Just Code Generation

While building the package, I realized asset management involves more than generating imports.

Projects also suffer from duplicate files, invalid filenames, oversized assets, and inconsistent folder structures.

That's why I added additional CLI commands.

Generate typed asset maps 

npx assets-toolkit generate
Enter fullscreen mode Exit fullscreen mode

Validate assets and detect common issues 

npx assets-toolkit doctor
Enter fullscreen mode Exit fullscreen mode

Automatically fix invalid filenames 

npx assets-toolkit doctor --fix
Enter fullscreen mode Exit fullscreen mode

View project asset reports 

npx assets-toolkit reports
Enter fullscreen mode Exit fullscreen mode

Clean generated files and cache 

npx assets-toolkit clean
Enter fullscreen mode Exit fullscreen mode

Features

  • 🚀 Generate type-safe asset maps
  • 📁 Preserve nested folder structures
  • 🔍 Detect duplicate assets
  • 🛡️ Validate filenames before they cause build issues
  • 📊 Generate useful asset reports
  • ♻️ Clean generated files with one command
  • 📦 Supports images, SVGs, fonts, audio, video, and Lottie files
  • ⚡ Works with React Native, Expo, React, Next.js, and Vite

Installation 

npm install --save-dev assets-toolkit
Enter fullscreen mode Exit fullscreen mode

Generate your asset map:

npx assets-toolkit generate
Enter fullscreen mode Exit fullscreen mode

Why I Open-Sourced It

This package started as a tool I built to solve my own workflow problems.

After using it across multiple projects, I realized many developers deal with the same repetitive asset management tasks.

Instead of solving the same problem over and over again, I decided to publish it as my first npm package so others could benefit from it too.

It's still in its early stages, and I'm actively improving it based on real-world feedback.

I'd Love Your Feedback

If you work with React Native, Expo, React, Next.js, or Vite, I'd love for you to try it out.

If you have ideas, feature requests, or find a bug, please let me know.

Your feedback will help shape future releases.

📦 NPM Package: https://www.npmjs.com/package/assets-toolkit

⭐ GitHub Repository: (Add your GitHub repository link here.)

Thanks for reading, and happy coding! 🚀

Top comments (0)