Connect your application to Firebase so you can see you new contacts into the list view as oppose to the static JSON file.
- [Instructor] Let's finally connect our list view…to our database so we can see our own data.…Okay, so the first thing you want to do is go to your index…and we'll add…a new action in here.…So the index, which is in your actions folder,…you want to add a new function and this function will load…our initial contacts from Firebase.…And this action will be called loadInitialContacts.…
You want to make sure your spelling is right.…Otherwise, when you go around and call this action,…nothing's going to happen.…And inside of it, we'll have a lot of code…that is similar to what we've done in here.…Let's go ahead and copy that,…and paste it.…And the only thing that we're going to change in here is,…let's remove this here because we're primarily…connecting to the same database,…and then we're doing something with it.…
So .on('value'), so if there is a value,…do a snapshot of what sits in my database.…So whenever the database updates,…it will take a snapshot of it…and then pass that information to our application.…And then dispatch, again we're using Redux Thunk,…
Author
Released
5/22/2017- Initializing React Native projects
- Projecting a folder structure
- Installing material kit and vector icons
- Coding a login form and a loader
- Setting up Firebase email auth
- Using the React Native debugger
- Creating a list view, a detailed view, and a menu
- Setting up Redux
- Coding the scroll on detail view
- Adding clickable buttons
- Setting up Firebase for the back end
- Creating the new add person form
- Completing functions
Skill Level Intermediate
Duration
Views
Related Courses
-
React Native Ecosystem and Workflow
with Emmanuel Henri1h 3m Intermediate -
Learning React Native
with Alex Banks2h 53m Intermediate -
React Native Essential Training
with Samer Buna4h 11m Intermediate
-
Introduction
-
Welcome49s
-
-
1. Project Setup and Back End
-
Project folder structure5m 40s
-
Initial Firebase setup5m 18s
-
2. Creating the Login
-
Create login form for user login13m 14s
-
Create our loader5m 41s
-
Render loader based on state3m 42s
-
Finalize login behaviors6m 34s
-
-
3. Redux and Main Views
-
Get started with Redux7m 11s
-
React Native debugger4m 46s
-
Create people list view7m 2s
-
Code the people item view11m 46s
-
Create tab menu11m 44s
-
Initial setup detail view5m 54s
-
Finalize detail view styles9m 34s
-
Debugging session8m 17s
-
-
4. CRUD Operations
-
CRUD: Removing a client10m 49s
-
CRUD: Setting up editing5m 46s
-
5. Company View and Final Touches
-
Code the company list query6m 20s
-
Create company list view6m 8s
-
Final touches11m 14s
-
-
Conclusion
-
Next steps1m 11s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Connect our list view to firebase