FluentUI React Native is a javascript component library that provides developers with controls that are part of the Fluent Design System. These controls are built on React Native and fully customizable.
FluentUI 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.
Development status on each platform:
Windows | macOS | iOS | Android |
---|---|---|---|
Alpha (in progress) | Alpha (in progress) | Alpha (in progress) | Coming Soon |
If 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.
-
Follow the instructions on the React Native Windows Getting Started documentation to create a React Native project.
-
Navigate to the root folder of your project, and use npm to install the package:
npm i @fluentui/react-native
- After successful installation, you can test the package by importing components at the top of your app's entry file, e.g.
App.js
:
import { Checkbox } from '@fluentui/react-native';
- After importing the @fluentui/react-native package, you can use components such as
Text
andCheckbox
in your JSX.
// In App.js in a new project
import React from 'react';
import { View, Text } from 'react-native';
import { Checkbox } from '@fluentui/react-native';
function HelloWorldApp() {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}
>
<Text>Hello, world!</Text>
<Checkbox label="Hello World Checkbox" />
</View>
);
}
export default HelloWorldApp;
Our component documentation is hosted on the FluentUI documentation.
The FluentUI website is built out of the FluentUI repository. React-Native components and controls are documented in a 'cross' (cross-platform) directory in each component page directory, e.g. Button 'cross' directory. The FluentUI website can be run locally to verify changes, and should reflect the current state of controls that have established the v1 set of properties on any one platform.
Since 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:
- If the component is not available on all supported platforms.
- If the component has properties not available on all supported platforms.
- If the component has limited support for a given property on any supported platforms.
- If the component has distinguishable behavior on a supported platform that must be minded while used.
Our FluentUI framework documentation is found in this repository alongside the implementation.
- Theming Overview
- StyleSheets
- Customizing Theme Settings
- Theme Registry
- Tokens
- Settings and Slots
- Compose and Composable
This repo is set up as a monorepo using Yarn workspaces. To install yarn, please follow instructions in the Yarn documentation.
For running tasks the repo has switched to using Lage for task running. The primary tasks that can be executed at the root are:
yarn build
- does the typescript build for all packages in the repositoryyarn test
- will build, lint, and run any applicable tests on all packages in the repoyarn bundle
- will bundle all packages in the repoyarn buildci
- will build, lint, run tests, and bundle everything in the repo
Note 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.
To start developing in the repository you can:
git clone https://github.com/microsoft/fluentui-react-native.git
cd fluentui-react-native
yarn
yarn build
After 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.
This repo manages semantic versioning and publishing using Beachball. When contributing, make sure to run the following before making a pull request:
yarn change
will take you through a command line wizard to generate change files- Make sure to commit and push the newly generated change file
This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.
When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.