Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/enzomanuelmangano/pressto
Your React Native app deserves better tapping interactions.
https://github.com/enzomanuelmangano/pressto
pressables react-native react-native-gesture-handler react-native-reanimated
Last synced: 7 days ago
JSON representation
Your React Native app deserves better tapping interactions.
- Host: GitHub
- URL: https://github.com/enzomanuelmangano/pressto
- Owner: enzomanuelmangano
- License: mit
- Created: 2024-09-17T10:57:24.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-12-30T17:22:48.000Z (25 days ago)
- Last Synced: 2025-01-10T22:12:12.459Z (14 days ago)
- Topics: pressables, react-native, react-native-gesture-handler, react-native-reanimated
- Language: TypeScript
- Homepage:
- Size: 1.83 MB
- Stars: 146
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
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”.
## Installation
```sh
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
### 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 (
console.log('scale')} />
console.log('opacity')}
/>
);
}
```
### Create a custom Pressable with createAnimatedPressable
```jsx
import { createAnimatedPressable } from 'pressto';
const PressableRotate = createAnimatedPressable((progress) => {
'worklet';
return {
transform: [{ rotate: `${(progress.value * Math.PI) / 4}rad` }],
};
});
function CustomPressableExample() {
return (
console.log('rotate')}
/>
);
}
```
### Use the PressablesConfig
```jsx
import React from 'react';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
import { PressablesConfig } from 'pressto';
function App() {
return (
console.log('rotate')}
/>
console.log('scale')} />
console.log('opacity')}
/>
);
}
export default () => (
{
console.log('you can call haptics here');
},
}}
>
);
```
## 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.
## Use with ScrollView and FlatList/FlashList
`pressto` provides an optional custom scroll render 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
}
/>
);
}
```
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.
## Contributing
Contributions are welcome! Please see our [contributing guide](CONTRIBUTING.md) for more details.
## License
MIT
---
Made with ❤️ using [create-react-native-library](https://github.com/callstack/react-native-builder-bob)