Build A Notes App Using Firebase And React Native & Expo | Part 1 | Project & Tutorial For Beginners

Hello guys, My name is Rohit Kumar Thakur. In this video, I am gonna show you, how to make a notes app using react native and expo. In this application I am following the CRUD operations. The CRUD stands for create, read, update, and delete.
React Native Expo is a cross platform framework, which gonna helps you to build mobile apps for both Android & iOS devices. The code part is not that much tough. You just have to follow the video to get the desired output.
Happy Hacking

𝐁𝐨𝐨𝐤 ( 𝐅𝐫𝐨𝐦 𝐂𝐨𝐝𝐞 𝐓𝐨 𝐂𝐨𝐧𝐧𝐞𝐜𝐭𝐢𝐨𝐧𝐬: 𝐀 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫’𝐬 𝐠𝐮𝐢𝐝𝐞 𝐭𝐨 𝐛𝐮𝐢𝐥𝐝𝐢𝐧𝐠 𝐚 𝐬𝐨𝐜𝐢𝐚𝐥 𝐜𝐚𝐫𝐞𝐞𝐫 )

Part 2 Video:

Topics covered:
0:00 Project Demonstration
0:29 React Native & Expo Project set-up
1:04 React Navigation Set-up (stack)
2:54 stack navigation
6:12 Custom header in react naviagtion
8:14 Firebase Account set-up
11:30 Fetch Firebase's Firestore Data To The React Native & Expo Application
13:47 Adding Flashlist To Display The Notes Data
16:48 Building UI for The Home Screen
18:50 Code To Add The Notes Data To The Firebase Application
25:45 Project Testing

My social Links:

Music Source: NCS

Tags: firebase, firebase tutorial, what is firebase, firebase tutorial in hindi, firestore, firebase database, react firebase, firebase react, firebase realtime database, react native, react native tutorial, react native tutorial in hindi, react native project, react native tutorial for beginners, react native app, react native full course, react native navigation, native react, react native course, react native projects, what is react native, react native app development, react native firebase, react native crash course, react native ui, learn react native, react native in hindi, react native tutorial for beginners, react native app development, react native project from scratch, react js. expo react native, react native tutorial for beginners, fcm, firebase cloud messaging, foreground notification, background notification, development build method, android and iOS react native expo build, firebase console, google firebase, react native firebase, firebase database, firebase auth, firebase analytics, firebase storage, react firebase, npm firebase, firebase tutorial, firebase app, firebase sdk, google firebase console, react native firebase auth, reactfire, firebase web, firebase android, firebase ios, firebase backend, firebase cloud, firebase cloud storage, crud operations, notes app

#reactjs #javascript #reactnative #ios #android #react #firebase

[neyntv]

Hey how can I type the "rnfe" and get the basic layout for a component like u did? At 2:41

[kanchanasaravanan]

Hi I see ur not using a Mac but U can open project in your desktop by type box expo start but for me I can only run it in android. Can u make a video about how to open the simulator u used just now using box expo start?

[DenysJckson]

this following code can read the data

useEffect(() => {

getNotes(db);
}, []);

async function getNotes(db) {
const notas = collection(db, 'notes');
const citySnapshot = await getDocs(notas);
const notasList = citySnapshot.docs.map(doc => doc.data());
return console.log(notasList);
}

but when i write the same code that you, i can't. why?

[CokyCokino]

Hi, are you planning to integrate, for this tutorial, authentication with Github or Facebook or Twitter with Firebase? Pls no Google or email because Youtube is full with these videos. Thks

[vagnercaetanosimango]

can you please go a bit slow next time? hard to keep up even pausing

[DenysJckson]

i got an error

ERROR TypeError: undefined is not an object (evaluating 'firebaseConfig.apps.length')

ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter. A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.



ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter. A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.