@renegades/react-native-tickle 0.1.0 → 0.1.1
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 +15 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
<img width="1536" height="1024" alt="banner" src="https://github.com/user-attachments/assets/7eaea07c-0813-44d3-8430-347229d54a97" />
|
|
2
|
+
|
|
3
|
+
# @renegades/react-native-tickle
|
|
2
4
|
|
|
3
5
|
AHAP-style haptics (transient + continuous) on top of [Nitro Modules](https://nitro.margelo.com/) — the core functions are **UI-thread friendly** (`'worklet'`).
|
|
4
6
|
|
|
@@ -11,7 +13,7 @@ Complete flexibility over iOS haptics with synchronous UI-thread execution.
|
|
|
11
13
|
## Installation
|
|
12
14
|
|
|
13
15
|
```sh
|
|
14
|
-
npm i react-native-tickle react-native-nitro-modules
|
|
16
|
+
npm i @renegades/react-native-tickle react-native-nitro-modules
|
|
15
17
|
```
|
|
16
18
|
|
|
17
19
|
## Concepts (what to use when)
|
|
@@ -36,7 +38,7 @@ They’re separate because they’re different object types in Core Haptics (eve
|
|
|
36
38
|
Wrap your app inside `HapticProvider`. This initializes the engine and automatically destroys it when the app goes to background.
|
|
37
39
|
|
|
38
40
|
```tsx
|
|
39
|
-
import { HapticProvider } from 'react-native-tickle';
|
|
41
|
+
import { HapticProvider } from '@renegades/react-native-tickle';
|
|
40
42
|
|
|
41
43
|
export function App() {
|
|
42
44
|
return <HapticProvider>{/* {Rest of your app} */}</HapticProvider>;
|
|
@@ -48,7 +50,7 @@ export function App() {
|
|
|
48
50
|
Play a transient:
|
|
49
51
|
|
|
50
52
|
```ts
|
|
51
|
-
import { startHaptic } from 'react-native-tickle';
|
|
53
|
+
import { startHaptic } from '@renegades/react-native-tickle';
|
|
52
54
|
|
|
53
55
|
startHaptic(
|
|
54
56
|
[
|
|
@@ -68,7 +70,7 @@ startHaptic(
|
|
|
68
70
|
Play a continuous pattern (events + curves together):
|
|
69
71
|
|
|
70
72
|
```ts
|
|
71
|
-
import { startHaptic } from 'react-native-tickle';
|
|
73
|
+
import { startHaptic } from '@renegades/react-native-tickle';
|
|
72
74
|
|
|
73
75
|
startHaptic(
|
|
74
76
|
[
|
|
@@ -99,7 +101,7 @@ startHaptic(
|
|
|
99
101
|
Combine transient + continuous in one pattern:
|
|
100
102
|
|
|
101
103
|
```ts
|
|
102
|
-
import { startHaptic } from 'react-native-tickle';
|
|
104
|
+
import { startHaptic } from '@renegades/react-native-tickle';
|
|
103
105
|
|
|
104
106
|
startHaptic(
|
|
105
107
|
[
|
|
@@ -132,7 +134,7 @@ Use this when you _can't_ predefine a pattern. You start the player, update it i
|
|
|
132
134
|
**Using the hook (recommended):**
|
|
133
135
|
|
|
134
136
|
```tsx
|
|
135
|
-
import { useContinuousPlayer } from 'react-native-tickle';
|
|
137
|
+
import { useContinuousPlayer } from '@renegades/react-native-tickle';
|
|
136
138
|
|
|
137
139
|
function MyComponent() {
|
|
138
140
|
const { start, stop, update } = useContinuousPlayer('my-player', 1.0, 0.5);
|
|
@@ -159,7 +161,7 @@ import {
|
|
|
159
161
|
updateContinuousPlayer,
|
|
160
162
|
stopContinuousPlayer,
|
|
161
163
|
destroyContinuousPlayer,
|
|
162
|
-
} from 'react-native-tickle';
|
|
164
|
+
} from '@renegades/react-native-tickle';
|
|
163
165
|
|
|
164
166
|
const PLAYER_ID = 'my-player';
|
|
165
167
|
|
|
@@ -175,7 +177,7 @@ destroyContinuousPlayer(PLAYER_ID);
|
|
|
175
177
|
If you don’t want the provider behavior:
|
|
176
178
|
|
|
177
179
|
```ts
|
|
178
|
-
import { initializeEngine, destroyEngine } from 'react-native-tickle';
|
|
180
|
+
import { initializeEngine, destroyEngine } from '@renegades/react-native-tickle';
|
|
179
181
|
|
|
180
182
|
initializeEngine();
|
|
181
183
|
// ...
|
|
@@ -187,7 +189,7 @@ destroyEngine();
|
|
|
187
189
|
Call `stopAllHaptics()` in your cleanup functions to terminate any ongoing continuous haptics. This prevents haptics from bleeding through to the next screen when navigating.
|
|
188
190
|
|
|
189
191
|
```ts
|
|
190
|
-
import { stopAllHaptics } from 'react-native-tickle';
|
|
192
|
+
import { stopAllHaptics } from '@renegades/react-native-tickle';
|
|
191
193
|
import { useEffect } from 'react';
|
|
192
194
|
|
|
193
195
|
export function SomeScreen() {
|
|
@@ -203,7 +205,7 @@ Disable haptics globally for users who prefer no haptic feedback. The setting is
|
|
|
203
205
|
**Using the hook (recommended):**
|
|
204
206
|
|
|
205
207
|
```tsx
|
|
206
|
-
import { useHapticsEnabled } from 'react-native-tickle';
|
|
208
|
+
import { useHapticsEnabled } from '@renegades/react-native-tickle';
|
|
207
209
|
|
|
208
210
|
function SettingsScreen() {
|
|
209
211
|
const [hapticsEnabled, setHapticsEnabled] = useHapticsEnabled();
|
|
@@ -215,7 +217,7 @@ function SettingsScreen() {
|
|
|
215
217
|
**Manual control:**
|
|
216
218
|
|
|
217
219
|
```ts
|
|
218
|
-
import { setHapticsEnabled, getHapticsEnabled } from 'react-native-tickle';
|
|
220
|
+
import { setHapticsEnabled, getHapticsEnabled } from '@renegades/react-native-tickle';
|
|
219
221
|
|
|
220
222
|
const isEnabled = getHapticsEnabled(); // true by default
|
|
221
223
|
setHapticsEnabled(false); // Disable all haptics
|
|
@@ -231,7 +233,7 @@ import {
|
|
|
231
233
|
triggerImpact,
|
|
232
234
|
triggerNotification,
|
|
233
235
|
triggerSelection,
|
|
234
|
-
} from 'react-native-tickle';
|
|
236
|
+
} from '@renegades/react-native-tickle';
|
|
235
237
|
|
|
236
238
|
// Impact feedback - simulates a physical collision
|
|
237
239
|
triggerImpact('light'); // 'light' | 'medium' | 'heavy' | 'soft' | 'rigid'
|
package/package.json
CHANGED