HeroUI Native Example

The Lingui configuration defines how localization catalogs are generated, which locales are supported, and which files are included or excluded from translation.

Key configuration properties:

• sourceLocale: The primary language of the codebase (e.g., en).
• locales: An array of supported locale identifiers (e.g., ['en', 'ar', 'he']).
• fallbackLocales: Defines the default locale to use when a translation is missing. Use the default key to specify the fallback (e.g., { default: 'en' }).
• format: Specifies the output format for message files. In this project, it uses @lingui/format-po with lineNumbers: false.
• catalogs: An array of catalog objects defining where messages are stored and which source files to scan.

Catalog Object Properties:

• path: The template path for message files, using {locale} as a placeholder (e.g., <rootDir>/src/locales/{locale}/messages).
• include: Glob patterns for source files to be scanned for translatable strings.
• exclude: Glob patterns for files or directories to ignore during scanning. Note that in this project, showcase components are intentionally excluded to focus on component RTL previewing rather than marketing copy translation.

import { defineConfig } from "@lingui/cli";
import { formatter } from "@lingui/format-po";

export default defineConfig({
  sourceLocale: "en",
  locales: ["en", "ar", "he"],
  fallbackLocales: {
    default: "en",
  },
  format: formatter({ lineNumbers: false }),
  catalogs: [
    {
      path: "<rootDir>/src/locales/{locale}/messages",
      include: ["<rootDir>/src"],
      exclude: [
        "<rootDir>/src/components/showcases",
        "<rootDir>/src/app/(home)/showcases",
        "<rootDir>/src/locales",
      ],
    },
  ],
});

The application uses a centralized localization system where layout direction (LTR vs RTL) is derived directly from the selected locale.

• APP_LOCALES: The complete list of supported locale codes (e.g., 'en', 'ar', 'he').
• RTL_LOCALES: A subset of APP_LOCALES that triggers right-to-left layout direction.
• APP_LOCALE_LABELS: A mapping of locale codes to their endonym display names (e.g., 'ar': 'العربية').
• DEFAULT_LOCALE: The locale used on the first launch (defaults to 'en').

When adding a new language, ensure that if it is a right-to-left language, it is added to both APP_LOCALES and RTL_LOCALES to ensure correct direction resolution.

export const RTL_LOCALES = ['ar', 'he'] as const;
export const APP_LOCALES = ['en', 'ar', 'he'] as const;
export const DEFAULT_LOCALE: AppLocale = 'en';

export const APP_LOCALE_LABELS: Record<AppLocale, string> = {
  en: 'English',
  ar: 'العربية',
  he: 'עברית',
};

You can create a multi-step flow within a BottomSheet by using the detached prop on BottomSheet.Content. To achieve smooth transitions between steps (e.g., changing content, headers, or footers), wrap your layout sections in Animated.View from react-native-reanimated and provide a layout prop (such as LinearTransition.springify()).

Key components used in this pattern:

• BottomSheet.Trigger: Used to open the sheet (often via asChild).
• BottomSheet.Portal: Required to render the sheet content.
• BottomSheet.Overlay: The background dimming layer.
• BottomSheet.Content: The main container. Use the detached prop to allow the sheet to float above the bottom inset.
• BottomSheet.Title and BottomSheet.Description: Standard text components for the sheet content.
• BottomSheet.Close: A built-in component to handle closing the sheet.

To manage steps, maintain a local state for the current step and conditionally render different UI elements (Header, Content, Footer) based on that state. Using entering and exiting animations (like FadeIn and FadeOut) on the step-specific views provides a polished feel during transitions.

<BottomSheet isOpen={isOpen} onOpenChange={handleOpenChange}>
  <BottomSheet.Trigger asChild>
    <Button>Open Multi-step</Button>
  </BottomSheet.Trigger>

  <BottomSheet.Portal>
    <BottomSheet.Overlay />
    <BottomSheet.Content
      detached
      bottomInset={12}
      className="mx-4"
      backgroundClassName="rounded-4xl"
    >
      {/* Header Section */}
      <Animated.View layout={LinearTransition.springify()}>
        <BottomSheet.Title>{step === 1 ? 'Step 1' : 'Step 2'}</BottomSheet.Title>
        <BottomSheet.Close />
      </Animated.View>

      {/* Content Section */}
      <Animated.View layout={LinearTransition.springify()}>
        {step === 1 && (
          <Animated.View entering={FadeIn} exiting={FadeOut}>
            <BottomSheet.Description>Content for step 1</BottomSheet.Description>
          </Animated.View>
        )}
        {step === 2 && (
          <Animated.View entering={FadeIn} exiting={FadeOut}>
            <BottomSheet.Description>Content for step 2</BottomSheet.Description>
          </Animated.View>
        )}
      </Animated.View>

      {/* Footer Section */}
      <Animated.View layout={LinearTransition.springify()}>
        <Button onPress={() => setStep(2)}>Next</Button>
      </Animated.View>
    </BottomSheet.Content>
  </BottomSheet.Portal>
</BottomSheet>

The UsageVariantsSelect component is a specialized implementation of the Select component designed to handle UsageVariant data types. It manages the selection of different usage variants (like themes or modes) and automatically handles localization using Lingui descriptors.

When a value is selected, it triggers the setVariant callback and attempts to scroll the provided listRef to the selected item's index.

Props

• data: An array of UsageVariant objects.
• variant: The currently active UsageVariant.
• setVariant: A function to update the active variant.
• listRef: A React.RefObject pointing to a FlatList of UsageVariant items, used for auto-scrolling after selection.

import { UsageVariantsSelect } from './components/component-presentation/usage-variants-select';

// Usage within a parent component:
<UsageVariantsSelect
  data={variantData}
  variant={currentVariant}
  setVariant={setCurrentVariant}
  listRef={flatListRef}
/>