feat: add pressColor and pressOpacity props to drawerItem (#8834)

Co-authored-by: Petra Daneva <p.daneva@dineout.bg> Co-authored-by: Satyajit Sahoo <satyajit.happy@gmail.com>
react-navigation · Jan 29, 2021 · 52dbe4b · 52dbe4b
1 parent 3367ddf
commit 52dbe4b
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 38 deletions.
diff --git 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<typeof TouchableItem> & {
   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}
       >
         <React.Fragment>

diff --git 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<Props> {
   static defaultProps = {
-    activeOpacity: 0.3,
+    pressOpacity: 0.3,
     borderless: true,
     enabled: true,
   };
@@ -27,7 +27,7 @@ export default class TouchableItem extends React.Component<Props> {
       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
@@ -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
@@ -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
@@ -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<Props> {
         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
@@ -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<Props> {
       overshootClamping: true,
       restDisplacementThreshold: 0.01,
       restSpeedThreshold: 0.01,
-      toValue: active ? this.props.activeOpacity : 1,
+      toValue: active ? this.props.pressOpacity : 1,
       useNativeDriver,
     }).start();