feat: migrate to BaseButton (#9)

* feat: replace gesture detector with pressable

* chore: release 0.2.2-beta.0

* chore: add types

* chore: set up base button

* feat: implement animated base button with active state handling

* feat: set up base screen navigation

* refactor: simplify event handling in BasePressable and update context types

* fix: types

* refactor: memoize base pressable

* fix: base callbacks

* chore: update readme

* chore: release 0.2.2-beta.2

* chore: update dependencies and remove Yarn configuration files

* chore: release 0.2.2-beta.4

* fix: update BasePressableProps type definition for better type safety

* chore: release 0.2.2-beta.5

* fix: support additional props on base pressable

* chore: release 0.2.2-beta.6

* fix: update progress handling to use get() method for animated values

* chore: migrate to bun

* refactor: remove enabled checks from pressable event handlers for cleaner code

* chore: update react-native-reanimated to version 4.1.1 in bun.lock and package.json

* chore: add react-native-worklets dependency and update related configurations

* chore: update expo and related dependencies in package.json and bun.lock

* chore: update deps

* chore: remove unused dependencies and webpack configuration files

* chore: update deps

* chore: upgrade react and react-native

* chore: add Jest configuration and update Babel presets for testing

* chore: update installation instructions to include react-native-worklets

* refactor: update PressablesConfig animation settings and improve animated style dependencies

* chore: add Jest types to TypeScript configuration

* chore: add .eslintignore file and update dependencies for eslint-plugin-jest and expo packages

* chore: add eslint-plugin-eslint-comments to dependencies in package.json and bun.lock

* chore: add eslint-plugin-react to dependencies in package.json and bun.lock

* chore: add babel-preset-expo to devDependencies

* chore: update eslint-plugin-react-hooks

* chore: add eslint-plugin-react-native

* chore: update @react-native/eslint-plugin to version 0.82.0 in package.json and bun.lock

* chore: update devDependencies

Author: enzomanuelmangano

.eslintignore

@@ -0,0 +1,9 @@
+node_modules/
+lib/
+coverage/
+example/node_modules/
+example/android/
+example/ios/
+example/.expo/
+example/dist/
+*.config.js

.github/actions/setup/action.yml

@@ -1,27 +1,14 @@
 name: Setup
-description: Setup Node.js and install dependencies
+description: Setup Bun and install dependencies
 
 runs:
   using: composite
   steps:
-    - name: Setup Node.js
-      uses: actions/setup-node@v3
+    - name: Setup Bun
+      uses: oven-sh/setup-bun@v2
       with:
-        node-version-file: .nvmrc
-
-    - name: Cache dependencies
-      id: yarn-cache
-      uses: actions/cache@v3
-      with:
-        path: |
-          **/node_modules
-          .yarn/install-state.gz
-        key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}-${{ hashFiles('**/package.json', '!node_modules/**') }}
-        restore-keys: |
-          ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
-          ${{ runner.os }}-yarn-
+        bun-version: latest
 
     - name: Install dependencies
-      if: steps.yarn-cache.outputs.cache-hit != 'true'
-      run: yarn install --immutable
+      run: bun install
       shell: bash

.github/workflows/ci.yml

@@ -21,10 +21,10 @@ jobs:
         uses: ./.github/actions/setup
 
       - name: Lint files
-        run: yarn lint
+        run: bun run lint
 
       - name: Typecheck files
-        run: yarn typecheck
+        run: bun run typecheck
 
   test:
     runs-on: ubuntu-latest
@@ -36,7 +36,7 @@ jobs:
         uses: ./.github/actions/setup
 
       - name: Run unit tests
-        run: yarn test --maxWorkers=2 --coverage
+        run: bun run test --maxWorkers=2 --coverage
 
   build-library:
     runs-on: ubuntu-latest
@@ -48,7 +48,7 @@ jobs:
         uses: ./.github/actions/setup
 
       - name: Build package
-        run: yarn prepare
+        run: bun run prepare
 
   build-web:
     runs-on: ubuntu-latest
@@ -61,4 +61,4 @@ jobs:
 
       - name: Build example for Web
         run: |
-          yarn example expo export --platform web
+          bun run example expo export --platform web

.gitignore

@@ -80,3 +80,9 @@ lib/
 # React Native Codegen
 ios/generated
 android/generated
+
+.cursor
+
+dist
+
+coverage

.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs

@@ -6,18 +6,18 @@ We want this community to be friendly and respectful to each other. Please follo
 
 ## Development workflow
 
-This project is a monorepo managed using [Yarn workspaces](https://yarnpkg.com/features/workspaces). It contains the following packages:
+This project is a monorepo managed using [Bun workspaces](https://bun.sh/docs/install/workspaces). It contains the following packages:
 
 - The library package in the root directory.
 - An example app in the `example/` directory.
 
-To get started with the project, run `yarn` in the root directory to install the required dependencies for each package:
+To get started with the project, run `bun install` in the root directory to install the required dependencies for each package:
 
 ```sh
-yarn
+bun install
 ```
 
-> Since the project relies on Yarn workspaces, you cannot use [`npm`](https://github.com/npm/cli) for development.
+> Since the project relies on Bun workspaces, you should use [`bun`](https://bun.sh) for development.
 
 The [example app](/example/) demonstrates usage of the library. You need to run it to test any changes you make.
 
@@ -28,44 +28,44 @@ You can use various commands from the root directory to work with the project.
 To start the packager:
 
 ```sh
-yarn example start
+bun example start
 ```
 
 To run the example app on Android:
 
 ```sh
-yarn example android
+bun example android
 ```
 
 To run the example app on iOS:
 
 ```sh
-yarn example ios
+bun example ios
 ```
 
 To run the example app on Web:
 
 ```sh
-yarn example web
+bun example web
 ```
 
 Make sure your code passes TypeScript and ESLint. Run the following to verify:
 
 ```sh
-yarn typecheck
-yarn lint
+bun run typecheck
+bun run lint
 ```
 
 To fix formatting errors, run the following:
 
 ```sh
-yarn lint --fix
+bun run lint --fix
 ```
 
 Remember to add tests for your change if possible. Run the unit tests by:
 
 ```sh
-yarn test
+bun test
 ```
 
 ### Commit message convention
@@ -96,20 +96,20 @@ We use [release-it](https://github.com/release-it/release-it) to make it easier
 To publish new versions, run the following:
 
 ```sh
-yarn release
+bun run release
 ```
 
 ### Scripts
 
 The `package.json` file contains various scripts for common tasks:
 
-- `yarn`: setup project by installing dependencies.
-- `yarn typecheck`: type-check files with TypeScript.
-- `yarn lint`: lint files with ESLint.
-- `yarn test`: run unit tests with Jest.
-- `yarn example start`: start the Metro server for the example app.
-- `yarn example android`: run the example app on Android.
-- `yarn example ios`: run the example app on iOS.
+- `bun install`: setup project by installing dependencies.
+- `bun run typecheck`: type-check files with TypeScript.
+- `bun run lint`: lint files with ESLint.
+- `bun test`: run unit tests with Jest.
+- `bun example start`: start the Metro server for the example app.
+- `bun example android`: run the example app on Android.
+- `bun example ios`: run the example app on iOS.
 
 ### Sending a pull request
 

.yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs

@@ -1,20 +1,22 @@
+## Pressto 🔥
+
 https://github.com/user-attachments/assets/c857eb8d-3ce7-4afe-b2dd-e974560684d8
 
 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”.
+The package is built on top of the BaseButton 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
-yarn add pressto react-native-reanimated react-native-gesture-handler
+bun add pressto react-native-reanimated react-native-gesture-handler react-native-worklets
 ```
 
 Or with Expo
 
 ```sh
-npx expo install pressto react-native-reanimated react-native-gesture-handler
+npx expo install pressto react-native-reanimated react-native-gesture-handler react-native-worklets
 ```
 
 ## Features
@@ -95,7 +97,7 @@ function App() {
 export default () => (
   <PressablesConfig
     animationType="spring"
-    config={{ mass: 2 }}
+    config={{ mass: 1, damping: 30, stiffness: 200 }}
     globalHandlers={{
       onPress: () => {
         console.log('you can call haptics here');
@@ -125,28 +127,38 @@ A function to create custom animated pressables. It takes a worklet function tha
 
 A component to configure global settings for all pressable components within its children.
 
-## Use with ScrollView and FlatList/FlashList
+## Avoid highlight flicker effect in Scrollable List
 
-`pressto` provides an optional custom scroll render component that enhances the scrolling experience when used with pressable components.
+Since pressto is built on top of the BaseButton from react-native-gesture-handler, it handles tap conflict detection automatically when used with a FlatList imported from react-native-gesture-handler.
 
 ```jsx
-import { renderScrollComponent } from 'pressto';
-import { FlatList } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
 
 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.
-Applying the renderScrollComponent from `pressto` means that the tap gesture will be delayed for a short amount of time to understand if the tap gesture is a scroll or a tap gesture.
+You can also use whatever Scrollable component you want, as long as it supports the renderScrollComponent prop.
+
+```jsx
+import { WhateverList } from 'your-favorite-list-package'
+import { ScrollView } from 'react-native-gesture-handler';
+
+function App() {
+  return (
+    <WhateverList
+      data={data}
+      renderItem={({ item }) => <PressableRotate style={styles.box} />}
+      renderScrollComponent={(props) => <ScrollView {...props} />}
+  );
+}
+```
 
 ## Contributing