@@ -37,21 +37,23 @@ function App() {
3737Pressto comes with two ready-to-use components:
3838
3939** PressableScale** - Scales down when pressed
40+
4041``` jsx
4142import { 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
5052import { PressableOpacity } from ' pressto' ;
5153
5254< PressableOpacity onPress= {() => alert (' Pressed!' )}>
5355 < Text > Opacity Animation< / Text >
54- < / PressableOpacity>
56+ < / PressableOpacity> ;
5557```
5658
5759Both 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
8992import { interpolateColor } from ' react-native-reanimated' ;
9093
9194const 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
105105const 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() {
265266Creates 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.
278280Global 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