diff --git a/packages/drawer/src/views/DrawerItem.tsx b/packages/drawer/src/views/DrawerItem.tsx index b2be44a949..08d247ec60 100644 --- a/packages/drawer/src/views/DrawerItem.tsx +++ b/packages/drawer/src/views/DrawerItem.tsx @@ -7,7 +7,6 @@ import { ViewStyle, TextStyle, Platform, - TouchableWithoutFeedbackProps, } from 'react-native'; import { Link, useTheme } from '@react-navigation/native'; import Color from 'color'; @@ -56,6 +55,20 @@ type Props = { * Background color for item when its inactive. */ inactiveBackgroundColor?: string; + /** + * Color of the touchable effect on press. + * Only supported on Android. + * + * @platform android + */ + pressColor?: string; + /** + * Opacity of the touchable effect on press. + * Only supported on iOS. + * + * @platform ios + */ + pressOpacity?: string; /** * Style object for the label element. */ @@ -74,7 +87,7 @@ const Touchable = ({ accessibilityRole, delayPressIn, ...rest -}: TouchableWithoutFeedbackProps & { +}: React.ComponentProps & { to?: string; children: React.ReactNode; onPress?: () => void; @@ -132,6 +145,8 @@ export default function DrawerItem(props: Props) { inactiveBackgroundColor = 'transparent', style, onPress, + pressColor, + pressOpacity, ...rest } = props; @@ -155,6 +170,8 @@ export default function DrawerItem(props: Props) { style={[styles.wrapper, { borderRadius }]} accessibilityRole="button" accessibilityState={{ selected: focused }} + pressColor={pressColor} + pressOpacity={pressOpacity} to={to} > diff --git a/packages/drawer/src/views/TouchableItem.ios.tsx b/packages/drawer/src/views/TouchableItem.ios.tsx index ef6142f942..b8f4e804a7 100644 --- a/packages/drawer/src/views/TouchableItem.ios.tsx +++ b/packages/drawer/src/views/TouchableItem.ios.tsx @@ -5,14 +5,14 @@ import { BaseButton, BaseButtonProperties } from 'react-native-gesture-handler'; const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton); type Props = BaseButtonProperties & { - activeOpacity: number; + pressOpacity: number; }; const useNativeDriver = Platform.OS !== 'web'; export default class TouchableItem extends React.Component { static defaultProps = { - activeOpacity: 0.3, + pressOpacity: 0.3, borderless: true, enabled: true, }; @@ -27,7 +27,7 @@ export default class TouchableItem extends React.Component { overshootClamping: true, restDisplacementThreshold: 0.01, restSpeedThreshold: 0.01, - toValue: active ? this.props.activeOpacity : 1, + toValue: active ? this.props.pressOpacity : 1, useNativeDriver, }).start(); diff --git a/packages/drawer/src/views/TouchableItem.tsx b/packages/drawer/src/views/TouchableItem.tsx index 6d770d963c..6d613d27ff 100644 --- a/packages/drawer/src/views/TouchableItem.tsx +++ b/packages/drawer/src/views/TouchableItem.tsx @@ -11,15 +11,14 @@ import { TouchableNativeFeedback, TouchableOpacity, View, - ViewProps, + TouchableWithoutFeedbackProps, } from 'react-native'; -export type Props = ViewProps & { +export type Props = TouchableWithoutFeedbackProps & { pressColor?: string; + pressOpacity?: string; disabled?: boolean | null; borderless?: boolean; - delayPressIn?: number; - onPress?: () => void; children: React.ReactNode; }; diff --git a/packages/routers/src/__tests__/StackRouter.test.tsx b/packages/routers/src/__tests__/StackRouter.test.tsx index 8d2b143ba8..a24a2d59e2 100644 --- a/packages/routers/src/__tests__/StackRouter.test.tsx +++ b/packages/routers/src/__tests__/StackRouter.test.tsx @@ -1119,31 +1119,6 @@ it("doesn't push nonexistent screen", () => { options ) ).toBe(null); - - expect( - router.getStateForAction( - { - stale: false, - type: 'stack', - key: 'root', - index: 1, - routeNames: ['baz', 'bar', 'qux'], - routes: [ - { key: 'baz', name: 'baz' }, - { key: 'bar', name: 'bar' }, - ], - }, - { - type: 'PUSH', - payload: { - name: 'far', - key: 'test', - params: { answer: 42 }, - }, - }, - options - ) - ).toBe(null); }); it('ensures unique ID for push', () => { diff --git a/packages/stack/src/views/BorderlessButton.tsx b/packages/stack/src/views/BorderlessButton.tsx index c64be4fcc7..6bdd2d3280 100644 --- a/packages/stack/src/views/BorderlessButton.tsx +++ b/packages/stack/src/views/BorderlessButton.tsx @@ -5,7 +5,7 @@ import { BaseButton, BaseButtonProperties } from 'react-native-gesture-handler'; const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton); type Props = BaseButtonProperties & { - activeOpacity: number; + pressOpacity: number; }; const useNativeDriver = Platform.OS !== 'web'; @@ -27,7 +27,7 @@ export default class BorderlessButton extends React.Component { overshootClamping: true, restDisplacementThreshold: 0.01, restSpeedThreshold: 0.01, - toValue: active ? this.props.activeOpacity : 1, + toValue: active ? this.props.pressOpacity : 1, useNativeDriver, }).start(); } diff --git a/packages/stack/src/views/TouchableItem.ios.tsx b/packages/stack/src/views/TouchableItem.ios.tsx index ef6142f942..c06ab17eb0 100644 --- a/packages/stack/src/views/TouchableItem.ios.tsx +++ b/packages/stack/src/views/TouchableItem.ios.tsx @@ -5,7 +5,7 @@ import { BaseButton, BaseButtonProperties } from 'react-native-gesture-handler'; const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton); type Props = BaseButtonProperties & { - activeOpacity: number; + pressOpacity: number; }; const useNativeDriver = Platform.OS !== 'web'; @@ -27,7 +27,7 @@ export default class TouchableItem extends React.Component { overshootClamping: true, restDisplacementThreshold: 0.01, restSpeedThreshold: 0.01, - toValue: active ? this.props.activeOpacity : 1, + toValue: active ? this.props.pressOpacity : 1, useNativeDriver, }).start();