fix: use theme in PlatformPressable

react-navigation · Mar 12, 2021 · 40439cc · 40439cc
1 parent 24b3f73
commit 40439cc
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 19 deletions.
diff --git a/packages/elements/src/Header/HeaderBackButton.tsx b/packages/elements/src/Header/HeaderBackButton.tsx
@@ -22,7 +22,8 @@ export default function HeaderBackButton({
   labelVisible = Platform.OS === 'ios',
   onLabelLayout,
   onPress,
-  pressColorAndroid: customPressColorAndroid,
+  pressColor,
+  pressOpacity,
   screenLayout,
   tintColor: customTintColor,
   titleLayout,
@@ -31,7 +32,7 @@ export default function HeaderBackButton({
   testID,
   style,
 }: HeaderBackButtonProps) {
-  const { dark, colors } = useTheme();
+  const { colors } = useTheme();
 
   const [initialLabelWidth, setInitialLabelWidth] = React.useState<
     undefined | number
@@ -45,13 +46,6 @@ export default function HeaderBackButton({
           default: colors.text,
         });
 
-  const pressColorAndroid =
-    customPressColorAndroid !== undefined
-      ? customPressColorAndroid
-      : dark
-      ? 'rgba(255, 255, 255, .32)'
-      : 'rgba(0, 0, 0, .32)';
-
   const handleLabelLayout = (e: LayoutChangeEvent) => {
     onLabelLayout?.(e);
 
@@ -156,7 +150,8 @@ export default function HeaderBackButton({
       accessibilityLabel={accessibilityLabel}
       testID={testID}
       onPress={disabled ? undefined : handlePress}
-      pressColor={pressColorAndroid}
+      pressColor={pressColor}
+      pressOpacity={pressOpacity}
       android_ripple={{ borderless: true }}
       style={[styles.container, disabled && styles.disabled, style]}
       hitSlop={Platform.select({

diff --git a/packages/elements/src/PlatformPressable.tsx b/packages/elements/src/PlatformPressable.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Platform, Pressable, PressableProps } from 'react-native';
+import { useTheme } from '@react-navigation/native';
 
 export type Props = PressableProps & {
   pressColor?: string;
@@ -12,24 +13,30 @@ const ANDROID_SUPPORTS_RIPPLE =
   Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_LOLLIPOP;
 
 /**
- * PlatformPressable provides an abstraction on top of TouchableNativeFeedback and
- * TouchableOpacity to handle platform differences.
- *
- * On Android, you can pass the props of TouchableNativeFeedback.
- * On other platforms, you can pass the props of TouchableOpacity.
+ * PlatformPressable provides an abstraction on top of Pressable to handle platform differences.
  */
 export default function PlatformPressable({
   android_ripple,
-  pressColor = 'rgba(0, 0, 0, .32)',
+  pressColor,
   pressOpacity,
   style,
   ...rest
 }: Props) {
+  const { dark } = useTheme();
+
   return (
     <Pressable
       android_ripple={
         ANDROID_SUPPORTS_RIPPLE
-          ? { color: pressColor, ...android_ripple }
+          ? {
+              color:
+                pressColor !== undefined
+                  ? pressColor
+                  : dark
+                  ? 'rgba(255, 255, 255, .32)'
+                  : 'rgba(0, 0, 0, .32)',
+              ...android_ripple,
+            }
           : undefined
       }
       style={({ pressed }) => [

diff --git a/packages/elements/src/types.tsx b/packages/elements/src/types.tsx
@@ -127,13 +127,16 @@ export type HeaderBackButtonProps = {
   disabled?: boolean;
   /**
    * Callback to call when the button is pressed.
-   * By default, this triggers `goBack`.
    */
   onPress?: () => void;
   /**
    * Color for material ripple (Android >= 5.0 only).
    */
-  pressColorAndroid?: string;
+  pressColor?: string;
+  /**
+   * Opacity when the button is pressed, used when ripple is not supported.
+   */
+  pressOpacity?: number;
   /**
    * Function which returns a React Element to display custom image in header's back button.
    */