feat: pressable opacity

example/src/App.tsx

@@ -1,4 +1,8 @@
-import { PressableScale, PressablesConfig } from '@reactiive/pressables';
+import {
+  PressableOpacity,
+  PressableScale,
+  PressablesConfig,
+} from '@reactiive/pressables';
 import { StyleSheet, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
@@ -9,6 +13,9 @@ export default function App() {
         <PressableScale onPress={() => console.log('pressed')}>
           <View style={styles.box} />
         </PressableScale>
+        <PressableOpacity onPress={() => console.log('pressed')}>
+          <View style={[styles.box, styles.customBox]} />
+        </PressableOpacity>
       </GestureHandlerRootView>
     </PressablesConfig>
   );
@@ -25,4 +32,7 @@ const styles = StyleSheet.create({
     height: 200,
     backgroundColor: 'red',
   },
+  customBox: {
+    backgroundColor: 'blue',
+  },
 });

src/pressables/custom/index.ts

@@ -0,0 +1,2 @@
+export * from './opacity';
+export * from './scale';

src/pressables/custom/opacity.ts

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

src/pressables/scale.tsx → src/pressables/custom/scale.ts

@@ -1,5 +1,5 @@
 import { interpolate } from 'react-native-reanimated';
-import { createAnimatedPressable } from './hoc';
+import { createAnimatedPressable } from '../hoc';
 
 export const PressableScale = createAnimatedPressable((progress) => {
   'worklet';

src/pressables/index.ts

@@ -1,2 +1,2 @@
+export * from './custom';
 export * from './hoc';
-export * from './scale';