FirebaseUI Database allows you to quickly connect common UI elements to the Firebase Realtime Database for data storage, allowing views to be updated in realtime as they change, and providing simple interfaces for common tasks like displaying lists or collections of items.
Provides core data binding capabilities as well as specific data sources for lists of data.
| Class | Description |
|---|---|
| FUITableViewDataSource | Data source to bind a Firebase query to a UITableView |
| FUICollectionViewDataSource | Data source to bind a Firebase query to a UICollectionView |
| FUIIndexCollectionViewDataSource | Data source to populate a collection view with indexed data from Firebase DB. |
| FUIIndexTableViewDataSource | Data source to populate a table view with indexed data from Firebase DB. |
| FUIArray | Keeps an array synchronized to a Firebase query |
| FUISortedArray | A synchronized array that automatically sorts its contents. |
| FUIIndexArray | Keeps an array synchronized to indexed data from two Firebase references. |
For a more in-depth explanation of each of the above, check the usage instructions below.
FUITableViewDataSource implements the UITableViewDataSource protocol to automatically use Firebase as a data source for your UITableView.
self.dataSource = self.tableView.bind(to: query) { tableView, indexPath, snapshot in
// Dequeue cell
let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath)
/* populate cell */
return cell
}self.dataSource = [self.tableView bindToQuery:query
populateCell:^UITableViewCell *(UITableView *tableView,
NSIndexPath *indexPath,
FIRDataSnapshot *snap) {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"reuseIdentifier"
forIndexPath:indexPath];
/* populate cell */
return cell;
}];FUICollectionViewDataSource implements the UICollectionViewDataSource protocol to automatically use Firebase as a data source for your UICollectionView.
self.dataSource = self.collectionView.bind(to: self.firebaseRef) { collectionView, indexPath, snap in
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "reuseIdentifier", for: indexPath)
/* populate cell */
return cell
}self.firebaseRef = [[FIRDatabase database] reference];
self.dataSource = [self.collectionView bindToQuery:self.firebaseRef
populateCell:^UICollectionViewCell *(UICollectionView *collectionView,
NSIndexPath *indexPath,
FIRDataSnapshot *object) {
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"reuseIdentfier"
forIndexPath:indexPath];
/* populate cell */
return cell;
}];You can use the default UITableViewCell or UICollectionViewCell implementations to get up and running quickly. For UITableViewCells, this allows for the cell.textLabel and the cell.detailTextLabel to be used directly out of the box. For UICollectionViewCells, you will have to add subviews to the contentView in order for them to be useful.
self.dataSource = self.tableView.bind(to: firebaseRef) { tableView, indexPath, snap in
let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath)
// Populate cell as you see fit, like as below
cell.textLabel?.text = snap.key
return cell
}self.dataSource = self.collectionView.bind(to: firebaseRef) { collectionView, indexPath, snap in
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "reuseIdentifier", for: indexPath)
// Populate cell as you see fit
cell.contentView.accessibilityLabel = "A cell"
return cell
}self.dataSource = [self.tableView bindToQuery:self.firebaseRef
populateCell:^UITableViewCell *(UITableView *tableView,
NSIndexPath *indexPath,
FIRDataSnapshot *snap) {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"reuseIdentifier"
forIndexPath:indexPath];
// Populate cell as you see fit, like as below
cell.textLabel.text = snap.key;
return cell;
}];self.dataSource = [self.collectionView bindToQuery:self.firebaseRef
populateCell:^UICollectionViewCell *(UICollectionView *collectionView,
NSIndexPath *indexPath,
FIRDataSnapshot *snap) {
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"reuseIdentifier"
forIndexPath:indexPath];
// Populate cell as you see fit
cell.contentView.accessibilityLabel = @"A cell";
return cell;
}];FirebaseUI has several building blocks that developers should understand before building additional functionality on top of it, including a synchronized array FUIArray and collection protocol FUICollection which FUITableViewDataSource and FUICollectionViewDataSource use to drive UI updates.
FUIArray is synchronized array connecting a Firebase FIRDatabaseReference with an array. It surfaces Firebase events through the FUICollectionDelegate Protocol. If you're building a multiple-section UI, you'll have to use this class directly instead of using one of the provided data sources.
let firebaseRef = Database.database().reference()
let array = FUIArray(query: firebaseRef)FIRDatabaseReference *firebaseRef = [[FIRDatabase database] reference];
FUIArray *array = [[FUIArray alloc] initWithQuery:firebaseRef];FUIArray can be subclassed to provide more complex behaviors like client-side sorting. Take a look at FUISortedArray for an example on how to do this.