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

@brightlayer-ui/react-native-themes

v7.0.1

Published

React Native themes for Brightlayer UI applications

Downloads

7,296

Readme

Brightlayer UI themes for React Native applications

Build

This package provides theming support for Eaton applications using the Brightlayer UI design system. It includes resources for developers using React Native with react-native-paper. This package comes with two theme options: a Blue theme (standard) and a Dark theme.

For other frameworks, check out our related packages:

Installation

Install with npm

npm install --save @brightlayer-ui/react-native-themes

or yarn

yarn add @brightlayer-ui/react-native-themes

Usage

NOTE: Using the Brightlayer UI React Native theme requires that you add the Open Sans font to your application. You can learn how to do this by reading the instructions for Vanilla React Native or Expo. This will be added automatically if you start your project with the @brightlayer-ui/cli.

When using Expo, you will need to specify the name for each font weight you load using the format OpenSans-<Weight>, e.g., OpenSans-SemiBold. Refer to one of our React Native demos for reference.

To use our themes in your application, simply wrap the app in a Provider and pass in your desired theme (e.g., blue, blueDark).

Light Theme

import { Provider as ThemeProvider} from 'react-native-paper';
import * as BLUIThemes from '@brightlayer-ui/react-native-themes';
...
// Default Theme
<ThemeProvider theme={BLUIThemes.blue}>
    <App />
</ThemeProvider>

Dark Theme

import { Provider as ThemeProvider} from 'react-native-paper';
import * as BLUIThemes from '@brightlayer-ui/react-native-themes';
...
<ThemeProvider theme={BLUIThemes.blueDark}>
    <App />
</ThemeProvider>

React Native Paper Components Style Override

This Document contains a set of style overrides in components around various React Native Paper components.

By default, the theming mechanism provided by RNP is very minimal and does not allow us to style components precisely the way we want for Brightlayer UI applications. The theme does not cover all cases to circumvent this issue, for some components, you may need to add extra styles or theme overrides inline that can be used to bring them in alignment with Brightlayer UI applications

To style components listed in the document to look correct in the application, you should use the Brightlayer UI Components Style Override in place of the respective components from React Native Paper.

TypeScript

Our Brightlayer UI themes extend the themes provided by React Native Paper. If you are using these themes in a TypeScript project and want to access any of the properties that were added to the defaults, you need to use useExtendedTheme hook in your project:

import { useExtendedTheme } from '@brightlayer-ui/react-native-themes';
...
const theme = useExtendedTheme();
<Button mode="contained" style={{ backgroundColor: theme.colors.onOrangeFilledContainer }}>
    Label
</Button>

Usage of useFontWeight hook in your project

When the fontFamily of a Text element in your application needs to be modified, you can use the useFontWeight hook.For instance, to set the fontWeight to "bold", you can utilize the useFontWeight() hook as demonstrated below:

import { useFontWeight } from '@brightlayer-ui/react-native-themes';
...
const fontStyleBold = useFontWeight('700');
<Text variant={'headlineLarge'} style={{ ...fontStyleBold }}>
    headlineLarge
</Text>

Upgrading from version 6 -> 7

In the version 7, the library has been updated to use React Native Paper v5, which is adopting Material Design 3. The themes have now been updated to use Material Design 3 Themes.