Can I use Backbone with React Native?

Question

I have found several different examples of integrating React (View) with Backbone on the web, but not any to do the same with React Native. I was wondering if this was possible and also if there were any samples to play with.

This (https://github.com/magalhas/backbone-react-component) also seemed a good starting point, but since I don't have any knowledge, I am not sure if it can still be used in React Native.

Thanks.

Answer 1

You'll be able to use some parts of Backbone, yes.

Backbone's views operate on the DOM in the web browser, and since React Native doesn't have that, you'll be unable to use Backbone view as-is.

However, notice that Backbone.React.Component is described as "a mixin that glues Backbone models and collections into React components". Therefore it works as the data layer of your application, supplying data to your view.

This would be useful in theory, but in practice I've just tried it and it doesn't actually work! That said, I did managed to tweak the code of Backbone.React.Component to fix it though, and this demo works:

'use strict';

var React = require('react-native');
var Backbone = require('backbone');
var backboneMixin = require('backbone-react-component');

var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
} = React;

var MyComponent = React.createClass({
    mixins: [backboneMixin],
    render: function () {
        return <Text>{this.state.model.foo}</Text>
    }
});

var model = new Backbone.Model({foo: 'bar'});
model.set('foo', 'Hello world!');

var ReactNativeBackbone = React.createClass({
    render: function() {
        return (
        <View>
            <MyComponent model={model} />
        </View>
        );
    }
});

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

You will see the value of foo from the model shown on screen as "Hello world!". You will need to edit lib/component.js in Backbone.React.Component like this:

diff --git a/node_modules/backbone-react-component/lib/component.js b/fixed.js
index e58dd96..0ca09f7 100644
--- a/node_modules/backbone-react-component/lib/component.js
+++ b/fixed.js
@@ -32,7 +32,7 @@
   if (typeof define === 'function' && define.amd) {
     define(['react', 'backbone', 'underscore'], factory);
   } else if (typeof module !== 'undefined' && module.exports) {
-    module.exports = factory(require('react'), require('backbone'), require('underscore'));
+    module.exports = factory(require('React'), require('backbone'), require('underscore'));
   } else {
     factory(root.React, root.Backbone, root._);
   }
@@ -70,11 +70,11 @@
     },
     // Sets `this.el` and `this.$el` when the component mounts.
     componentDidMount: function () {
-      this.setElement(React.findDOMNode(this));
+      //this.setElement(React.findDOMNode(this));
     },
     // Sets `this.el` and `this.$el` when the component updates.
     componentDidUpdate: function () {
-      this.setElement(React.findDOMNode(this));
+      //this.setElement(React.findDOMNode(this));
     },
     // When the component gets the initial state, instance a `Wrapper` to take
     // care of models and collections binding with `this.state`.

I made two changes:

• Require React instead of react
• Remove references to findDOMNode

I haven't done any extensive testing but this should get you started. I've also opened an issue to try and get the problem addressed in the main Backbone.React.Component code base.

Answer 2

Check this out: react-native-backbone