Skip to content

Commit 1fa6d44

Browse files
docs: update README for component usage and examples
1 parent 972b8b8 commit 1fa6d44

1 file changed

Lines changed: 12 additions & 9 deletions

File tree

README.md

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,21 +37,23 @@ function App() {
3737
Pressto comes with two ready-to-use components:
3838

3939
**PressableScale** - Scales down when pressed
40+
4041
```jsx
4142
import { PressableScale } from 'pressto';
4243

4344
<PressableScale onPress={() => alert('Pressed!')}>
4445
<Text>Scale Animation</Text>
45-
</PressableScale>
46+
</PressableScale>;
4647
```
4748

4849
**PressableOpacity** - Fades when pressed
50+
4951
```jsx
5052
import { PressableOpacity } from 'pressto';
5153

5254
<PressableOpacity onPress={() => alert('Pressed!')}>
5355
<Text>Opacity Animation</Text>
54-
</PressableOpacity>
56+
</PressableOpacity>;
5557
```
5658

5759
Both components accept all standard React Native Pressable props (`onPress`, `onPressIn`, `onPressOut`, `style`, etc.).
@@ -77,30 +79,28 @@ const PressableRotate = createAnimatedPressable((progress) => {
7779
// Use it like any other pressable
7880
<PressableRotate onPress={() => console.log('rotated!')}>
7981
<Text>Rotate Me</Text>
80-
</PressableRotate>
82+
</PressableRotate>;
8183
```
8284

8385
**The `progress` parameter** goes from `0` (idle) to `1` (pressed), allowing you to interpolate any style property.
8486

8587
### More Examples
8688

8789
**Color change:**
90+
8891
```jsx
8992
import { interpolateColor } from 'react-native-reanimated';
9093

9194
const PressableColor = createAnimatedPressable((progress) => {
9295
'worklet';
9396
return {
94-
backgroundColor: interpolateColor(
95-
progress,
96-
[0, 1],
97-
['#3B82F6', '#1D4ED8']
98-
),
97+
backgroundColor: interpolateColor(progress, [0, 1], ['#3B82F6', '#1D4ED8']),
9998
};
10099
});
101100
```
102101

103102
**Combined animations:**
103+
104104
```jsx
105105
const PressableCombo = createAnimatedPressable((progress) => {
106106
'worklet';
@@ -140,6 +140,7 @@ function App() {
140140
```
141141

142142
**Options:**
143+
143144
- `animationType`: `'timing'` or `'spring'` (default: `'timing'`)
144145
- `animationConfig`: Pass timing or spring configuration
145146
- `config`: Set default values for `minScale`, `activeOpacity`, `baseScale`
@@ -157,7 +158,7 @@ function App() {
157158
<PressablesConfig
158159
globalHandlers={{
159160
onPress: () => {
160-
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
161+
Haptics.selectionAsync();
161162
},
162163
}}
163164
>
@@ -265,6 +266,7 @@ function App() {
265266
Creates a custom animated pressable.
266267

267268
**Parameters:**
269+
268270
- `animatedStyle`: Function that returns animated styles
269271
- `progress`: number (0-1) - Animation progress
270272
- `options.isPressed`: boolean - Currently being pressed
@@ -278,6 +280,7 @@ Creates a custom animated pressable.
278280
Global configuration provider.
279281

280282
**Props:**
283+
281284
- `animationType`: 'timing' | 'spring' - Default: 'timing'
282285
- `animationConfig`: Timing/spring config object
283286
- `config`: { activeOpacity, minScale, baseScale }

0 commit comments

Comments
 (0)