Create Menu Bar & Add Navigation on Multiple Pages in React Native Online Edu. App in Hindi | P-3
Channel: Thapa Technical
Date: 2022-02-22

Welcome Guys,
In the previous video, we have implemented React Navigation in the Online Education App of React Native Project.
Check out the previous video, Implement React Navigation v-6 in React Native Project by Thapa 👉 Technical: https://youtu.be/soRZc995hSM

Today, we will create multiple screens and learn about How to navigate between multiple screens? in Online Education App of React Native Project.  
In this video, we have created multiple screens (Course.js, UserData.js, About.js, Contact.js ) then we have created Menu.js and added navigation functionality with the help of the useNavigation hook. And then we have added some CSS styling in Online Education App.

👉 Free Source Code Link: https://www.thapatechnical.com/2022/02/react-native-project-in-2022.html

😍 Check my Instagram to Connect with me:    https://www.instagram.com/thapatechnical

--------------- Timeline -------------
00:00 Intro
00:23 Checkout Previous Video
00:30 Join Discord Server to get Source Code
01:08 What did we learn in previous video?
01:18 Creating multiple screens
02:02 Recommended video : How to code in React Native 100x time faster?
02:14 Writing starter code in each screen 
03:08 Import all the screen in App.js
03:46 Add all the screen in App.js
05:20 Importance of initialRouteName props with example
06:15 Creating Menu.js file
06:54 What is useNavigation Hook?
07:30 Why we need to use useNavigation Hook?
08:30 Writing starter code in Menu.js
09:13 Today's Task
09:45 Implementation of useNavigation Hook
10:10 Creating TouchableOpacity component
10:52 Adding styles in TouchableOpacity 
11:10 Adding onPress Prop in TouchableOpacity 
11:21 Use of navigation method in onPress prop
12:30 Adding Menu component in Home.js
13:07 Error Occurred
13:13 Solving the error
13:55 Output after creating Menu bar
14:35 How to align menu items horizontally?
15:06 Output after aligning menu items horizontally
15:11 Adding horizontal space between the menu items
15:20 Output after adding horizontal space between the menu items
15:28 Adding more styles
15:50 Simple Trick : Adding vertical margin in menu items 
17:08 Output after using Trick
17:20 Adding styles in lineStyle 
17:46 Output after adding styles in lineStyle
18:04 Quick Revision : What we learnt till today?
18:24 Write some comments about Today's video
18:31 Outro

************* Must Watch Videos For Web Development *************

😍😍 Check  Programming Videos in One Hour👇 

➡️ HTML in One Video: https://youtu.be/pN7BFLfSjFw


➡️ CSS in One video:  https://youtu.be/hkQv0NIxKQY


➡️ CSS FlexBox in 30 Minutes: https://youtu.be/6L-PAmZajfA


➡️ JavaScript in One video:   https://youtu.be/PODgPW-hbfU


➡️  ECMAScript 6 in One Video:  https://youtu.be/Iek4DtRobLA


➡️ HTML5 in one video:  https://youtu.be/4V0-YpO-KZo


➡️ CSS3 in one video:  https://youtu.be/TFrFx7H5ZI8


➡️ Bootstrap4 in One video:   https://youtu.be/yZnNnvXO8HI


➡️ Jquery in One video:  https://youtu.be/PNvyPEQ0y-I


➡️ JSON in one video:  https://youtu.be/bMqevPKAPD4


➡️ ReactJS in one video:  https://youtu.be/43IbFDSVdB0


➡️ PHP in One Video:  https://youtu.be/3024Kc6SDJ0


➡️ NodeJS in one video:  https://youtu.be/ipnWAKoiBt


➡️ MySQL in one video:   https://youtu.be/5bFxbwjN-Gk


*********** CLICK HERE TO WATCH *************

➡️ Fetch API in JavaScript: https://youtu.be/TojSXOuGUW4

➡️ ES5 & ES6 | ECMAScript 6 in One Video in Hindi: https://youtu.be/Iek4DtRobLA

➡️ JavaScript Game Development Series in 2020: https://www.youtube.com/playlist?list=PLwGdqUZWnOp1Ub0K1CBuLxLOEN6wTq2bg


➡️ Source Code Link: https://www.thapatechnical.com/2019/11/how-to-get-source-code.html


➡️ Top 5 Programming Languages in 2020:  https://youtu.be/czroY5nAD0c


➡️ Ludo Game JavaScript Link: https://youtu.be/_tlncjn1JpU 


➡️Plz show some love to My Siter Youtube Channel and Plz Subscribe Link: https://www.youtube.com/channel/UCEst8yZ12JEYsSVVXmtU7GQ


 ***************** MUST WATCH VIDEOS ******************  


➡️ How to become a Full Stack Developer 2020: https://youtu.be/etZ4jq_YjyM


➡️ How To Become a Web Developer 2020: https://youtu.be/Ur9LGVT-GXs


➡️ How JavaScript Works:  https://youtu.be/VaBP6_pBOgM


➡️  Follow me on Instagram: https://www.instagram.com/vinodthapa55/



Make Website Responsive Using Media Queries in One Video in Hindi | Web Design Tutorial in Hindi

➡️ Link: https://youtu.be/cKR9gzco3Kc


Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.


Don't Forget to Follow  me on all Social Network, 


Website Link:  https://www.thapatechnical.com


Instagram Link:     https://www.instagram.com/vinodthapa55


Facebook Link:     https://www.facebook.com/vinodthapa55


Twitter       Link:     https://twitter.com/vb55thapa


Facebook ThapaTechnical Page Link: https://www.facebook.com/vinodbahadurthapa/?ref=aymt_homepage_panel&eid=ARCTi5kdE1POliSOXnW51qZdo6NcpcSOqrioqut1KDac_CfgY5OCey-vcHlgRDgc_OK6eYNFCF_Rrfiq