🔴 Let's build a Deliveroo Clone with REACT NATIVE! (Navigation, Redux, Tailwind CSS & Sanity.io, TS)

🔴 LOOKING FOR THE CODE? 🛠️

---

The much-anticipated build is FINALLY HERE!
Join me as I build the DELIVEROO CLONE with REACT NATIVE (yes we're building for iOS & Android!). You'll learn how to do the following in this build:

👉 Use Tailwind CSS with RN for awesome styling!
👉 Use React Native Heroicons to elevate your app design!
👉 Use React Native Navigation to navigate between screens!
👉 Implement Redux to add items to the user's basket and manage state!
👉 Use Sanity CMS to power the app's backend, allowing your team to easily update the contents of the app!
👉 Build a sleek animated checkout flow with an AWESOME UI/UX experience!

+ SO MUCH MORE!

🎙️ PODCAST

🌍 SOCIALS:

❤️ SUPPORT

🕐 TIMESTAMPS:
00:00 Introduction
01:05 Build Showcase
03:17 Build Explanation (1/2)
04:49 Sanity Sponsorship
06:45 Build Explanation (2/2)
08:23 Expo Explanation
09:39 Setting Up Expo
16:41 Setting Up Tailwind CSS
20:17 Live Debugging
24:12 Setting Up React Native Navigation
29:08 Building the Home Screen
31:54 Building the Header Section of the Home Screen (1/2)
36:06 Implementing Heroicons
38:33 Building the Header Section of the Home Screen (2/2)
45:46 Building the Body Section of the Home Screen
46:47 Building the Categories of the Body Section (1/2)
47:47 Live Debugging Again!
54:00 Building the Categories of the Body Section (2/2)
01:01:17 Building the Featured Rows of the Body Section
01:16:29 Implementing Sanity
01:23:27 Adding and Changing Sanity Schemas
01:29:25 Adding Data in Sanity Studio (1/2)
01:39:03 GROQ Explanation
01:39:24 Querying in Sanity Studio (2/2)
01:41:50 Pulling Data from Sanity Studio
01:57:47 Building the Restaurant Screen
02:06:18 Building the Restaurant Info Section in the Restaurant Screen
02:11:49 Building the Menu Section in the Restaurant Screen
02:12:22 Building the Dish Rows in the Menu Section
02:25:59 Explaining and Implementing Redux
02:33:43 Implementing Add to Basket Functionality
02:43:14 Building the Basket Pop Up
02:51:21 Building the Basket Screen (1/2)
02:57:23 Implementing Grouping Menu Items Functionality
03:02:42 Building the Basket Screen (2/2)
03:17:03 Building the Placing Order Screen with Animations
03:24:48 Building the Delivery Screen (1/2)
03:32:33 Implementing the Map and Pin Functionality
03:36:37 Building the Delivery Screen (2/2)
03:40:05 Final Build Explanation and Demo
03:44:39 Outro

DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Deliveroo and it's subsidiaries in any form. Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for education purposes.

#reactjs #reactnative #redux #tailwindcss #tailwind

[programmermaureen]

This was my first React Native Project and I built it, and it turned out so cool, thanks Sonny for this amazing project

[anuragpramanik]

I really enjoy this channel's content on React Native - it's all based on real-life projects! Keep up the great work bro!

[correctcode]

Your builds always help me a lot to improve my coding skills in react, Dude. 🚀🚀

Thanks a lot, Sonny 🌷

[AbiNephilim]

Incredible stream! Took me 5 days to follow this and code up my version of this project, I decided to use Typescript to get some experience with it - I'm a dev coming from a PHP / Laravel background with HTML, CSS and vanilla JS experience so this was my first time using React Native, Redux, Typescript, Tailwind and Sanity, and I have certainly learned alot. Next step is updating my version of this project to polish it abit more and make it different so I can add it to my portfolio.

Thank you so much Sonny for this content! I've got a complete custom mobile app idea I've been meaning to get to so following this project has helped me learn immensely.

[rreay]

just a heads up, tailwind react-native isn't supported anymore and is now nativewind. Super easy to install and works exactly the same. Only real difference I saw is that you don't need the TailwindProvider.

[devdanny]

If you agree that this is the best channel to learn reactNative in 2022


Gather here let's take some selfie😄😄😄

[aisteinlaw]

I learnt a lot of things in this video! Thanks to Sonny and Jay!

[lokindradangi]

if your device is andriod then safeAreaview from react-native not gone work so import

import { SafeAreaView } from

[DeniseNelson]

Sonny! I miss joining you every week. The time difference makes it’s hard to catch you live but I want to thank you for continuing to make things easier to understand. I appreciate you and your hard work!

[cinturonnegro]

Hey bro! finally finished this app, hope this help me to get a better job! thanks man, i really appreciate this, keep working this way

[hasanhafiz]

You are just changing the tutorial culture. Huge respect ✊

[skilla]

Sonny wowwww lets finish this app bro. LETS GOOOO.

[zeroclp]

Just finished this app, amazing work Sunny, I guess this was a pretty good way to start with react-native.

LOVE THE ENERGY.

[nicholasbazzoni]

half way through this absolute blast cheers from brooklyn. love your show man!

[diegodominguez]

Just finished this project! Thanks Sonny 👑

[ToTiredToAnimate]

lol, i put on a youtube playlist for an essay, then when i woke up i have been hearing computer coding.

[EktaAnkitni]

May the diyas light lead you onto the road of growth and prosperity. Happy Diwali!

[Zack-oytz]

I feel like I need to smash the like Button 1000 times

[patrickkioko]

looking forward to try sanity. And i dont know how i missed reminder for this yet i had subscribed

[yusufguner]

Guys can you help me how we filled the backend at sanity. I think ı missed the part where we filled our sanity restaurants, dishes, featured, categories . How can ı implement it to my own sanit studio. Or if he published his own sanity How can ı access to those sanity data and implement it to my own project.