diff --git a/.circleci/config.yml b/.circleci/config.yml index e1887a0..10a2a00 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -7,6 +7,21 @@ jobs: - image: circleci/node:12.9.1-browsers steps: - checkout + - restore_cache: + keys: + - v1-dependencies-{{ checksum "yarn.lock" }} + - run: + name: Install Dependencies + command: | + yarn install --frozen-lockfile + - save_cache: + name: Save Cache + paths: + - node_modules + key: v1-dependencies-{{ checksum "yarn.lock" }} + - run: + name: Prettier Check + command: yarn prettier:check - run: name: Build command: yarn build diff --git a/CHANGELOG.md b/CHANGELOG.md index 74b0fc6..8cd2f35 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,15 @@ # Changelog +## v6.0.0 (October 1, 2021) + +### Added + +- Many new theme color properties to give greater control over the styles of various components. Note that the global ReactNativePaper namespace will need to be updated in your application to use these properties. + +### Removed +- The `blueDarkAlt` theme has been consolidated into the `blueDark` theme and a selection of wrapper components in the `@pxblue/react-native-components` library. This eliminates the need for using two theme providers and writing your own wrappers for these components. +- `theme.colors.textSecondary` — use `theme.colors.textPalette.secondary` instead. + ## v5.2.0 (October 1, 2021) ### Added diff --git a/README.md b/README.md index 8731a70..e03856e 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # PX Blue themes for React Native applications + [![](https://img.shields.io/circleci/project/github/pxblue/react-native-themes/master.svg?style=flat)](https://circleci.com/gh/pxblue/react-native-themes/tree/master) [![](https://img.shields.io/npm/v/@pxblue/react-native-themes.svg?label=@pxblue/react-native-themes&style=flat)](https://www.npmjs.com/package/@pxblue/react-native-themes) @@ -29,9 +30,9 @@ yarn add @pxblue/react-native-themes > When using Expo, you will need to specify the name for each font weight you load using the format `OpenSans-`, e.g., OpenSans-SemiBold. Refer to one of our React Native demos for reference. -### Light Theme +To use our themes in your application, simply wrap the app in a `Provider` and pass in your desired theme (e.g., `blue`, `blueDark`). -To use the light theme in your application, simply wrap the app in a `Provider` and pass in your desired theme (`blue`). +#### Light Theme ```tsx import { Provider as ThemeProvider} from 'react-native-paper'; @@ -43,11 +44,7 @@ import * as PXBThemes from '@pxblue/react-native-themes'; ``` -### Dark Theme - -The theming mechanism for React Native Paper is a bit limited in the amount of customization available for components. Because of this, there are two dark themes available from PX Blue that should be applied to different components. - -The main theme should be applied using a `Provider` that wraps your application and passing in the theme (`blueDark`). This will be applied to the majority of the component in the RNP library. +#### Dark Theme ```tsx import { Provider as ThemeProvider} from 'react-native-paper'; @@ -58,111 +55,13 @@ import * as PXBThemes from '@pxblue/react-native-themes'; ``` -#### Alternate Dark Theme - -The alternate dark theme (`blueDarkAlt`) should be applied to select components to give them the desired PX Blue styling. The following components should use the alternate dark theme: - -- Activity Indicator -- Appbar -- Avatar -- Badge -- Bottom Navigation -- Button (`contained` mode variant) -- FAB -- ProgressBar -- Snackbar -- TextInput - -![Dark Theme Infographic](https://raw.githubusercontent.com/pxblue/themes/master/react-native/assets/dark-theme-infographic.png) - -1. For these components, make sure you are using the darkThemeAlt. -2. Do not use the darkTheme or these components will render using the incorrect color scheme. - -##### One-Off Usage - -If you are only using a component from this list once or twice in your application, you can pass the alternate theme directly to the component through the `theme` prop. - -```tsx -import { useTheme } from 'react-native-paper'; -import { blueDarkAlt } from '@pxblue/react-native-themes'; -const theme = useTheme(); -... - -``` - -##### Component-Based Usage - -If you are using components frequently, it's best to create a wrapper component that will handle the alternate theme logic. This will allow you to keep your code more readable and avoid errors with inconsistent theme application. - -To do this, you define a wrapper component that acts as a pass-through for all of the default props and adds the theme logic. - -```tsx -import React from 'react'; -import { blueDarkAlt } from '@pxblue/react-native-themes'; -import { SomeComponent as PaperComponent, useTheme } from 'react-native-paper'; -... -export const SomeComponent: typeof PaperComponent = (props) => { - const theme = useTheme(props.theme); - return ( - - ); -}; -``` - -You would then use your custom wrapper component throughout your application instead of using the component directly from React Native Paper: +> When using either of these themes, you should use our React Native Paper wrapper components (see below). -```tsx -import { SomeComponent } from './path/to/SomeComponent'; -... - -``` +### React Native Paper Wrapper Components -The `Button` component is a special case that requires the alternate theme only if you are using the contained mode. The wrapper component for the `Button` should look like: - -```tsx -import React from 'react'; -import { blueDarkAlt } from '@pxblue/react-native-themes'; -import { Button, useTheme } from 'react-native-paper'; -... -export const MyCustomButton: typeof Button = (props) => { - const theme = useTheme(props.theme); - return ( -