From 3c86f01abdc2f7f7cb29d9726567936e90997241 Mon Sep 17 00:00:00 2001 From: Vojtech Novak Date: Tue, 17 Jul 2018 00:38:39 +0200 Subject: [PATCH] add TouchableForeground --- README.md | 13 +++++++------ src/HeaderButton.js | 7 +++++-- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 3a64d71..75e0784 100644 --- a/README.md +++ b/README.md @@ -64,12 +64,13 @@ static navigationOptions = { `HeaderButton` accepts: -| prop and type | description | note | -| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | -| IconComponent?: React.ComponentType<\*> | component to use for the icons, foe example from `react-native-vector-icons` | | -| iconSize?: number | iconSize | | -| color?: string | color of icons and buttons | | -| touchableBackground?: any | the project internally uses `react-native-platform-touchable` for rendering touchables. You may use this prop to specify the android ripple effect. Valid values are [here](https://github.com/react-community/react-native-platform-touchable#statics). | | +| prop and type | description | note | +| --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| IconComponent?: React.ComponentType<\*> | component to use for the icons, foe example from `react-native-vector-icons` | | +| iconSize?: number | iconSize | | +| color?: string | color of icons and buttons | | +| touchableBackground?: any | the lib internally uses `react-native-platform-touchable` for rendering touchables. You may use this prop to specify the android ripple effect. | Defaults to `Touchable.SelectableBackgroundBorderless()`, valid values are [here](https://github.com/react-community/react-native-platform-touchable#statics). | +| touchableForeground?: any | the lib internally uses `react-native-platform-touchable` for rendering touchables. You may use this prop to specify the android ripple effect. | Not defined by default, valid values are [here](https://github.com/react-community/react-native-platform-touchable#statics). | Please note that `HeaderButton` also requires other props to function correctly. Some of these props are passed from `` (such as `iconName`) and also ``. When wrapping `HeaderButton` it is thus important to not forget to pass down all props the wrapping component receives (this is easy using the spread operator), as documented in the [quick example](#quick-example). diff --git a/src/HeaderButton.js b/src/HeaderButton.js index b460b13..aa96c1b 100644 --- a/src/HeaderButton.js +++ b/src/HeaderButton.js @@ -29,6 +29,7 @@ export type VisibleButtonProps = $Exact<{ type OtherProps = { touchableBackground: any, + touchableForeground: any, getButtonElement: VisibleButtonProps => React.Element, }; @@ -46,6 +47,7 @@ export class HeaderButton extends React.PureComponent< getButtonElement, ButtonElement: ButtonElementOverride, touchableBackground, + touchableForeground, } = this.props; const { iconName, title, buttonStyle, IconComponent, iconSize, color } = this.props; @@ -54,10 +56,11 @@ export class HeaderButton extends React.PureComponent< ButtonElementOverride || getButtonElement({ iconName, title, buttonStyle, IconComponent, iconSize, color }); - const RenderedComponent = !onPress ? View : Touchable; return ( -