Haptics, Sounds and Micro Animations
summary
A working Expo demo app sells matcha lattes with favorites, a 1–3 quantity picker and add‑to‑cart, and shows expo-haptics and react-native-haptic-feedback producing light/medium/heavy vibrations mapped to quantities, a notification sound via expo-av, and microanimations implemented with Reanimated 2 (withTiming, withSequence, interpolate). The add‑to‑cart button scales to 0.9 and dims while loading, favorites pulse and play a sound, all available as runnable code on Expo Snack so the features can be tried on phone.
AI-written summary · about
chapters (13)
- 0:00Start
- 1:00Haptic Feedback
- 2:40Add to Cart Button
- 3:18Quantity Picker
- 7:14Microanimations
- 9:42Use Animator Style
- 10:09Apply the Animated Style to the Pressable
- 12:06Animate the Add to Cart Button
- 16:00Amount Picker
- 16:51Fade Animations
- 17:05Reanimated Views
- 17:49Interpolate Function
- 20:10Accessibility Guidelines
related talks
23mHaptics: Untapped Potential
35mReact Native: Building Fluid User Experiences
22mMicro-interactions with React Spring
25mProgressive Web Animations
22mReact - Server Components, Suspense, and the new mental model
33mOne App Fits All: Building Responsive Experiences in React
10m3D Experiences in React Native With Expo-GL
25mBuilding Interactive React Applications