Day 5 of #DEVember and today is all about exploring the power of maps in mobile apps, by building an interactive map feature similar to what you've seen on AIRBNB using React Native and Expo. We'll cover everything from integrating React Native Maps, displaying points of interest, to creating a scrollable carousel for detailed views!

DEVember Day 5: 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/notJustdev/DEVemb...

Today's Agenda:
Introduction to React Native Maps
Setting Up Map Views in Expo
Adding Points of Interest to the Map
Creating a Scrollable Carousel for POIs
Synchronizing the Carousel with the Map
Styling Map Components
Handling User Interaction with Map and List
Recap and Q&A

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

Enroll NOW in The FullStack Mobile Developer course and don’t miss out on your chance to become a 6figure 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 Building Airbnb Maps with React Native and Expo
0:33 Overview of the Map Feature in Airbnb Clone
0:50 Introduction to DEVember and Past Projects
3:07 Reviewing Previous Days' Work and Setting Up Day 5 Project
5:11 Creating the Day 5 Folder and Setting Up Airbnb Screen
6:46 Installing and Integrating React Native Maps in Expo
8:47 Displaying Map View and Adding Markers
13:22 Rendering Dynamic List of Markers on the Map
15:21 Implementing Custom Markers with Prices
23:27 Customizing Marker View and Styling
28:35 Extracting Marker Component for Cleaner Code
31:00 Adding Keys to Marker Components for Optimization
32:23 Creating Overlay Components on the Map
34:11 Designing and Implementing Selected Apartment Display
40:51 Styling and Positioning the Selected Apartment Component
49:20 Implementing State Management for Selected Apartment
53:37 Adding Bottom Sheet for List View of Apartments
56:11 Installing and Integrating Bottom Sheet Component
1:00:45 Creating Flat List in Bottom Sheet
1:08:26 Adjusting Snap Points and Styling of Bottom Sheet
1:13:05 Experimenting with Bottom Sheet Interactivity
1:16:22 Discussing Potential Improvements and Features
1:22:47 Attempting to Sync Bottom Sheet with Map Zoom
1:35:20 Concluding the Tutorial and Previewing Tomorrow's Session
1:42:29 Closing Remarks and Outro

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