Search code examples
reactjsreact-nativereduxexporedux-orm

React native, redux, redux ORM, expo ... trying to make it all work. __fbbatchedbridge


In the spirit of 4th July, I want to establish something thus I am not giving up on this. I've been trying to make it work for a while now(not just today) and frankly I am sick of react native and it's habit of breaking every time I pull a package from npm.

package.json

"dependencies": {
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "expo": "^18.0.4",
    "react": "16.0.0-alpha.12",
    "react-native": "https://github.com/expo/react-native/archive/sdk-18.0.1.tar.gz",
    "react-redux": "^5.0.5",
    "redux": "^3.7.1",
    "redux-orm": "^0.9.4",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-preset-react-native": "^2.0.0",
    "redux-orm-proptypes": "^0.1.0"
  }

App.js

import React from 'react';
import { Provider } from 'react-redux';  
import store from './store';

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Text>asdasdasD</Text>
      </Provider>
    );
  }
}

store/index.js

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from '../reducers/';

const configureStore = createStore(
  rootReducer,
  applyMiddleware(thunkMiddleware)
);

export default configureStore;

reducers/index.js

import { combineReducers } from 'redux';
import { createReducer } from 'redux-orm';
import orm from '../models';

const rootReducerCombined = combineReducers({ orm: createReducer(orm) });

export default rootReducerCombined;

models/index.js

import { ORM } from 'redux-orm';
import Job from './JobModel';  

const orm = new ORM();
orm.register(Job);

export default orm;

The rest of the stuff is pretty basic. Project is blank expo project that I wanted to create for the sake of using ORM in redux.

redux orm error

On a side note, and I much prefer a solution to my question than having the focus on this, I can not help but think what am I missing? Yes I am very new to react and react native but why does everyone love react native? I agreed to use it on a project even though I did not want to and now I spend most my of time looking through github issues to make everything in my package json work. Everytime I go "hey this looks good I want to use it" and run the npm install, everything breaks ... So, honestly, what is the point of working to work? Am I looking at this all wrong?


Solution

  • I tried out your repository and managed to get it running. The first thing I did was just run exp start --ios to see if that would work. It showed me the following error:

    error on first run

    So I went to App.js and saw that on line 9, Text was used but it wasn't imported, so I imported it from react-native and the app rendered with some text.

    Next, I looked at the logs and saw this warning:

      [exp] jest-haste-map: @providesModule naming collision:
      [exp]   Duplicate module name: babel-preset-react-native
      [exp]   Paths: /Users/brent/coding/reduxormexposf/node_modules/react-native/babel-preset/package.json collides with /Users/brent/coding/reduxormexposf/node_modules/react-native/node_modules/babel-preset-react-native/package.json
      [exp]
      [exp] This warning is caused by a @providesModule declaration with the same name across two different files.
    

    I then checked the package.json and saw that there were a bunch of babel modules, but the babelrc didn't actually use any of those -- it only used babel-preset-expo. So I removed all of those plugins, closed the packager, and ran exp start --ios again and the warning went away.

    I'm not sure how you ended up in the state where you had an error about __fbBatchedBridge is undefined as in your post, there are a number of ways that can happen. The error message is not very descriptive at all and it should be improved. It's quite possible that the packager was not running (exp start). Let me know if the problem persists, but the other issues should be resolved. I submitted a pull request with the changes I discussed: https://github.com/ODelibalta/reduxormexposf/pull/1