add TouchableForeground

vonovak · Jul 16, 2018 · 3c86f01 · 3c86f01
1 parent d6b198e
commit 3c86f01
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git 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 `<Item .. />` (such as `iconName`) and also `<HeaderButtons ... />`. 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
@@ -29,6 +29,7 @@ export type VisibleButtonProps = $Exact<{
 
 type OtherProps = {
   touchableBackground: any,
+  touchableForeground: any,
   getButtonElement: VisibleButtonProps => React.Element<any>,
 };
 
@@ -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 (
-      <RenderedComponent
+      <Touchable
         background={touchableBackground}
+        foreground={touchableForeground}
+        disabled={!onPress}
         onPress={onPress}
         hitSlop={BUTTON_HIT_SLOP}
         style={[styles.buttonContainer, buttonWrapperStyle]}