diff --git a/README.md b/README.md index 7f270d3..5635bbd 100644 --- a/README.md +++ b/README.md @@ -57,11 +57,13 @@ import * as BLUIThemes from '@brightlayer-ui/react-native-themes'; > When using either of these themes, you should use our React Native Paper wrapper components (see below). -### React Native Paper Wrapper Components +### React Native Paper Components Style Override -The default theme structure for React Native Paper components does not offer us enough control to make some components look exactly the way they should for Brightlayer UI applications. Because of this, we have extended the default theme type definition (see below) and created wrapper components with the correct styles to use in place of some of the standard React Native Paper components. +This Document contains a set of style overrides in components around various [React Native Paper](https://callstack.github.io/react-native-paper/index.html) components. -In order for these components to look correct in your application, you should use the [Brightlayer UI wrapper components](https://github.com/etn-ccis/blui-react-native-component-library/blob/master/components/src/themed/README.md) in place of the respective components from React Native Paper. +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](https://github.com/etn-ccis/blui-react-native-themes/blob/master/RNPComponents/RNPComponents.md) in place of the respective components from React Native Paper. ### TypeScript diff --git a/RNPComponents/Images/avatar.png b/RNPComponents/Images/avatar.png new file mode 100644 index 0000000..bcb3f27 Binary files /dev/null and b/RNPComponents/Images/avatar.png differ diff --git a/RNPComponents/Images/bottomNavigation.png b/RNPComponents/Images/bottomNavigation.png new file mode 100644 index 0000000..2e8b72f Binary files /dev/null and b/RNPComponents/Images/bottomNavigation.png differ diff --git a/RNPComponents/Images/buttonContained.png b/RNPComponents/Images/buttonContained.png new file mode 100644 index 0000000..1e5ceaf Binary files /dev/null and b/RNPComponents/Images/buttonContained.png differ diff --git a/RNPComponents/Images/buttonElevated.png b/RNPComponents/Images/buttonElevated.png new file mode 100644 index 0000000..883673a Binary files /dev/null and b/RNPComponents/Images/buttonElevated.png differ diff --git a/RNPComponents/Images/buttonOutline.png b/RNPComponents/Images/buttonOutline.png new file mode 100644 index 0000000..97af2c0 Binary files /dev/null and b/RNPComponents/Images/buttonOutline.png differ diff --git a/RNPComponents/Images/buttonText.png b/RNPComponents/Images/buttonText.png new file mode 100644 index 0000000..84665a8 Binary files /dev/null and b/RNPComponents/Images/buttonText.png differ diff --git a/RNPComponents/Images/buttonTonal.png b/RNPComponents/Images/buttonTonal.png new file mode 100644 index 0000000..bd2ed58 Binary files /dev/null and b/RNPComponents/Images/buttonTonal.png differ diff --git a/RNPComponents/Images/dataTable.png b/RNPComponents/Images/dataTable.png new file mode 100644 index 0000000..3b2260d Binary files /dev/null and b/RNPComponents/Images/dataTable.png differ diff --git a/RNPComponents/Images/flatTextInput.png b/RNPComponents/Images/flatTextInput.png new file mode 100644 index 0000000..00ccdae Binary files /dev/null and b/RNPComponents/Images/flatTextInput.png differ diff --git a/RNPComponents/Images/iconButton.png b/RNPComponents/Images/iconButton.png new file mode 100644 index 0000000..5698b49 Binary files /dev/null and b/RNPComponents/Images/iconButton.png differ diff --git a/RNPComponents/Images/outlineTextInput.png b/RNPComponents/Images/outlineTextInput.png new file mode 100644 index 0000000..922fb26 Binary files /dev/null and b/RNPComponents/Images/outlineTextInput.png differ diff --git a/RNPComponents/Images/progressBar.png b/RNPComponents/Images/progressBar.png new file mode 100644 index 0000000..33aed48 Binary files /dev/null and b/RNPComponents/Images/progressBar.png differ diff --git a/RNPComponents/Images/snackbar.png b/RNPComponents/Images/snackbar.png new file mode 100644 index 0000000..eae383b Binary files /dev/null and b/RNPComponents/Images/snackbar.png differ diff --git a/RNPComponents/Images/toggleButton.png b/RNPComponents/Images/toggleButton.png new file mode 100644 index 0000000..c675842 Binary files /dev/null and b/RNPComponents/Images/toggleButton.png differ diff --git a/RNPComponents/RNPComponents.md b/RNPComponents/RNPComponents.md new file mode 100644 index 0000000..a2589d5 --- /dev/null +++ b/RNPComponents/RNPComponents.md @@ -0,0 +1,476 @@ +## React Native Paper Component Style Overrides + +These styles override components will simplify this process so that you do not create the component designs to bring them in alignment with Brightlayer UI applications. + +- ### Avatar + + Recommended style overrides: + * Text color of the Avatar for Primary Tonal Avatar: onPrimaryContainer + * Background color of the Avatar for Primary Tonal Avatar: primaryContainer + * Text color of the Avatar for Error Tonal Avatar: onErrorContainer + * Background color of the Avatar for Error Tonal Avatar: errorContainer + * Text color of the Avatar for Error Filled Avatar: onError + * Background color of the Avatar for Error Filled Avatar: error + + Avatar
+ + Usage + ```tsx + import { Avatar } from 'react-native-paper'; + + // Primary Tonal Avatar + + // Primary filled Avatar + + // Error Tonal Avatar + + // Error filled Avatar + + + ``` + +- ### Bottom Navigation + + Recommended style overrides: + * Active color of the Selected Tab Text: primary + * Background color of the Navigation Bar: surfaceContainer + + Bottom Navigation
+ + Usage + ```tsx + import { BottomNavigation } from 'react-native-paper'; + + + ``` + +- **Button** + - #### Contained Mode + Recommended style overrides: + - Button color of the Error Contained Button: error + - Text color of the Error Contained Button: onError + + + Button Contained Mode
+ + Usage + ```tsx + import { Button } from 'react-native-paper'; + + + + + ``` + + - #### Outlined Mode + + Recommended style overrides: + * Text color of the Error Outlined Button: error + + Button Outlined Mode
+ + Usage + ```tsx + import { Button } from 'react-native-paper'; + + + + + ``` + + - #### Text Mode + + Recommended style overrides: + * Text color of the Error Text Button: error + + Button Text Mode
+ + Usage + ```tsx + import { Button } from 'react-native-paper'; + + + + + ``` + - #### Elevated Mode + + Recommended style overrides: + * Button color of the Elevated Button: surfaceContainerLow + * Text color of the Error Elevated Button: error + * Button color of the Error Elevated Button: surfaceContainerLow + + Button Elevated Mode
+ + Usage + ```tsx + import { Button } from 'react-native-paper'; + + + + + ``` + + - #### Contained Tonal Mode + + Recommended style overrides: + * Text color of the Error Text Button: onErrorContainer + * Button color of the Error Text Button: errorContainer + + Button Contained-tonal Mode
+ + Usage + ```tsx + import { Button } from 'react-native-paper'; + + + + + ``` + +- ### Data Table + + Recommended style overrides: + * Text color of Table Title: onSurface + * Font size of Table Title: theme.fonts.labelLarge + * Font size of Table Cell: theme.fonts.bodyMedium + * Font for pagination Label needs to passed inside Text component: ``` + ``` + * Font for pagination selectPageDropdownLabel needs to passed inside Text component: ``` + ``` + + + Data Table
+ + Usage + ```tsx + import { DataTable } from 'react-native-paper'; + + + + + Dessert + + + Calories + + + Fat + + + + {items.slice(from, to).map((item) => ( + + {item.name} + {item.calories} + {item.fat} + + ))} + + + {`${from + 1}-${to} of ${items.length}`} + + } + numberOfItemsPerPageList={numberOfItemsPerPageList} + numberOfItemsPerPage={itemsPerPage} + onItemsPerPageChange={onItemsPerPageChange} + showFastPaginationControls + selectPageDropdownLabel={ + + Rows per page + + } + /> + + ``` + +- ### Icon button + + Recommended style overrides: + * Background color for Contained mode: primary + * Icon color for Contained mode: onPrimary + * Background color for Contained-tonal mode: primaryContainer + * Icon color for Contained-tonal mode: onPrimaryContainer + + IconButton
+ + Usage + ```tsx + import { IconButton } from 'react-native-paper'; + + + + + + ``` + +- ### Progress Bar + + Recommended style overrides: + * Background color of the Track: surfaceContainerHighest + + ProgressBar
+ + Usage + ```tsx + import { ProgressBar } from 'react-native-paper'; + + + ``` + +- ### Snackbar + + Recommended style overrides: + * Background color of the SnackBar: inverseSurface + + + Snackbar
+ + ````tsx + import { Snackbar } from 'react-native-paper'; + {}, + }} + style={{ backgroundColor: theme.colors.inverseSurface }} + > + Snackbar Text + + ```` + +- ### Text Input + + - #### Flat Mode + Recommended style overrides: + - Underline color of Flat Text Input: onSurfaceVariant + - Text color of Flat Text Input: onSurface + - BackgroundColor of Flat Text Input: textFieldContainer + - Underline color of Disabled Flat Text Input: onDisabledContainer + - BackgroundColor of Disabled Flat Text Input: disabledContainer + - Underline color of Error Flat Text Input: onSurfaceVariant + - Text color of Error Flat Text Input: onSurface + - BackgroundColor of Error Flat Text Input: textFieldContainer + - Horizontal Margin for Helper Text: 8, + - Horizontal Padding for Helper Text: 16, + + + Button Contained Mode
+ + Usage + ```tsx + import { TextInput } from 'react-native-paper'; + + setNormalFilledText(value)} + style={{backgroundColor: theme.colors.textFieldContainer}} + /> + + + + { + setErrorFilledText(value); + setHasError(value.length > 4); + }} + error={hasError} + style={{backgroundColor: theme.colors.textFieldContainer}} + /> + + Error Message + + ``` + + - #### Outlined Mode + + Recommended style overrides: + - BackgroundColor of Outlined Text Input: transparent + - BackgroundColor of Disabled Outlined Text Input: transparent + - BackgroundColor of Error Outlined Text Input: transparent + - Horizontal Margin for Helper Text: 8, + - Horizontal Padding for Helper Text: 16, + + Button Outlined TextInput
+ + Usage + ```tsx + import { TextInput } from 'react-native-paper'; + + setNormalFilledText(value)} + style={{ + margin: 8, + backgroundColor: 'transparent', + }} + /> + + setDisabledFilledText(value)} + disabled + style={{ + margin: 8, + backgroundColor: 'transparent', + }} + /> + + { + setErrorFilledText(value); + setHasError(value.length > 4); + }} + error={hasError} + style={{ marginHorizontal: 8, marginTop: 8, backgroundColor: 'transparent' }} + /> + + Error Message + + + ``` + +- ### Toggle Button + + Recommended style overrides: + * BorderWidth of ToggleButton: 1 + * Background color of the ToggleButton for selected: primaryContainer + * Icon color of the ToggleButton for selected: onPrimaryContainer + * Background color of the ToggleButton for non selected: 'transparent' + * Icon color of the ToggleButton for non selected: onSurface + + + toggleButton
+ + ````tsx + import { ToggleButton } from 'react-native-paper'; + + //Button style for selected + + // style for not selected + + ```` \ No newline at end of file