Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/enzomanuelmangano/react-native-skia-gesture
A detection system for React Native Skia components
https://github.com/enzomanuelmangano/react-native-skia-gesture
gestures react-native skia
Last synced: 2 days ago
JSON representation
A detection system for React Native Skia components
- Host: GitHub
- URL: https://github.com/enzomanuelmangano/react-native-skia-gesture
- Owner: enzomanuelmangano
- License: mit
- Created: 2022-12-05T22:50:37.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-06T14:14:57.000Z (6 months ago)
- Last Synced: 2025-01-15T04:35:51.158Z (9 days ago)
- Topics: gestures, react-native, skia
- Language: TypeScript
- Homepage:
- Size: 62.1 MB
- Stars: 138
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
React Native Skia Gesture 🤌🏽
_A detection system for React Native Skia components._
### Motivation
React Native Skia, provides many declarative APIs for building screens using React Components. However, [Skia components are not real components, but abstract representations of a part of a drawing](https://github.com/Shopify/react-native-skia/issues/513#issuecomment-1290126304).
Therefore direct interactions with individual Skia components can only be achieved indirectly from the Canvas (trying to figure out if the point on the screen that was clicked is within the element we want to interact with).
This package, simply provides a set of APIs to be able to interact directly with individual components.
## Installation
**You need to have already installed [@shopify/react-native-skia (>= 0.1.221)](https://shopify.github.io/react-native-skia/docs/getting-started/installation)**
### Since v0.3.0
You need to install Reanimated (v3.0.0+) and Gesture Handler (v2.0.0+)
```sh
yarn add react-native-reanimated react-native-gesture-handler
```
### Install Skia Gesture
Open a Terminal in your project's folder and then install the library using `yarn`:
```sh
yarn add react-native-skia-gesture
```
## Usage
```jsx
import {
useSharedValue,
} from 'react-native-reanimated';
import Touchable, {
useGestureHandler,
} from 'react-native-skia-gesture';
export default function App() {
const cx = useSharedValue(100);
const cy = useSharedValue(100);
const context = useSharedValue({ x: 0, y: 0 });
const circleGesture = useGestureHandler({
onStart: () => {
'worklet'; // Remember the 'worklet' keyword
context.value = {
x: cx.value,
y: cy.value,
}
},
onActive: ({ translationX, translationY }) => {
'worklet';
cx.value = context.value.x + translationX;
cy.value = context.value.y + translationY;
},
});
return (
);
}
```
If the element is a **Circle**, **Rect**, **RoundedRect**, or a **Path** the package will automatically derive its **touchablePath**. Alternatively it will have to be passed as a parameter to the TouchableComponent.
```jsx
...
const touchablePath = useDerivedValue(() => {
const path = new Path();
path.addCircle(cx.value, cy.value, 50);
return path;
}, [cx, cy]);
return (
);
...
```
### Run the Gestures on JS thread
You might want to run the gestures on the JS thread (but it's not recommended).
However it could be useful if you want to slowly migrate from the v0.2.0 to the v0.3.0.
To handle that you need to define the panGesture and pass it to the Touchable.Canvas
```jsx
import { Gesture } from 'react-native-gesture-handler';
...
const panGesture = Gesture.Pan().runOnJS(true)
const circleGesture = useGestureHandler({
// You can avoid the 'worklet' keyword if you are running the gesture on JS thread
onStart: () => {
context.value = {
x: cx.value,
y: cy.value,
}
},
onActive: ({ translationX, translationY }) => {
cx.value = context.value.x + translationX;
cy.value = context.value.y + translationY;
},
});
return (
);
```
## Ingredients
### `Canvas`
It's simply a Wrapper of Skia's Canvas.
---
### `withTouchableHandler`
It's a HOC with which to wrap all Skia components with which you want to interact directly. You will need to pass a `touchablePath` to the component.
```jsx
import { Image } from '@shopify/react-native-skia';
import { withTouchableHandler } from 'react-native-skia-gesture';
const TouchableImage = withTouchableHandler(Image);
const touchablePath = Skia.Path.Make().addCircle(x, y, 50);
return (
);
```
---
### `useGestureHandler`
It's a hook from which _onStart_, _onActive_, _onEnd_ interactions can be managed. The hook provides as the second parameter of each callback a context that can be optionally used (strongly inspired by the [useAnimatedGestureHandler](https://docs.swmansion.com/react-native-reanimated/docs/2.3.x/api/hooks/useAnimatedGestureHandler/) hook).
---
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)