use Touchable instead of TouchableOpacity

Author: hawkrives

source/views/components/filter/filter-popover.js

@@ -4,10 +4,11 @@ import {StyleSheet, View, TouchableOpacity} from 'react-native'
 import Popover from 'react-native-popover-view'
 import {FilterSection} from './section'
 import type {FilterType} from './types'
+import {Touchable, type TouchableUnion} from '../touchable'
 import * as c from '../colors'
 
 type Props = {
-	anchor: React.Ref<typeof TouchableOpacity>,
+	anchor: ?React.Ref<TouchableUnion>,
 	filter: FilterType,
 	onClosePopover: (filter: FilterType) => any,
 	visible: boolean,

source/views/components/filter/filter-toolbar-button.js

@@ -5,6 +5,7 @@ import Icon from 'react-native-vector-icons/Ionicons'
 import type {FilterType} from './types'
 import {FilterPopover} from './filter-popover'
 import * as c from '../colors'
+import {Touchable, type TouchableUnion} from '../touchable'
 
 const buttonStyles = StyleSheet.create({
 	button: {
@@ -51,7 +52,7 @@ type State = {
 }
 
 export class FilterToolbarButton extends React.PureComponent<Props, State> {
-	touchable: TouchableOpacity
+	touchable: ?TouchableUnion = null
 
 	state = {
 		popoverVisible: false,
@@ -101,14 +102,15 @@ export class FilterToolbarButton extends React.PureComponent<Props, State> {
 
 		return (
 			<React.Fragment>
-				<TouchableOpacity
-					ref={ref => (this.touchable = ref)}
+				<Touchable
+					getRef={ref => (this.touchable = ref)}
+					highlight={false}
 					onPress={this.openPopover}
 					style={[buttonStyles.button, activeButtonStyle, style]}
 				>
 					<Text style={buttonTextStyle}>{title}</Text>
 					<Icon name={icon} size={18} style={activeContentStyle} />
-				</TouchableOpacity>
+				</Touchable>
 				<FilterPopover
 					anchor={this.touchable}
 					filter={filter}

source/views/components/touchable.js

@@ -9,6 +9,11 @@ import {
 	View,
 } from 'react-native'
 
+export type TouchableUnion =
+	| typeof TouchableHighlight
+	| typeof TouchableOpacity
+	| typeof TouchableNativeFeedback
+
 type Props = {|
 	accessibilityComponentType?: string,
 	accessibilityLabel?: string,
@@ -17,6 +22,7 @@ type Props = {|
 	borderless?: boolean,
 	children?: React.Node,
 	containerStyle?: any,
+	getRef?: () => TouchableUnion,
 	highlight?: boolean,
 	onPress?: () => any,
 	style?: any,
@@ -27,6 +33,7 @@ export const Touchable = ({
 	borderless = false,
 	children,
 	containerStyle,
+	getRef,
 	highlight = true,
 	onPress = () => {},
 	style,
@@ -45,6 +52,7 @@ export const Touchable = ({
 
 			return (
 				<Component
+					ref={getRef}
 					onPress={onPress}
 					{...innerProps}
 					style={containerStyle}
@@ -64,6 +72,7 @@ export const Touchable = ({
 
 			return (
 				<TouchableNativeFeedback
+					ref={getRef}
 					background={background}
 					onPress={onPress}
 					style={containerStyle}