feat: allow changing pressable defaults

Author: enzomanuelmangano

src/pressables/base.tsx

@@ -13,6 +13,7 @@ import type {
   AnimatedPressableOptions,
   PressableContextType,
 } from '../provider/context';
+import type { PressableConfig } from '../provider/constants';
 
 const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton);
 type AnimatedPressableProps = ComponentProps<typeof AnimatedBaseButton>;
@@ -22,6 +23,7 @@ export type AnimatedPressableStyleOptions<TMetadata = unknown> = {
   isToggled: boolean;
   isSelected: boolean;
   metadata: TMetadata;
+  config: PressableConfig;
 };
 
 export type BasePressableProps<TMetadata = unknown> = {
@@ -37,7 +39,7 @@ export type BasePressableProps<TMetadata = unknown> = {
    * @platform web
    */
   activateOnHover?: boolean;
-} & Omit<Partial<PressableContextType<'timing' | 'spring'>>, 'metadata'> &
+} & Omit<Partial<PressableContextType<'timing' | 'spring'>>, 'metadata' | 'config'> &
   Partial<
     Pick<
       AnimatedPressableProps,
@@ -81,18 +83,19 @@ const BasePressable: React.FC<BasePressableProps> = React.memo(
     onPressOut,
     animatedStyle,
     animationType: animationTypeProp,
-    config: configProp,
+    animationConfig: animationConfigProp,
     enabled = true,
     initialToggled = false,
     activateOnHover: activateOnHoverProp,
     ...rest
   }) => {
     const {
       animationType: animationTypeProvider,
-      config: configPropProvider,
+      animationConfig: animationConfigProvider,
       globalHandlers,
       metadata,
       activateOnHover: activateOnHoverProvider,
+      config,
     } = usePressablesConfig();
 
     const lastTouchedPressable = useLastTouchedPressable();
@@ -107,31 +110,31 @@ const BasePressable: React.FC<BasePressableProps> = React.memo(
     const active = useSharedValue(false);
     const isToggled = useSharedValue(initialToggled);
 
-    const { animationType, config } = useMemo(() => {
+    const { animationType, animationConfig } = useMemo(() => {
       if (animationTypeProp != null) {
         return {
           animationType: animationTypeProp,
-          config: configProp,
+          animationConfig: animationConfigProp,
         };
       }
       return {
         animationType: animationTypeProvider,
-        config: configProp ?? configPropProvider,
+        animationConfig: animationConfigProp ?? animationConfigProvider,
       };
     }, [
       animationTypeProp,
       animationTypeProvider,
-      configProp,
-      configPropProvider,
+      animationConfigProp,
+      animationConfigProvider,
     ]);
 
     const withAnimation = useMemo(() => {
       return animationType === 'timing' ? withTiming : withSpring;
     }, [animationType]);
 
     const progress = useDerivedValue<number>(() => {
-      return withAnimation(active.get() ? 1 : 0, config);
-    }, [config, withAnimation]);
+      return withAnimation(active.get() ? 1 : 0, animationConfig);
+    }, [animationConfig, withAnimation]);
 
     const onPressInWrapper = useCallback(() => {
       active.set(true);
@@ -214,6 +217,7 @@ const BasePressable: React.FC<BasePressableProps> = React.memo(
             isToggled: isToggled.get(),
             isSelected: lastTouchedPressable.get() === pressableId,
             metadata,
+            config,
           })
         : {};
     }, [
@@ -224,6 +228,7 @@ const BasePressable: React.FC<BasePressableProps> = React.memo(
       lastTouchedPressable,
       pressableId,
       metadata,
+      config,
     ]);
 
     const hoverProps = useMemo(

src/pressables/custom/opacity.ts

@@ -1,9 +1,9 @@
 import { interpolate } from 'react-native-reanimated';
 import { createAnimatedPressable } from '../hoc';
 
-export const PressableOpacity = createAnimatedPressable((progress) => {
+export const PressableOpacity = createAnimatedPressable((progress, { config }) => {
   'worklet';
   return {
-    opacity: interpolate(progress, [0, 1], [1, 0.5]),
+    opacity: interpolate(progress, [0, 1], [1, config.activeOpacity]),
   };
 });

src/pressables/custom/scale.ts

@@ -1,12 +1,12 @@
 import { interpolate } from 'react-native-reanimated';
 import { createAnimatedPressable } from '../hoc';
 
-export const PressableScale = createAnimatedPressable((progress) => {
+export const PressableScale = createAnimatedPressable((progress, { config }) => {
   'worklet';
   return {
     transform: [
       {
-        scale: interpolate(progress, [0, 1], [1, 0.96]),
+        scale: interpolate(progress, [0, 1], [config.maxScale, config.minScale]),
       },
     ],
   };

src/provider/constants.ts

@@ -1,10 +1,22 @@
 import { Easing } from 'react-native-reanimated';
 
-export const DefaultConfigs = {
+export type PressableConfig = {
+  activeOpacity: number;
+  minScale: number;
+  maxScale: number;
+};
+
+export const DefaultAnimationConfigs = {
   timing: { duration: 250, easing: Easing.bezier(0.25, 0.1, 0.25, 1) },
   spring: {
     mass: 1,
     damping: 30,
     stiffness: 200,
   },
 } as const;
+
+export const DefaultPressableConfig: PressableConfig = {
+  activeOpacity: 0.5,
+  minScale: 0.96,
+  maxScale: 1,
+} as const;

src/provider/context.ts

@@ -5,7 +5,7 @@ import {
   type WithSpringConfig,
   type WithTimingConfig,
 } from 'react-native-reanimated';
-import { DefaultConfigs } from './constants';
+import { DefaultAnimationConfigs, DefaultPressableConfig, type PressableConfig } from './constants';
 
 export type AnimationType = 'timing' | 'spring';
 
@@ -20,7 +20,7 @@ export type PressableContextType<
   TMetadata = unknown,
 > = {
   animationType: T;
-  config: T extends 'timing' ? WithTimingConfig : WithSpringConfig;
+  animationConfig: T extends 'timing' ? WithTimingConfig : WithSpringConfig;
   globalHandlers?: {
     onPressIn?: (options: AnimatedPressableOptions) => void;
     onPressOut?: (options: AnimatedPressableOptions) => void;
@@ -32,14 +32,19 @@ export type PressableContextType<
    * @platform web
    */
   activateOnHover?: boolean;
+  /**
+   * Pressable configuration values (opacity, scale, etc.)
+   */
+  config: PressableConfig;
 };
 
 export const PressablesContext = createContext<
   PressableContextType<AnimationType, unknown>
 >({
   animationType: 'timing',
-  config: DefaultConfigs.timing,
+  animationConfig: DefaultAnimationConfigs.timing,
   metadata: undefined,
+  config: DefaultPressableConfig,
 });
 
 export const PressablesGroupContext = createContext<{

src/provider/index.tsx

@@ -5,7 +5,7 @@ import {
   type WithTimingConfig,
 } from 'react-native-reanimated';
 
-import { DefaultConfigs } from './constants';
+import { DefaultAnimationConfigs, DefaultPressableConfig, type PressableConfig } from './constants';
 import {
   PressablesContext,
   PressablesGroupContext,
@@ -19,7 +19,7 @@ export type PressablesConfigProps<
 > = {
   children?: React.ReactNode;
   animationType?: T;
-  config?: T extends 'timing' ? WithTimingConfig : WithSpringConfig;
+  animationConfig?: T extends 'timing' ? WithTimingConfig : WithSpringConfig;
   globalHandlers?: {
     onPressIn?: (options: AnimatedPressableOptions) => void;
     onPressOut?: (options: AnimatedPressableOptions) => void;
@@ -31,6 +31,10 @@ export type PressablesConfigProps<
    * @platform web
    */
   activateOnHover?: boolean;
+  /**
+   * Pressable configuration values (opacity, scale, etc.)
+   */
+  config?: Partial<PressableConfig>;
 };
 
 export const PressablesGroup = ({ children }: PropsWithChildren) => {
@@ -52,20 +56,22 @@ export const PressablesGroup = ({ children }: PropsWithChildren) => {
 export const PressablesConfig = <T extends AnimationType, TMetadata = unknown>({
   children,
   animationType = 'timing' as T,
-  config,
+  animationConfig,
   globalHandlers,
   metadata,
   activateOnHover,
+  config,
 }: PressablesConfigProps<T, TMetadata>) => {
   const value = useMemo(() => {
     return {
       animationType,
-      config: config ?? DefaultConfigs[animationType],
+      animationConfig: animationConfig ?? DefaultAnimationConfigs[animationType],
       globalHandlers,
       metadata,
       activateOnHover,
+      config: { ...DefaultPressableConfig, ...config },
     };
-  }, [animationType, config, globalHandlers, metadata, activateOnHover]);
+  }, [animationType, animationConfig, globalHandlers, metadata, activateOnHover, config]);
 
   return (
     <PressablesContext.Provider value={value}>
@@ -75,3 +81,4 @@ export const PressablesConfig = <T extends AnimationType, TMetadata = unknown>({
 };
 
 export * from './hooks';
+export type { PressableConfig } from './constants';