microsoft / microsoft/fluentui-react-native

Clarification on Fluent 2 cross-platform architecture and React Native codebase unification

Open
#3,968 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.4k
Forks
179
Avg merge
16h 17m
Merged PRs (30d)
30

Description

Platform
  • iOS
  • WEB
  • windows
  • android
Describe the feature that you would like added
Cross-platform approach and unified codebase for iOS and Android

First of all, thank you for maintaining such a high-quality and transparent documentation approach — Fluent 2 has become a great industry benchmark for systematization and clarity.

I’m currently designing a long-term design-system strategy for our product based on Fluent 2, and I’d like to understand what level of codebase unification and automation can be achieved using Fluent’s current architecture.

Our team is small (React developer + React Native developer + Web developer), so we are trying to evaluate whether Fluent 2 can serve as a foundation for a unified React / React Native workflow rather than maintaining separate iOS / Android / Web implementations.

Questions / clarifications:

  1. Is Fluent 2 designed so that React Native serves as a shared codebase for iOS and Android?

  2. Are there any existing processes for auto-generating native code (Swift / Kotlin) from a shared React Native implementation?

  3. Does Fluent React Native act as a true cross-platform layer or rather an adapter over separate native implementations ?

  4. Is there an internal or public description of how React and React Native libraries are expected to co-exist (e.g., React for Web + React Native for mobile)?

  5. Is Fluent’s long-term roadmap moving toward a single shared codebase (React Native for Web + Mobile)?

  6. Regarding design tokens: the current documentation for token naming and aliasing seems a bit outdated — are the Fluent 2 naming principles still valid for React Native branches, or is a refreshed guide planned?

Any architectural diagrams or references on this topic would be extremely helpful.

Thanks again for building such a robust foundation — we’re eager to align our internal system with Fluent’s principles and ensure our approach remains compatible with your roadmap.

Image
What component or utility would this be added to

Fluent UI React Native — core architecture & design-token synchronization

Have you discussed this feature with our team, and if so, who

Not yet directly with the Fluent team — this request summarizes several architectural hypotheses discussed within our product design and engineering teams.

I wanted to validate these assumptions with the Fluent React Native maintainers before we start building on top of Fluent 2, to ensure our strategy aligns with the system’s long-term direction.

Additional context/screenshots

We are currently designing a long-term multi-app ecosystem based on Fluent 2, where multiple internal services (WebView and React Native based) share a unified design system and token architecture.

Our primary goal is to understand the feasible level of cross-platform unification between React Native, iOS, Android and Web using Fluent 2.

Attaching below a short visual that shows our conceptual difference between multi-platform vs cross-platform design systems — this diagram helps explain our reasoning for pursuing a single shared codebase approach.

(You can add your earlier image with two diagrams — it’s perfectly clear and helpful for maintainers.)

We’re also interested in contributing back documentation improvements once we validate our approach with your guidance.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Fluent UI React Native core architecture and design-token synchronization entry points described in the issue, then review the existing React, React Native, and token documentation. Done means the cross-platform architecture, native-code generation expectations, library relationship, roadmap, and token naming guidance are clarified or linked in maintained documentation.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, react-native, typescript
Domain
documentation, mobile-dev
Issue type
Documentation
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.