How to Display a Firebase List in a Thunkable List Viewer

Mar 22, 2020

Stuck Reading Lists?

So you start working on your app, you connect Firebase, you finally start seeing the data you want to see in the Realtime DB, but now you are stuck. 

If you are stuck with reading a list that you saved in Firebase and using that data in your app, keep reading!

My solution is actually pretty simple, but it does take a few extra blocks. 

Helper Functions

So first, let me define two helper functions: 

  1. Show Loading - Shows/Hides the Loading Icon or List Viewer based on the true/false value passed in. 
  2. Convert Object to List - Consumes an object and produces a list of the object's values (the object keys are dropped). 

Now we can use these two functions to load in and display the list data in a List Viewer.


Here is my process for retrieving a list from Firebase and showing it in a Thunkable List Viewer: 

  1. When the screen starts, show the loading icon
  2. Retrieve the data from Firebase
  3. When Firebase returns something, stop showing the loading icon
  4. If there is not an error, then use the 'Convert Object to List' function to add the list data to the Thunkable List Viewer
  5. If there is an error, show the error

And blocking that out looks like this: 

 If you're interested...

Here is what the Firebase Realtime DB structure looks like for this project: 

And here is how I am saving the data to firebase: 

 Wrapping It Up

Now you know my process for storing and retrieving Thunkable list type data in the Firebase Realtime DB. 

Happy Coding!

I help DIYers make mobile apps with Thunkable

Want to see how?

Show Me How

50% Complete

Two Step

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.