packages

example/src/views/PressableOpacity.tsx

@@ -0,0 +1,61 @@
+import React, { useCallback } from "react";
+import {
+  PressableProps,
+  Pressable,
+  PressableStateCallbackType,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+
+export interface PressableOpacityProps extends PressableProps {
+  /**
+   * The opacity to use when `disabled={true}`
+   *
+   * @default 1
+   */
+  disabledOpacity?: number;
+  /**
+   * The opacity to animate to when the user presses the button
+   *
+   * @default 0.2
+   */
+  activeOpacity?: number;
+}
+
+export type StyleType = (
+  state: PressableStateCallbackType
+) => StyleProp<ViewStyle>;
+
+/**
+ * A Pressable component that lowers opacity when in pressed state. Uses the JS Pressability API.
+ */
+export const PressableOpacity = ({
+  style,
+  disabled = false,
+  disabledOpacity = 1,
+  activeOpacity = 0.2,
+  ...passThroughProps
+}: PressableOpacityProps): React.ReactElement => {
+  const getOpacity = useCallback(
+    (pressed: boolean) => {
+      if (disabled) {
+        return disabledOpacity;
+      } else {
+        if (pressed) return activeOpacity;
+        else return 1;
+      }
+    },
+    [activeOpacity, disabled, disabledOpacity]
+  );
+  const _style = useCallback<StyleType>(
+    ({ pressed }) => [style as ViewStyle, { opacity: getOpacity(pressed) }],
+    [getOpacity, style]
+  );
+
+  return <Pressable style={_style} disabled={disabled} {...passThroughProps} />;
+};
+
+// Fallback implementation using TouchableOpacity:
+// export default function PressableOpacity(props: TouchableOpacityProps & { children?: React.ReactNode }): React.ReactElement {
+// 	return <TouchableOpacity delayPressIn={0} {...props} />;
+// }