@umituz/react-native-appstore-metadata

App Store metadata management package with multi-language support, powered by @umituz/react-native-google-translate.

Features

• ✅ Metadata Translation: Translate app store metadata to 40+ languages
• ✅ Field-by-field Translation: Translate title, subtitle, keywords, description separately
• ✅ Progress Tracking: Real-time progress updates during translation
• ✅ Type-Safe: Full TypeScript support
• ✅ Google Translate Integration: Uses @umituz/react-native-google-translate
• ✅ Rate Limiting: Built-in API rate limiting
• ✅ Error Handling: Graceful error handling with fallbacks

Features

• ✅ Field-by-field translation: Translate each metadata field individually
• ✅ 40+ languages: Support for 40+ locales including Turkish, German, French, etc.
• ✅ Marketing-adapted: Maintains marketing tone and cultural appropriateness
• ✅ Provider-agnostic: Easy to swap translation providers
• ✅ Progress tracking: Real-time progress callbacks during translation
• ✅ Type-safe: Full TypeScript support
• ✅ React Native ready: Optimized for React Native applications

Installation

npm install @umituz/react-native-appstore-metadata @umituz/react-native-google-translate

Supported Languages

• Arabic (Saudi Arabia)
• Bulgarian
• Chinese (Simplified & Traditional)
• Czech
• Danish
• Dutch
• English (Australia, Canada, UK, US)
• Finnish
• French (Canada, France)
• German
• Greek
• Hindi
• Hungarian
• Indonesian
• Italian
• Japanese
• Korean
• Malay
• Norwegian
• Polish
• Portuguese (Brazil, Portugal)
• Romanian
• Russian
• Slovak
• Slovenian
• Spanish (Spain, Mexico)
• Swedish
• Thai
• Tagalog
• Turkish
• Ukrainian
• Vietnamese

Usage

Basic Usage

import { useAppStoreTranslator } from '@umituz/react-native-appstore-metadata/presentation';

function MyComponent() {
  const { translateMetadata, isTranslating, progress } = useAppStoreTranslator({
    locales: ['tr-TR', 'de-DE', 'fr-FR']
  });

  const handleTranslate = async () => {
    const metadata = {
      title: 'My Amazing App',
      subtitle: 'Do amazing things',
      keywords: ['productivity', 'tools', 'awesome'],
      description: 'This app does amazing stuff for you.',
      promotionalText: 'Download now!'
    };

    const translated = await translateMetadata(metadata, (progress) => {
      console.log(`Translating ${progress.field} to ${progress.locale}`);
    });

    console.log(translated['tr-TR'].title); // "Harikalar Diyarı Uygulamam"
  };

  return (
    <button onPress={handleTranslate} disabled={isTranslating}>
      {isTranslating ? 'Translating...' : 'Translate Metadata'}
    </button>
  );
}

Advanced Usage with Custom Provider

import { useAppStoreTranslator } from '@umituz/react-native-appstore-metadata/presentation';
import { TranslationService } from '@umituz/react-native-appstore-translator/infrastructure';
import { myCustomProvider } from './my-custom-provider';

function MyComponent() {
  const { translateMetadata } = useAppStoreTranslator({
    provider: myCustomProvider,
    locales: ['ja-JP', 'ko-KR', 'zh-CN']
  });

  // ... rest of the code
}

Type-Safe Usage

import type {
  AppStoreMetadata,
  TranslatedMetadata
} from '@umituz/react-native-appstore-translator/domain';

const metadata: AppStoreMetadata = {
  title: 'My App',
  subtitle: 'Best app ever',
  keywords: ['awesome', 'productivity'],
  description: 'Long description here...',
  promotionalText: 'Download now!'
};

// After translation
const translated: TranslatedMetadata = await translateMetadata(metadata);
console.log(translated['tr-TR'].title);

API Reference

useAppStoreTranslator

Main React hook for translation.

Options

interface UseAppStoreTranslatorOptions {
  provider?: ITranslationProvider;  // Default: GoogleTranslateProvider
  locales?: string[];               // Default: All supported locales
}

Return Value

interface UseAppStoreTranslatorReturn {
  translateMetadata: (
    metadata: AppStoreMetadata,
    onProgress?: (progress: TranslationProgress) => void
  ) => Promise<TranslatedMetadata>;
  isTranslating: boolean;
  progress: TranslationProgress[];
  error: Error | null;
}

AppStoreMetadata

interface AppStoreMetadata {
  readonly title: string;
  readonly subtitle?: string;
  readonly keywords?: string[];
  readonly description?: string;
  readonly promotionalText?: string;
}

TranslationProgress

interface TranslationProgress {
  field: string;
  locale: string;
  status: 'pending' | 'translating' | 'completed' | 'error';
  progress?: number;
  error?: Error;
}

Architecture

This package follows Domain-Driven Design (DDD) principles and depends on:

• @umituz/react-native-google-translate: For all translation operations
• Clean separation between metadata management and translation logic

src/
├── domain/           # Core business logic and types
├── infrastructure/   # Locale mapping, constants, metadata translation service
└── presentation/     # React hooks

Subpath Imports

This package supports subpath imports for better tree-shaking:

// Import only what you need
import { useAppStoreTranslator } from '@umituz/react-native-appstore-metadata/presentation';
import type { AppStoreMetadata } from '@umituz/react-native-appstore-metadata/domain';
import { googleTranslateProvider } from '@umituz/react-native-appstore-translator/infrastructure';

License

MIT

Author

umituz

Repository

https://github.com/umituz/react-native-appstore-metadata