DEV Community: Tùng Cao

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

Tùng Cao — Tue, 24 Jun 2025 09:11:34 +0000

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!!!

Optimizing Project Structure for React Native: Scalability and Maintainability

Tùng Cao — Wed, 24 Jul 2024 06:17:16 +0000

As our projects grow larger and more complex, maintaining a clear and manageable codebase becomes crucial. After facing challenges with deciphering numerous hooks and components in a multi-year enterprise project, we refined our approach for newer projects. Here’s a structure that has significantly improved our workflow, making it easier for developers to understand and contribute to the codebase.

Organized Project Structure

src
|
|_ 📁components
|  |_ 📁UI
|  |  |_ 📄PrimaryButton.js
|  |  |_ 📄SecondaryButton.js
|  |_ 📁Layout
|     |_ 📄Header.js
|     |_ 📄Footer.js
|_ 📁features
|  |_ 📁Auth
|  |  |_ 📄LoginScreen.js
|  |  |_ 📄AuthContext.js
|  |  |_ 📄useAuth.js
|  |  |_ 📄AuthApi.js
|  |_ 📁Event
|     |_ 📄EventScreen.js
|     |_ 📄EventContext.js
|     |_ 📄useEvent.js
|     |_ 📄EventApi.js
|  |_ 📁Cards
|     |_ 📄MainCards.js
|_ 📁assets
|  |_ 📁images
|  |  |_ 📄logo.png
|  |  |_ 📄background.jpg
|  |_ 📁styles
|     |_ 📄global.js
|     |_ 📄theme.js
|_ 📁utils
|  |_ 📄helperFunctions.js
|  |_ 📄date.js
|_ 📁hooks
|  |_ 📄useWindowDimensions.js
|  |_ 📄useLocalStorage.js
|_ 📄App.js
|_ 📄index.js

Key Principles

Group by Feature: Organize files by features or modules. This helps in keeping related files together, making it easier to navigate and manage the project.
Shared Components: Maintain separate folders for reusable UI components and layout components. These can even be moved to a separate repository or package in a monorepo for large projects.
Utility Hooks: Keep a top-level folder for utility hooks that are used across multiple modules. This centralizes common logic and promotes reusability.

Benefits

Ease of Understanding: New developers can quickly grasp the structure and start contributing. By focusing on a single module, they can understand the responsibilities and make changes without getting overwhelmed.
Scalability: Logical separations between modules allow for better manageability as the project grows. It’s easier to break down changes required at a higher cognitive level when you can see the different logical separations of responsibility between modules.
Maintainability: Clear organization reduces the time spent deciphering the purpose of different hooks and components. This leads to more ef ficient debugging and feature additions.

This approach has significantly improved our development workflow and can be adapted to fit the specific needs of your React Native project. Give it a try and see how it enhances your team’s productivity and code quality!

Feel free to tweak the text to better fit your style or add any additional insights you might have!

-- ChatGPT helped me complete this post.

react-native rnfirebase Firebase GoogleService-Info.plist with different build schemes, environment

Tùng Cao — Tue, 20 Jul 2021 07:54:21 +0000

When you integration your react-native app with firebase (rnfirebase). You using Xcode schemes for develop, production. This post will introduce you how Firebase google plist work with different build schemes.

Step 1: Copy plist file to app directory. Look like:
ios

AppName (your app name) -- Firebase --- Dev ---- GoogleService-Info.plist --- Prod ---- GoogleService-Info.plist

Step 2: Open XCode, create new Groups with name "Firebase" and "Dev", "Prod" inside.

Step 3: Right click Dev and Prod, click "add files to ..".

Uncheck "Copy items if needed"
Uncheck "Add to target"

Step 4: In the Xcode project navigator, select the app target. Switch to the Build Phases tab at the top, then add a New Run Script Phase. Name the phase “Setup Firebase Environment GoogleService-Info.plist”
And place it before the “Copy Bundle Resources” step.

Step 5: Implement a shell script that will copy the appropriate GoogleService-Info.plist into the app bundle based on the build configuration. Copy and paste the following shell script into the run script phase you just created:



# Name of the resource we're selectively copying
GOOGLESERVICE_INFO_PLIST=GoogleService-Info.plist

# Get references to dev and prod versions of the GoogleService-Info.plist
# NOTE: These should only live on the file system and should NOT be part of the target (since we'll be adding them to the target manually)
GOOGLESERVICE_INFO_DEV=${PROJECT_DIR}/${TARGET_NAME}/Firebase/Dev/${GOOGLESERVICE_INFO_PLIST}
GOOGLESERVICE_INFO_PROD=${PROJECT_DIR}/${TARGET_NAME}/Firebase/Prod/${GOOGLESERVICE_INFO_PLIST}

# Make sure the dev version of GoogleService-Info.plist exists
echo "Looking for ${GOOGLESERVICE_INFO_PLIST} in ${GOOGLESERVICE_INFO_DEV}"
if [ ! -f $GOOGLESERVICE_INFO_DEV ]
then
    echo "No Development GoogleService-Info.plist found. Please ensure it's in the proper directory."
    exit 1
fi

# Make sure the prod version of GoogleService-Info.plist exists
echo "Looking for ${GOOGLESERVICE_INFO_PLIST} in ${GOOGLESERVICE_INFO_PROD}"
if [ ! -f $GOOGLESERVICE_INFO_PROD ]
then
    echo "No Production GoogleService-Info.plist found. Please ensure it's in the proper directory."
    exit 1
fi

# Get a reference to the destination location for the GoogleService-Info.plist
PLIST_DESTINATION=${BUILT_PRODUCTS_DIR}/${PRODUCT_NAME}.app
echo "Will copy ${GOOGLESERVICE_INFO_PLIST} to final destination: ${PLIST_DESTINATION}"

# Copy over the prod GoogleService-Info.plist for Release builds
if [ "${CONFIGURATION}" == "Release" ]
then
    echo "Using ${GOOGLESERVICE_INFO_PROD}"
    cp "${GOOGLESERVICE_INFO_PROD}" "${PLIST_DESTINATION}"
else
    echo "Using ${GOOGLESERVICE_INFO_DEV}"
    cp "${GOOGLESERVICE_INFO_DEV}" "${PLIST_DESTINATION}"
fi

It done!