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
📄 2. Initialize your package.json
npm init -y
🧪 3. Install dependencies
yarn add react react-native
yarn add -D typescript @types/react @types/react-native
🧠 4. Create your component
.
├── src/
│ └── vnd.tsx
├── index.ts
├── tsconfig.json
├── .gitignore
├── README.md
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;
index.ts:
export { default as Vnd } from "./src/vnd";
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>;
🛠 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"]
}
📂 6. Create .gitignore
# .gitignore
node_modules/
dist/
*.log
🧱 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"
}
📦 8. Build the package
yarn build
🚀 9. Publish to npm
Make sure you’re logged in:
npm login
Update the version:
npm version patch
Then publish:
npm publish
📥 10. Install in your React Native app
yarn add react-native-vietnam-currency
cd ios && pod install && cd ..
✅ Usage
import { Vnd, SeparatorType } from "react-native-vietnam-currency";
<Vnd value={1234567} separator={SeparatorType.Comma} />
Cheers. I just asked ChatGPT and follow these steps. Work well!!!
