Reusable React Native components for Brightlayer UI applications
npm install @brightlayer-ui/react-native-components
!npm 
This is a library of re-usable React Native components for use in Brightlayer UI applications. For the most part, these components are meant to simplify building your application by providing drop-in components that implement common use cases in Brightlayer UI and eliminate the need for multiple teams to build their own components for these.
Refer to the Component Library API documentation site for a list of available components or see the repository documentation for each individual component.
To add Brightlayer UI React Native components to your project, follow the instructions for your project type below.
Install the package and all required peer dependencies:
``shell
npm install @brightlayer-ui/react-native-components
// or
yarn add @brightlayer-ui/react-native-components
`
> NOTE: This install command will install the package from NPM. If you are a Brightlayer UI developer working with components locally, you will want to follow the manual linking instructions - see below.
This library has a few dependencies that you will need to install in your project in order to work correctly. To install them, you can run the following command in your project root:
`shell`
npm install --save react-native-paper@^5.0.0 react-native-safe-area-context@^4.0.0 react-native-vector-icons@^9.0.0 @brightlayer-ui/react-native-vector-icons@^2.2.0 @react-native-vector-icons/material-design-icons@^12.0.1 @react-native-vector-icons/material-icons@^12.0.1
// or
yarn add react-native-paper@^5.0.0 react-native-safe-area-context@^4.0.0 react-native-vector-icons@^9.0.0 @brightlayer-ui/react-native-vector-icons@^2.2.0 @react-native-vector-icons/material-design-icons@^12.0.1 @react-native-vector-icons/material-icons@^12.0.1
> Note: If you use additional icon sets, install them as needed (e.g., @react-native-vector-icons/material-icons).
Install the package using Expo's package manager:
`sh`
yarn expo install @brightlayer-ui/react-native-components
You will also need to install the required peer dependencies:
`sh`
yarn expo install react-native-paper react-native-safe-area-context @expo/vector-icons @brightlayer-ui/react-native-vector-icons @react-native-vector-icons/material-design-icons @react-native-vector-icons/material-icons
> Note: To install @brightlayer-ui/react-native-vector-icons for Expo, please follow the instructions in the BLUI RN Vector Icons README.
To work with this library, first clone down the repository and install dependencies:
`
git clone https://github.com/etn-ccis/blui-react-native-component-library
cd react-native-component-library
The library can be built by running the following command. The resulting output will be in the /dist folder.
`
yarn build
This repository comes with three demo projects found within the /demos folder.
The first is a Storybook application that allows you to see the components in isolation and interact with their properties. The second is a Showcase project that shows a combination of components in the context of a realistic interface. The third project is our api documentation.
You can build, link, and start the demo applications in a single step by calling from the root directory either
`
yarn start:showcase
to start a project demo, or
`
yarn start:storybook
to start an interactive component documentation (will run on a device or a simulator), or
`
yarn start:storybook-api
to bring up a API documentation website (no interactive components).
See the documentation for information on using these components.
Version 8 utilizes React Native Paper v5 with Material Design v3 and is a major update with several changes. Most particularly, the Typography and IconWrapper` components have been removed and we added 5 new components. In previous versions we exported themed components, which have been removed in this version. Please follow the migration guide for more details.
Version 9 introduces support for ECMAScript Module (ESM) format. Ensure your project is configured to support ESM when upgrading to this version. Additionally, this version includes several bug fixes. Please follow the migration guide for more details.
This component library relies on react-native-vector-icons and @brightlayer-ui/react-native-vector-icons - these libraries must be installed in your project in order to use the Brightlayer UI components.
Additionally, if using @brightlayer-ui/icons-svg, SVGs must be transformed using react-native-svg-transformer. Follow the instructions on their readme for setting up or start your project using the Brightlayer UI CLI Templates and this will be configured for you automatically.