UPDATE: We updated this tutorial for the Firebase 3.1.0 SDK which now supports the Firebase Realtime Database and Firebase Authentication.
Here at Firebase, we’re big React fans. Firebase synchronizes application state, and React re-renders the application UI based on state changes. It’s a perfect fit.
And with React Native, app development became a lot easier for JavaScript developers. Using React Native you can build real native apps with just JavaScript. And that’s just awesome-sauce. We live in the future. Let’s get started.
If you want to dive right into the code, you can check out the final GitHub repo here. Otherwise, let's go through this step-by-step.
Getting started with React Native is fairly easy, but there are some gotchas you should be aware of. If you already have React Native set up, you can skip this section.
First, you’ll need Homebrew, which is easy to install. You’ll also need Node.js 4.0 or higher. The React Native team recommends using nvm to manage your node versions (and I do too).
Once those tools have been installed, run the following commands:
brew install watchman npm install -g react-native-cli
Then finally, you can begin your project with the CLI command:
react-native init GroceryApp # or whatever you want
Open the main folder in your favorite editor.
atom GroceryApp # if you’re into Atom
To build a React Native project, run the following command:
react-native run-ios
This should launch the Simulator, and you should see the boilerplate screen.
React Native comes with hot-reloading, which means you can make an edit to the code, index.ios.js, and then hit Cmd+R and see your changes instantly update. And if you’re an iOS developer, or really any kind of developer, you know how cool that is.
Cmd+R
With the build setup done, let’s get Firebase up and running.
React Native manages dependencies through npm. To install Firebase, run the following command at the root of the project.
npm
npm install firebase --save
Open index.ios.js and add the following line to the top:
index.ios.js
import * as firebase from 'firebase';
Then right above the component, initialize Firebase with your config values:
// Initialize Firebase const firebaseConfig = { apiKey: "<your-api-key>", authDomain: "<your-auth-domain>", databaseURL: "<your-database-url>", storageBucket: "<your-storage-bucket>",, }; const firebaseApp = firebase.initializeApp(firebaseConfig);
What’s a const? A const is a read-only reference to a value, which makes sense here, because you don’t want to ever override the value of Firebase. You can use this keyword since you’re using Node 4.0 or higher. If your editor yells at you, it’s telling you a lie.
const
One ES2015 feature isn’t enough. Rather than use React.createClass() to define components, let’s use classes.
React.createClass()
React is component-based. Which means an app is just a tree of components, starting with a root component. As of React 0.14, you can use ES2015 classes to define React components.
In index.ios.js, let’s change the component to use a class rather than React.createClass().
class GroceryApp extends Component { render() { return ( <View style="{styles.container}"> </View> ); } }
Why ES2015 classes over React.createClass()? While there is quite the debate over the subject, it boils down to a matter of taste.
The shell of the app is complete. Let’s make it look good, or at least halfway decent.
React Native uses JavaScript rather than CSS for styling. This may sound like an extreme divergence, but it’s really not all that different. To declare a set of styles, you create a StyleSheet.
StyleSheet
var styles = StyleSheet.create({ container: { backgroundColor: '#f2f2f2', flex: 1, }, });
A StyleSheet contains a set of objects that represent CSS-like styles. Then you use these styles on a React component:
<View style="{styles.container}"> I’m a container lol! </View>
So don’t worry about losing any of your CSS skills. If anything, you should really learn CSS Flexbox to make styling in React Native a breeze.
Now that you’re a pro at styling in React, let’s declare the styles for the app.
Create a file named styles.js and add the following code from this file. These are the styles we’ll be using for the app.
styles.js
You’ll notice that React Native uses CommonJS modules. At the bottom of styles.js, the StyleSheet is exported using module.exports.
module.exports
This will allow you to import these styles using require(). Open index.ios.js, and add the following line of code:
require()
const styles = require('./styles.js')
Make sure to remove the styles variable at the bottom of the file.
The styles are now in place. Let’s take a look at the app’s component structure.
The best advice I have ever read on using React, is to start off by breaking the UI into a component hierarchy. Below is a visual outline of the app's component hierarchy.
The app is made up of five components:
Create a folder named components. Each one of these components is stored in the components folder. The exception is GroceryApp, since it is contained in index.ios.js.
components
GroceryApp
Add each one of these components below to the components folder:
ActionButton.js
'use strict'; import React, {Component} from 'react'; import ReactNative from 'react-native'; const styles = require('../styles.js') const constants = styles.constants; const { StyleSheet, Text, View, TouchableHighlight} = ReactNative; class ActionButton extends Component { render() { return ( <View style={styles.action}> <TouchableHighlight underlayColor={constants.actionColor} onPress={this.props.onPress}> <Text style={styles.actionText}>{this.props.title}</Text> </TouchableHighlight> </View> ); } } module.exports = ActionButton;
ListItem.js
import React, {Component} from 'react'; import ReactNative from 'react-native'; const styles = require('../styles.js') const { View, TouchableHighlight, Text } = ReactNative; class ListItem extends Component { render() { return ( <TouchableHighlight onPress={this.props.onPress}> <View style={styles.li}> <Text style={styles.liText}>{this.props.item.title}</Text> </View> </TouchableHighlight> ); } } module.exports = ListItem;
StatusBar.js
'use strict'; import React, {Component} from 'react'; import ReactNative from 'react-native'; const styles = require('../styles.js') const { StyleSheet, Text, View} = ReactNative; class StatusBar extends Component { render() { return ( <View> <View style={styles.statusbar}/> <View style={styles.navbar}> <Text style={styles.navbarTitle}>{this.props.title}</Text> </View> </View> ); } } module.exports = StatusBar;
With the components added, let’s make a static version of the app.
In index.ios.js, add the following imports to the top of the page:
import React, {Component} from 'react'; import ReactNative from 'react-native'; import * as firebase from 'firebase'; const StatusBar = require('./components/StatusBar'); const ActionButton = require('./components/ActionButton'); const ListItem = require('./components/ListItem'); const styles = require('./styles.js');
Then add the following snippet of code:
_renderItem(item) { return ( <ListItem item="{item}" onpress="{()" ==""> {}} /> ); } render() { return ( <View style="{styles.container}"> <StatusBar title="Grocery List"> <ListView datasource="{this.state.dataSource}" renderrow="{this._renderItem.bind(this)}" style="{styles.listview}/"> <ActionButton title="Add" onpress="{()" ==""> {}} /> </View> ); }
The render() function is the main view of the app, and _renderItem() sets the individual items in the list.
render()
_renderItem()
Next, create a constructor for the root component, GroceryApp.
constructor(props) { super(props); this.state = { dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }) }; }
The component has a special property called state, which manages the entire data flow of the application. We’ll dive deeper in the next section.
state
The app’s state is a ListView.DataSource, which is a class that provides efficient data processing to a ListView component. The next step is to display this data.
ListView.DataSource
ListView
Each component has a lifecycle, where certain functions are called at important events. When the component has first been rendered, componentDidMount() is called. This is where we want set any initial state of the app.
componentDidMount()
componentDidMount() { this.setState({ dataSource: this.state.dataSource.cloneWithRows([{ title: 'Pizza' }]) }) }
Build and run the app, and you should see the following static app.
Each one of these components just simply displays data, or sets a callback function for a touch.
The key thing to understand is that these components are not state-ful. They have properties that are set by their root component, GroceryApp. To begin to understand React, you have to learn how to manage state.
State is simply data that can change. This data is called state, because it represents the "state" of your application. If this data changes, your application will likely look different, hence being in a different "state". State is usually things like a list of todos, or an enabled/disabled button.
The root component will serve as the holder of state. State changes start at the root component, which is then responsible for updating the properties of its child components.
Component properties are immutable, meaning they can’t be modified. So, if you can’t modify the properties, how do they ever change? You re-render, the application by calling setState(), like seen in componentDidMount().
setState()
The setState() function is special because every time it is called, it will attempt to re-render the entire app. This means that if a child property is different from the last state, it will be re-rendered with the new value.
This is where React fits perfectly with Firebase. Because the Firebase database synchronizes application state across multiple devices, and React efficiently re-renders application state changes.
Create Realtime Database reference as a property in the constructor:
this.itemsRef = firebaseApp.database().ref();
Then, add the following function to the GroceryApp component:
listenForItems(itemsRef) { itemsRef.on('value', (snap) => { // get children as an array var items = []; snap.forEach((child) => { items.push({ title: child.val().title, _key: child.key }); }); this.setState({ dataSource: this.state.dataSource.cloneWithRows(items) }); }); }
This function creates a value listener for all grocery items. Whenever an item is added, changed, or removed, you’ll get the entire result set back as a DataSnapshot, from the Firebase SDK. Using the DataSnapshot, you call forEach(child), which iterates through all of the children and adds them to an array as a grocery list item. Notice in the .forEach function, a _key property is created from the DataSnapshot's .key() value. This makes life much easier when doing data operations later down the line.
DataSnapshot
forEach(child)
.forEach
_key
.key()
Once the array is populated, you’ll update the dataSource property on state using dataSource.cloneWithRows(items). The cloneWithRows() function is just a convenience method for creating a new ListView.DataSource based on the same DataSource previously defined.
dataSource.cloneWithRows(items)
cloneWithRows()
DataSource
Next, you write the listen up to componentDidMount():
componentDidMount() { this.listenForItems(this.itemsRef); }
Build and run the app. You should see an empty page, but try adding a few items using the Firebase App Dashboard or the super awesome data viewer Vulcan, and you’ll see it update in realtime!
This is awesome, but you’d rather have the "Add" button working. Let’s tackle that in the next section.
When the ActionButton is tapped, an alert should pop up prompting the user to enter an item. The AlertIOS API is what you’ll use to create this alert box.
ActionButton
AlertIOS
Add the following function to the GroceryApp component:
_addItem() { AlertIOS.prompt( 'Add New Item', null, [ { text: 'Add', onPress: (text) => { this.itemsRef.push({ title: text }) } }, ], 'plain-text' ); }
The AlertIOS API is quite extensible when it comes to building alerts. The first two parameters are simple, they're just the title of the alert box and an optional message. The third parameter is the meat of the API. Here you create an array that specifies the buttons available to the user. Each button can have a text, style, and an onPress callback function. The last parameter is type the of input, whether plain-text or secure-text.
text
style
onPress
plain-text
secure-text
To add an item, create an object in the buttons array. This object can add items in the onPress callback. The callback returns the text the user has entered. Use this text to .push() a new child onto the /items location.
.push()
/items
Next, you'll need to update render() to assign the onPress property of the ActionButton:
<ActionButton title="Add" onpress="{this._addItem.bind(this)}"> </ActionButton>
Build and run. When you tap add, and enter an item title, you should see it update on the list.
Awesome, but what’s a grocery list that can’t complete items?
The user can complete an item by tapping on it to open up an alert box. If they press the "Complete" option, you can delete it from the list.
Modify _renderItem(item) to include an onPress callback:
_renderItem(item)
_renderItem(item) { const onPress = () => { AlertIOS.prompt( 'Complete', null, [ {text: 'Complete', onPress: (text) => this.itemsRef.child(item._key).remove()}, {text: 'Cancel', onPress: (text) => console.log('Cancel')} ], 'default' ); }; return ( <ListItem item="{item}" onpress="{onPress}"> ); }
To "complete" an item, you'll need to delete it from the Firebase database. Using .child(key), you can drill down into a specific item in the list. The onPress callback is a closure, therefore it has access to the outer environment which contains the item parameter. This is where the _key property comes in hand.
.child(key)
item
When the "Complete" option is tapped, you can find the specific child by using the _key property on item. Then you can call .remove() to delete the item in the Firebase database.
.remove()
Build and run, yet again. Tap any ListItem , tap "Complete", and you should see it removed from the list.
ListItem
Check out the completed app on Github. And, if you’re feeling generous, we would love a star. Feel free to fork the repo, and even send in a PR if you want.
If you’re running into issues, open up a question on Stackoverflow, we monitor the Firebase tag closely, or drop a line in our community Slack Team.
refHandle = postRef.observeEventType(FIRDataEventType.Value, withBlock: { (snapshot) in let postDict = snapshot.value as! [String : AnyObject] // … })
firebase.database().ref('posts/' + postId).on('value', function(snapshot) { var post = snapshot.val(); // … });
mPostReference.addValueEventListener(new ValueEventListener() { @Override public void onDataChange(DataSnapshot dataSnapshot) { // Get Post object and use the values to update the UI Post post = dataSnapshot.getValue(Post.class); // … } @Override public void onCancelled(DatabaseError databaseError) { // Getting Post failed, log a message Log.w(TAG, "loadPost:onCancelled", databaseError.toException()); // … } });
var storageRef = firebase.storage.ref("folderName/file.jpg");
let storageRef = FIRStorage.reference().child("folderName/file.jpg")
StorageReference storageRef = FirebaseStorage.getInstance().reference().child("folderName/file.jpg");
var storageRef = firebase.storage.ref("folderName/file.jpg"); var fileUpload = document.getElementById("fileUpload"); fileUpload.on(‘change’, function(evt) { var firstFile = evt.target.file[0]; // get the first file uploaded var uploadTask = storageRef.put(firstFile); });
let storageRef = FIRStorage.reference().child("folderName/file.jpg"); let localFile: NSURL = // get a file; // Upload the file to the path "folderName/file.jpg" let uploadTask = storageRef.putFile(localFile, metadata: nil)
StorageReference storageRef = FirebaseStorage.getInstance().reference().child("folderName/file.jpg"); Uri file = Uri.fromFile(new File("path/to/folderName/file.jpg")); UploadTask uploadTask = storageRef.putFile(file);
<input type="file" />
UploadTask
DownloadTasks
var storageRef = firebase.storage.ref("folderName/file.jpg"); var fileUpload = document.getElementById("fileUpload"); fileUpload.on(‘change’, function(evt) { var firstFile = evt.target.file[0]; // get the first file uploaded var uploadTask = storageRef.put(firstFile); uploadTask.on(‘state_changed’, function progress(snapshot) { console.log(snapshot.totalBytesTransferred); // progress of upload }); });
let storageRef = FIRStorage.reference().child("folderName/file.jpg"); let localFile: NSURL = // get a file; // Upload the file to the path "folderName/file.jpg" let uploadTask = storageRef.putFile(localFile, metadata: nil) let observer = uploadTask.observeStatus(.Progress) { snapshot in print(snapshot.progress) // NSProgress object }
StorageReference storageRef = FirebaseStorage.getInstance().reference().child("folderName/file.jpg"); Uri file = Uri.fromFile(new File("path/to/images/file.jpg")); UploadTask uploadTask = storageRef.putFile(file); uploadTask.addOnProgressListener(new OnProgressListener() { @Override public void onProgress(UploadTask.TaskSnapshot snapshot) { System.out.println(snapshot.getBytesTransferred().toString()); } });
var storageRef = firebase.storage.ref("folderName/file.jpg"); storageRef.getDownloadURL().then(function(url) { console.log(url); });
let storageRef = FIRStorage.reference().child("folderName/file.jpg"); storageRef.downloadURLWithCompletion { (URL, error) -> Void in if (error != nil) { // Handle any errors } else { // Get the download URL for 'images/stars.jpg' } }
StorageReference storageRef = FirebaseStorage.getInstance().reference().child("folderName/file.jpg"); storageRef.getDownloadUrl().addOnSuccessListener(new OnSuccessListener() { @Override public void onSuccess(Uri uri) { // Got the download URL for 'users/me/profile.png' } }).addOnFailureListener(new OnFailureListener() { @Override public void onFailure(@NonNull Exception exception) { // Handle any errors } });
// Only a user can upload their profile picture, but anyone can view it service firebase.storage { match /b/<bucket>/o { match /users/{userId}/profilePicture.png { allow read; allow write: if request.auth.uid == userId; } } }
import ReactNative from "react-native"; import * as firebase from 'firebase'; // Initialize Firebase const firebaseConfig = { apiKey: "<YOUR-API-KEY>", authDomain: "<YOUR-AUTH-DOMAIN>", databaseURL: "<YOUR-DATABASE-URL>", storageBucket: "<YOUR-STORAGE-BUCKET>" }; firebase.initializeApp(firebaseConfig);
signInWithPopup()
signInWithRedirect()
linkWithPopup()
linkWithRedirect()
signInWithCredential()
File
Blob
import * as firebase from 'firebase'; firebase.initializeApp({ databaseURL: "<YOUR-DATABASE-URL>", });
At Google, we understand how important the quality of your application is in order to grow your user base, increase customer satisfaction and boost your revenues. When we took a closer look at data from 1-star reviews on Google Play, we observed that more than 50% of these reviews are related to bugs and crashes in the app.
For many developers, finding and resolving these problems prior to release can be very challenging. As the Android ecosystem continues to grow rapidly, it can be a daunting task to maintain a high quality, performant app that scales well for your users. As your user base grows, you may only have access to a handful of devices to use for testing. Accessing devices that are unavailable in your country is also difficult. Moreover, setting up a proper testing infrastructure that facilitates pre-release testing is a very expensive and time-consuming process that requires continual maintenance.
To help streamline the testing of mobile applications, we’re introducing Firebase Test Lab for Android, a platform where you can automate testing with the same tools that Google uses to test its own products. With a few easy steps, you can launch your tests on our physical devices to help ensure the best possible quality for your applications.
Testing Android applications normally involves writing instrumentation tests to script the interactions with the app. If you’ve already written tests using Espresso, UI Automator 2.0, or Robotium, you can begin running those tests today on devices hosted by Firebase Test Lab.
Authoring instrumentation tests is easier now with Android Studio 2.2 (or newer) using the new Espresso Test Recorder tool. All you have to do is launch your app in recording mode, and the test recorder will observe and remember all your interactions with the app, then generate test code in Espresso that duplicates those interactions. You can then turn around and run these tests in Firebase Test Lab.
Even if you’re not writing your own tests, you can still use Firebase Test Lab. We have a fully automated, intelligent test called a Robo test that will crawl your app by performing interactions with your app’s user interface. You don’t have to write a single line of code to gain the benefits of this automated coverage.
With each test you run, you will select from a variety of device manufacturers and models, Android versions, and configurations (Virtual devices are also now available as a beta offering). Firebase Test Lab will then run your tests on multiple devices simultaneously to satisfy your selections as quickly as possible. When the tests are complete, the results from the test will be stored in your Firebase project.
Testing works best when it happens throughout the development process, not just before you publish your app on Google Play. To simplify this process, Firebase Test Lab gives you the ability to invoke tests directly from within the tools you’re already using, such as Android Studio and the Firebase Console. Our command-line interface allows you to run your tests through your continuous integration setup. Additionally, after you opt-in to receive the pre-launch report in the Google Play Developer Console, every new version of an app you publish to an Alpha or Beta channel will receive a free, five minute Robo test. These test results will become visible in the Play Store Developer Console.
The Play pre-launch report generated from running the Robo tests is currently available at no cost! For more customized testing using Firebase Test Lab, customers on the Blaze Billing Plan will be charged $5 per physical device hour, and after October 1st, 2016, $1 per virtual device hour. Prior to that, virtual devices are available at no charge. See our pricing page for details.
Running your first test on Firebase Test Lab is easy. You can follow our step-by-step codelab which walks you through various scenarios for running your first test. You can refer to our full documentation here. If you have questions or encounter any issues, please ask in the Firebase Google group.
Happy testing!
