DEV Community

Cover image for I just asked ChatGPT then I Built and Published My First React Native Component to npm - vietnam currency component
Tùng Cao
Tùng Cao

Posted on

I just asked ChatGPT then I Built and Published My First React Native Component to npm - vietnam currency component

Are you tired of inconsistent formatting when displaying Vietnamese Đồng (₫) in your React Native apps? I was too — so I created react-native-vietnam-currency, a lightweight and customizable component for formatting VND values with optional separators (dot or comma), unit styling, and compact layout.

In this post, I’ll walk you through how I:

  • Built a reusable component using TypeScript and React Native
  • Handled formatting numbers without relying on Intl
  • Set up TypeScript declaration files
  • Structured the project with dist/ output
  • Published it to npm and made it easy to install and use

Whether you’re new to publishing packages or need a localized currency formatter for Vietnam, this guide (and component!) will help you get there fast.

🧱 1. Create your project folder

mkdir react-native-vietnam-currency cd react-native-vietnam-currency git init
Enter fullscreen mode Exit fullscreen mode

📄 2. Initialize your package.json

npm init -y
Enter fullscreen mode Exit fullscreen mode

🧪 3. Install dependencies

yarn add react react-native yarn add -D typescript @types/react @types/react-native
Enter fullscreen mode Exit fullscreen mode

🧠 4. Create your component

. ├── src/ │ └── vnd.tsx ├── index.ts ├── tsconfig.json ├── .gitignore ├── README.md
Enter fullscreen mode Exit fullscreen mode

src/vnd.tsx:

import React, { useMemo } from "react"; import { Text, View, TextStyle, ViewStyle } from "react-native"; export enum SeparatorType { Dot = ".", Comma = ",", } export interface VndProps { value: number | string; unit?: string; style?: TextStyle; unitStyle?: TextStyle; containerStyle?: ViewStyle; separator?: SeparatorType; } const formatNumber = (value: number, separator: SeparatorType): string => { const raw = value.toString(); return raw.replace(/\B(?=(\d{3})+(?!\d))/g, separator); }; const Vnd: React.FC<VndProps> = ({ value, unit = "₫", style, unitStyle, containerStyle, separator = SeparatorType.Dot, }) => { const formatted = useMemo(() => { const numeric = typeof value === "string" ? parseInt(value.replace(/\D/g, ""), 10) : value; if (isNaN(numeric)) return "0"; return formatNumber(numeric, separator); }, [value, separator]); return ( <View style={[{ flexDirection: "row", alignItems: "flex-end" }, containerStyle]} > <Text style={[style]}>{formatted}</Text>  <Text style={[{ fontSize: 10 }, unitStyle]}>{unit}</Text>  </View>  ); }; export default Vnd;
Enter fullscreen mode Exit fullscreen mode

index.ts:

export { default as Vnd } from "./src/vnd";
Enter fullscreen mode Exit fullscreen mode

index.d.ts

import React from "react"; import { TextStyle, ViewStyle } from "react-native"; export enum SeparatorType { Dot = ".", Comma = ",", } export interface VndProps { value: number | string; unit?: string; style?: TextStyle; unitStyle?: TextStyle; containerStyle?: ViewStyle; separator?: SeparatorType; } export declare const Vnd: React.FC<VndProps>;
Enter fullscreen mode Exit fullscreen mode

🛠 5. Add tsconfig.json

{ "compilerOptions": { "outDir": "dist", "declaration": true, "emitDeclarationOnly": false, "module": "ESNext", "target": "ES6", "jsx": "react-native", "esModuleInterop": true, "moduleResolution": "node", "strict": true, "skipLibCheck": true }, "include": ["src"] }
Enter fullscreen mode Exit fullscreen mode

📂 6. Create .gitignore

# .gitignore node_modules/ dist/ *.log
Enter fullscreen mode Exit fullscreen mode

🧱 7. Update package.json

{ "name": "react-native-vietnam-currency", "version": "1.0.7", "main": "dist/vnd.js", "types": "dist/vnd.d.ts", "files": [ "dist", "README.md" ], "keywords": [ "react-native", "vietnam", "currency", "₫", "vnd", "money", "format" ], "scripts": { "build": "tsc" }, "peerDependencies": { "react": ">=17.0.0", "react-native": ">=0.64.0" }, "license": "MIT", "devDependencies": { "@types/react": "^19.1.8", "@types/react-native": "^0.73.0", "typescript": "^5.8.3" }, "author": "tungcao" }
Enter fullscreen mode Exit fullscreen mode

📦 8. Build the package

yarn build
Enter fullscreen mode Exit fullscreen mode

🚀 9. Publish to npm
Make sure you’re logged in:

npm login
Enter fullscreen mode Exit fullscreen mode

Update the version:

npm version patch
Enter fullscreen mode Exit fullscreen mode

Then publish:

npm publish
Enter fullscreen mode Exit fullscreen mode

📥 10. Install in your React Native app

yarn add react-native-vietnam-currency
Enter fullscreen mode Exit fullscreen mode 
cd ios && pod install && cd ..
Enter fullscreen mode Exit fullscreen mode

✅ Usage

import { Vnd, SeparatorType } from "react-native-vietnam-currency"; <Vnd value={1234567} separator={SeparatorType.Comma} />
Enter fullscreen mode Exit fullscreen mode

Cheers. I just asked ChatGPT and follow these steps. Work well!!!

Top comments (0)