Search code examples
javascriptfirebasereact-nativemixins

How to use reactfire with react native

I'm trying to use 'reactfire' mixin with react native for my app.

I installed the npm module.

$ npm install reactfire --save

I included the module in my 'index.ios.js' file

var ReactFireMixin = require('./node_modules/reactfire');

I added the mixin to the class

mixins: [ReactFireMixin],

I say 

getInitialState: function() {
  return {
    items: [],
  }
},

componentWillMount: function() {
  var ref = new Firebase('https://<MY APP NAME>.firebaseio.com/tasks');
  this.bindAsArray(ref, 'items');
  console.log(ref);
  console.log(this.state.items);
}

And I get

debugger output

I can use the 'firebase' npm module just fine but not the 'reactfire' one, and I'd like to us the mixin in my app instead of the other alternatives.

I'm also curious about how this particular mixin handles offline usage.

PS: flaw in firebase documentation because just doing 'mixins: [ReactFireMixin],' doesn't do anything and when developing for react native you don't have a html file.

And yes, I'm a react newb, so this might just be an utter waste of your time.

Here's the full code - github repo

Solution

  • I just tested and don't see any problems when I use ReactFire in an React Native app (for Android at least).

    My entire index.android.js:

    'use strict';

var React = require('react-native');
var Firebase = require('firebase');
var ReactFireMixin = require('reactfire');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableHighlight,
} = React;

var CoolProject = React.createClass({
  mixins: [ReactFireMixin],
  getInitialState: function() {
    return {
      items: []
    };
  },
  componentWillMount: function() {
    this.ref = new Firebase('https://nanochat.firebaseio.com/chat');
    this.bindAsArray(this.ref, 'items');
  },
  _onPressButton: function() {
    this.ref.push({ name: 'puf', message: this.state.text });
  },
  render: function() {
    var createItem = function(item, index) {
      return <Text>{item.name}: {item.message}</Text>
    };
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        {this.state.items.map(createItem)}
        <View style={styles.horizontal}>
          <TextInput onChangeText={(text) => 
              this.setState({ text: text})} value={this.state.text} />
          <TouchableHighlight onPress={this._onPressButton}>
            <Text>Send</Text>
          </TouchableHighlight>
        </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('CoolProject', () => CoolProject);

    Note that in many cases it is not necessary to use ReactFire. For example, this is the code that I was using instead of this.bindAsArray(ref, 'items'):

    So if ReactFire is causing you problems, consider getting the same working without ReactFire.

    this.ref.on('value', function(snapshot) {
  var items = [];
  snapshot.forEach(function(child) {
    items.push(child.val());
  });
  this.setState({ 'items': items });
}.bind(this));