@renegades/react-native-tickle 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -55
- package/package.json +3 -4
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<img width="1536" height="1024" alt="banner" src="https://github.com/user-attachments/assets/
|
|
1
|
+
<img width="1536" height="1024" alt="banner" src="https://github.com/user-attachments/assets/61f1f3bf-24dc-4e0d-ba6a-4dce3a548c96" />
|
|
2
2
|
|
|
3
3
|
# @renegades/react-native-tickle
|
|
4
4
|
|
|
@@ -8,7 +8,7 @@ AHAP-style haptics (transient + continuous) on top of [Nitro Modules](https://ni
|
|
|
8
8
|
|
|
9
9
|
Complete flexibility over iOS haptics with synchronous UI-thread execution.
|
|
10
10
|
|
|
11
|
-
> iOS only (Core Haptics). Android support could be added in the future, but it
|
|
11
|
+
> iOS only (Core Haptics). Android support could be added in the future, but it's currently unplanned.
|
|
12
12
|
|
|
13
13
|
## Installation
|
|
14
14
|
|
|
@@ -18,7 +18,7 @@ npm i @renegades/react-native-tickle react-native-nitro-modules
|
|
|
18
18
|
|
|
19
19
|
## Concepts (what to use when)
|
|
20
20
|
|
|
21
|
-
- **Transient**: Instant
|
|
21
|
+
- **Transient**: Instant "click/tap" events. No duration — you trigger them at a point in time.
|
|
22
22
|
- **Continuous (pattern)**: Time-based patterns you _can_ define ahead of time. You provide **events** (with `duration`) and optionally **curves** (automation over time).
|
|
23
23
|
- **Continuous player (real-time)**: For _unpredictable_ input (gesture position, scroll velocity, real-time data). You create a player once, then **start → update (many times) → stop**.
|
|
24
24
|
|
|
@@ -26,10 +26,29 @@ npm i @renegades/react-native-tickle react-native-nitro-modules
|
|
|
26
26
|
|
|
27
27
|
On iOS Core Haptics, a pattern is made of two different building blocks:
|
|
28
28
|
|
|
29
|
-
- **Events**: things that happen (transient
|
|
30
|
-
- **Curves**: how parameters (intensity/sharpness) evolve over time via control points, independent of
|
|
29
|
+
- **Events**: things that happen (transient "ticks" or continuous segments) at a `relativeTime`, with base `intensity`/`sharpness`.
|
|
30
|
+
- **Curves**: how parameters (intensity/sharpness) evolve over time via control points, independent of "what event" is currently playing.
|
|
31
31
|
|
|
32
|
-
They
|
|
32
|
+
They're separate because they're different object types in Core Haptics (events vs parameter curves) and they serve different jobs: **events define the structure**, **curves define the modulation**. You often combine both in one pattern.
|
|
33
|
+
|
|
34
|
+
## Haptix Studio
|
|
35
|
+
|
|
36
|
+
<table>
|
|
37
|
+
<tr>
|
|
38
|
+
<td>
|
|
39
|
+
<img src="https://github.com/user-attachments/assets/9a0edcfa-37ee-440d-9ae3-48fdcce59780" alt="Haptix Studio" width="280" />
|
|
40
|
+
</td>
|
|
41
|
+
<td>
|
|
42
|
+
|
|
43
|
+
Try out **Haptix Studio** to see what's possible with haptics.
|
|
44
|
+
|
|
45
|
+
Play with continuous patterns and real-time updates, then export your creations directly into code.
|
|
46
|
+
|
|
47
|
+
[Download on Test Flight](https://testflight.apple.com/join/HJn3mbb3)
|
|
48
|
+
|
|
49
|
+
</td>
|
|
50
|
+
</tr>
|
|
51
|
+
</table>
|
|
33
52
|
|
|
34
53
|
## Usage
|
|
35
54
|
|
|
@@ -131,8 +150,6 @@ startHaptic(
|
|
|
131
150
|
|
|
132
151
|
Use this when you _can't_ predefine a pattern. You start the player, update it in real time, then stop it.
|
|
133
152
|
|
|
134
|
-
**Using the hook (recommended):**
|
|
135
|
-
|
|
136
153
|
```tsx
|
|
137
154
|
import { useContinuousPlayer } from '@renegades/react-native-tickle';
|
|
138
155
|
|
|
@@ -152,41 +169,9 @@ function MyComponent() {
|
|
|
152
169
|
}
|
|
153
170
|
```
|
|
154
171
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
```ts
|
|
158
|
-
import {
|
|
159
|
-
createContinuousPlayer,
|
|
160
|
-
startContinuousPlayer,
|
|
161
|
-
updateContinuousPlayer,
|
|
162
|
-
stopContinuousPlayer,
|
|
163
|
-
destroyContinuousPlayer,
|
|
164
|
-
} from '@renegades/react-native-tickle';
|
|
165
|
-
|
|
166
|
-
const PLAYER_ID = 'my-player';
|
|
167
|
-
|
|
168
|
-
createContinuousPlayer(PLAYER_ID, 1.0, 0.5);
|
|
169
|
-
startContinuousPlayer(PLAYER_ID);
|
|
170
|
-
updateContinuousPlayer(PLAYER_ID, 0.8, 0.1);
|
|
171
|
-
stopContinuousPlayer(PLAYER_ID);
|
|
172
|
-
destroyContinuousPlayer(PLAYER_ID);
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
### Opt out of the provider (manual engine control)
|
|
176
|
-
|
|
177
|
-
If you don’t want the provider behavior:
|
|
178
|
-
|
|
179
|
-
```ts
|
|
180
|
-
import { initializeEngine, destroyEngine } from '@renegades/react-native-tickle';
|
|
181
|
-
|
|
182
|
-
initializeEngine();
|
|
183
|
-
// ...
|
|
184
|
-
destroyEngine();
|
|
185
|
-
```
|
|
186
|
-
|
|
187
|
-
### Stop everything (recommended in screen cleanups)
|
|
172
|
+
### Stop everything
|
|
188
173
|
|
|
189
|
-
|
|
174
|
+
If users can navigate away from a screen while haptics are still playing, call `stopAllHaptics()` in your cleanup to stop them.
|
|
190
175
|
|
|
191
176
|
```ts
|
|
192
177
|
import { stopAllHaptics } from '@renegades/react-native-tickle';
|
|
@@ -202,8 +187,6 @@ export function SomeScreen() {
|
|
|
202
187
|
|
|
203
188
|
Disable haptics globally for users who prefer no haptic feedback. The setting is **persisted** across app restarts. When disabled, all haptic calls become no-ops.
|
|
204
189
|
|
|
205
|
-
**Using the hook (recommended):**
|
|
206
|
-
|
|
207
190
|
```tsx
|
|
208
191
|
import { useHapticsEnabled } from '@renegades/react-native-tickle';
|
|
209
192
|
|
|
@@ -214,19 +197,9 @@ function SettingsScreen() {
|
|
|
214
197
|
}
|
|
215
198
|
```
|
|
216
199
|
|
|
217
|
-
**Manual control:**
|
|
218
|
-
|
|
219
|
-
```ts
|
|
220
|
-
import { setHapticsEnabled, getHapticsEnabled } from '@renegades/react-native-tickle';
|
|
221
|
-
|
|
222
|
-
const isEnabled = getHapticsEnabled(); // true by default
|
|
223
|
-
setHapticsEnabled(false); // Disable all haptics
|
|
224
|
-
setHapticsEnabled(true); // Re-enable haptics
|
|
225
|
-
```
|
|
226
|
-
|
|
227
200
|
### System haptics (predefined OS-level feedback)
|
|
228
201
|
|
|
229
|
-
While the main purpose of this package is to support AHAP-style patterns (transient + continuous haptics with curves), system haptics are also available for completeness. These are simple, predefined OS-level feedback types that don't require pattern definitions.
|
|
202
|
+
While the main purpose of this package is to support AHAP-style patterns (transient + continuous haptics with curves), system haptics are also available for completeness. These are simple, predefined OS-level feedback types that don't require pattern definitions. These methods are also UI-thread friendly.
|
|
230
203
|
|
|
231
204
|
```ts
|
|
232
205
|
import {
|
|
@@ -245,6 +218,14 @@ triggerNotification('success'); // 'success' | 'warning' | 'error'
|
|
|
245
218
|
triggerSelection();
|
|
246
219
|
```
|
|
247
220
|
|
|
221
|
+
### Advanced control
|
|
222
|
+
|
|
223
|
+
For fine-grained control over the haptic API, you can opt out of the managed hooks and call the underlying functions directly:
|
|
224
|
+
|
|
225
|
+
- **Engine lifecycle**: `initializeEngine()` / `destroyEngine()` instead of `HapticProvider`
|
|
226
|
+
- **Enable/disable toggle**: `setHapticsEnabled()` / `getHapticsEnabled()` instead of `useHapticsEnabled()`
|
|
227
|
+
- **Continuous player**: `createContinuousPlayer()` / `startContinuousPlayer()` / `updateContinuousPlayer()` / `stopContinuousPlayer()` / `destroyContinuousPlayer()` instead of `useContinuousPlayer()`
|
|
228
|
+
|
|
248
229
|
## API
|
|
249
230
|
|
|
250
231
|
| Function | Purpose |
|
|
@@ -343,6 +324,10 @@ Each call creates an isolated pattern/player — curves from one won't affect ev
|
|
|
343
324
|
|
|
344
325
|
> **Note:** The library automatically resets control values to `1.0` at the end of each continuous event, so transients **after** a continuous event finishes are not affected. This limitation only applies to transients **during** a continuous event with active curves.
|
|
345
326
|
|
|
327
|
+
## Acknowledgment
|
|
328
|
+
|
|
329
|
+
Shoutout to [Jai](https://github.com/jaic231) for kicking off the Swift implementation 🙌
|
|
330
|
+
|
|
346
331
|
## Contributing
|
|
347
332
|
|
|
348
333
|
- [Development workflow](CONTRIBUTING.md#development-workflow)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@renegades/react-native-tickle",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Build and fine-tune haptic patterns with real-time previews",
|
|
5
5
|
"main": "./lib/module/index.js",
|
|
6
6
|
"types": "./lib/typescript/src/index.d.ts",
|
|
@@ -34,9 +34,8 @@
|
|
|
34
34
|
"!**/.*"
|
|
35
35
|
],
|
|
36
36
|
"scripts": {
|
|
37
|
-
"postinstall": "bash scripts/postinstall.sh",
|
|
38
37
|
"clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
|
|
39
|
-
"prepare": "bob build",
|
|
38
|
+
"prepare": "bun --yes nitrogen && bob build",
|
|
40
39
|
"nitrogen": "nitrogen",
|
|
41
40
|
"typecheck": "tsc",
|
|
42
41
|
"lint": "eslint \"**/*.{js,ts,tsx}\"",
|
|
@@ -99,7 +98,7 @@
|
|
|
99
98
|
"peerDependencies": {
|
|
100
99
|
"react": "*",
|
|
101
100
|
"react-native": "*",
|
|
102
|
-
"react-native-nitro-modules": "
|
|
101
|
+
"react-native-nitro-modules": "*"
|
|
103
102
|
},
|
|
104
103
|
"packageManager": "bun@1.1.38",
|
|
105
104
|
"react-native-builder-bob": {
|