Merge branch 'docs/readme'

enzomanuelmangano · Sep 27, 2024 · 8d750b8 · 8d750b8
2 parents 58f72e3 + 6285852
commit 8d750b8
Show file tree

Hide file tree

Showing 6 changed files with 227 additions and 88 deletions.
diff --git a/README.md b/README.md
@@ -1,31 +1,122 @@
-# pressto
+https://github.com/user-attachments/assets/c857eb8d-3ce7-4afe-b2dd-e974560684d8
 
-Some custom react native touchables
+The fastest way to improve your React Native app is by using tap gestures.
+That's why I've created **pressto**, a super-simple package to help you get started.
+
+The package is built on top of the Tap Gesture from [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/) to handle the resulting gestures and animations on the main thread. It aims to replace your “TouchableOpacity”.
 
 ## Installation
 
 ```sh
-npm install pressto
+yarn add pressto react-native-reanimated react-native-gesture-handler
 ```
 
+Or with Expo
+
+```sh
+npx expo install pressto react-native-reanimated react-native-gesture-handler
+```
+
+## Features
+
+- Pre-built animated pressable components: `PressableScale` and `PressableOpacity`
+- Easy creation of custom animated pressables with `createAnimatedPressable`
+- Configurable animation types and durations
+
 ## Usage
 
-```js
-import { multiply } from 'pressto';
+### Use basic Pressables: PressableScale and PressableOpacity
 
-// ...
+```jsx
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { PressableOpacity, PressableScale } from 'pressto';
+
+function BasicPressablesExample() {
+  return (
+    <View style={styles.container}>
+      <PressableScale style={styles.box} onPress={() => console.log('scale')} />
+      <PressableOpacity style={styles.box} onPress={() => console.log('opacity')} />
+    </View>
+  );
+}
 
-const result = await multiply(3, 7);
 ```
 
+### Create a custom Pressable with createAnimatedPressable
+
+```jsx
+import { createAnimatedPressable } from 'pressto';
+
+const PressableRotate = createAnimatedPressable((progress) => ({
+  transform: [
+    { rotate: `${progress.value * Math.PI / 4}rad` },
+  ],
+}));
+
+function CustomPressableExample() {
+  return (
+    <View style={styles.container}>
+      <PressableRotate style={styles.box} onPress={() => console.log('rotate')} />
+    </View>
+  );
+}
+```
+
+### Use the PressablesConfig
+
+```jsx
+import React from 'react';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
+import { PressablesConfig } from 'pressto';
+
+function App() {
+  return (
+    <View style={styles.container}>
+      <PressableRotate style={styles.box} onPress={() => console.log('rotate')} />
+      <PressableScale style={styles.box} onPress={() => console.log('scale')} />
+      <PressableOpacity style={styles.box} onPress={() => console.log('opacity')} />
+    </View>
+  );
+}
+
+export default () => (
+  <PressablesConfig animationType="spring" config={{ mass: 2 }} globalHandlers={{
+    onPress: () => {
+      console.log('you can call haptics here');
+    }
+  }}>
+    <App />
+  </PressablesConfig>
+)
+```
+
+## API
+
+### PressableScale
+
+A pressable component that scales when pressed.
+
+### PressableOpacity
+
+A pressable component that changes opacity when pressed.
+
+### createAnimatedPressable
+
+A function to create custom animated pressables. It takes a worklet function that defines how the component should animate based on the press progress.
+
+### PressablesConfig
+
+A component to configure global settings for all pressable components within its children.
+
 ## Contributing
 
-See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+Contributions are welcome! Please see our [contributing guide](CONTRIBUTING.md) for more details.
 
 ## License
 
 MIT
 
 ---
 
-Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
+Made with ❤️ using [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
diff --git a/example/package.json b/example/package.json
@@ -15,13 +15,14 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.5",
+    "react-native-gesture-handler": "~2.16.1",
+    "react-native-reanimated": "~3.10.1",
     "react-native-web": "~0.19.10"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "react-native-builder-bob": "^0.30.2"
   },
-  "private": false,
   "publishConfig": {
     "access": "public"
   }

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -5,35 +5,53 @@ import {
   PressablesConfig,
 } from 'pressto';
 import { StyleSheet, View } from 'react-native';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
+import { interpolate, interpolateColor } from 'react-native-reanimated';
 
 const PressableRotate = createAnimatedPressable((progress) => {
   'worklet';
   return {
-    transform: [{ rotate: `${(progress.value * Math.PI) / 4}rad` }],
+    transform: [
+      { rotate: `${(progress.value * Math.PI) / 4}rad` },
+      { scale: interpolate(progress.value, [0, 1], [1, 0.9]) },
+    ],
+    backgroundColor: interpolateColor(
+      progress.value,
+      [0, 1],
+      ['#e4e4e4', '#ffffff']
+    ),
+    shadowColor: '#ffffff',
+    shadowOffset: {
+      width: 0,
+      height: 0,
+    },
+    shadowOpacity: interpolate(progress.value, [0, 1], [0, 1]),
+    shadowRadius: interpolate(progress.value, [0, 1], [0, 150]),
   };
 });
 
-export default function App() {
+function App() {
   return (
-    <PressablesConfig animationType="spring">
-      <GestureHandlerRootView style={styles.container}>
-        <PressableScale
-          onPress={() => console.log('scale')}
-          config={{
-            duration: 100,
-          }}
-        >
-          <View style={styles.box} />
-        </PressableScale>
-        <PressableOpacity onPress={() => console.log('opacity')}>
-          <View style={[styles.box, styles.customBox]} />
-        </PressableOpacity>
-        <PressableRotate onPress={() => console.log('rotate')}>
-          <View style={styles.box} />
-        </PressableRotate>
-      </GestureHandlerRootView>
-    </PressablesConfig>
+    <View style={styles.container}>
+      <PressableRotate
+        style={styles.box}
+        onPress={() => {
+          console.log('tap rotate :)');
+        }}
+      />
+      <PressableScale
+        style={styles.box}
+        onPress={() => {
+          console.log('tap scale :)');
+        }}
+      />
+      <PressableOpacity
+        style={styles.box}
+        onPress={() => {
+          console.log('tap opacity :)');
+        }}
+      />
+    </View>
   );
 }
 
@@ -42,13 +60,34 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    backgroundColor: '#000000',
+    gap: 25,
   },
   box: {
-    width: 200,
-    height: 200,
-    backgroundColor: 'red',
-  },
-  customBox: {
-    backgroundColor: 'blue',
+    width: 120,
+    height: 120,
+    backgroundColor: '#cbcbcb',
+    borderRadius: 35,
+    borderCurve: 'continuous',
   },
 });
+
+const AppProvider = () => {
+  return (
+    <PressablesConfig
+      animationType="spring"
+      config={{
+        mass: 2,
+      }}
+      globalHandlers={{
+        onPress: () => {
+          console.log('use haptics!');
+        },
+      }}
+    >
+      <App />
+    </PressablesConfig>
+  );
+};
+
+export default gestureHandlerRootHOC(AppProvider);
diff --git a/package.json b/package.json
@@ -52,14 +52,14 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/enzomanuelmangano/reactiive-pressables.git"
+    "url": "git+https://github.com/enzomanuelmangano/pressto.git"
   },
   "author": "Enzo Manuel Mangano <enzomanuelmangano@gmail.com> (https://github.com/enzomanuelmangano)",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/enzomanuelmangano/reactiive-pressables/issues"
+    "url": "https://github.com/enzomanuelmangano/pressto/issues"
   },
-  "homepage": "https://github.com/enzomanuelmangano/reactiive-pressables#readme",
+  "homepage": "https://github.com/enzomanuelmangano/pressto#readme",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -80,6 +80,8 @@
     "react": "18.2.0",
     "react-native": "0.74.5",
     "react-native-builder-bob": "^0.30.2",
+    "react-native-gesture-handler": "~2.16.1",
+    "react-native-reanimated": "~3.10.1",
     "release-it": "^15.0.0",
     "typescript": "^5.2.2"
   },
@@ -88,7 +90,9 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-gesture-handler": "*",
+    "react-native-reanimated": "*"
   },
   "workspaces": [
     "example"

diff --git a/src/pressables/base.tsx b/src/pressables/base.tsx
@@ -15,7 +15,7 @@ import type { PressableContextType } from '../provider/context';
 import { unwrapSharedValue } from './utils';
 
 export type BasePressableProps = {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   onPress?: () => void;
   onPressIn?: () => void;
   onPressOut?: () => void;