Building a Burger City App UI with React Native and Expo | Music Coding | For Beginners

Building a Burger City App UI with React Native and expo

πŸ’₯Let’s mockup this awesome πŸ” Burger City App UI with React Native and expo.

Playlist of full series:

βœ… #1 β€” Onboarding πŸ‘‰https://youtu.be/gyqYpPgmYcs​

βœ… #2 β€” Login, Forget password πŸ‘‰https://youtu.be/Rilsk5YAVzA​

βœ… #3 β€” Navigation v5 Stack, Tabs πŸ‘‰ https://youtu.be/xKKYLB-xToI​

βœ… #4 β€” Home Screen πŸ‘‰ https://youtu.be/U-XVmxrp2j0​

βœ… #5 β€” Delivery Screens πŸ‘‰ https://youtu.be/-Rd2Z55e48o​

βœ… #6 β€” Burgers Menu πŸ‘‰ https://youtu.be/Lff6eVUyDfc​

βœ… #7 β€” Add to Cart πŸ‘‰ https://youtu.be/dSabv8sZ2Wo​

βœ… #8 β€” Order Payment πŸ‘‰ https://youtu.be/q-9rywrkF7k​

βœ… #9 β€” Track Orders πŸ‘‰ https://youtu.be/dUFJ3SLaotA​

βœ… #10 β€” Final πŸ‘‰ https://youtu.be/xkCOltnXUAU

❀️ Remember to Subscribe me πŸ‘‰ https://bit.ly/39g9MWs


In this series you will learn how to build the React Native mobile app UI which can be worked as code snippets. You also can use the examples for save time building native mobile apps for android and iOS using React Native.

Facebook: https://www.facebook.com/musiccoding

Twitter: https://twitter.com/musicoding

Thank you for watching! Make sure to like and subscribe my youtube channel https://bit.ly/39g9MWs for more videos like this!

Happy coding!


In an App, the most common way of page navigation is using Tab bar and header, while the official third party library recommended by React Native is react-navigation. React Navigation have already released version 5.x, which is quite different from the previous version, but it is more convenient to use. This article mainly explains the usage of react navigation 5.0 and above.

Installation

Install Core Library

# NPM
npm install @react-navigation/native
# Yarn
yarn add @react-navigation/native

Install Dependencies

# NPM
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
#Yarn
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

From React Native 0.60 and higher…


In this video we learn:

  • How to mockup the iOS 13 GUI Contacts Screen
  • How to use React Navigation v5 to create the stack navigation and tab navigation

❀️ Remember to Subscribe me β–Ί https://bit.ly/39g9MWs

Don’t forget to leave a thumbs up if you found the video useful. Also, click on the bell icon to turn on notifications. This way you’ll be notified the moment new videos are uploaded.

Follow me!

Twitter: https://twitter.com/musicoding

Software Used:

VSCode, React Native, Expo


#4 β€” Building a Home Screen using ReactNative Animated | iOS 13 GUI

In this video we learn:

- How to mockup the iOS 13 GUI Home Screen, e.g. β€˜x’ delete and red number

- How to simulate to enter the delete mode after long press the application icon

- How to use Animated component to shake the application icon

❀️ Remember to Subscribe me β–Ί https://bit.ly/39g9MWs

Don’t forget to leave a thumbs up if you found the video useful. Also, click on the bell icon to turn on notifications. This way you’ll be notified the moment new videos are uploaded.

Software Used: VSCode, React Native, Expo


https://youtu.be/krxCPfPZo3Q

In this video we learn:

  • How to use the React Native basics components;
  • How to make and use custom component;
  • How to use react-native-swipe to swapping the screens

Software Used:

VSCode, React Native, Expo


#2 β€” Building a Lock Passcode Screen

In this video we learn:
β€” How to use the React Native basics components. e.g. View, Text, Image, TouchableOpacity;
β€” How to use ImageBackground and blurRadius to blurring the image.
β€” Handling the state of passcode while press the Number or Cancel


I am going to make a series video about the iOS 13 GUI using react native and expo.

#1 β€” Building a iOS 13 GUI Lock Screen

Detail pls check out https://youtu.be/mvY_TQM0rVE

In this video we learn:
β€” How to use the React Native basics components. e.g. View, Text, Image, TouchableOpacity;
β€” How to use custom fonts in React Native & Expo;
β€” Use moment to format the date and time.


In this video we learn:
β€” How to use the React Native basics components. e.g. View, Text, Image
β€” Use StatusBar to hide the status bar
β€” Use react-native-swiper for shipping the images.

Let’s listen music while coding!

Music Coding

Software Developer and YouTuber | Beginner #ReactNative on my YouTube Chanel.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store