Build the iOS Voice Memos app in React Native | DEVember Day 7

This is DAY 7 of #DEVember and today we're diving into the world of audio in React Native and Expo by building an iOS Voice Memos-like app. Learn how to record, playback, display audio waveforms and save audio files directly on your device's filesystem using React Native.

🌟DEVember Day 7: https://www.notjust.dev/projects/deve...

If you have ideas of features, topics or apps you would like me to cover during #DEVember, you can submit them on our 💡Idea Board:
https://github.com/notJust-dev/DEVemb...

📚 Today's Agenda:
Introduction to Audio Recording in React Native and Expo
Implementing Audio Playback Features
Integrate Expo Audio with our app
Saving Audio Files on the Device
Displaying Audio Waveforms
Designing the User Interface
Testing Audio Functionality

❗Try our FREE 4-day Masterclass on notJust.Academy:
https://assets.notjust.dev/masterclas...

📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience:
https://academy.notjust.dev/?utm_sour...

💬 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 the Voice Memos App Tutorial
0:35 Overview of Learning Objectives: Recording and Playback in Expo
1:16 DEVember React Native Tutorial
3:37 Setting Up the Project Repository
4:23 Starting the Development Server and Testing on iOS Simulator
5:37 Creating the Voice Memos Screen Layout
7:25 Cross-Platform Compatibility for the App
9:07 Previous Projects Overview and Transition to Voice Memos
9:45 Implementing Audio Recording Functionality
12:03 Adding Recording Start/Stop Button and Permissions
14:28 Storing Audio Files and Displaying URLs
18:56 Improving the Recording Button UI
24:07 Feedback for Recording Status
30:33 Implementing Playback Functionality for Audio Files
35:26 Designing Audio File List Items
38:47 Adding Playback Indicator and Progress Display
44:44 Audio Playback with Expo AV Library
50:05 Testing Audio Playback on Physical Device
55:16 Implementing Playback Status Update Function
1:01:16 Resetting Audio Playback Position
1:09:19 Troubleshooting Playback Position Reset Issue
1:17:23 Displaying Audio Duration and Current Position
1:28:23 Adding Animation Based on Audio Level
1:39:33 Implementing Real-Time Waveform Animation
1:55:10 Adjusting Waveform Animation Parameters
2:00:55 Attempting Playback Waveform Animation
2:15:19 Standardizing Waveform Display for Different Audio Lengths
2:28:09 Calculating Average Values for Waveform Lines
2:41:19 Finalizing Waveform Display and Recap of the Project

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 I have been, am now, or will be affiliated with.
#notjustdev #ReactNative