PX Blue React Native Components
This is a library of re-usable React Native components for use in PX Blue 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 PX Blue and eliminate the need for multiple teams to build their own components for these.
To install the PX Blue react native components from NPM as a dependency for your project, you can run the following command in your project root:
yarn add @pxblue/react-native-components
NOTE: This install command will install the package from NPM. If you are a PX Blue 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:
npm install --save react-native-paper@^4.0.0 react-native-safe-area-context@^3.0.0 react-native-vector-icons@^8.0.0 react-native-modal@^12.0.0 // or yarn add react-native-paper@^4.0.0 react-native-safe-area-context@^3.0.0 react-native-vector-icons@^8.0.0 react-native-modal@^12.0.0
Building the Library
To work with this library, first clone down the repository and install dependencies:
git clone https://github.com/pxblue/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.
Running the demo projects
This repository comes with three demo projects found within the
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
to start a project demo, or
to start an interactive component documentation (will run on a device or a simulator), or
to bring up a API documentation website (no interactive components).
Using the Components
See the documentation for information on using these components.
This component library relies on react-native-vector-icons - this library must be installed in your project in order to use the PX Blue components.