npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@pxblue/react-native-components

v6.0.1

Published

Reusable React Native components for PX Blue applications

Downloads

124

Readme

PX Blue React Native Components

npm

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.

Refer to the Component Library API documentation site for a list of available components or see the repository documentation for each individual component.

Installation

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.

Peer Dependencies

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.

yarn build

Running the demo projects

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).

Using the Components

See the documentation for information on using these components.

Upgrading from version 5 -> 6

Version 6 of this library is a major update with several breaking changes. Most notably, the IconClass prop found in most components has been replaced by icon and supports more icon formats.

Versions 5.3.x -> 5.4.x have been updated to include warning messages if you are using any deprecated props. We recommend upgrading to 5.4.x and addressing these warnings before upgrading to version 6.

Version 6 also includes a new set of wrappers around a subset of React Native Paper components to provide the correct styles. In order to get the correct appearance, you should use these themed wrapper components instead of the components directly from RNP. These wrapper components should be used in conjunction with version 6+ of @pxblue/react-native-themes, which consolidated our blueDark and blueDarkAlt themes into a single theme for simpler usage.

NOTES

This component library relies on react-native-vector-icons and @pxblue/react-native-vector-icons - these libraries must be installed in your project in order to use the PX Blue components.

Additionally, if using @pxblue/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 PX Blue CLI and this will be configured for you automatically.