Proposal: Japanese Translation Integration for React Native Website Using Docusaurus i18n and React Docs' Sync Strategy

[Ucekay]

Description

Propose to add Japanese translation support to the React Native Web documentation using Docusaurus i18n features, following the proven translation workflow established by React documentation team.

What is the problem?

Currently, React Native Web documentation is only available in English, limiting accessibility for Japanese developers.

How can we address it?

1. Enable Docusaurus i18n support by modifying docusaurus.config.js:

i18n: {
  defaultLocale: 'en',
  locales: ['en', 'ja'],
}

2. Add language selector to the navbar:

{
  type: 'localeDropdown',
  position: 'right',
}

3. Implement a sustainable translation workflow, following React documentation's proven approach:

   • Fork react-native-website repository
   • Create a dedicated translation working branch (separate from main branch)
   • In the working branch:
     • Translate markdown files and place them directly in docs/ directory
     • This intentionally overwrites original English files to create conflicts when merging upstream (same approach as React docs)
     • Also place translated files in website/i18n/docusaurus-plugin-content-docs/version-0.76/
     • Keep translation work isolated from the main branch
   • Track upstream changes using automated bot in the working branch:
     • Bot creates weekly PRs that merge upstream changes
     • Bot commits conflict markers as-is, making changes visible in PR
     • Translators can easily see which files need updates through PR description
     • Conflicts in the PR show exactly where translations need to be updated
   • Periodically sync translated content from working branch to main branch using:
     • git checkout <working-branch-name> -- website/i18n/docusaurus-plugin-content-docs/version-0.76/
   • Submit PRs from the main branch to react-native-website repository with only i18n configuration changes
   • This branch separation follows React docs translation practice:
     • The working branch contains Japanese translations in docs/ to track changes
     • The main branch keeps docs/ unchanged to avoid showing translation differences in PRs to upstream
     • This ensures clean PRs to react-native-website with only i18n-related changes

4. Automated tracking system (based on React documentation translation workflow):

   • Weekly bot runs to merge upstream changes into translation branch
   • Bot merges upstream changes into docs/ directory where we intentionally placed translations
   • This creates conflicts between original English content and Japanese translations
   • Bot creates pull requests with conflict markers intact, showing:

     <<<<<<< HEAD (Current translation)
     Reactコンポーネントは...
     =======
     React components are...
     >>>>>>> upstream/main
     

   • Lists affected files in PR description
   • These conflicts serve as explicit markers of what needs to be updated
   • This proven approach from React documentation translation ensures:
     • No upstream changes are missed
     • Clear visibility of pending translation updates
     • Translators can focus on actual translation work
     • Consistent pressure to keep translations up-to-date

Why is it important?

1. Improves accessibility for Japanese developers
2. Centralizes documentation management in one repository
3. Provides a sustainable way to track and update translations
4. Leverages existing Docusaurus i18n support
5. Uses proven workflow from React documentation translation process
6. Automated tracking reduces manual work and human error

Who needs this?

• Japanese developers working with React Native Web
• Companies using React Native Web in Japan
• The broader React Native Web community interested in localization

When should this happen?

This can be implemented immediately as:

1. Docusaurus already supports i18n
2. The proposed workflow is based on proven practices from React documentation
3. The changes required to the main repository are minimal
4. Bot implementation can be based on existing React documentation translation solutions