From 0ca10c7ed188d2aa5cd5b8c0a1093a838af1ed1e Mon Sep 17 00:00:00 2001 From: Kyle Roach Date: Wed, 30 Jan 2019 20:47:09 -0400 Subject: [PATCH 01/18] build: Update peer dev version of react-native-vector-icons React Native Elements 1.0.0 depends on antdesign which is only available in react-native-vector-icons 6.0.0^. Changed the peer dep to reflect this. Fixes #1736 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 683c5dc613..8311da2b96 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "webpack": "^2.2.1" }, "peerDependencies": { - "react-native-vector-icons": ">4.2.0" + "react-native-vector-icons": ">6.0.0" }, "jest": { "preset": "react-native", From 38d1cec3eeb8b515dd2e91a67db913d1ca3134a6 Mon Sep 17 00:00:00 2001 From: Kyle Roach Date: Thu, 31 Jan 2019 07:59:00 -0400 Subject: [PATCH 02/18] chore: Update react-native-dom version Current version had a vunerability alert --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 8311da2b96..4dbd5a8d01 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "lint-staged": "^8.0.4", "prettier": "^1.15.3", "react": "16.3.1", - "react-dom": "16.2.0", + "react-dom": "16.3.3", "react-native": "0.55.4", "react-native-vector-icons": "^6.0.2", "react-test-renderer": "^16.6.0", diff --git a/yarn.lock b/yarn.lock index 924485aeca..bf88ffaf12 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8346,10 +8346,10 @@ react-devtools-core@3.1.0: shell-quote "^1.6.1" ws "^2.0.3" -react-dom@16.2.0: - version "16.2.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044" - integrity sha512-zpGAdwHVn9K0091d+hr+R0qrjoJ84cIBFL2uU60KvWBPfZ7LPSrfqviTxGHWN0sjPZb2hxWzMexwrvJdKePvjg== +react-dom@16.3.3: + version "16.3.3" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.3.3.tgz#af4c2aef9f6a66251a46da50253c860a67ae66d9" + integrity sha512-ALCp7ZbSGkqRDtQoZozKVNgwXMxbxf/IGOUMC2A0yF6JHeZrS8e2cOotPT87Vf4b7PKCuUVKU4/RDEXxToA/yA== dependencies: fbjs "^0.8.16" loose-envify "^1.1.0" From a831bbe30f2d1ac6fbdcbdba2977a69cee51cf6b Mon Sep 17 00:00:00 2001 From: Rawad Karam Date: Sun, 3 Feb 2019 00:40:07 -0500 Subject: [PATCH 03/18] fix: ESLint error in Text component (#1741) Removed fontFamily prop in props object spread --- src/text/Text.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/text/Text.js b/src/text/Text.js index a409f84d5e..b77b92d9dc 100644 --- a/src/text/Text.js +++ b/src/text/Text.js @@ -6,7 +6,7 @@ import { fonts, withTheme } from '../config'; import normalize from '../helpers/normalizeText'; const TextElement = props => { - const { style, children, h1, h2, h3, h4, fontFamily, ...rest } = props; + const { style, children, h1, h2, h3, h4, ...rest } = props; return ( Date: Mon, 4 Feb 2019 05:54:41 +0300 Subject: [PATCH 04/18] chore: Fix mix of import and module.exports (#1749) Changes module.exports in normalizeText helper to use ES6 default exports. --- src/helpers/normalizeText.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/helpers/normalizeText.js b/src/helpers/normalizeText.js index 7281190aa4..6002007918 100644 --- a/src/helpers/normalizeText.js +++ b/src/helpers/normalizeText.js @@ -92,4 +92,4 @@ const normalize = size => { return size; }; -module.exports = normalize; // eslint-disable-line no-undef +export default normalize; // eslint-disable-line no-undef From ac2df2839c4ce74872ba769f605a1df475c061a3 Mon Sep 17 00:00:00 2001 From: Abdulaziz Ghuloum Date: Wed, 6 Feb 2019 02:10:54 +0300 Subject: [PATCH 05/18] fix(types): Add cancelButtonTitle prop to SearchBar (#1753) Added optional string `cancelButtonTitle` property to `SearchBarIOS`. --- src/index.d.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/index.d.ts b/src/index.d.ts index 1eb0538940..ff38b9863c 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -1470,6 +1470,11 @@ export interface SearchBarIOS extends SearchBarPlatform { buttonDisabledStyle?: StyleProp; buttonDisabledTextStyle?: StyleProp; }; + + /** + * title of cancel button on iOS. Default: 'Cancel'. + */ + cancelButtonTitle?: string; } type SearchBarProps = SearchBarWrapper & From f30405db8cd64a23926a01c49755f0d4e1410c34 Mon Sep 17 00:00:00 2001 From: Michael Clark <33385949+michaelclark2@users.noreply.github.com> Date: Tue, 5 Feb 2019 18:25:59 -0600 Subject: [PATCH 06/18] fix(Tooltip): Adjust position for StatusBar on android (#1751) Tooltip was appearing off by 24pt on android of the target. This was because the coordinates did not take into account the status bar height. --- src/tooltip/Tooltip.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/tooltip/Tooltip.js b/src/tooltip/Tooltip.js index 309626be8f..ea3c286270 100644 --- a/src/tooltip/Tooltip.js +++ b/src/tooltip/Tooltip.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { TouchableOpacity, Modal, View } from 'react-native'; +import { TouchableOpacity, Modal, View, StatusBar } from 'react-native'; import { ViewPropTypes, withTheme } from '../config'; import { ScreenWidth, ScreenHeight, isIOS } from '../helpers'; @@ -158,7 +158,9 @@ class Tooltip extends React.PureComponent { ) => { this.setState({ xOffset: pageOffsetX, - yOffset: pageOffsetY, + yOffset: isIOS + ? pageOffsetY + : pageOffsetY - StatusBar.currentHeight, elementWidth: width, elementHeight: height, }); From 139b6a83fdfd4548f59170711a0fced298bc9e7f Mon Sep 17 00:00:00 2001 From: Kyle Roach Date: Tue, 5 Feb 2019 23:02:34 -0400 Subject: [PATCH 07/18] feat(CheckBox): Add titleProps prop (#1757) Allows passing Text props to the title Implements #1273 --- docs/checkbox.md | 11 +- src/checkbox/CheckBox.js | 4 + src/checkbox/__tests__/CheckBox.js | 16 +++ .../__tests__/__snapshots__/CheckBox.js.snap | 106 ++++++++++++++++++ src/index.d.ts | 5 + 5 files changed, 141 insertions(+), 1 deletion(-) diff --git a/docs/checkbox.md b/docs/checkbox.md index e02781fe07..bd090ab948 100644 --- a/docs/checkbox.md +++ b/docs/checkbox.md @@ -64,6 +64,7 @@ import { CheckBox } from 'react-native-elements' - [`right`](#right) - [`center`](#center) - [`title`](#title) +- [`titleProps`](#titleprops) - [`containerStyle`](#containerstyle) - [`textStyle`](#textstyle) - [`onLongPress`](#onlongpress) @@ -139,12 +140,20 @@ Aligns checkbox to center (optional) ### `title` -Title of checkbox (required) +Title of checkbox | Type | Default | | :----: | :-----: | | string | none | +### `titleProps` + +Additional props for the title Text component (optional) + +| Type | Default | +| :--------------------------------------------------------------------------: | :-----: | +| {[...Text props](https://facebook.github.io/react-native/docs/text#props-1)} | none | + ### `containerStyle` Style of main container (optional) diff --git a/src/checkbox/CheckBox.js b/src/checkbox/CheckBox.js index a313333cc1..d66d3d69a9 100644 --- a/src/checkbox/CheckBox.js +++ b/src/checkbox/CheckBox.js @@ -21,6 +21,7 @@ const CheckBox = props => { checked, iconRight, title, + titleProps, center, right, containerStyle, @@ -65,6 +66,7 @@ const CheckBox = props => { textStyle && textStyle, fontFamily && { fontFamily }, ])} + {...titleProps} > {checked ? checkedTitle || title : title} @@ -80,6 +82,7 @@ CheckBox.propTypes = { Component: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), iconRight: PropTypes.bool, title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), + titleProps: PropTypes.object, center: PropTypes.bool, right: PropTypes.bool, containerStyle: ViewPropTypes.style, @@ -101,6 +104,7 @@ CheckBox.defaultProps = { uncheckedIcon: 'square-o', size: 24, Component: TouchableOpacity, + titleProps: {}, }; const styles = { diff --git a/src/checkbox/__tests__/CheckBox.js b/src/checkbox/__tests__/CheckBox.js index d80c6a9b77..4d229cf6ad 100644 --- a/src/checkbox/__tests__/CheckBox.js +++ b/src/checkbox/__tests__/CheckBox.js @@ -94,6 +94,22 @@ describe('CheckBox Component', () => { expect(toJson(component)).toMatchSnapshot(); }); + it('should allow passing props to the title', () => { + const component = shallow( + + ); + + expect(toJson(component)).toMatchSnapshot(); + expect( + component.find({ testID: 'checkboxTitle' }).props().numberOfLines + ).toBe(2); + }); + it('should allow custom checked Icon when unchecked', () => { const component = shallow( `; +exports[`CheckBox Component should allow passing props to the title 1`] = ` + + + + + Yea + + + +`; + exports[`CheckBox Component should render with icon and checked 1`] = ` @@ -424,6 +528,7 @@ exports[`CheckBox Component should render with icon and iconRight 1`] = ` }, } } + titleProps={Object {}} uncheckedColor="blue" uncheckedIcon="square-o" /> @@ -501,6 +606,7 @@ exports[`CheckBox Component should render without issues 1`] = ` }, } } + titleProps={Object {}} uncheckedColor="#bfbfbf" uncheckedIcon="square-o" /> diff --git a/src/index.d.ts b/src/index.d.ts index ff38b9863c..a69ea0973a 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -684,6 +684,11 @@ export interface CheckBoxProps { */ title?: string | React.ReactElement<{}>; + /** + * Additional props for the title + */ + titleProps?: Partial; + /** * Style of main container */ From 3df242af3f0d7859148c943ee45700687f0f6508 Mon Sep 17 00:00:00 2001 From: Daniel Holmes Date: Thu, 7 Feb 2019 07:54:22 +1100 Subject: [PATCH 08/18] fix(types): Change PlaceholderContent type (#1759) [The docs](https://react-native-training.github.io/react-native-elements/docs/image.html) are accurate about the usage of this `PlaceholderContent` prop: ```js } /> ``` i.e. you provide a `ReactElement`, not a `ComponentType` as specified in the TypeScript definitions here. [Examining the source](https://github.com/react-native-training/react-native-elements/blob/master/src/image/Image.js#L69) shows that it's used as a `ReactElement` too (i.e. rendered directly) rather than a Component: ```js > {PlaceholderContent} ``` --- src/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.d.ts b/src/index.d.ts index a69ea0973a..d0e64c6ee9 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -1893,7 +1893,7 @@ export interface ImageProps extends ImageProperties { /** * Content to render when image is loading */ - PlaceholderContent?: React.ComponentType; + PlaceholderContent?: React.ReactElement; /** * Additional styling for the container From adb75deb98536d60b293f355db01fd3e81ed2328 Mon Sep 17 00:00:00 2001 From: Daniel Holmes Date: Thu, 7 Feb 2019 23:30:50 +1100 Subject: [PATCH 09/18] fix(types): Update ListItem.chevron and checkmark defs (#1761) `ListItem` props `chevron` and `checkmark` [are rendered](https://github.com/react-native-training/react-native-elements/blob/master/src/list/ListItem.js#L213): ```js {renderNode(Icon, checkmark, checkmarkDefaultProps(theme))} {renderNode(Icon, chevron, chevronDefaultProps)} ``` Using the [`renderNode` helper](https://github.com/react-native-training/react-native-elements/blob/master/src/helpers/renderNode.js), which includes the option of a `ReactElement`: ```js const renderNode = (Component, content, defaultProps) => { if (content == null || content === false) { return null; } if (React.isValidElement(content)) { return content; } ``` --- src/index.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.d.ts b/src/index.d.ts index d0e64c6ee9..7abf36d8b8 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -1099,8 +1099,8 @@ export interface ListItemProps { containerStyle?: StyleProp; contentContainerStyle?: StyleProp; rightContentContainerStyle?: StyleProp; - chevron?: boolean | Partial; - checkmark?: boolean | Partial; + chevron?: boolean | Partial | React.ReactElement<{}>; + checkmark?: boolean | Partial | React.ReactElement<{}>; title?: string | React.ReactElement<{}>; titleStyle?: StyleProp; titleProps?: TextProperties; From 5242bb669425e7ba259d68e5e2eba85d29ed585f Mon Sep 17 00:00:00 2001 From: Daniel Holmes Date: Thu, 7 Feb 2019 23:37:47 +1100 Subject: [PATCH 10/18] fix(types): Added divider to colors definition (#1760) From `src/config/colors.js`: https://github.com/react-native-training/react-native-elements/blob/next/src/config/colors.js#L19 --- src/index.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.d.ts b/src/index.d.ts index 7abf36d8b8..a0d2c7e103 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -1930,6 +1930,7 @@ export interface Colors { readonly warning: string; readonly error: string; readonly disabled: string; + readonly divider: string; readonly platform: { ios: { primary: string; From 818a3f28589f6f5cc36628d4f6e8c064793da717 Mon Sep 17 00:00:00 2001 From: Zhuoli Zhang Date: Sun, 10 Feb 2019 16:02:31 -0500 Subject: [PATCH 11/18] fix(types): Add cancel method for search bar (#1768) --- src/index.d.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/index.d.ts b/src/index.d.ts index a0d2c7e103..d83ca83b05 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -1512,6 +1512,13 @@ export class SearchBar extends React.Component { * Call clear on the TextInput */ clear(): void; + + /** + * Only available for Android and IOS + * call blur on the TextInput + * call cancel passed from Props + */ + cancel?(): void; } export interface SliderProps { From 64392b06c00bbf09f8c33e893e5ab25d0e052c25 Mon Sep 17 00:00:00 2001 From: Kyle Roach Date: Sun, 10 Feb 2019 22:54:04 -0400 Subject: [PATCH 12/18] fix: Change merge library to deepmerge from lodash (#1772) While using ThemeProvider, some errors would be shown for some components for arrays not having keys. This was due to the merge algorithm in lodash.merge which happens to affect react's keys. Switching to deepmerge instead of lodash.merge does not have this issue but maintains expected behaviour. Fixes #1735 #1517 --- package.json | 2 +- src/config/ThemeProvider.js | 6 +++--- src/config/withTheme.js | 4 ++-- yarn.lock | 10 +++++----- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 4dbd5a8d01..c9c1e29568 100644 --- a/package.json +++ b/package.json @@ -34,8 +34,8 @@ }, "dependencies": { "color": "^3.1.0", + "deepmerge": "^3.1.0", "hoist-non-react-statics": "^3.1.0", - "lodash.merge": "^4.6.1", "opencollective-postinstall": "^2.0.0", "prop-types": "^15.5.8", "react-native-ratings": "^6.3.0", diff --git a/src/config/ThemeProvider.js b/src/config/ThemeProvider.js index 9ea099cb52..04221c0434 100644 --- a/src/config/ThemeProvider.js +++ b/src/config/ThemeProvider.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import merge from 'lodash.merge'; +import deepmerge from 'deepmerge'; import colors from './colors'; @@ -11,7 +11,7 @@ export default class ThemeProvider extends React.Component { super(props); this.state = { - theme: merge( + theme: deepmerge( { colors, }, @@ -22,7 +22,7 @@ export default class ThemeProvider extends React.Component { updateTheme = updates => { this.setState(({ theme }) => ({ - theme: merge({}, theme, updates), + theme: deepmerge(theme, updates), })); }; diff --git a/src/config/withTheme.js b/src/config/withTheme.js index 82b7305764..4f6ae492b5 100644 --- a/src/config/withTheme.js +++ b/src/config/withTheme.js @@ -1,5 +1,5 @@ import React from 'react'; -import merge from 'lodash.merge'; +import deepmerge from 'deepmerge'; import hoistNonReactStatics from 'hoist-non-react-statics'; import { ThemeConsumer } from './ThemeProvider'; @@ -32,7 +32,7 @@ const withTheme = (WrappedComponent, themeKey) => { const props = { theme, updateTheme, - ...merge({}, themeKey && theme[themeKey], rest), + ...deepmerge((themeKey && theme[themeKey]) || {}, rest), children, }; diff --git a/yarn.lock b/yarn.lock index bf88ffaf12..81ce5a557e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3157,6 +3157,11 @@ deep-is@~0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34" integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ= +deepmerge@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-3.1.0.tgz#a612626ce4803da410d77554bfd80361599c034d" + integrity sha512-/TnecbwXEdycfbsM2++O3eGiatEFHjjNciHEwJclM+T5Kd94qD1AP+2elP/Mq0L5b9VZJao5znR01Mz6eX8Seg== + default-require-extensions@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-2.0.0.tgz#f5f8fbb18a7d6d50b21f641f649ebb522cfe24f7" @@ -6737,11 +6742,6 @@ lodash.keys@^3.0.0: lodash.isarguments "^3.0.0" lodash.isarray "^3.0.0" -lodash.merge@^4.6.1: - version "4.6.1" - resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.1.tgz#adc25d9cb99b9391c59624f379fbba60d7111d54" - integrity sha512-AOYza4+Hf5z1/0Hztxpm2/xiPZgi/cjMqdnKTUWTBSKchJlxXXuUSxCCl8rJlf4g6yww/j6mA8nC8Hw/EZWxKQ== - lodash.pad@^4.1.0: version "4.5.1" resolved "https://registry.yarnpkg.com/lodash.pad/-/lodash.pad-4.5.1.tgz#4330949a833a7c8da22cc20f6a26c4d59debba70" From 0c0beaf2390033d384a4f75068bbc8e81050496e Mon Sep 17 00:00:00 2001 From: Kyle Roach Date: Sun, 10 Feb 2019 23:42:20 -0400 Subject: [PATCH 13/18] feat(Text): Add style props to customize header props (#1773) Allows user to set the styling that should be applied when props h1, h2, h3, h4 are used. Implements #1754 --- docs/text.md | 44 ++++++++++++++++++++++++++++++++++++++++++++ src/index.d.ts | 22 +++++++++++++++++++++- src/text/Text.js | 31 ++++++++++++++++++++++++++----- 3 files changed, 91 insertions(+), 6 deletions(-) diff --git a/docs/text.md b/docs/text.md index 526dde429c..1ac98d285c 100644 --- a/docs/text.md +++ b/docs/text.md @@ -24,6 +24,10 @@ Text displays words and characters at various sizes. - [`h2`](#h2) - [`h3`](#h3) - [`h4`](#h4) +- [`h1Style`](#h1style) +- [`h2Style`](#h2style) +- [`h3Style`](#h3style) +- [`h4Style`](#h4style) - [`style`](#style) --- @@ -70,6 +74,46 @@ font size 22 (optional) --- +### `h1Style` + +Styling for when `h1` is set (optional) + +| Type | Default | +| :-----------------: | :-----: | +| Text style (object) | none | + +--- + +### `h2Style` + +Styling for when `h2` is set (optional) + +| Type | Default | +| :-----------------: | :-----: | +| Text style (object) | none | + +--- + +### `h3Style` + +Styling for when `h3` is set (optional) + +| Type | Default | +| :-----------------: | :-----: | +| Text style (object) | none | + +--- + +### `h4Style` + +Styling for when `h4` is set (optional) + +| Type | Default | +| :-----------------: | :-----: | +| Text style (object) | none | + +--- + ### `style` add additional styling for Text (optional) diff --git a/src/index.d.ts b/src/index.d.ts index d83ca83b05..6e8d6c14fd 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -73,6 +73,26 @@ export interface TextProps extends TextProperties { */ h4?: boolean; + /** + * Styling for when `h1` is set + */ + h1Style?: StyleProp; + + /** + * Styling for when `h2` is set + */ + h2Style?: StyleProp; + + /** + * Styling for when `h3` is set + */ + h3Style?: StyleProp; + + /** + * Styling for when `h4` is set + */ + h4Style?: StyleProp; + /** * Additional styling for Text */ @@ -685,7 +705,7 @@ export interface CheckBoxProps { title?: string | React.ReactElement<{}>; /** - * Additional props for the title + * Additional props for the title */ titleProps?: Partial; diff --git a/src/text/Text.js b/src/text/Text.js index b77b92d9dc..c310768fb7 100644 --- a/src/text/Text.js +++ b/src/text/Text.js @@ -6,17 +6,29 @@ import { fonts, withTheme } from '../config'; import normalize from '../helpers/normalizeText'; const TextElement = props => { - const { style, children, h1, h2, h3, h4, ...rest } = props; + const { + style, + children, + h1, + h2, + h3, + h4, + h1Style, + h2Style, + h3Style, + h4Style, + ...rest + } = props; return ( Date: Mon, 11 Feb 2019 12:16:58 +0100 Subject: [PATCH 14/18] fix(types): Add underlayColor to SocialIconProps interface (#1769) * fix: add underlayColor to SocialIconProps interface * update underlayColor description in SocialIconProps Co-Authored-By: Rawphs --- src/index.d.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/index.d.ts b/src/index.d.ts index 6e8d6c14fd..ff9ff85852 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -1808,6 +1808,13 @@ export interface SocialIconProps { * @default false */ loading?: boolean; + + /** + * Specify underlayColor for TouchableHighlight + * + * @default 'white' if `light` prop is true, otherwise defaults to icon color. + */ + underlayColor?: string; } /** From 4c0a2cfbb994cc44e53b9e15cac1d6dca820f595 Mon Sep 17 00:00:00 2001 From: aliassar <40848213+aliassar@users.noreply.github.com> Date: Sun, 24 Feb 2019 16:24:05 +0330 Subject: [PATCH 15/18] fix(Button): Ripple on android was out of bounds (#1799) This fix contains the ripple to the button's container --- src/buttons/Button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/buttons/Button.js b/src/buttons/Button.js index 251b331da7..a89e254f62 100644 --- a/src/buttons/Button.js +++ b/src/buttons/Button.js @@ -65,7 +65,7 @@ class Button extends Component { if (Platform.Version >= 21) { attributes.background = TouchableNativeFeedback.Ripple( 'ThemeAttrAndroid', - true + false ); } else { attributes.background = TouchableNativeFeedback.SelectableBackground(); From 96a7692a6ab0c95f3acc15beb88e9dc8f42d382d Mon Sep 17 00:00:00 2001 From: Rawad Karam Date: Sun, 24 Feb 2019 12:52:33 -0500 Subject: [PATCH 16/18] fix(Slider): False positioning of Slider and track width (#1739) Changed style of mainStyles.thumbHorizontal, mainStylesthumbVertical to take height/width into consideration (respectively). --- src/slider/Slider.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/slider/Slider.js b/src/slider/Slider.js index 6471e165b0..24c0109cbd 100644 --- a/src/slider/Slider.js +++ b/src/slider/Slider.js @@ -425,6 +425,7 @@ class Slider extends Component { orientation === 'vertical' ? mainStyles.trackVertical : mainStyles.trackHorizontal, + trackStyle, minimumTrackStyle, ])} /> @@ -435,8 +436,8 @@ class Slider extends Component { { backgroundColor: thumbTintColor }, mainStyles.thumb, orientation === 'vertical' - ? mainStyles.thumbVertical - : mainStyles.thumbHorizontal, + ? mainStyles.thumbVertical(trackStyle && trackStyle.width) + : mainStyles.thumbHorizontal(trackStyle && trackStyle.height), thumbStyle, { transform: [ @@ -620,12 +621,12 @@ const styles = StyleSheet.create({ height: THUMB_SIZE, borderRadius: THUMB_SIZE / 2, }, - thumbHorizontal: { - top: 22, - }, - thumbVertical: { - left: 22, - }, + thumbHorizontal: height => ({ + top: 22 + (height ? (height - 4) / 2 : 0), + }), + thumbVertical: width => ({ + left: 22 + (width ? (width - 4) / 2 : 0), + }), touchArea: { position: 'absolute', backgroundColor: 'transparent', From 07886c195527ce584b209861f97f85d3f732737f Mon Sep 17 00:00:00 2001 From: Kyle Roach Date: Sun, 24 Feb 2019 14:17:12 -0400 Subject: [PATCH 17/18] docs(Customization): Add common pitfalls section on Theming Adds a section on Theming where it explains common bugs a user might encounter when using the ThemeProvider. Fixes #1721 --- docs/customization.md | 73 +++++++++++++++++++ .../version-1.0.0/customization.md | 73 +++++++++++++++++++ 2 files changed, 146 insertions(+) diff --git a/docs/customization.md b/docs/customization.md index 5b789aab9a..a31e4cc3b8 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -304,3 +304,76 @@ const App = () => { ); }; ``` + +--- + +### Common Pitfalls + +This section outlines some common pitfalls when using Theming. + +#### My local styles aren't working with the theme + +It's important to understand that the `ThemeProvider` works by merging your local(external) styles with those set on the theme. +This means that in both cases **the type of these styles must be the same**. + +##### Example 1 + +```jsx +const theme = { + Button: { + containerStyle: { + marginTop: 10; + } + } +} + +