Skip to content

Example: Expo / React Native (beta) #4

Open

Description

@sapatmohit

Add an Expo (React Native) example localized with npx babelize translate. The CLI wraps text in i18next calls and writes bundled locale files plus an i18n.ts that picks the device language.

  • Folder: expo
  • Stack: Expo with Expo Router and TypeScript (npx create-expo-app@latest). The landing page becomes a single screen with the same copy: hero, features, signup, footer.
  • Babelize support: beta (React Native). Say so in the README.
  • Also check: npx expo export bundles, the app follows the device language, and the switcher works. Translating the app name or permission prompts isn't done by Babelize; mention it in the README instead of faking it. See the blog's React Native i18n guide.

How every example is built

Follow nextjs-app-router: it's the reference for structure, design and commits.

  1. Before. Build the Tasklane landing page in this stack with hardcoded English text, the way an app looks before localization. Use the same copy and design as nextjs-app-router (its app/globals.css and components): header, hero with the product preview, three feature cards, signup panel, footer. Make sure it builds and runs. Commit: <folder>: add the Tasklane app before localization.
  2. Babelize run. From the example's folder, with a clean working tree, run:
    npx babelize translate --to fr,de,ja
    Commit the output unedited: <folder>: run npx babelize translate --to fr,de,ja. In the commit body, give the CLI version and the provider: signed in without a key (Babelize hosted), or your own LLM key. If some keys fail, re-run until they're done and say how many runs it took.
  3. Review fixes. Build and run it, then fix what a reviewer would catch. Typically: keep the brand name "Tasklane" untranslated, use one plural message instead of a count === 1 ? … : … ternary, add a language switcher, and correct the translations. For identical English strings, the corrected ones in nextjs-app-router/public/locales/*.json can be reused. Commit: <folder>: review fixes after the Babelize run, with a bullet list of what you fixed.
  4. README. Add <folder>/README.md in the style of nextjs-app-router/README.md: what Babelize changed and what was fixed in review (each linking its commit), and how to run it. Add a row to the table in the root README.

Done when

  • The three commits above, in order, and the README
  • It builds, and renders in en, fr, de and ja with a working language switcher
  • Any CLI bug you hit is reported on the issue (what you ran, what happened)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requesthelp wantedExtra attention is needed

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions