Creating the Worst Volume Control in React Native with Reanimated

In this video, I will take on the challenge of creating the world's most frustrating volume control using React Native and Reanimated. By utilizing the powerful capabilities of Reanimated and the sensors data from the device, I will build an animated volume control that will push your patience to the limit.🤯😅
❗Try our FREE 4-day Masterclass on notJust.Academy:
assets.notjust.dev/masterclass
This build includes a lot of tools & technologies, and it's a great opportunity to learn how to:
- Use Reanimated to create complex and interactive UIs in React Native
- Utilize Expo to build and test React Native apps quickly and efficiently
- Implement sensors data in your React Native app to create unique and engaging user experiences
💻 Get the Asset Bundle here: assets.notjust.dev/volume-con...
📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev in 2023! Check out what our successful students are saying about their experience:
academy.notjust.dev
💬 Join the notJust Development gang and let's build together:
Twitter: / vadimnotjustdev
Instagram: / vadimnotjustdev
Facebook: / notjustdev
LinkedIn: / vadimsavin
Discord: / discord
Timecodes:
0:00 Introduction to Worst Volume Controls in React Native
0:57 Overview of Reanimated useAnimatedSensor
1:56 Exploring Existing Solutions and Starting Implementation
2:12 Setting Up the Project with Expo and React Native Reanimated
2:52 Importing Components and Initializing the Project
3:30 Working with Device Sensors and Gravity
5:41 Adding Animated Components for Smooth Transition
6:22 Implementing Rotation Animation with React Native Reanimated
7:00 Connecting Sensor Values to the Slider Animation
7:40 Creating and Updating Shared Value for Volume Control
8:22 Animating Slider Properties with Animated Props
9:41 Implementing Animated Props for Slider Value
10:51 Simulating Physics with Acceleration and Speed
14:56 Implementing Acceleration for More Realistic Movement
19:21 Integrating Shared Volume Value with Global State
21:34 Conclusion and Resources
Disclaimer: This build is for educational purposes only. All views, opinions, and technology choices expressed in this video are my own and do not represent the views, opinions, or technology choices of any entity whatsoever with which I have been, am now, or will be affiliated.
#notjustdev #reactnative #ui