Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Build the iOS Voice Memos app in React Native | DEVember Day 7
Play lesson

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

5.0 (4)
42 learners

What you'll learn

This course includes

  • 537.5 hours of video
  • Certificate of completion
  • Access on mobile and TV

Summary

Keywords

Full Transcript

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/devember/day7 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/DEVember/discussions/categories/ideas 📚 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/masterclass/?utm_source=youtube&utm_medium=livestream&utm_content=DEVember 📚 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_source=youtube&utm_medium=livestream&utm_content=DEVember 💬 Join the notJust Development gang and let's build together: Twitter: https://twitter.com/VadimNotJustDev Instagram: https://www.instagram.com/VadimNotJustDev Facebook: https://www.facebook.com/notjustdev LinkedIn: https://www.linkedin.com/in/vadimsavin Discord: https://discord.gg/VpURUN2 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

Course Hive

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

FAQs

Course Hive
Download CourseHive
Keep learning anywhere