How To Build the AIRBNB map with React Native and Expo | DEVember Day 5

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: 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:
github.com/notJust-dev/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 4-day Masterclass on notJust.Academy:
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:
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 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

[@nehat786]

Sir you did awesome job. Nobody teach such things freely.

[@veedjohnson]

Thank you Vadim, and I hope you’re much better now 🙏🏾

[@lokindradangi]

❤❤❤❤ Great tutorial

[@preciousimoniakemu4106]

😂😂😂 The part Vadim said, "Am I tripping?"

[@ststeve499]

Thanks Man

[@akibmahmudrime2845]

have you figured it out how to get the sticky map with bottom sheet?