Firebase now works with React Native!

May 29, 2015

If you’re like me, you’re really excited about React Native, a new way to build (native!) mobile applications with JavaScript. Today, I’m happy to announce that thanks to the efforts of our developer community, Firebase and React Native now work together.

Hold up, what is React?

React is a view library created and maintained by Facebook. I love React for its declarative API, which makes managing changes in your views dead simple.

When you build your application’s views with React, it automatically updates the UI of your application when it observes state changes in your data model. Conveniently, Firebase databases deliver a stream of realtime updates to your data model. With Firebase and React, it’s effortless to create components that automatically update in realtime. The two pair beautifully together.

If you’re not familiar with React — and for more details on using it with Firebase — our very own Jacob Wenger wrote this excellent introduction to Firebase and React, which explains the basics of React in more detail.

What is React Native?

React Native is a new framework that helps you build applications for native platforms primarily with JavaScript and React. React Native for iOS was released earlier this year. The React Native components in your iOS app render directly to real, native UIKit components — it’s not a web app running on a mobile device.

Here’s an example of some JavaScript you might write to create a simple view, from the React Native homepage. If you’re familiar with React, you’ll notice how instead of declaring HTML DOM elements like <div>s and <p>s, you declare components that map directly to standard iOS platform components.

var React = require('react-native');
var { TabBarIOS, NavigatorIOS } = React;

var App = React.createClass({
  render: function() {
    return (
      <TabBarIOS>
        <TabBarIOS.Item title="React Native" selected={true}>
          <NavigatorIOS initialRoute={{ title: 'React Native' }} />
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  },
});

Did I mention this is just JavaScript? React Native also has support for ES6 syntax (shown above), and you can write your app with Flow, Facebook’s static type checker for JavaScript.

Other bonuses of React Native include support for npm modules, debugging in Chrome Developer Tools, and instant reload in XCode (as in, hit Cmd-R and your app reloads in a few seconds instead of having to do full XCode rebuilds). It’s a wonderful development experience.

Although React Native is still in beta, it’s currently being used in production in some of Facebook’s apps, including its Groups app.

In short, I’m excited about React Native because it lets me write native mobile apps with the technologies I use every day as a web developer.

Sounds great! How do I get started?

If you’d like to start getting your hands dirty with React Native, the official tutorial is an excellent place to start.

Once you’ve created your React Native app, just head to your nearest terminal and enter these magic characters to install Firebase via npm:

npm install firebase --save

Then, in your JavaScript code just softly whisper var Firebase = require('firebase'); and all the power of the Firebase JavaScript SDK and React Native will be yours!

If you have any questions, bug reports, general commentary, or if you just want to say hi, you can find me on Twitter at @KanYang.

A special shoutout

Thanks to Harrison Harnisch, a developer in our community, for helping to get support for WebSockets merged into React Native!

The Firebase Blog