{"id":13681652,"url":"https://github.com/microsoft/fluentui-react-native","last_synced_at":"2025-05-13T18:11:05.932Z","repository":{"id":37050321,"uuid":"196270726","full_name":"microsoft/fluentui-react-native","owner":"microsoft","description":"A react-native component library that implements the Fluent Design System.","archived":false,"fork":false,"pushed_at":"2025-05-01T14:00:02.000Z","size":133360,"stargazers_count":1348,"open_issues_count":99,"forks_count":163,"subscribers_count":43,"default_branch":"main","last_synced_at":"2025-05-13T17:03:57.576Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://developer.microsoft.com/fluentui","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/microsoft.png","metadata":{"files":{"readme":"README.md","changelog":"change/@fluentui-react-native-tester-win32-4699c0c2-cb30-412c-89f1-ddc946cf3ca1.json","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-07-10T20:27:19.000Z","updated_at":"2025-05-10T08:05:47.000Z","dependencies_parsed_at":"2022-07-07T15:30:43.141Z","dependency_job_id":"bbf086fa-2ba0-47a6-b96e-57ffec999527","html_url":"https://github.com/microsoft/fluentui-react-native","commit_stats":{"total_commits":4439,"total_committers":76,"mean_commits":58.4078947368421,"dds":0.7278666366298716,"last_synced_commit":"c14156c2221a7147f9d148f2ef71a775779998ee"},"previous_names":["microsoft/ui-fabric-react-native"],"tags_count":15826,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Ffluentui-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Ffluentui-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Ffluentui-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Ffluentui-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/microsoft","download_url":"https://codeload.github.com/microsoft/fluentui-react-native/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254000854,"owners_count":21997442,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T13:01:33.792Z","updated_at":"2025-05-13T18:11:05.908Z","avatar_url":"https://github.com/microsoft.png","language":"TypeScript","funding_links":[],"categories":["HarmonyOS","TypeScript"],"sub_categories":["Windows Manager"],"readme":"# FluentUI React Native\n\n[![npm version](https://badge.fury.io/js/%40fluentui%2Freact-native.svg)](https://badge.fury.io/js/%40fluentui%2Freact-native) [![Build Status](https://dev.azure.com/ms/ui-fabric-react-native/_apis/build/status/PR?branchName=main)](https://dev.azure.com/ms/ui-fabric-react-native/_build/latest?definitionId=226\u0026branchName=main) [![Build Status](https://dev.azure.com/ms/ui-fabric-react-native/_apis/build/status/Publish?branchName=main)](https://dev.azure.com/ms/ui-fabric-react-native/_build/latest?definitionId=229\u0026branchName=main)\n\nFluentUI React Native is a javascript component library that provides developers with controls that are part of the [Fluent Design System](https://www.microsoft.com/design/fluent/). These controls are built on [React Native](https://reactnative.dev/) and fully customizable.\n\nFluentUI React Native is still in the alpha stages of development for both the components and the repo. We encourage anyone who is interested in getting an early glimpse of our plans to download and use our components, but please note that you may hit bumps along the way. Please leave us feedback or file issues if you run into bumps, and we will continue to improve the quality of the repo.\n\nDevelopment status on each platform:\n| Windows | macOS | iOS | Android |\n|---------------------|---------------------|-------------|-------------|\n| Alpha (in progress) | Alpha (in progress) | Alpha (in progress) | Alpha (in progress) |\n\n## Getting Started\n\nIf you have an existing React Native project, it's easy to begin using FluentUI React Native. If you need to setup a new React Native project, please see the [React Native Windows Getting Started documentation](https://microsoft.github.io/react-native-windows/docs/getting-started).\n\n### Prerequisites\n\n- [Standard React Native dependencies](https://microsoft.github.io/react-native-windows/docs/rnw-dependencies#manual-setup)\n- [Node.js](https://nodejs.org/en/download/package-manager)\n- [Setting up your React Native Development Environment](https://reactnative.dev/docs/environment-setup)\n\n### Create New React Native project (if needed)\n\n1. Follow the instructions on the [React Native Windows Getting Started documentation](https://microsoft.github.io/react-native-windows/docs/getting-started) to create a React Native project.\n\n2. Navigate to the root folder of your project, and use npm to install the package:\n\n```\n npm i @fluentui/react-native\n```\n\n3. After successful installation, you can test the package by importing components at the top of your app's entry file, e.g. `App.js`:\n\n```jsx\nimport { Checkbox } from '@fluentui/react-native';\n```\n\n4. After importing the @fluentui/react-native package, you can use components such as `Text` and `Checkbox` in your JSX.\n\n```jsx\n// In App.js in a new project\nimport React from 'react';\nimport { View, Text } from 'react-native';\nimport { CheckboxV1 as Checkbox } from '@fluentui/react-native';\nfunction HelloWorldApp() {\n  return (\n    \u003cView\n      style={{\n        flex: 1,\n        justifyContent: 'center',\n        alignItems: 'center',\n      }}\n    \u003e\n      \u003cText\u003eHello, world!\u003c/Text\u003e\n      \u003cCheckbox label=\"Hello World Checkbox\" /\u003e\n    \u003c/View\u003e\n  );\n}\nexport default HelloWorldApp;\n```\n\nIf you run into an error that says `pragma and pragmaFrag cannot be set when runtime is automatic`, you can try [switching to classic runtime](https://babeljs.io/docs/en/babel-preset-react/#both-runtimes).\n\n## Documentation\n\n### Components and Controls\n\nOur component documentation can be found in SPEC.md files for each component. The current list can be found in our [Wiki's sidebar](https://github.com/microsoft/fluentui-react-native/wiki). They will be uploaded to a website at a future time.\n\n#### Expanding Component documentation\n\nOur SPEC.md files should reflect the current state of controls that have established the _v1_ set of properties on any one platform.\n\nSince the FluentUI React Native controls are cross-platform, but represented by a single page, it's important to distinguish platform differences and limitations. Examples include:\n\n- If the component is not available on all supported platforms.\n- If the component has properties not available on all supported platforms.\n- If the component has limited support for a given property on any supported platforms.\n- If the component has distinguishable behavior on a supported platform that must be minded while used.\n\n### Theming framework\n\nDocumentation for Theming can be found in our docs file, or for more in depth documentation, along side the implementation.\n\n- [Theming Overview](./docs/pages/Theming/Basics.md)\n- [StyleSheets](./docs/pages/Theming/ThemedStylesheet.md)\n- [Customizing Theme Settings](./docs/pages/Theming/CustomTheme.md)\n- [Theme Reference](./packages/framework/theme/README.md)\n- [Tokens](./packages/framework/use-tokens/README.md)\n- [Slots](./packages/framework/use-slots/README.md)\n- [Customize and Compose](./packages/framework/composition/README.md)\n\n## Developing in the repo\n\n### Yarn + Lage\n\nThis repo is set up as a monorepo using Yarn workspaces. To install yarn, please follow instructions in the [Yarn documentation](https://classic.yarnpkg.com/en/docs/install/).\n\nFor running tasks the repo has switched to using [Lage](https://github.com/microsoft/lage) for task running. The primary tasks that can be executed at the root are:\n\n- `yarn build` - does the typescript build for all packages in the repository\n- `yarn test` - will build, lint, and run any applicable tests on all packages in the repo\n- `yarn bundle` - will bundle all packages in the repo\n- `yarn buildci` - will build, lint, run tests, and bundle everything in the repo\n\nNote that Lage uses caching to avoid redundant steps and has very minimal output. To avoid caching add `--no-cache` as a command line argument. Similarly adding `--verbose` will give more detailed output.\n\n### Setup your development environment\n\nTo start developing in the repository you can:\n\n1. `git clone https://github.com/microsoft/fluentui-react-native.git`\n1. `cd fluentui-react-native`\n1. `yarn`\n1. `yarn build`\n\nAfter a successful yarn build, you can explore FluentUI Tester, our demo application to play with each of the controls. To run FluentUI Tester, please follow instructions in the [FluentUI Tester readme](./apps/fluent-tester/README.md).\n\nNote: If your repo is located on either your Desktop or Documents folder, you may encounter the error: \"Watchman error... Operation not permitted\". Clone it in a different directory to avoid Watchman permission issues.\n\n### Prettier\n\nThis repo is set up to run [Prettier](https://prettier.io/). To run Prettier in fix mode on the repo, run `yarn prettier-fix` at the root of the Repo.\n\nIf you are using [Visual Studio Code as your editor, you can configure it to run Prettier on save. Prettier is a recommended extension for the repo. You can configure it to run by:\n\n1. Installing the Prettier extension for VSCode\n2. Going to Settings \u003e Text Editor \u003e Formatting \u003e Check Format On Save\n\n## Contributing\n\nPlease visit our [contribution guide](./CONTRIBUTING.md) for more information on contributing to this repo.\n\nThis project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).\nFor more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or\ncontact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrosoft%2Ffluentui-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicrosoft%2Ffluentui-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrosoft%2Ffluentui-react-native/lists"}