docs: readme

enzomanuelmangano · Oct 8, 2024 · de1175c · de1175c
1 parent 57adc28
commit de1175c
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -36,11 +36,13 @@ function BasicPressablesExample() {
   return (
     <View style={styles.container}>
       <PressableScale style={styles.box} onPress={() => console.log('scale')} />
-      <PressableOpacity style={styles.box} onPress={() => console.log('opacity')} />
+      <PressableOpacity
+        style={styles.box}
+        onPress={() => console.log('opacity')}
+      />
     </View>
   );
 }
-
 ```
 
 ### Create a custom Pressable with createAnimatedPressable
@@ -49,15 +51,16 @@ function BasicPressablesExample() {
 import { createAnimatedPressable } from 'pressto';
 
 const PressableRotate = createAnimatedPressable((progress) => ({
-  transform: [
-    { rotate: `${progress.value * Math.PI / 4}rad` },
-  ],
+  transform: [{ rotate: `${(progress.value * Math.PI) / 4}rad` }],
 }));
 
 function CustomPressableExample() {
   return (
     <View style={styles.container}>
-      <PressableRotate style={styles.box} onPress={() => console.log('rotate')} />
+      <PressableRotate
+        style={styles.box}
+        onPress={() => console.log('rotate')}
+      />
     </View>
   );
 }
@@ -73,22 +76,32 @@ import { PressablesConfig } from 'pressto';
 function App() {
   return (
     <View style={styles.container}>
-      <PressableRotate style={styles.box} onPress={() => console.log('rotate')} />
+      <PressableRotate
+        style={styles.box}
+        onPress={() => console.log('rotate')}
+      />
       <PressableScale style={styles.box} onPress={() => console.log('scale')} />
-      <PressableOpacity style={styles.box} onPress={() => console.log('opacity')} />
+      <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');
-    }
-  }}>
+  <PressablesConfig
+    animationType="spring"
+    config={{ mass: 2 }}
+    globalHandlers={{
+      onPress: () => {
+        console.log('you can call haptics here');
+      },
+    }}
+  >
     <App />
   </PressablesConfig>
-)
+);
 ```
 
 ## API
@@ -120,3 +133,25 @@ MIT
 ---
 
 Made with ❤️ using [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
+
+### Use with ScrollView and FlatList
+
+`pressto` provides a custom scroll component that enhances the scrolling experience when used with pressable components.
+
+```jsx
+import { renderScrollComponent } from 'pressto';
+import { FlatList } from 'react-native';
+
+function App() {
+  return (
+    // This works with all the lists that support the renderScrollComponent prop
+    <FlatList
+      renderScrollComponent={renderScrollComponent}
+      data={data}
+      renderItem={({ item }) => <PressableRotate style={styles.box} />}
+    />
+  );
+}
+```
+
+The `renderScrollComponent` function wraps the scroll view with additional functionality in order to allow smoother interactions between scrolling and pressable components, preventing unwanted activations during scroll gestures.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -17,7 +17,7 @@ const PressableRotate = createAnimatedPressable((progress) => {
     backgroundColor: interpolateColor(
       progress.value,
       [0, 1],
-      ['#474747', '#000000']
+      ['#d1d1d1', '#000000']
     ),
     shadowColor: '#ffffff',
     shadowOffset: {
@@ -46,13 +46,22 @@ function App() {
 
 const styles = StyleSheet.create({
   container: {
-    // flex: 1,
+    paddingTop: 25,
     backgroundColor: '#fff',
+    gap: 10,
   },
   box: {
-    width: 120,
+    width: '95%',
     height: 120,
-    backgroundColor: 'gray',
+    elevation: 5,
+    shadowColor: '#000000',
+    shadowOffset: {
+      width: 0,
+      height: 0,
+    },
+    shadowOpacity: 0.5,
+    backgroundColor: 'red',
+    shadowRadius: 10,
     borderRadius: 35,
     borderCurve: 'continuous',
     alignSelf: 'center',